企业官网建设流程全解析

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

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

Hallmark 是一款面向 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）：

适用：字体库、色板生成器、字体商店、色彩系统、胶囊系列（capsule collection）。避免：叙事型品牌——Catalogue 把所有条目视为平等，对有层级关系的产品是错的。

仓库里有一个现成的 Catalogue 实例：Maple Street Bread 面包店页面，八款面包排成 2 列目录，每行一个手绘 SVG 剪影 + 品名 + 一句描述 + 价格（或 "sold out"），页面没有任何 CTA。它的 CSS 首行是结构戳记：

/* Hallmark · macrostructure: Catalogue · F1 catalogue knobs: tiles=8, columns=2, rule=hairline-between */

戳记源码见 site/_tests/03-maple-bakery/style.css，页面见 site/_tests/03-maple-bakery/index.html。Catalogue 的开场白也很有意思——它是"带日期的库存表头"，官方给的示例：

"Today's loaves."（今日面包）"Thirty-eight items · Spring 2026 · all hand-stitched."（38 件 · 2026 春季 · 全部手工缝制）

数一数、写日期、加限定词，不用形容词。📋

Index-First 拆解：导航本身就是设计

Index-First 更极端：页面就是一列链接，导航即设计本身。六个要素（完整规则见 13-index-first.md）：

适用：文档中枢、知识库、档案站首页、设计系统入口、有内容分量的 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。

两种清单结构，一表对照

如何让你的 AI 生成清单式页面

Hallmark 在选结构时会直接读你的需求描述（brief）里的信号词，这决定了它会不会命中清单结构：

1. 描述"条目多且平等"——比如 "a list of links"、"many small features"、"see what's available"，倾向命中 Index-First 或 Catalogue。
2. 描述"有层级、有故事"——比如 "tell a story"、"data heavy"，则会选到 Manifesto、Stat-Led 等其他结构。
3. 警惕重复：Hallmark 有强制的"多样化规则"——同一项目里前后两次输出不允许使用相同宏观结构，结构戳记（上面那行 CSS 注释）和.hallmark/log.json项目记忆会记录你上次用了什么。

换句话说，清单结构是 Hallmark 21 种"页面指纹"之一，而不是一种默认风格。同样是让 Hallmark 生成页面，SaaS 简报可能得到完全不同的形状：

这就是"结构多样性"（structural variety）的意义：两个简报得到两个像不同网站的页面，而不是同一模板的换色版。✍️

关键文件速查

想动手试一把，按这个顺序读就够：

• 结构总索引：skills/hallmark/references/macrostructures.md
• Catalogue 规则：skills/hallmark/references/macrostructures/11-catalogue.md
• Index-First 规则：skills/hallmark/references/macrostructures/13-index-first.md
• 完整使用流程：skills/hallmark/SKILL.md
• 8 个可复制的实战案例（含两个清单结构实例）：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