Hallmark 配方指南：九组可复制的 Anti-AI-slop 落地页 Prompt 与结构决策实战

本篇技术指南围绕开源仓库 hallmark 的 docs/recipes.md 展开，它是为 Claude Code、Cursor、Codex 安装 Hallmark 技能后可直接粘贴的九组实战 brief（包含一组"试运行"配方），每一组都完整记录了 Prompt 原文、技能推断的 audience/use/tone、选中的宏结构（macrostructure）+ 主题（theme）+ 强化（enrichment），以及一段输出摘录。读完你不仅能逐字复制这些配方验证技能是否接线正确，还能掌握"根据新 brief 寻找最近配方并记录差异"的复用方法，以及"配方不是模板"这一核心纪律背后的源码级依据（skills/hallmark/SKILL.md、site/css/tokens.css 与 site/_tests/ 下的真实测试产物）。

---

一、配方是什么：一次 Hallmark 完整设计流程的压缩记录

每一份配方都来自 Hallmark 默认 Design flow 的一次真实运行。整条流水线在 skills/hallmark/SKILL.md 中有完整定义，配方只是把最终决策"压缩"成四行可扫描的信息：

1. Prompt —— 逐字可复制的 brief；
2. Inferred trio —— 设计上下文门（design-context gate）产出的三要素：audience · use · tone。若用户全部显式给出，标记为 explicit；若用户选择退出（"go ahead / you pick"），技能会推断并强制披露推断结果（对应 SKILL.md § 1 的 inference protocol："Going with: audience = X · use = Y · tone = Z. If any of those is wrong, tell me and I'll redirect."）；
3. Picks —— 宏结构 · 主题 · 强化原型三层选择；
4. Excerpt —— 一段输出摘录，让你不运行技能也能核对产出是否符合 brief。

其中第一个配方（00 · Coffebox）是官方指定的试运行配方：把它粘贴进全新项目，用于验证技能已正确安装并理解完整流程，再读其他内容。

---

二、配方 00 · Coffeebox —— 官方试运行配方

Prompt（逐字复制）：

"Build me a landing page for Coffeebox — a small-batch coffee subscription. Roast on Sunday, ship on Monday, drink Tuesday. Audience: people who already buy good coffee and want fewer trips to the shop. Tone: warm, hand-set, editorial — like a small café's chalkboard."

Inferred trio： 显式（audience: 认真买咖啡的人 · use: 订阅 · tone: editorial-warm）。

Picks： Long Document 宏结构 · Linen 主题（暖纸感罗马衬线）· Tier-B 手写 SVG（一枚咖啡豆图标，可选）。

输出摘录：

"Coffeebox · est. 2026 · n.º 12. The first roast leaves the drum at 6:14 a.m. Sunday. By Monday morning it's in a paper bag in your post box. By Tuesday the kitchen smells like a café. Subscribe, skip a week, change the roast — all from the email. We bake what we baked yesterday. We ship what shipped well. We answer the email ourselves."

为什么它是官方试运行配方： brief 上下文显式（无设计上下文门的摩擦）、语气是编辑式（不同于任何 AI 默认落地页）、领域（咖啡订阅）与 SaaS/开发者工具的俗套零重叠。如果 Hallmark 对这个 prompt 产出 Linen + 斜体 Cormorant + 暖纸 的搭配，说明技能接线正确。

从源码侧验证：Linen 主题的真实 token 定义位于 site/css/tokens.css（[data-theme="linen"] 块），显示为冷石板灰纸（oklch(91% 0.012 220)）、钢蓝强调色（oklch(40% 0.12 232)）、Hanken Grotesk 几何无衬线 display —— 与你从配方中读到的"warm-paper roman-serif"印象一致（tokens.css 头部注释注明 Linen 从暖亚麻黄重新换色为冷石板灰以获得主题区分度）。而配方 08（Cohort）同样选 Linen 但强调"warm beige paper"，说明配方中描述的是该次运行的实际呈现，主题轴的细微差异由运行时参数决定。

---

三、配方 01 · Tide —— 独立播客（用户退出推断）

Prompt：

"Design a landing page for Tide — an indie podcast about long-form interviews with small-studio designers. Just go ahead, pick the rest yourself."

