Hallmark：给 AI 生成的网页装上"审美底线"

一个 32k star 的反 AI 味设计技能包，让 Claude Code / Codex 生成的页面不再千篇一律。

一、故事：从"三张一模一样的卡片"说起

如果你是前端工程师，很可能遇到过这样的场景：给 AI 助手一句"帮我做一个 SaaS 落地页"，几分钟后拿到一份能跑、却让人说不出哪里不对的页面——紫蓝渐变 hero、居中大标题、下面三个圆角卡片配 emoji 图标、底部四栏链接、一句"Revolutionize your workflow"，再加一个收集邮箱的表单。每一处单看都说得过去，连起来就是那种一眼"机器做的"的感觉。

Hallmark（作证章、品质印记之意）要解决的就是这件事。它不是组件库，也不是网站生成器，而是一套给 AI 编码助手用的设计纪律：把"看起来像 AI 生成的"那批特征写成一组可执行的门禁，让模型在交付代码前必须逐条过检。

作者 Nutlope 是 Together AI 团队的知名开源作者（RoomGPT、drawthings 一类的爆款项目都出自他手）。2026 年 7 月 15 日，Hallmark 冲上 GitHub Trending 全语言日榜第一，单日涨星 3181，此后一路涨到 3.2 万星，成为 2026 年增长最快的设计类开源项目之一。

二、它到底是怎么工作的

Hallmark 的核心资产是一份 18KB 的 SKILL.md 规则集加上约 30 份 references/ 配套文档，被打包成标准 Agent Skill，可以直接挂进 Claude Code、Codex CLI、Cursor、OpenCode 四种宿主：

npx skills add nutlope/hallmark -g

装好后 Claude Code 落在 ~/.claude/skills/hallmark，Codex 落在 ~/.agents/skills/hallmark，Cursor 和 OpenCode 会自动找到同一份副本。也可以作为 Claude Code 插件安装，或者直接 clone 仓库跑 node skills/hallmark/scripts/install.mjs——这个安装脚本会先校验每个主题与引用文件的有效性再复制。

它的规则体系分三层，可以理解成建筑规范里的不同强制级别：

Floor（底线，永不豁免）——16 条硬性规则。比如禁止 transition: all、禁止在标题里塞一个斜体单词、禁止在 html/body 上用 overflow-x: hidden、禁止 emoji 当图标、禁止紫蓝渐变、禁止卡片套卡片；每一个可交互元素必须有 :focus-visible，每一段动画必须有 prefers-reduced-motion 降级；禁止编造用户数、证言、Logo 墙这类虚假指标；hero 必须在 1280×800 内不滚动就能看全标题、一句话和主行动按钮。Floor 还要求所有颜色和字体必须走 :root 里的 token，不允许出现字面量。

Reflex（反射级默认）——模型最容易滑进去的套路，一旦要推翻必须在记录里写明理由。

Finish（工艺细节）——不阻塞交付，但每一条都要有回答。

三、48 种"材质"与结构多样性

Hallmark v2 最大的变化是引入了 48 套主题，每套主题不是配色方案，而是一份"材质"——有自己的纸张质感、字体、色彩、表面、组件与纹理。主题目录里每个主题是一个不超过 8KB 的 Markdown 文件，旁边配一张成品页面截图。

主题之外还有 21 种命名"宏观结构"（macrostructure）——Bento Grid、Marquee Hero、Stat-Led、Long Document、Manifesto 等。这些结构描述的是骨架而非配色：标题放哪、什么做分隔、按钮语气、hero 图怎么处理。用结构做多样性，比只换颜色更能防止连续几次生成收敛到同一个模板。

四、四个动词与完整工作流

一次完整构建的流程是：预检（读项目字体、配色、框架、已锁定的 design.md，然后一次性索要素材——照片、真实数字、证言、Logo）→ 发牌（theme.mjs deal 给出三个契合提示词的主题，draw 依据页面职责给出解剖结构）→ 单独构建 hero 并冷启动评审 → 其余页面 → sloplint.mjs --render 在 8 个宽度下检查，最后由一个全新上下文的 subagent 做"陌生眼睛"复审。

