企业官网建设流程全解析

Hallmark 输出预览块完全解读：6 个 bullet 如何在 5 秒内看懂 AI 计划

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

Hallmark是一个面向 Claude Code、Cursor、Codex 等 AI 编码助手的反“AI 味”（Anti-AI-slop）设计技能。它每次生成页面前都会先输出一个输出预览块（Preview Block）：6 行简洁的 bullet，把页面的结构、主题、章节、动效和质量分一次性交代清楚。读懂它，你只需 5 秒就能判断 AI 的设计计划是否符合预期——不对，一句话纠正；对，直接放行。

什么是输出预览块：AI 动手写代码前的“5 秒 TL;DR”

Hallmark 的设计流程共 7 步，预览块出现在第 5 步——写任何一行代码之前。官方原话很直白：这是给用户的 TL;DR，让你能在 AI 写出 500 行不匹配的 CSS 之前，先喊停、改方向。

一个真实的预览块长这样（来自 Bento Grid 示例）：

**Hallmark · v1.0.0** - **Macrostructure** · Bento Grid - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans) - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer - **Motion** · counter · pricing-lift · CSS marquee on integrations strip - **Slop test** · 69 / 69 ✓ - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)

6 个必选 bullet + 1 个可选 bullet，外加一行斜体的可选 CTA。下面逐条拆解。完整规范见 skills/hallmark/SKILL.md#L400-L436。

逐条拆解：6 个 bullet 各自告诉你什么

1. Macrostructure：先选骨架，再谈皮相

Hallmark 最核心的差异化是结构多样，而非换色。预览块第一行告诉你它从 21 种命名宏观结构中挑了哪一个——Bento Grid、Long Document、Manifesto、Stat-Led……每种结构是一整套打包的页面形状（标题位置、正文组织、分隔线语言、按钮语气、图片处理）。

同一份需求，选 Long Document 得到的是杂志长文，选 Bento Grid 得到的是 SaaS 仪表盘。这一行决定了页面的“骨相”，值得最先看。索引见 skills/hallmark/references/macrostructures.md。

2. Theme：一行字速读整套配色

目录里有 22 个命名主题（Specimen、Linen、Terminal、Midnight、Quiet……）。预览块里会给出主题名 + 一行色板摘要：纸面色带 · 强调色 · 展示字体风格，例如Linen (cool slate paper · steel-blue accent · geometric sans)。

如果需求里有明确品牌色或复杂氛围描述，Hallmark 会走 custom 分支，这一行会换成完整描述：custom (vibe: "archival warmth…" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic + Source Serif 4)。看到 oklch 数值不用慌——它只是色板，你只需判断气质对不对。

3. Enrichment：首屏要不要“加料”

大多数页面其实不需要图——最强的首屏常常是纯排印的。这一行会写none (typography only)，或写清楚增强原型 + 层级，例如E1 Clipped-Edge Demo Video, Tier-A CSS-art mockup。

Hallmark 的增强层级是固定的：纯文字 → Tier A 纯 CSS 画 → Tier B 手绘 SVG → Tier C 生成静帧 → Tier D 素材库 →Lottie 兜底。看到Tier-E Lottie基本可以问一句：CSS 做不出来吗？

4. Sections：用一行字预览整页目录

所有章节名按 DOM 顺序用·连接，例如Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer。这是最快的“内容体检”：发现多了个你没要的 Testimonials，或者漏了 Pricing，当场指出即可。

5. Motion：动效预算永远小于 3

这一行列出要用的微交互原语（counter · pricing-lift · pulse-once），并受一条硬规则约束：每页不超过 3 个动效。Hallmark 的理念是“动效先砍再加”——删掉一个动画如果不丢失信息，就删掉它。看到none — typography only是常态，不是偷懒。

6. Slop test：69 道检查门的质量凭证

最后一行是质量分：69 / 69 ✓表示全部通过，否则是N / 69 — fails: <门编号>。这 69 道“slop 门”逐项检查 AI 味痕迹：编造的数据、重画的假浏览器窗口、模板感排版等。注意：这一行是跑完测试才写的，AI 不允许先写一个漂亮的 69/69 再补作业。门清单见 skills/hallmark/references/slop-test.md。

隐藏第 7 行：Diversification 与一行 CTA

项目跑过一次 Hallmark 之后，预览块会多出一行Diversification，说明本次选择在“纸面色带 / 字体风格 / 强调色”三个轴上如何区别于上一次——这是防模板化的记忆机制（记录在.hallmark/log.json）。

bullet 之后还有一行斜体 CTA：

System portable? Saylock the systemto extract this build's tokens + voice into adesign.md.

意思是：满意的话，可以把这套设计系统固化成可携带的design.md，供后续页面复用。组件级构建和已锁定design.md的项目不会出现这一行。

看懂之后：3 种常见反应

• 方向不对→ 直接指出要改哪条 bullet，例如“Theme 换成 Terminal”。AI 会先更新计划，再继续构建。
• 全部符合→ 不用回复，等它进入第 6 步 Build 即可。
• Slop test 有失败门→ 正常流程是：修好失败项后重新输出预览块并更新 Slop test 行。官方明确“预览块是持久摘要，如果它撒谎就不该交付”，所以最终拿到的才是可信版本。

更多真实样例在哪里看

• 四个完整预览块范例（Long Document / Bento Grid / Manifesto / Custom）：skills/hallmark/references/preview-examples.md
• 9 个可复制的完整 brief，每个都标注了 Hallmark 选了什么结构 + 主题：docs/recipes.md
• 实际生成的测试页面与截图：site/_tests/、docs/screenshots/

下次 AI 在写代码前甩出这 6 行 bullet 时，别急着说“继续”——花 5 秒扫一遍，一次纠正的成本远低于一次返工。

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