Inferred trio（用户选择退出）： audience = 设计师、对设计好奇的听众 · use = 收听 + 订阅 · tone = 安静编辑式。

Picks： Letter 宏结构 · Salon 主题（暖奶油纸、IBM Plex Mono 报头、Cormorant Garamond 正文、暖琥珀色 caret）· 无强化（纯排版）。

摘录：

"Dear listener, Tide is a podcast about how small studios actually work. The bookings, the unsent invoices, the day a senior designer leaves and you sit in the office not knowing what to say to the four people who stayed."

Hero 就是称呼语；下方是三段主播口吻正文、一个署名，然后一行"listen where you listen"链接（Apple · Spotify · Pocket Casts · Overcast · RSS）。没有 mockup，没有 demo —— 声音承载品牌。

实况测试： site/_tests/01-tide-podcast/index.html，其完整运行记录（含 v1 与 v2 的宏结构从 Quote-Led → Letter、主题 Atelier → Salon 的轮换论证）见 site/_tests/01-tide-podcast/brief.md："Previous run on this brief picked Quote-Led + Atelier. Picking from {Letter, Index-First, Long Document} this time — Letter wins for an audio-domain brief because the medium is voice." 这正是配方强调的"同一 prompt 二次运行必须产生不同宏结构"纪律的现场证据。

---

四、配方 02 · Streampipe —— 开源 CLI（显式指定主题）

Prompt：

"Build me a landing page for Streampipe — a small, fast, single-binary CLI for parsing log and event streams from stdin. Filter, transform, route. Composes with anything that emits lines. Audience: developers. Use: install + read docs. Tone: technical. Use the Terminal theme."

Inferred trio： 显式。主题被用户指定。

Picks： Long Document · Terminal（暗磷光绿、处处 mono）· Tier-A 内联 CSS 艺术终端块（无 Lottie、无真视频、无 sticky pin —— 直接内嵌在散文里）。

摘录：

"$ streampipe — a small, fast, single-binary CLI for parsing log and event streams from stdin."

随后一段散文解释功能，一个内联 <pre> 展示 tail -f access.log | streampipe parse --format nginx --filter 'status >= 500' --out json 及三行示例 JSON 输出，再一段散文（Rust、1.2 MB 二进制、无 daemon、无 buffer）。下方：安装区（brew · cargo · curl 三段）、三条编号工作原理说明、六行 flag 表。纯 CSS，无脚本。

源码纵深： Terminal 主题的 token 定义在 site/css/tokens.css（[data-theme="terminal"]）：--font-display/--font-body/--font-label/--font-mono 全部指向 JetBrains Mono 家族 —— 这是 typography.md 允许的"单一字体即设计"例外。二次运行的完整决策链记录在 site/_tests/02-streampipe-cli/brief.md：用户指定 Terminal 后主题不可轮换，但宏结构从 Workbench → Long Document，强化从 v1 的剪裁边缘 demo 终端改为内嵌 <pre> 代码块 —— "The Long Document macro wants the demo embedded in the prose, not floated next to a sticky tour."

---

五、配方 03 · Maple Street Bread —— 手工面包房

Prompt：

"Build a landing page for Maple Street Bread — a small artisan bakery in Lisbon. Sourdough, slow, by hand. We open at seven, thirty loaves, gone by noon, no online orders. Audience: locals. Use: see what we bake, find us. Tone: warm, hand-set."

Inferred trio： 显式。

Picks： Catalogue 宏结构 · Almanac 主题（暖羊皮纸、IM Fell 罗马衬线 display、暖琥珀强调色）· Tier-A 手写内联 SVG 面包剪影（每款一个、96 px、无动画）。

摘录： 盘形横幅报头："Maple Street Bread · Lisbon · est. 2026 · n.º 47 · sourdough by hand." 居中区块："Today's bake — Saturday, 6:14 a.m., eight breads, gone by noon." 下方 2 列目录网格列出八种面包（Country sourdough · Baguette tradition · Focaccia rosemary · Boule miche · Rye dark · Brioche feuilletée · Walnut levain · Bola d'óleo），每行带 96 px 面包剪影、IM Fell 名称、一句话描述、价格（或 "sold out"）。底部是居中的 almanac 面板承载营业时间与地址。没有 CTA —— brief 的 use 就是"看有什么 + 到访"。