重设计模式下有两条硬约束：sloplint --before 会先记录下所有链接、字段、事件处理器和标题，--kept 会在重做后核对，任何一项丢失就让这次重设计判定失败——这是防止 AI 改版时把功能改坏的护栏。

五、真实摄影与"不编造"

Hallmark 明确拒绝使用 Unsplash / Pexels / Pixabay 的图库，理由是这些站点的条款禁止 AI 工具挑选其图片。它内置 755 张来自 Wikimedia Commons 的开放许可照片索引（photos.json，仅索引不含图片文件，每张各持 CC0 / 公有领域 / CC BY / CC BY-SA 许可），并按主题选取、在页面上逐张署名。

这条规则背后是一个更大的原则：事实不可推断。没给的数字、证言、Logo 就是不存在，图片没给就用占位图并标明是占位，绝不编造。pre-flight 阶段会主动向用户索要真实素材，这与"AI 默认爱编数字"的倾向正面对抗。

六、上手门槛与实际成本

• 硬门槛只有 Node.js 18+，一条 npx skills add 命令完成安装。
• 浏览器渲染检查（sloplint --render、截图）额外需要 npm i -g puppeteer-core 和 Chrome；没装也不影响静态检查。
• 仓库自建站点用 python3 -m http.server --directory site 4173 就能本地跑起来。

代价方面，第三方评测普遍提到它很吃 token：一次构建要读大量规则文档，落地成本明显高于"随便让模型写个 landing page"。它也更适合落地页与品牌页，对复杂的后台仪表盘覆盖有限——Roadmap 里"App screens in depth"仍在规划中。

七、争议与局限

最直接的质疑来自生态内部：一位评测者指出，Hallmark 的强主张本身可能变成新的 AI slop——如果全世界都用同一套 48 主题 + 21 结构，"反同质化"会不会演变成"新的统一模板"？项目自己的 ROADMAP 也承认了这个张力，把"决定最新的生成默认值"（米白纸、胶囊按钮、近黑加一个酸性强调色）列为首要议题。

另一层局限是强主张的代价。它对标题、间距、字距、容器宽度的规定非常细，配合 token 强制约束，能做出高质量页面，但也意味着接入团队要接受一套外来设计语言；改一个颜色得动 :root token，硬编码直接被 lint 拦下。

还有一个工程事实值得留意：仓库规模已达 232MB，含 45 万行字符的 photos.json、23 万字符的 sloplint.mjs 和 10 万字符的渲染器——这些是体积换能力的典型取舍，clone 仓库前心里要有数。

八、行业意义

Hallmark 代表的不是单点工具，而是一个正在成形的**"AI 生成内容的质量门禁"**品类：当模型输出越来越廉价、越来越同质，价值就从"生成"转移到"约束与验收"。同一时间窗内，GitHub Trending 上还出现了 pbakaus/impeccable（设计批评与打磨）、archify（架构文档）等一批同类项目——它们共同指向一个事实：AI 辅助开发的下半场，瓶颈从"能不能写出来"转向"写出来的东西配不配叫作品"。

Together AI 官方把这套方法沉淀成可复用的 Agent Skill 并开源，本身也是一种策略：把内部的设计质量标准变成生态入口。截至目前，项目 MIT 协议、约 3.2 万星、1646 个 fork，贡献者以作者团队为主（GitHub API 显示 5 名贡献者，主力贡献 282 次提交），代码维护集中在 skills/hallmark/scripts/（约 50 万字符的 linter 与渲染器）和 references/（规则库）两块。

对于正在用 AI 做前端交付的团队，Hallmark 给出的答案很直接：不要只教模型怎么做得更漂亮，要教它哪些东西绝对不能出现，并且用自动化把它守住。