Hallmark v2：50 个主题加真机浏览器检查，让 AI 做出的页面不再像 AI 生成的

封面图为可授权替代图：金属活字，Willi Heidelbach 拍摄，CC BY-SA 3.0，via Wikimedia Commons。原文仓库无可直接转存的主题截图直链，故用此图；Hallmark 自身的照片库同样只用 Wikimedia Commons 的 openly licensed 照片。

AI 编程智能体做出来的页面为什么总是一个样？Inter 字体、紫粉渐变 Hero、三个嵌套卡片、千篇一律的落地页。开源设计 Skill Hallmark 要治的就是这个毛病：它是一套装进 Claude Code、Codex、Cursor 和 OpenCode 的规则，让智能体按同一套设计纪律出页面，拒绝看起来像 AI 生成的。仓库为 Nutlope/hallmark，由 Together AI 制作，MIT 协议，截至 2026 年 10 月 28 日核对时已有 39,115 星。

v2 新东西：50 个主题，先有活儿再有样子

README 介绍的 v2 有四点值得注意。第一，50 个主题：每个主题是一种材质——纸张、字体、色彩、表面、专属组件与纹理，并配一张成品页图片；一次构建只读一个主题文件，主题只定材质不定结构，所以同一主题的两次构建也会是两个不同的页面。第二，从活儿出发：订票页就让人订票，商店就让人下单，通讯订阅就落在订阅动作上，页面按访问者要做的事来布局。第三，自定义分支：说 custom 就抛开主题，只用底线规则与简短指引，从提示词本身找一个只有这个客户才有的想法。第四，真实素材：可以指着一个 URL、开发服务器或应用让它自己截图，也可用库里 755 张 openly licensed 照片，每张都在页面上署名；它不编造照片、数字与截图。

三层门禁：底线不过，检查不拦路

Hallmark 的检查分三层，README 写得很清楚：

• Floor（底线）：对比度、焦点、减动效、编造事实、手机布局坏了——永远不许上线。
• Reflex（反射）：模型最容易掉进去的默认套路；有理由可以在记录里写明并推翻一条。
• Finish（收尾）：工艺细节，永远不拦发布。

它点名的“机器味”包括：每个标题上方的 eyebrow 小标签、字母间距拉大的全大写标签、标题里一个变色词、满屏空框或只有照片、Hero 撑不满一屏、每页结尾都来一个邮件订阅、点了“谢谢”却什么都没发出去的表单。检查在真实浏览器里跑，最后由一个全新上下文的评审员拍板。

一次构建怎么跑：先验 Hero，再验整页

README 给出的流程分四步，值得照着学：

1. Pre-flight：先读项目已有的字体、调色板、框架和锁定的 design.md，再问你要一次真实素材：照片、截图、真实数字，什么都不编。
2. 发牌：脚本从 50 个主题里发三张合乎提示词的牌，再按页面的“活儿”定出页面结构。
3. Hero 先行：Hero 单独做、单独渲染、冷评审通过后，页面的其余部分才开始建。
4. 整页检查：在八个宽度下渲染检查，再由子智能体用全新视角复审；成品是自包含的 HTML 与 CSS，第一个 CSS 注释里盖着它做过的决策戳。

四个动词：新建、审计、重做、学习

仓库内 SKILL.md 把用法收成一个默认行为加三个显式动词：默认是新建页面；audit 只读目标、按反模式清单打分排名，不改文件；redesign 在保留内容与接线的前提下重做视觉结构与布局，改前先记录所有链接、字段、处理器与标题，改后逐一核对一个都不能丢，并给出改前改后对照；study 则从截图或 URL 里提取设计 DNA——宏观结构、类型、字体搭配、色彩锚点，再决定是按此重建还是只出一份可携带的 design.md。SKILL.md 还立了六条跨动词纪律：发出前自评六个维度、不用编造的数字与证言、颜色与字体只走命名 token、不手绘假浏览器框与假手机框、四个手机宽度下逐一验证、标题一律不用斜体。

安装与调用：一条命令，四个入口

安装只需一条命令，需要 Node 18 或更高版本：

npx skills add nutlope/hallmark -g

-g 装给所有项目，不加则只装当前项目。浏览器检查需要再装 puppeteer-core 与 Chrome，没有它们时静态检查照样跑。四个入口的落点与调用方式按 README 如下：Claude Code 落在 ~/.claude/skills/hallmark，用 /hallmark 调用；Codex CLI 落在 ~/.agents/skills/hallmark，用 $hallmark 调用；Cursor 与 OpenCode 会找到上面两份副本，同样用 /hallmark 调用。只装一个入口、装成 Claude Code 插件、从克隆里安装并校验主题，以及直接拿它 lint 任意页面（node skills/hallmark/scripts/sloplint.mjs），README 里都有对应命令。如果它没有自动触发，就直接点名：use hallmark to build …。

怎么用才不翻车

先用 audit 给现有页面打分，再决定是重做还是只修“机器味”；新建页面时按它的规矩先给受众、用例与语气三个答案，别让它替你编数字。组件级需求（一个按钮、一张卡片）与整页需求走不同流程，SKILL.md 对组件要求八种状态齐全。相关阅读：本站介绍过的 Huashu Design 3.0：一句话交给 Agent 的可交付设计，以及装 Skill 之前先做安全扫描的 NVIDIA 开源 SkillSpector，后者正好补上“装 Skill 前先安检”这一环。

转自 GitHub 作者 Nutlope 的文章《Hallmark》，原文链接：https://github.com/Nutlope/hallmark