Hallmark:一份写给AI编码助手的反AI味设计手册

用 Claude Code 或 Cursor 搭一个落地页,得到的东西十有八九长成这样:紫蓝渐变铺满 hero,Inter 字体通吃全场,三列等宽的功能卡片,每个卡片左上角一个圆角图标,中间一句斜体强调词,bottom 还要来一条 social icon 行。这套审美从 2023 年的 v0 和 Lovable 一直烧到 2026 年的各类 agent,凡是 LLM 介入前端生成的页面,几乎都带着同一副面孔。

Together AI 的 Hassan El Mghari(Nutlope)最近开源了一个叫 Hallmark 的项目,专门来治这个病。它不是又一个 UI 生成器,而是一份设计 skill——一段写进 Claude Code、Cursor 或 Codex 配置目录的规则文件,让 AI 在生成 UI 之前先过一遍 58 道反 AI 味检查,再决定输出什么。

AI slop 到底 slop 在哪

在聊 Hallmark 怎么治之前,先得说清楚"AI 味"到底是什么。很多人以为 AI 生成的 UI 难看是因为模型不够强,只要换个更强的模型就好了。实际情况恰恰相反:模型太强,强到把训练数据里所有 SaaS 落地页的共性都内化成了默认输出。

Hallmark 的 anti-patterns.md 把这些共性逐条列了出来,每一项都有名字。最致命的几条:

紫蓝渐变 hero。紫到蓝、紫到粉的背景渐变,配白色居中标题。这是 LLM 最稳定的审美默认值,也是人类用户识别"这是 AI 生成"最快的一条线索。Hallmark 的规则是:hero 不允许任何渐变背景,选一个主色锚点,想要温度就去染中性色。

Inter 通吃。Inter 或者 Roboto、Open Sans 单字族扛全场,没有配对字体。单字族页面就是模板页面。Hallmark 要求至少 2+1 的字体组合:一个展示字体、一个正文字体,外加最多一个 outlier 字体用在 wordmark 或大数字上,上限三个字族。

三列等宽功能卡。三个等宽列,每列上面一个图标,中间两行标题,下面三行说明,24px gap 拉满。Hallmark 的修复方案是打破网格:列宽不等、卡片高度不一、图标挪到内联位置,或者干脆丢掉卡片改用排版节奏。

渐变文字标题。background-clip: text 配紫到粉的线性渐变。这比渐变背景还容易暴露 AI 生成。Hallmark 的态度很硬:标题用实色,想要强调就用字重、字号或展示字体,不用渐变填充。

居中一切。min-height: 100vh 配全居中,一句短标语加一个大 CTA。这是 LLM 落地页的标准开场。Hallmark 要求打破对称:hero 可以偏左或偏右,内容可以多于一句话。

还有一批次要但同样典型的:hover:scale-105 的统一悬浮放大、卡片嵌卡片的无语义嵌套、毛玻璃当装饰、Material Icons 和 Heroicons 混用、每个 section 头上都顶一个 01 / EXAMPLES 的 mono-cap 眉标。这些单独看都不致命,两个同时出现在一个视图里,基本就能确认是 AI 生成的。

Hallmark 的核心机制:58 道检查门

光列 anti-pattern 不够,真正让 Hallmark 有执行力的是它的 slop-test 系统。每次输出 UI 之前,模型必须过一遍 58 道检查门(gate),每一道门的答案都必须是"否"才能放行。

这 58 道门分几类。视觉类检查字体是不是 Inter/Roboto/Open Sans、有没有紫蓝渐变、有没有等宽三列卡。结构类检查页面是不是复用了通用的"hero → 三功能 → CTA → footer"模板,或者复用了上一次 Hallmark 输出的结构指纹。微交互类检查 transition-all、hover:scale-105、bounce 缓动、focus ring 是否淡入。实现类检查中性色的 OKLCH chroma 是否为 0(纯灰读起来发扁)、accent 色是否超过单视口 5% 面积、间距是否在命名刻度上。

比较狠的是多样性门(diversification gate)。Hallmark 会读项目里的 .hallmark/log.json,记录之前用过哪些 macrostructure。连续两次输出不能复用同一个结构指纹,连主题(theme)都不能在纸面色、展示字体风格、accent 色相三个轴上同时重合。这意味着同一个项目用 Hallmark 生成多个页面,每个页面的结构骨架都得不一样——不是换个配色的那种不一样,是 hero 摆位、section 节奏、nav 和 footer 形态都不同的那种。