实况测试： site/_tests/03-maple-bakery/index.html。该案例在 skills/hallmark/references/hero-enrichment.md § E5 中被引用为"手写 SVG 中心件"的范例：60 行手写 SVG 面包（body、shade、score-marks 三条路径），用 @property --rise 做 6 秒 4 px 呼吸循环，切痕经 stroke-dasharray 首次绘制时自绘，并带 reduced-motion 静态回退。

---

六、配方 04 · Meridian —— 工作室宣言

Prompt：

"A studio manifesto for Meridian — a small environmental-products design practice in Lisbon. Declarative, no flashy stuff."

Inferred trio（部分推断）： audience = 同行与客户 · use = 阅读它，认同就合作、不认同就离开 · tone = 宣言式编辑风格。

Picks： Quote-Led 宏结构 · Brutal 主题（近黑纸、Druk 风格压缩 display、单一黄色划痕强调）· 无强化。

摘录： 一句二十词的拉引语："We make products that don't outlive their use" —— "outlive" 背后有黄色删除线；归属行 "— The studio · the position we open with · this is the page." 出血黄规则线下是四条编号原则（Fewer things, made well · Material is the brief · Repair before replace · Slow is the deliverable），各配一段正文；结尾 § Working rules —— 五条克制的工作陈述（每周四天工作制 · 我们亲自回邮件等）。无 CTA、无 testimonial、无 roadmap。

实况测试： site/_tests/04-meridian-manifesto/index.html。Brutal 主题在 tokens.css 中为 oklch(98% 0.001 0) 纯白纸 + 红色强调 #E63946，Manifesto 主题才是黑纸 + #E51A1A；配方中 "near-black paper" 的表述对应的是 Manifesto 主题的 token 定义（oklch(10% 0.005 60)）—— 阅读时可注意配方名称与 tokens.css 中 [data-theme="manifesto"] 的对应关系。

---

七、配方 05 · Tracejam —— SaaS 可观测性

Prompt：

"Build me a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical."

Inferred trio： 显式。

Picks： Workbench 宏结构 · Midnight 主题（深冷纸、Geist Mono display、磷光青强调色）· Tier-A 纯 CSS sticky trace 面板（三态、随滚动切换 —— 无剪裁浏览器框）。

摘录： "Tracejam · v0.4 · For SREs & platform engineers. Distributed tracing that explains itself." Hero 左对齐 + 双 CTA（Try it free / Talk to sales）；右侧示例 trace 卡片含五个 span —— auth.verify、pricing.quote（红、回归）、rates.fx（橙、警告）、ledger.write —— 条形以 flex 子元素渲染。下方 sticky 走查区三步（open · find · read），各配一段正文和一个小 $ tracejam ... 命令；右栏固定 trace 面板带 "REGRESSED" chip 与纯文本 "WHY" 解释器；八集成条、三档定价、单行 colophon。

实况测试： site/_tests/05-tracejam-saas/index.html。该页在 hero-enrichment.md § E1 中被作为"非真视频的 Tier-A CSS 剪辑边缘 mockup"范例引用：手写 CSS-art trace 瀑布（矩形按百分比网格模拟火焰图），倾斜 -0.4°，向右越出视口 12vw，16/10 比例，发丝边框，移动端 < 60rem 时取消剪辑改为垂直堆叠。

---

八、配方 06 · Anya —— 个人单页（用户退出推断）

Prompt：

"Personal site for Anya — software architect in Lisbon. Don't ask, just figure it out."

Inferred trio（用户选择退出）： audience = 工程招聘经理 · use = 读我是谁、看我的作品 · tone = 克制、斜体编辑风。

Picks： Index-First 宏结构 · Plain 主题（纯白纸 #ffffff、Inter Tight display 偏重、深墨蓝强调）· 无强化。

