Hallmark 为 AI 前端生成加入设计验收

AI 生成的页面为什么经常一眼就能认出来？Hallmark 把问题拆成了可以检查的设计习惯：标题上方总有小标签、每屏都像同一种卡片、表单提交后只显示感谢，却没有真正发送数据。

这个面向 Claude Code、Codex、Cursor 和 OpenCode 的设计 skill，主张先设质量底线，再让模型发挥。它提供 48 套主题，但更有参考价值的是工作流程：先确定页面任务，单独验收首屏，再用浏览器和独立审阅检查结果。不过，原文展示的是工具设计，没有给出改善效果的对照数据。

48 套主题，会不会只是换一批模板？

Hallmark 把主题定义成「材质」：字体、颜色、表面、纹理和配套组件，而不是规定页面必须先放什么、再放什么。同一主题面对两个需求，可以生成不同结构。

每套主题在 references/themes/ 中对应一个不超过 8 KB 的文件，旁边附成品示意图，一次构建只读取其中一套。scripts/theme.mjs deal 会根据需求提供三个候选，并清理日志；draw 则按页面任务确定结构。

这个区分有实际意义。预约页应该促成预约，商店应该促成购买，Newsletter 页面才需要订阅。不能因为模型习惯在页尾放邮箱输入框，就给所有业务加一个。

如果用户要求 custom，Hallmark 会放弃主题提供的布局方案、组件和配色配方，只保留规则与检查，并通过 direction.md 记录简短方向：找到客户独有的一个想法，让它贯穿页面。

它也会先读取项目的字体、配色、框架和锁定的 design.md，集中询问照片、截图、真实数字等素材。可以指向 URL、开发服务器或应用，由工具自行截图。这里的原则很明确：缺少事实就补素材，不能靠模型编造。

哪些问题必须拦住，哪些允许设计师解释？

Hallmark 最值得借鉴的，是把质量检查分成不同等级。

第一层是 Floor，包含对比度、焦点、减少动态效果偏好、虚构事实和手机布局损坏等问题。这些是阻止交付的底线。

第二层是 Reflex gates，针对模型容易重复的设计习惯，例如每个标题上方都有标签、字距拉大的全大写文字、标题里单独突出一个彩色词。如果当前页面有合理理由，可以记录原因后覆盖规则。

第三层是 Finish checks，检查细节完成度，但不阻止交付。这个分层避免了把审美偏好和可用性缺陷混在一起。

执行时，Hallmark 会先单独构建首屏，渲染后交给没有参与生成的审阅者检查，通过后才继续页面其余部分。scripts/sloplint.mjs --render 会检查八种宽度，随后由子代理重新审阅。每页输出自包含的 HTML 和 CSS，并在首个 CSS 注释中记录设计决策。

浏览器检查能暴露静态源码里看不出的布局问题，但原文没有说明八种宽度的具体数值，也没有交代各项视觉判断如何实现。不能仅凭命令名称，就认定它能自动识别所有「AI 味」。

改现有页面，先检查功能有没有被改丢

Hallmark 默认不会直接重做已有设计，必须明确指定：

/hallmark redesign ./src/app
/hallmark audit ./index.html

这两个命令分别用于重做和只读审计。要注意第二行的 audit，它只报告问题。

完整 redesign 保留内容与功能连接，调整设计系统和布局；说 keep the layout 表示保留布局做样式调整，说 polish 则只处理那些模式化痕迹。

改动前，sloplint --before 记录链接、字段、处理函数和标题；改动后，sloplint --kept 在发现遗漏时让检查失败，最后交付前后并排对比。这比只看新截图更接近日常前端工作的需求，但记录元素是否保留，仍不能替代完整的交互验证。

安装命令是：

npx skills add nutlope/hallmark -g

注意 -g 表示安装到所有项目，去掉它只安装到当前项目。运行需要 Node 18 或更高版本；浏览器检查另需 npm i -g puppeteer-core 和 Chrome，没有这些依赖仍可运行静态检查。

项目采用 MIT 许可。照片库列出 755 张开放许可照片，保存在 skills/hallmark/scripts/photos.json，只记录 Wikimedia Commons 上的图片信息，不包含图片文件。图片分别遵循 CC0、public domain、CC BY 或 CC BY-SA，使用时会在页面署名。代码的 MIT 许可不能覆盖图片各自的许可。

我的判断

我认同它把页面任务、事实准确性和可访问性放在装饰之前，也认同先验收首屏、再扩展整页的顺序。这些约束比一句「做得高级一点」更便于检查和修正。

但「看起来不像 AI 生成」仍有主观成分。标签、照片或彩色标题词都可以是合理选择，关键是使用理由。Hallmark 允许部分规则被解释后覆盖，这比一律禁止更合理。

原文没有提供用户测试、转化率或与普通提示词、既有组件库的对照结果，所以目前应把它看作一套设计经验和检查流程。已有成熟设计系统的团队，还需要确认主题材质、自包含 HTML/CSS 输出与项目组件架构如何衔接，原文没有把这部分说清。

能拿来做什么

• 做活动页、预约页或产品落地页时，先写清访客要完成的动作，再让 AI 选择布局；不要直接从「大标题加三张卡片」开始。
• 用 AI 修改已有前端页面时，先运行 audit 查看问题，并在重做前后核对链接、表单和交互处理，避免只验收视觉效果。
• 本地具备 Node 18、Chrome 和 puppeteer-core 时，可以把浏览器检查加入交付步骤；环境不齐时，要明确静态检查覆盖不到实际渲染。
• 已有组件库的团队，可以先借用 Floor 分层和独立审阅流程，再评估是否采用整套主题机制。