Nutlope/hallmark —— 针对 Claude Code、Cursor 和 Codex 的反 AI 废话设计技能

这是什么

Hallmark 是一个专为 Claude Code、Cursor 和 Codex 等 AI 编程助手设计的“技能”（skill），本质是一套可复用的指令集和结构化输出规则。它由 Together AI 开发，能够根据用户输入的简报（brief）自动生成自包含的 HTML + CSS 页面，同时刻意避免产出“看起来像 AI 写的”设计。项目托管在 GitHub 上，主语言为 CSS，目前收获近 4000 星标。

核心输出是单个 HTML 文件，所有样式内嵌，CSS 注释中标记了该页面的宏观结构（macrostructure）。Hallmark 内置 20 种主题、4 种动词（用于控制布局策略），并支持按 T 键循环切换主题。所有生成示例可在 usehallmark.com 或仓库 site/_tests/ 目录下浏览。

解决的问题

当前主流 LLM 在生成网页时存在严重的“模板化”倾向——无论输入什么简报，输出的页面结构、配色、排版都极其相似，往往只是改了几个颜色和文字，本质上还是同一个默认分布下的产物。这种现象被项目作者称为“on-distribution defaults”。Hallmark 专门应对这一问题，它通过一套系统化的“反 AI 痕迹”流程，确保不同简报产出的页面在视觉和结构上差异显著，看起来像是人类设计师手作的独立作品，而非同一模板的调色变体。

核心功能

• 宏观结构选择：针对单条简报，Hallmark 自动挑选最合适的页面宏观结构（例如单栏、双栏、卡片网格、长滚动叙事等），而非固定套用某一种框架。
• 20 种主题：提供 20 套完整的视觉主题，涵盖色彩、字体、间距、阴影等。用户可以按 T 键实时预览切换。
• 4 种动词：定义四种不同的布局生成策略，比如“排列”“叙述”“展示”“引导”，每种动词对应不同的信息组织方式，进一步增加输出多样性。
• 57 道反套路门（slop-test gates）：生成过程中运行的规则集，检测并阻止那些 LLM 惯用的“AI 味”设计模式（例如无意义的渐变、过度使用圆角、千篇一律的卡片布局等）。每道门都是一个具体检查项。
• 预发射自我批评（pre-emit self-critique）：在输出最终代码前，让模型对自己生成的页面进行一次评价，确保设计合理且符合简报意图，同时再次识别并修正任何残留的 AI 痕迹。
• Custom 模式：当简报包含明确的创意意图，且已有的 20 个主题均不匹配时，Hallmark 会静默切换到 Custom 模式——从零设计页面，包括定制的配色、字体和布局，且不依赖任何模板。同样经过 57 道门和自批评，但底层无主题文件。该模式仅当简报触发特定条件时启用，普通简报不会看到它。

亮点 / 与同类相比

• 刻意反“AI 感”：大部分 AI 网页生成工具（如 v0、Bolt.new）追求快速产出可用页面，但往往带有明显的 LLM 风格。Hallmark 将“不像 AI 做的”作为首要目标，通过多道过滤和自批评机制实现。
• 结构优先，而非模板优先：许多同类工具依赖一套固定模板库，Hallmark 则先从宏观结构开始，再套用主题，最后通过 slop-test 修正细节。不同简报的最终页面在结构、节奏、视觉重心上完全不同，甚至看起来像是不同设计师的作品。
• 可编程的设计系统：四个动词、二十个主题、自定义模式共同构成一个可组合的设计系统，用户可以通过调整简报内容来影响输出，而无需直接修改代码。
• 完全自包含输出：每个页面是单文件 HTML+CSS，不依赖外部资源，便于嵌入、分享或直接部署。同时 CSS 注释中明确标明了宏观结构名称，方便回溯和再编辑。
• 安全模式设计：Custom 模式保持“安静分支”，普通简报不会触发，只有真正需要特殊设计的简报才能访问，避免了用户意外得到不一致的结果。

适合谁用 / 上手

• AI 辅助设计师：希望借助 LLM 快速生成网页初稿，但又不希望成品带有明显机器味儿的设计师。Hallmark 输出的页面可以直接作为起点，再进行人工微调。
• 前端开发者：需要为不同客户或不同项目快速生成差异化 landing page 的开发人员。可以在 Claude Code、Cursor 或 Codex 中直接加载 Hallmark 技能，输入简报即可获得独立 HTML。
• 产品经理 / 创业者：用于快速验证不同页面布局或视觉风格的 A/B 测试素材，每个简报生成的页面都足够差异化，避免“换色即模板”的廉价感。
• AI 工具研究者：对 LLM 生成质量、设计系统、反模式检测感兴趣的技术人员，可以研究其 57 道 slop-test 门的实现逻辑和训练策略。

上手方式：在 Claude Code、Cursor 或 Codex 中引入 hallmark.md 作为系统技能文件（位于仓库根目录），然后以自然语言输入网页简报。例如：“help me create a landing page for a small-town bookstore that hosts poetry readings on weekends”。Hallmark 会自动选择宏观结构、主题，并通过 57 道门和自批评后输出最终 HTML。也可以直接访问 usehallmark.com 浏览已生成的示例集合。