摘录： 左侧 sticky 侧栏带编号 TOC：00 Index · 01 Now · 02 Years · 03 Writing · 04 Reach；右栏每节以自身 num + label 和 clamp 化 H2 开头。"00 · Index" 以 "A small, scannable index of who I am and what I do." 开篇，接两段 bio；"01 · Now" 讲同时接两个支付系统与 monolith-to-services 迁移的咨询项目；"02 · Years" 是表格化履历（Stripe → Monzo → Knot → independent）；"03 · Writing" 列五篇带日期列的文章；"04 · Reach" 是四格联系网格（email · GitHub · LinkedIn · Mastodon）。

实况测试： site/_tests/06-anya-portfolio/index.html。Plain 主题对应 tokens.css 中的 [data-theme="quiet"]（纯白纸 oklch(100% 0 0)、系统字体、无彩色强调、强调色即墨色 oklch(15% 0 0)）—— 配方中 "Plain" 为简写名，quiet 是其在 token 层的关键字，两者指向同一套"以克制为设计"的 token。

---

九、配方 07 · Foundry —— 合规 SaaS

Prompt：

"Build me a landing page for Foundry — SOC 2 and ISO 27001 compliance automation for B2B SaaS. Show: how many companies got compliant, what it costs, who uses it. Audience: founders + CTOs. Tone: technical but trustworthy."

Inferred trio： 显式。

Picks： Bento Grid 宏结构 · Newsprint 主题（暖奶油纸、Source Serif 4 display、暖深红强调）· Tier-A 纯 CSS logo 网格（八个 wordmark 占位、mono）。

摘录： 报纸横幅报头居中 wordmark。Hero 左偏："Compliance, ground out in days, not in months." —— "days" 以红色斜体呈现；右侧 CTO testimonial 拉引面板。下方 6 块 bento：(1) "847." 锚点统计 + 一行说明，(2) 4×2 logo 网格八个客户 wordmark，(3) 三档定价（Starter $299 · Team $899 热门 · Scale 定制），(4) 第二条 testimonial，(5) 六行 "what's automated" 功能列表，(6) 六问 FAQ 预告。收尾 CTA 条："Start the trial. Cancel before the first invoice if it's not ready." 单行 colophon。

实况测试： site/_tests/07-foundry-compliance/index.html。注意其中的 "847." 统计：这是配方在 Honest copy 纪律（SKILL.md § Disciplines 第 2 条，以及 skills/hallmark/references/anti-patterns.md § Invented metrics）约束下的产物 —— 若用户未提供真实数字，技能要么用占位（— + 标注 "metric to confirm"），要么换宏结构，绝不虚构。

---

十、配方 08 · Cohort —— 小班制课程平台

Prompt：

"Build a landing page for Cohort — the platform for cohort-based courses. Run live courses with 30 to 500 students. Built for educators, not LMS sales teams. Audience: course operators + indie creators. Tone: warm, salon-room, editorial."

Inferred trio： 显式。

Picks： Stat-Led 宏结构 · Linen 主题（暖米色纸、Inter Tight 几何无衬线、暖琥珀强调）· 无强化（纯排版 —— brief 中的 "30–500" 区间本身就是视觉）。

摘录： 居中眉标："Built for educators · not LMS sales teams." Hero 统计字 22 rem："30 — 500"（破折号为暖琥珀色）。标题："Live courses, the size your roster actually is." 副文："Cohort runs courses with thirty to five hundred students at once — the size of a real classroom, the size of a real lecture, and a few sizes between. With a date, a roster, and a room." 下方三条支撑统计（186 cohorts run · 93 % finish-rate · 4.7/5 operator NPS）、两则并排 operator testimonial、两档定价（First cohort free · Operator $199/mo）、单 CTA 条与 colophon。无 marquee、无卡片堆叠 —— brief 由排版承载。

实况测试： site/_tests/08-cohort-courses/index.html。该配方的统计数字同样受 Honest copy 纪律约束：936 个 cohort / 93% 完成率 / NPS 4.7 这类数据必须来自用户或标注待确认，配方中作为示例输出呈现。

---

十一、配方的组织方式：如何扫描、比较与复用于新 brief

每一份配方都共享同一条四行结构，便于快速扫描"Hallmark 对什么 brief 选什么组合"：

