GitHub 又火了个项目 Hallmark，专治 AI 写前端的”千篇一律”

GitHub 又火了个项目 Hallmark，专治 AI 写前端的”千篇一律”

导语

用 Claude Code、Cursor、v0 写过前端的同学应该都有这个体验：不管需求是什么，出来的东西总是一个味——紫色渐变背景、Inter 字体、圆角卡片、居中大标题、hero 配三个卖点再来个 CTA 和页脚。好看是好看，但一眼就知道是 AI 画的。最近 GitHub 上有个项目火了，叫 Hallmark，它的定位一句话说得很干脆：拒绝看起来像 AI 生成的。这篇我来拆一下它到底干了什么、怎么干的、以及前端工程师该怎么用。

一、AI 做的网页为什么都长一个样？

要治病，先得说清病根在哪。Hallmark 给出的答案很反直觉：敌人不是别人，正是 LLM 自己的训练先验。

每个大模型都在海量网页上训练过，它学到的”好网页”，就是那个被无数模板反复强化的平均值——紫色渐变、Inter 字体、圆角卡片、hero 三段式。你让它做设计，它不是不会，而是会得太”标准”，闭着眼睛就滑回那个训练进去的默认值。Hallmark 管这个叫 on-distribution defaults（分布内的默认答案）。

> AI 的丑，不是没审美，是审美被训练成了同一套。

Hallmark 的全部工作，就是主动否决这些默认值。它把这两年设计圈里”反 AI 味”的共识——排版、颜色、布局、动效、交互——编码成一整套规则，逼着模型在每个环节都绕开那个最顺手的标准答案。

二、它用四个动词覆盖了设计的完整链路

Hallmark 不是只有一个”生成”功能，它有四个动词，分别对应不同的工作场景：

### 1. Build（默认）—— 从零建新 UI

你正常提需求，它先按需求选一个宏观结构（整体骨架），再从 20 套主题里挑一套给骨架”穿衣服”，然后跑 57 道 slop 测试关卡逐条查毛病，最后在交付前再做一次自我批判，把剩下的 AI 味挑干净。

最关键的一点：它强制不同需求用不同结构。两个不同的 brief 做出来的页面，不会共用 “hero → 三个卖点 → CTA → 页脚” 这套模板。也就是说视觉可以调，但骨架必须不同。

去看看官方 examples 就明白了——摩洛哥时装品牌、里索印刷展、计量 SaaS、AI 推理工具，四个页面像四个不同的工作室做的，而不是同一个模板换了颜色。

### 2. Audit（审计）—— 给已有代码打分

hallmark audit 把你现有页面的代码拿来，对照反模式列表逐条打分。它只给你一份问题清单，不动你一行代码。先诊断，改不改你自己定。

清单里管得很细：字体字号的上限、可访问性的 focus ring、APCA 和 WCAG 的对比度、导航栏和页脚的”指纹”是不是又回到默认款了……其中有一条我特别喜欢，叫诚实文案：用户没给的数据指标，不许自己编。一个设计工具把”不准编数字”写进硬规则，这份克制本身就很反 AI。

### 3. Redesign（重设计）—— 换骨不换皮

hallmark redesign 更狠，直接扔掉旧结构，只保留文案、信息架构和品牌标识，然后换一套全新的指纹重建。这跟”换皮”不是一回事——结构变了，节奏变了，组件的声音变了，但品牌还在。

### 4. Study（学习）—— 抽离你欣赏的设计

最有意思的是这个：你甩给它一张设计截图或者一个网址，它不去做像素级克隆，而是抽取那套设计的 DNA——宏观结构、字体搭配、色彩锚点——并导出一份可移植的 design.md，交给别的 AI 工具接着用。

它明确拒绝：识别字体名称、抄付费模板、照搬人家像素。它要的是”学思路”，不是”抄作业”。

### 5. Custom（定制分支）—— 模板不够用就从头来

当一个需求带着某种创意意图、20 套主题里没有合适的，它就悄悄切换到从零设计分支：量身定制配色、字体和布局，同样过完 57 道关，底下没有任何模板兜底。普通需求碰不到它，但真正需要创意的时候，它不会拿模板糊弄你。

三、放进历史里看：和 design.md 是一枚硬币的两面

判断这类工具，要看它在同类里站什么位置。最值得对比的是 Google Labs 之前做的 design.md。

• design.md 是一份”设计系统的格式规范”，用 YAML 写精确的 token 值、用 markdown 写背后的理由。本质是一份数据契约——”这个色号必须是多少、这个间距必须是几”可以变成 CI 里跑的检查项。
• hallmark 走的是另一条路。它不给你精确的数值，它给的是一套品味和反模式——什么是 slop、怎么否决它、怎么让结构有变化。

一个从”精确值”入手，一个从”否决丑”入手。两者解的是同一个问题：AI 做设计时那套糟糕的默认值。

四、上手门槛几乎为零

安装只需要一行命令：

npx skills add nutlope/hallmark

想更新随时重跑。也可以手动把 SKILL.md 和 references/ 目录拷进你的工具配置目录：

• Claude Code：~/.claude/skills/hallmark/
• Cursor：.cursor/rules/hallmark.mdc
• Codex：~/.codex/skills/hallmark/

装完之后正常提需求就行，它会在背后接管审美。所有产出都是自包含的 HTML + CSS，每个页面还在 CSS 注释里盖了它用的宏观结构，方便你回看。

五、对前端工程师意味着什么？

说几个实在的判断：

1. 审美正在成为 AI 编程的下一个能力缺口

代码能写了、功能能跑了，但满屏一个味的 AI 网页正在成为新的视觉污染。当人人都能一键生成页面，”不像 AI 生成的”本身就变成了稀缺和溢价。谁能把”品味”这种最难量化的东西编码成规则喂给 agent，谁就抓住了一个真实需求。

2. 这类 skill 是开发者可以现成用的杠杆

对独立开发者和做 AI 产品的人来说，hallmark 这类 skill 是让你的东西从”一眼 AI”里跳出来的直接工具。它不要求你懂设计，只要一行命令装上，它替你管审美。

3. 对国内生态也有直接启发

通义灵码、Trae 这些国内 AI 编程工具同样在批量生产”一眼 AI”的界面。SKILL.md 这种规则集形式是通用的，把中文设计语境、国内审美偏好编码成一套本土化的”反 slop”规则，是一块还没什么人认真做的空地。

收尾

页面能不能一眼看出是 AI 做的，正在从一个无所谓的细节变成产品体面不体面的分水岭。Hallmark 提前把这件事做成了一行命令。

建议你去官网（usehallmark.com）逛一圈，看看那些 example，再决定自己要不要装。觉得有用的话，它的 GitHub（Nutlope/hallmark） 已经有 3800+ star 了，MIT 协议随便用。