Catalogue 与 Index-First 拆解：Hallmark 让页面本身成为清单（完整指南）

Catalogue 与 Index-First 拆解Hallmark 让页面本身成为清单完整指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款面向 Claude Code、Cursor 和 Codex 的开源设计技能design skill主打反 AI 味Anti-AI-slop的页面设计。它内置 21 种页面宏观结构Macrostructure每次生成都强制为页面选定其中一种。本文拆解其中两种最克制的结构——Catalogue产品目录与Index-First索引优先它们共同的主张是页面本身就可以是一份清单——不需要大 Hero 图、不需要营销话术内容即导航清单即页面。先看全景Hallmark 如何决定页面形状Hallmark 的核心机制是先选结构再写代码AI 会先读取 21 种宏观结构的精简索引选定一个名字然后再加载对应的那一份结构文件。这样做出来的两个页面会像两个不同的网站而不是同一套模板换色。21 种结构的完整索引见 skills/hallmark/references/macrostructures.md其中11 · Catalogue— 同一事物的均匀网格变体——字体、色板、产品 SKU。页面是库存的视觉索引。13 · Index-First— 页面本身就是一列链接。没有 Hero 图没有叙事流。纯导航即设计。Catalogue 拆解页面就是一面库存墙Catalogue 结构规定页面只处理同一类事物的多个变体。它的六个要素完整规则见 11-catalogue.md要素规则标题只有品牌标记 标语禁止大展示字体正文等大卡片的均匀网格每行 3–5 个每张卡片是核心产品的一个变体分隔行间发丝线hairline可加分类标签带按钮卡片内部指向详情页的链接没有全局 CTA图片每卡片一个样张缩略图或色样动效无适用字体库、色板生成器、字体商店、色彩系统、胶囊系列capsule collection。避免叙事型品牌——Catalogue 把所有条目视为平等对有层级关系的产品是错的。仓库里有一个现成的 Catalogue 实例Maple Street Bread 面包店页面八款面包排成 2 列目录每行一个手绘 SVG 剪影 品名 一句描述 价格或 sold out页面没有任何 CTA。它的 CSS 首行是结构戳记/* Hallmark · macrostructure: Catalogue · F1 catalogue knobs: tiles8, columns2, rulehairline-between */戳记源码见 site/_tests/03-maple-bakery/style.css页面见 site/_tests/03-maple-bakery/index.html。Catalogue 的开场白也很有意思——它是带日期的库存表头官方给的示例Todays loaves.今日面包Thirty-eight items · Spring 2026 · all hand-stitched.38 件 · 2026 春季 · 全部手工缝制数一数、写日期、加限定词不用形容词。Index-First 拆解导航本身就是设计Index-First 更极端页面就是一列链接导航即设计本身。六个要素完整规则见 13-index-first.md要素规则标题顶部一段短引言介绍这个索引无展示字体正文垂直排列的分类链接列表可带侧边筛选栏分隔行与行之间发丝线或干脆零线条用纸面色带按钮链接本身就是按钮图片无或每条目旁边一个小 favicon动效无适用文档中枢、知识库、档案站首页、设计系统入口、有内容分量的 link-in-bio 页。避免营销页——Index-First 服务的是浏览型读者而卖东西需要结构。官方点名的参考风格是 Are.na 的首页气质和 craigmod.com 式的极简个人页开场白示例Selected work · 2018 — 2026.精选作品 · 日期区间无前言Writer Photographer.三个词总结整个网站仓库里的实例是 Anya 的个人作品集页左侧粘性侧边栏是编号目录00 Index · 01 Now · 02 Years · 03 Writing · 04 Reach右侧正文按章节推进履历直接用表格呈现——整页没有一张照片也没有任何联系我们按钮之外的装饰。戳记与页面源码site/_tests/06-anya-portfolio/style.css、site/_tests/06-anya-portfolio/index.html。两种清单结构一表对照维度CatalogueIndex-First页面本质同一事物的变体网格库存墙一列分类链接目录本身视觉重心等大卡片网格3–5 列垂直列表 可选侧边栏行动点卡片内链接进详情无全局 CTA链接即按钮典型场景字体库、色板系统、SKU 目录文档中枢、知识库、作品集首页反面场景有层级叙事的品牌需要说服转化的营销页仓库实例03-maple-bakery06-anya-portfolio如何让你的 AI 生成清单式页面Hallmark 在选结构时会直接读你的需求描述brief里的信号词这决定了它会不会命中清单结构描述条目多且平等——比如 a list of links、many small features、see whats available倾向命中 Index-First 或 Catalogue。描述有层级、有故事——比如 tell a story、data heavy则会选到 Manifesto、Stat-Led 等其他结构。警惕重复Hallmark 有强制的多样化规则——同一项目里前后两次输出不允许使用相同宏观结构结构戳记上面那行 CSS 注释和.hallmark/log.json项目记忆会记录你上次用了什么。换句话说清单结构是 Hallmark 21 种页面指纹之一而不是一种默认风格。同样是让 Hallmark 生成页面SaaS 简报可能得到完全不同的形状这就是结构多样性structural variety的意义两个简报得到两个像不同网站的页面而不是同一模板的换色版。✍️关键文件速查想动手试一把按这个顺序读就够结构总索引skills/hallmark/references/macrostructures.mdCatalogue 规则skills/hallmark/references/macrostructures/11-catalogue.mdIndex-First 规则skills/hallmark/references/macrostructures/13-index-first.md完整使用流程skills/hallmark/SKILL.md8 个可复制的实战案例含两个清单结构实例docs/recipes.md全部生成页示例site/_tests/README.md一句话总结当你的内容天然平等、可数、可浏览时就别硬套 Hero 三卡片 CTA 的老套路——让页面本身成为清单往往更高级。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考