在 58 道门之前,还有一道预发射自评(pre-emit self-critique)。模型要先从六个轴给自己打 1-5 分:Philosophy(页面有没有立场)、Hierarchy(层级是否清晰)、Execution(细节是否到位)、Specificity(是不是只属于这个 brief)、Restraint(克制够不够)、Variety(和之前的输出拉开距离没有)。任何一轴低于 3 分就触发一次修订,通常修订两轮正常,三轮说明 brief 本身有问题。六项分数会盖在文件顶部的 CSS 注释里:/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */,方便后续运行回看上次的弱点。

21 种 macrostructure:结构多样性的基础设施

光靠"不要重复"还不够,得有足够多的备选结构。Hallmark 内置了 21 种命名的 macrostructure,每一种都是一个完整的页面形态——标题摆位、正文构成、分隔线语言、按钮语气、图片处理、reveal 动效打包成一个选择。

这 21 种里包括:Bento Grid(便当盒网格)、Long Document(长文档)、Marquee Hero(跑马灯 hero)、Stat-Led(数据主导)、Workbench(工作台)、Conversational FAQ(对话式 FAQ)、Manifesto(宣言式)、Photographic(摄影主导)、Quote-Led(引言主导)、Specimen(样本式,带左侧编号标签和大号衬线)等等。

Specimen 这个结构值得单独说。它是 Hallmark 里最具编辑感的一种——左侧编号标签(01 — HELLO.)、大号衬线展示字、不对称跨度、细线规则、纯排版 CTA。早期 Hallmark 几乎所有输出都默认走 Specimen,导致它一度成了另一种"AI 味"。现在的规则是:Specimen 不再是默认,只有 brief 明确要求编辑感、字体力或样本页气质时才用。这算是一个项目自我修正的案例——同一个 skill 也会产生自己的审美惯性,需要主动打破。

20 个主题 + 4 种体裁

macrostructure 解决结构问题,主题(theme)解决视觉问题。Hallmark 有 20 个命名主题:Specimen、Atelier、Brutal、Newsprint、Studio、Manifesto、Terminal、Midnight、Almanac、Garden、Riso、Sport、Bloom、Coral、Cobalt、Aurora、Editorial、Carnival、Lumen、Hum。每个主题是纸面色、展示字体风格、accent 色相的固定组合。

主题之上还有一层体裁(genre),分四种:editorial(编辑型,默认)、modern-minimal(现代极简,Stripe/Linear 那一派)、atmospheric(氛围型,Suno/Runway 那种暗色 AI 工具感)、playful(俏皮型,post-Linear 软派)。体裁决定了哪些主题可以轮换、哪些检查门适用、模型怎么挑文案口吻。比如 AI 工具、生成式、音乐、视频类的 brief 会路由到 atmospheric,走 Bloom/Midnight/Terminal/Aurora/Lumen 这几个主题;SaaS、企业、API、开发者工具会路由到 modern-minimal,走 Coral/Cobalt。

大多数 brief 默认走 catalog(这 20 个主题的轮换),用户不需要每次都选。只有在 brief 带有明确品牌色锚点、或者描述了 catalog 承载不了的多维度美学(三个以上的 vibe 词)、或者附带品牌 mood 参考时,Hallmark 才会弹出 catalog vs custom 的分叉,走定制路线——为一篇 brief 单独调一个 OKLCH 配色加免费字体配对,甚至从零设计整个页面结构。

四个动词

Hallmark 有一个默认行为和三个显式动词。

默认行为是设计新页面。模型读 brief,跑完整的设计流程:预飞行扫描(读项目已有的字体、配色、间距、框架)→ 设计上下文门(问受众、用途、语气,用户可以说"go ahead"跳过)→ 选 macrostructure → 检查项目记忆 → 选主题 → 丰富 hero → 预览 → 过 58 道检查门 → 盖章输出。

hallmark audit <target> 是审计已有代码。读目标文件,按 anti-pattern 列表打分,返回一份排好序的 punch list,不修改任何东西。适合用来评估一个已经上线的页面有多少 AI 味。

hallmark redesign <target> 是重设计。拿走目标的内容和意图,换掉视觉结构,但保留路由、组件归属、文案意图、品牌和信息架构——只替换需要的视觉交互层。如果在已有项目里跑,它不会乱删文件,默认做就地编辑或新增组件。

