Hallmark 的 21 种 macrostructure 完全图鉴：页面骨架决定一切
【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark
Hallmark是一个面向 Claude Code、Cursor 和 Codex 的反 AI 味（anti-AI-slop）设计技能，而它的核心武器就是21 种 macrostructure（宏结构）：在写下一行代码之前，先为页面选一个"骨架"——标题摆在哪、正文怎么组织、分隔线怎么画、按钮什么语气、图片如何处理，全部打包成一次命名选择。选对 macrostructure，页面就像人做的，而不是同一个模板换了色。
为什么"骨架"比"皮肤"更重要 🦴
AI 生成的页面为什么总像同一个模子？因为它们倾向于独立选择"配色 + 字体 + 卡片 + 动画"等六个维度，最后收敛到训练分布的均值上。Hallmark 的解法是：
先选骨架，再谈皮肤。一个 macrostructure 就是一整套"指纹"——标题位置、正文构成、分隔语言、按钮语气、图片处理、滚动揭示方式，捆绑成一个命名选项。
这比逐维度拼装更快、更少出错，而且类别化的差异让两次生成的结果看起来像两个不同的网站，而不是同一模板的换色版。完整目录在 macrostructures.md。
21 种 macrostructure 速查表
Hallmark 强制的规则是：一次生成只选一个，然后只读那一个文件（位于 skills/hallmark/references/macrostructures/），不要加载整个目录。
| # | 宏结构 | 一句话特征 | 什么时候选它 |
|---|---|---|---|
| 01 | Bento Grid | 不规则尺寸混排网格，节奏来自大小变化 | "很多小功能要展示"、SaaS 落地页 |
| 02 | Long Document | 像备忘录/信件一样连续行文 | 品牌叙事、文档式产品页 |
| 03 | Marquee Hero | 首屏被一个巨型宣言占满，无 CTA | 个人品牌、"这就是我们是谁"的宣言式页面 |
| 04 | Stat-Led | 巨型数字开场，数据即叙事 | B2B、融资页、"我们有数字证明" |
| 05 | Workbench | 产品截图框是主角，页面即产品导览 | 有 UI 可展示的产品、功能走查 |
| 06 | Conversational FAQ | 粗体问句 + 短答，像诚实的采访 | 问答驱动、信任建立型页面 |
| 07 | Manifesto | 论战式大字号，政治海报美学 | 品牌宣言、使命驱动产品 |
| 08 | Photographic | 每屏一张巨图，文字只是小标注 | 图片即信息量的品牌 |
| 09 | Quote-Led | 开场是名人引语 + 署名 | 社会证明优先、证言驱动 |
| 10 | Specimen | 左页边距编号 + 超大衬线体，编辑气质 | 明确编辑风/字体行业（不再是默认选项） |
| 11 | Catalogue | 同款事物的均匀网格 | 产品清单、字体/色板目录 |
| 12 | Letter | 第一人称书信，"亲爱的朋友"开场 | 创始人的私人笔记 |
| 13 | Index-First | 页面本身就是一份链接清单 | 个人主页、导航即设计 |
| 14 | Narrative Workflow | 编号阶段 1.0→4.0 讲使用故事 | 流程时间线、方法论叙事 |
| 15 | Split Studio | 双联画式左右分栏，方向交替 | 工作室、"文字一侧 + 证据一侧" |
| 16 | Feature Stack | 左栏固定 + 右栏滚动同步截图 | 电影节奏的功能逐个拆解 |
| 17 | Type Specimen | 字体本身就是设计 | 有定制字体的品牌（无特色字体别用） |
| 18 | Portfolio Grid | 可筛选的项目卡片网格 | 设计师/工作室"作品即产品" |
| 19 | Map / Diagram | 一张巨型空间图组织全页 | 流程图、系统架构、网络图谱 |
| 20 | Ecosystem Index | 精选/最新/分类多入口浏览 | 平台型生态，价值在"逛" |
| 21 | Component Playground | 代码 + 预览的交互块即正文 | 组件库、设计系统营销页 |
💡冷知识：前 10 种是"刻意最强"的通用形状，覆盖了约80% 的 brief。当需求模糊时，Hallmark 会先从 01–10 里挑，而不是伸手去够 11–21。
三条内置的"防偷懒"规则 ⚠️
- 多样性规则（强制）：生成前先扫描目标项目里是否已有
/* Hallmark · macrostructure: <名称> · ... */的 CSS 印章；若找到，本次必须换一个。同一项目连续两次输出绝不同骨架。 - Specimen 不再是默认：曾经人人爱的"编辑风 + 大衬线体"（10 号）被降权，只有 brief 明确偏编辑/字体行业时才选它。
- 骨架决定导航和页脚：每个 macrostructure 还隐含一个导航原型（N1–N9）和页脚原型（Ft1–Ft8）——它们是页面形状的一部分，不是可选装饰。
4 步决策流：Hallmark 是怎么挑的 🧭
- 读 brief，抓信号词："数据密集"→ Stat-Led，"讲个故事"→ Long Document，"链接清单"→ Index-First，"很多小功能"→ Bento Grid，"私人笔记"→ Letter。
- 查代码库印章，排除已用过的骨架。
- 匹配气质：多数 brief 会命中 2–4 个候选，选与历史输出类别距离最远的那个。
- 先报再写：动代码前用一句白话说出 "Macrostructure: Bento Grid"，然后 CSS 文件顶部写印章。真正纠结时，从不同类别给用户提供 3 选 1。
看真实生成效果：同一个技能，四种完全不同的骨架
仓库里 site/_tests/ 和 site/examples/ 保存了多份"放养"生成结果——每个 CSS 顶部都印有骨架印章，可以对照速查表逐张认领：
Marquee Hero（03 号）——Tally 的 SaaS 首屏就是一个占满视口的宣言，首屏内没有按钮，滚动之后页面才"变成别的东西"：
Index-First（13 号）——Anya 的个人主页干脆就是一份编号链接清单，没有 hero 图、没有叙事流，"导航即设计"：
Long Document（02 号）——Søroe 陶瓷工作室页面像一本连续行文的刊物，营销结构为零，产品本身被写成"关于它的文献"：
Marquee Hero + 手绘 SVG 装饰（03 号变体）——Slow Pour 咖啡订阅同一骨架，却靠手绘咖啡豆 SVG 和暖调主题走出了完全不同的指纹：
8 个测试 brief、8 种互不重复的骨架，每份案例的完整决策记录见 site/_tests/01-tide-podcast/brief.md 与各测试目录下的brief.md。
SaaS 页专属：骨架还会决定章节顺序 📋
当骨架是Bento Grid / Stat-Led / Workbench / Marquee Hero且 brief 是 B2B SaaS 时，Hallmark 会按"配方"组织章节（缺两项以上就显得页面没写完）：
Hero → 客户 logo 墙 → 功能卡 → 证言 →明码标价的价格表 → 会话式 FAQ → 单按钮 CTA 条 → 页脚
注意语音规则：证言必须带职位和公司（"Jane Doe" 会被 slop 测试直接判死），价格必须写真实数字——"Contact sales for pricing" 全档出现，是"品牌不信任买家"的明显破绽。这套配方对烘焙店、Manifesto 等非 SaaS 骨架明确不适用。
想深挖？从这几个文件入手
- 总目录与选型规则：macrostructures.md
- 单骨架档案（各含排版细则 + 示例开头句 + 最小 HTML 骨架）：01-bento-grid.md、07-manifesto.md
- 首屏加花纹（E1–E8 增强 + HP1–HP4 抛光）：hero-enrichment.md
- 导航/页脚原型速查：component-cookbook.md
- 完整生成配方与案例：docs/recipes.md、docs/study-examples.md
一句话总结：21 个 macrostructure 的本质，是把"AI 该画什么页面"从一个连续的概率问题，压缩成 21 个离散、可命名、可审计的选项——骨架选定，风格自成。这也是 Hallmark 敢说自己"拒绝长得像 AI 生成的"最大底气。
【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