1. Prompt —— 逐字、可复制；
2. Inferred trio —— 设计上下文门的产物（audience · use · tone），三要素齐备标记 explicit，否则标记 the user opted out；
3. Picks —— 宏结构 · 主题 · 强化原型；
4. Excerpt —— 一段输出摘录，先核对产出与 brief 是否一致，再决定是否实际运行。

复用方法（原文明示）： 生成新东西时，在本文件中寻找最接近的配方，然后记录你的 brief 与配方之间的差异：

• 宏结构通常继承；
• 主题经常偏移（遵循多样化规则，见下）；
• 强化可能升级 tier。

从源码看，这条"先比对、再差异选型"的复用路径与 skills/hallmark/references/macrostructures.md 的 Diversification rule 一致：选择前必须检查目标代码库中已存在的 /* Hallmark · macrostructure: <name> · ... */ stamp，找到就必须选不同的宏结构；同时按 skills/hallmark/references/component-cookbook.md 的 archetype 变体旋钮（如 F1 Bento 的 tiles/spans/accent 三旋钮）避免"同一个 Bento 长得都一样"。

---

十二、配方不是什么：三条硬边界

原文用一节明确划出配方的三个"不是"，这直接对应技能的核心设计哲学：

1. 不是模板

Hallmark 的全部意义在于结构多样性 —— 逐字复制配方属于 Specimen-fall-through 反模式（对应 SKILL.md 中提到的 gate 23，完整反模式目录见 skills/hallmark/references/anti-patterns.md）。Specimen（左边距编号标签 + 巨大衬线 + 非对称跨度 + 纯排版 CTA）只在 brief 明确是 editorial / foundry 能量时才应被选中。

2. 不是固定选型

同一项目连续运行两次配方 00（Coffeebox），应当产出不同的宏结构或主题 —— 由 .hallmark/log.json 项目记忆强制保证。该文件的 schema 在 SKILL.md § 2.5 给出：JSON 数组、最新在前，形如：

[
  { "date": "2026-04-30", "macrostructure": "Bento Grid",   "theme": "Linen",   "enrichment": "E1 clipped-edge",  "brief": "Tracejam · SaaS observability" },
  { "date": "2026-04-28", "macrostructure": "Long Document","theme": "Linen",   "enrichment": "E5 hand-built SVG", "brief": "Maple Street Bread · bakery" },
  { "date": "2026-04-25", "macrostructure": "Manifesto",    "theme": "Manifesto","enrichment": "none",            "brief": "Meridian · studio manifesto" }
]

约束规则：宏结构不得与最近三次任一项相同；主题必须在纸面色带 / display 风格 / 强调色相三个轴中至少一个轴上与上一次不同；强化不得连续两次使用同一原型。主题三轴的权威值注释在 site/css/tokens.css 每个主题 token 块顶部。

3. 不是穷尽

21 种宏结构 × 16 种主题 × 8 种强化原型 = 2,688 种独立指纹。本文件 9 个配方只是入门集，其余 50 个留给你自己去发现 —— 而每次新运行都会通过 Step 6 的 stamp + .hallmark/log.json 追加，把新的指纹固化下来供后续轮换（{ "date", "macrostructure", "theme", "enrichment", "brief" } 五字段，保留最近 20 条）。

---

十三、实战建议：从复制到内化

1. 先跑 00：在全新项目粘贴 Coffeebox 配方，验证产出是否为 Linen + 斜体 Cormorant + 暖纸；如果不是，检查技能安装与版本。
2. 读 brief.md 学决策：site/_tests/ 下每个编号目录的 brief.md 记录了 v1 → v2 的完整轮换论证，是配方背后"为什么这么选"的最详实证据。
3. 对照 tokens.css 理解主题：配方的主题名（Linen / Salon / Terminal / Brutal / Midnight / Almanac / Newsprint 等）都能在 site/css/tokens.css 找到对应的 [data-theme="…"] 块，含完整的 OKLCH 色板与字体栈，便于你理解每个主题的三轴定位。
4. 记住硬纪律：宏结构必须轮换、主题必须三轴之一不同、强化不重复、explicit 与 opt-out 都要披露推断 —— 这些纪律就是"anti-AI-slop"的结构性来源，也是配方文档反复强调的复用前提。