Hallmark

把”AI 生成页面的破绽”一条条列成 lint 规则,再用真实浏览器和冷眼复审逐项验收

项目速览

项目 内容
仓库 Nutlope/hallmark
语言 CSS(含 Node 脚本)
Stars 32,893(2026-10-25),Forks 1,706
协议 MIT
状态 2026-04-27 建库
出品 Nutlope(Together AI)

它想解决什么问题

AI 生成的页面有股挥之不去的机器味:每个标题上的眉题、全大写加宽字距的标签、标题里唯一一个彩色的词、整页空相框、错过首屏的 hero、每页末尾都有的邮件订阅框、说了谢谢却什么都不发送的表单。

Hallmark 的做法不是”教模型审美”,而是把这些破绽变成可检查的规则——一个拒绝看起来像 AI 生成的设计技能,支持 Claude Code / Codex / Cursor / OpenCode。

核心机制拆解

1. 四步工作流:发牌、构建、lint、冷审。

  • Pre-flight:读项目(字体、色板、框架、锁定的 design.md),只问一次”材料”——照片、截图、真实数字,不编造;
  • 发主题:scripts/theme.mjs deal 从 48 套主题里发三张合适的,draw 按页面职责发版式;
  • 单独建 hero:先渲染、用”冷眼”评审,再建页面其余部分;
  • lint:scripts/sloplint.mjs --render 在真实浏览器里按 8 个宽度检查,之后交给一个全新上下文的子代理做最终复审。

2. 主题是”材料”,不是模板。 每套主题是一份不超过 8KB 的规格(纸、字、色、表面、自有组件与纹理),带一张成品页示例。主题从不规定页面放什么,所以同一个主题、两个提示词,产出两个完全不同的页面。

3. 三级门禁。 这是它最有工程味的设计:

  • Floor(绝不出货):对比度、焦点态、减弱动效、编造事实、手机布局破碎;
  • Reflex(默认值陷阱):模型爱掉的坑,构建方可以”持理由”推翻,但要在记录里说明;
  • Finish(工艺细节):不拦出货。

4. 真素材而非占位图。 内置 755 张开放许可的真实照片,按题材挑选并在页面上署名。另有 /hallmark redesign <path> 保内容重建页面(sloplint --kept 会校验链接、字段、处理器一个没丢),/hallmark audit <path> 只报告不改。

安装与上手

1
npx skills add nutlope/hallmark -g

点评

亮点是把”AI 味”从审美抱怨变成了可执行的门禁:三级门禁加上真实浏览器渲染 lint,等于给设计质量装了一条 CI 流水线。这种”确定性检查 + 有理由的推翻”的机制,比单纯的风格提示词可靠得多。

局限:48 套主题虽多,但仍是有限集合,重度使用会出现”看得出同一批出身”的风险;lint 规则基于真实浏览器渲染,运行成本高于纯静态检查;它约束的是”不像 AI”,不保证”足够好”——设计判断仍需人。

适合人群:用 AI 生成落地页的独立开发者;想把”机器味检查”放进 CI 的设计团队;想读一份”AI 设计破绽百科”的前端工程师。

同场对照:本期另一篇主角 Impeccable(87K Star)做的是同一件事,路线不同——Impeccable 用 Rust 单二进制 + 62 条确定性规则 + 24 个命令的设计词汇表;Hallmark 用 48 套主题材料 + 浏览器渲染 lint + 冷眼子代理复审。”反 AI 味”已经成为设计技能的标配军备竞赛。