hallmark study <screenshot | URL> 是设计 DNA 提取。给一张截图或一个 URL,Hallmark 会提取它的 macrostructure、原型、字体配对、色彩锚点,生成一份诊断报告。URL 模式能读到精确字体名和色值但判断不了节奏,截图模式能判断节奏但拿不到精确值。提取完的 DNA 可以用来重建用户自己的内容,或者打包成一个可移植的 design.md 交给其他 AI 工具。这个动词有一条硬规则:绝不像素级克隆,拒绝模板市场 URL。

几条贯穿所有动词的纪律

不管用哪个动词,有六条纪律始终生效。

预发射自评,前面讲过,六轴打分低于 3 就修订。

诚实文案,禁造数据。用户没给的指标不许编。"+47% 转化""50,000+ 团队信赖""10× 更快",这些一旦是编出来的,就是 slop。数据主导的布局如果填不上真数字,就用 — 加一个灰块标"待确认",或者换一个不需要数字的 macrostructure。

锁定 token,禁止中渲染即兴。主题一旦选定,所有颜色和 font-family 必须引用命名 token(var(--color-accent)、font-family: var(--font-display))。内联 OKLCH、hex、rgb 值,或者绕过 token 块直接写 font-family: "Some Font",都不允许。需要新值就把它加进 token 块再引用。

禁止重绘 UI chrome。不许手搓假浏览器栏(URL 胶囊加红绿灯点)、假手机框、假代码块窗口(模拟标题栏加点包裹 <pre>)、假 IDE chrome。用户环境已经提供了真实 chrome,要么用真实截图套 <figure>(最多加一根细边),要么去掉 chrome 让内容自己站。

移动端响应式,每个输出都要过 320/375/414/768 四个宽度。硬要求:不能横向滚动(html 和 body 都要 overflow-x: clip,用 clip 不用 hidden,因为 clip 保留 sticky 和 fixed);可点击文字不能换两行;带图的网格轨道用 minmax(0, 1fr) 不用裸 1fr;展示标题用 overflow-wrap: anywhere 防长词溢出。

排版纯洁,标题不斜体。标题和展示字永远是 roman(font-style: normal)。在直立标题里翻转一个词到斜体(Built to think)是最可靠的 AI 痕迹之一,整面斜体展示字也一样。强调用字重、accent 色、手绘下划线,斜体只留给正文段落内的强调。

安装与使用

Hallmark 的安装是一行命令:

npx skills add nutlope/hallmark

它会自动写入对应工具的配置目录:Claude Code 写到 ~/.claude/skills/hallmark/,Cursor 写到 .cursor/rules/hallmark.mdc(只写 SKILL.md 正文,去掉 frontmatter),Codex 写到 ~/.codex/skills/hallmark/(个人)或 .codex/skills/hallmark/(项目级)。MIT 协议,可以 fork、可以改、可以商用。

需要注意的是,Hallmark 是一个设计 skill,不是一个会自己跑的 agent。它的工作方式是改变 AI 编码助手的输出行为——当用户让 Claude Code 或 Cursor 设计页面时,加载了 Hallmark 的助手会先跑一遍上述流程再出代码。它不替代你写业务逻辑,只管 UI 生成的视觉和结构质量。

为什么这件事值得单独做一个项目

AI 生成代码这件事,2025 到 2026 年的主流叙事是"写得更多、写得更快"。GitHub Copilot SDK、各类 coding agent、vibe coding 的流行,都在把代码生产量推高。但生产量上去之后,质量的天花板反而更明显了——尤其是 UI 层,因为 UI 是最容易被训练数据"平均化"的地方。所有 SaaS 落地页的 hero、所有 v0 生成的 dashboard、所有 Cursor 吐出来的官网,长得越来越像。

Hallmark 的价值不在于它能生成多好看的页面,而在于它把"什么样的 UI 算 AI 味"这件事编码成了可执行的规则。58 道检查门、21 种 macrostructure、20 个主题,本质上是一份从大量 LLM 输出里反向总结出来的 anti-pattern 知识库。它让"拒绝默认输出"这件事从一句口号变成了一个流程。

对于经常用 AI 编码工具做前端的人来说,装一个 Hallmark 的成本几乎为零(一条命令),收益是每次生成 UI 时多一层反 AI 味的保险。对于做 AI 编码工具的人来说,Hallmark 的 anti-patterns 列表和 slop-test 门设计是一份现成的参考——它定义了"好的 AI 生成 UI"和"AI 味 UI"之间的边界在哪里。

项目地址在 github.com/Nutlope/hallmark,在线 demo 在 usehallmark.com,可以看到 20 个主题在不同 brief 下的实际输出效果。