给 AI 编程工具装上设计底线

一、项目名称

GitHub：https://github.com/Nutlope/hallmark Stars：34.5k | 语言：CSS | License：MIT

二、项目介绍

用 Claude Code 或者 Cursor 生成网页，出来的东西全是一个模子。紫蓝渐变的 hero 区，标题顶上一行全大写的小标签，标题里有一个词染成彩色，下面排三张特性卡片，页尾再放一个邮件订阅框。看一百个 AI 生成的页面，像看同一个页面换了一百次皮。

这套长相有个名字，叫 AI slop。hallmark 干的事就是把它拦下来。

它出自 Together AI 团队，挂在 Claude Code、Codex、Cursor、OpenCode 上的设计技能插件。装上之后，AI 动手建页面前要先过它的门禁，建完后要过它的渲染检查，最后由一位陌生评审投出一票。仓库活了半年，攒下 3.4 万颗星，昨天一天又涨了 1,359 颗，停在 GitHub Trending 前排。

eyebrow 这个词得解释一句。它指标题上方那行全大写、窄字距的小字标签，中文页面里常见的「新品上市」「核心技术」都是这一路。单个看无伤大雅，架不住每个标题都顶一个。这类细节积多了，页面就透出一股流水线的味道，hallmark 的门禁名单上大半是这种东西。

现在看到的 48 个主题、从岗位建页、custom 模式、redesign 和 audit 两条命令，都是 v2 一次带来的。四天前仓库还在更新，issue 区挂着 59 条未关闭事项，根目录的 ROADMAP.md 里排着后续计划，这个项目的势头还没停。

▲ Dusk 主题成品页示例

三、架构设计

它的思路一句话能讲清，底线焊死，底线之上不指手画脚。具体由四层东西组成。

第一层，门禁分三级。Floor 是底线，对比度不够、键盘焦点丢失、动效没做减弱处理、页面编造事实、手机端布局破掉，踩中任何一条永远不许发布。Reflex 管模型的肌肉记忆，比如每个标题上方都要摆一个 eyebrow 小标签，这类默认习惯允许违反，但要把理由记录在案。Finish 是工艺细节，只提醒，不拦人。

第二层，48 个主题。每个主题是一个不超过 8KB 的文件，写清纸张、字体、颜色、表面质感和组件样式，旁边配一张成品图。主题名字都在暗示材料，dusk 是黄昏，riso 是孔版印刷，newsprint 是报纸，atelier 是工作室。开工时脚本从 48 张牌里抽出三张最合题意的摆上桌，你挑一张，页面就按那张材料的脾气生长。主题只给质感，不规定结构，同一个主题跑两次，出来两个不同的页面。页面骨架从岗位出发，订座页负责订座，商店负责卖货，动作摆在它该在的位置，页面以这个动作收尾。

第三层，sloplint。它把页面塞进真实浏览器，按 8 种宽度逐宽渲染，专查一眼机器味的特征。标题上方的 eyebrow、全大写窄字距的标签、标题里单独染色的词、整页空相框、hero 没对齐首屏、每页末尾都有的邮件订阅框、只会说谢谢实际什么也没提交的表单，全在它的名单上。

第四层，评审。开工前先做一次预检，读项目里已有的字体、配色、框架和那份锁定的 design.md，然后一次性问你要素材，照片、截图、真实数字，给不出来就空着，绝不编造。hero 区单独先建出来，冷启动评审一遍，通过了才建页面其余部分。整页完成后，再换一个全新上下文的 subagent 用陌生人的眼光过一遍，它握有最后一票。

建出来的每个页面都是独立的 HTML 加 CSS，不依赖仓库。页面第一个 CSS 注释里盖着它这轮做过的决策记录，用了哪个主题、越过哪条门禁、理由是什么，日后翻到能对上账。

▲ Atelier 主题成品页示例

四、快速上手

一行命令装上。

npx skills add nutlope/hallmark -g

带 -g 对所有项目生效，去掉就只装进当前项目。需要 Node 18 以上。想在真实浏览器里跑渲染检查，再补一个 npm i -g puppeteer-core 和本机 Chrome。没装这两个，静态检查照常能用。

装完各工具自动认领。Claude Code 里落在 ~/.claude/skills/hallmark，用 /hallmark 唤起。Codex 落在 ~/.agents/skills/hallmark。Cursor 和 OpenCode 会自己发现这两处副本。只想装一个工具，加 --agent claude-code 这类参数。也可以走 Claude Code 插件市场，/plugin marketplace add nutlope/hallmark 之后 /plugin install hallmark@hallmark。

已有的旧页面也能单独查。

node skills/hallmark/scripts/sloplint.mjs ./dist --render

从克隆仓库装的话，install.mjs 会先把每个主题和引用文件校验一遍再拷贝。install-hook.mjs 另能给 Claude Code 加一道编辑时的 Floor 检查，边写边拦，不等到最后评审。

▲ Cobalt 主题成品页示例

五、实战场景

最常见的用法是 redesign。/hallmark redesign ./src/app 下去，它先用 sloplint --before 把旧页面所有的链接、表单字段、事件处理和标题登记造册，改完再用 --kept 逐个核对，少一样直接判失败。内容和接线原封不动，换的是视觉系统和布局。只想除味不想动布局，说一声 polish，它只修机器味特征。只想拿份报告不动手，/hallmark audit 只查不改。

它对配图也较真。仓库备了 755 张 Wikimedia Commons 的开放授权照片，按主题挑好，用在页面上时逐张署名。Unsplash 和 Pexels 这类图库它一张不碰，因为那些网站的条款禁止 AI 工具挑图，用错了有版权后患。

看不上 48 个主题，说一个 custom，它就把主题库整个丢开，只留门禁和一份 direction.md，从你的 prompt 里挖一个只有这个客户才有的点子，让它撑起整页。想给真实产品做页面，把 dev server 地址或者线上 URL 给它，它自己截图，截下的图直接用在页面里，不用你手动喂。

仓库里另有一套同类项目少见的东西，评测装置。briefs.json 出题，judge.py 打分，run-matrix.py 把题目批量跑遍。设计质量这种向来靠嘴说的事，它当成可以回归测试的指标。哪次改动让生成的页面变丑了，跑一遍分数立刻知道。

· · ·

AI 编程工具把写页面变成了人人会做的事，hallmark 想把写得像人做的这一点也留住。它的门禁名单本身就是一份公开的 AI 味识别清单，不装插件，拿去对照自己手里的页面也够用。项目地址 https://github.com/Nutlope/hallmark。