Hallmark开源设计Skill：57道反模板检查治AI网页"脸盲症"
你用 Codex 或 Claude Code 生成过三个网页吗？
仔细看看——第一个是 SaaS 落地页，紫蓝渐变 Hero + 白色大标题 + 三张功能卡片 + "开始使用" CTA。第二个是个人作品集……等一下，也是紫蓝渐变 Hero + 三张卡片。第三个是电商首页——Hero 变成了产品图，但骨子里还是那套"Hero → 三列卖点 → CTA → 页脚"的节奏。
这不是你 prompt 写得不好。是训练数据里 90% 的网页都长这个骨架。
Hallmark 做的事：把这条默认路径堵死。不给你换皮肤——逼你换骨头。
截至 2026 年 7 月 16 日，8,519 颗星、440 fork，单日冲上 GitHub Trending 新增超 1,100 星。Together AI 的 Hassan El Mghari (@nutlope) 创建，MIT 开源。
AI 做的网页得了"脸盲症"——不是巧合，是训练数据的锅
LLM 的设计审美来自哪里？来自它见过的每一张网页。而互联网上最多的网页是什么——SaaS 模板、Tailwind 示例、Vercel 模板库、"现代落地页"套件。
这些模板有几个共同特征：
- 紫到蓝的渐变 Hero 区
- Inter 字体一用到底（它是最常见的安全选择）
- 全文居中布局
- 三列图标卡片（图标→标题→描述→点一下）
- 导航栏左边 logo + 右边 CTA 按钮
模型选这些不是因为它觉得好看，是因为选它们出错的概率最低。 这些模式在训练数据里出现的频率最高，生成它们最安全、最不容易被用户骂。结果就是——AI 生成的每个页面都是安全的，所以每个页面都长得一样。
"AI slop"（AI 模板味）说的不是质量差——是做出来的东西技术上没问题，但你一眼就知道是 AI 做的。因为没有指纹。没有设计师花了一下午纠结"这个页面该用不对称布局还是用粗野主义"的痕迹。
Hallmark 对这个问题的解法非常直接：把审美反馈写成可执行规则。 不再给模型一句模糊的"做高级一点"——给 57 道硬检查，不过关不许交付。
57 道 slop test：不是教 AI 变好，是阻止 AI 变懒
"Slop test" 这个名字起得好——它不是"quality test"（质量检查），是"slop test"（烂味检查）。质量是可以追求的，烂是可以拒绝的。
57 道检查覆盖五个维度：
排版纪律。 每页限制字体系列数量——显示字体和正文字体必须不同，不能用 Inter 同时做标题和正文。字体使用频率也纳入检查：太常见的那几个默认字体直接限用。
色彩与对比度。 强制使用单一强调色（OKLCH 色彩空间，感知均匀——等量数值变化产生等量视觉变化）。对比度必须符合 APCA 和 WCAG 标准。紫蓝渐变的 Hero？拒绝。
结构防御。 这是最核心的部分——自动侦测并阻止常见的"AI 导航栏指纹"和"AI 页脚指纹"。导航栏如果又出现了左边 logo + 右边 CTA 的布局，直接打回。全文居中？拒绝。三列图标卡片的 Hero 下方功能展示区？拒绝。
可访问性。 focus ring 一致性、边框宽度规范、错误状态的空间预留——这些细节 AI 生成代码时常被省略。
诚实文案。 这条我特别喜欢：用户没给的数据指标，不许编。不能自动生成"★★★★★ 10,000+ 用户好评"这种虚构的社会证明。一个设计工具把"不准编数字"写进硬规则——这份克制本身就很不 AI。
每道检查不是建议，是关卡。不过关，代码不交付。
四个动词覆盖完整设计链路
Hallmark 不只是"帮我生成一个页面"。它给了四个精准动词，每个对应一个独立设计场景：
build（默认）：你给一句 brief——"做一个面向技术团队的 API 监控工具的落地页，风格极简技术感"。Hallmark 先选宏观结构（骨架），再从 20 套主题里挑一套给骨架穿皮肤，然后跑 57 道 slop test，最后交付前再做一次自我批判——看还有没有 AI 味没挑干净。.hallmark/log.json 记录最近三次使用的宏观结构，下次生成会主动避开——确保连续生成的不同页面骨架真的不同。
audit：你已经有一个 AI 生成的页面，觉得它有 AI 味但说不清在哪。跑 audit——它对照反模式目录给你的代码打分，输出问题清单，不动你一行代码。先诊断，改不改、改哪些由你决定。
redesign：这个页面结构没法救了，但文案和信息架构是对的。跑 redesign——扔掉旧骨架，保留文案、品牌要素、信息层级，换一套完全不同的视觉指纹从头重建。换骨，不是换皮。
study：你看到一���很喜欢的设计，想参考它的 DNA 而不是复制它的像素。跑 study——甩给它截图或 URL，它提取宏观结构、字体搭配、色彩锚点，输出一份可移植的 design.md。你可以把这文件交给其他 AI 工具接着用。它明确拒绝像素级克隆和付费模板复制——学的是设计语言，不是偷别人的代码。
五种被 Hallmark 封杀的 AI 设计套路
英文社区总结得非常精准——AI 生成的页面有五个几乎一模一样的高频反模式，Hallmark 逐一锁死：
- 紫蓝渐变 Hero + 居中白字。训练数据里最多的高频模板，源自大量 SaaS 模板。Hallmark 检测到直接拒绝。
- 同一字体做显示和正文。Inter 是好正文字体，拿它做标题是懒——不是设计选择，是默认行为。Hallmark 要求 display font 和 body font 必须不同。
- 全文居中布局。居中消除版面张力，每一屏长一个样。Hallmark 强制不对称构图——左侧大标题、右侧产品截图、交错排版。
- 通用图标卡片功能展示。三列或四列图标网格，每个卡片图标+标题+两句描述——这是 AI 输出里统计意义上最高频的功能区段。Hallmark 拒绝。
- 标准粘性导航栏（左 logo + 右 CTA）。几千个 AI 生成的网站用同一套导航栏结构。Hallmark 把这种布局视为失败条件。
这五条不是随便选的——是"如果把 AI 生成的 100 个网页放在一起，你能靠这五个特征认出 90 个"的东西。
安装：一条命令，三个平台
npx skills add nutlope/hallmark重跑命令就是更新。安装后 Claude Code、Cursor、Codex 在下次会话启动时自动检测并加载。
手动安装路径：
- Codex：
~/.codex/skills/hallmark/（个人）或.codex/skills/hallmark/（项目） - Claude Code：
~/.claude/skills/hallmark/ - Cursor：把 SKILL.md 正文放进规则文件（
.cursor/rules/hallmark.mdc），去掉 frontmatter
建议的使用顺序：先 audit 一个已有页面看问题清单 → 挑一两个问题用 redesign 重做 → 确认规则符合团队审美后 → 再让它从零生成整站。一上来就 build 容易踩坑——你还没确认这个 Skill 的审美方向跟你合不合拍。
局限性：什么情况下别用 Hallmark
得诚实说清楚。
你用的是 React/Vue 组件系统。 Hallmark 输出独立 HTML + CSS。如果��的项目跑在组件框架上，需要额外把输出适配进组件系统——花在适配上的时间可能比直接手写还多。它更适合生成原型和独立落地页，不适合嵌入已有组件库。
你需要严格匹配已有品牌规范。 4pt 间距尺、OKLCH 配色规则、字体搭配约束——都是硬编码的，不可配置。如果客户品牌指南跟 Hallmark 的规则冲突，它输出的是"好看但不合规"的东西。
你只做一个一次性页面。 项目记忆系统（.hallmark/log.json）的价值在多页连续生成时才能体现——阻止重复使用同一套宏观结构。单页场景下这个机制的收益为零，完整 7 步生成流程和 57 道检查的开销有点过重。
你在 Windows 上用某些工具。 部分安装过程中可能存在路径兼容问题，尤其是 Cursor 的规则文件路径在 Windows 上的处理方式不同于 Mac/Linux。
它不是可访问性审计工具。 Hallmark 管的是"是不是一看就是 AI 做的"，不管"盲人能不能用"。在可访问性上它的检查只是基础项，真正的 a11y 审计需要专门工具。
谁该用、谁先别装
该用的：
- 经常用 Codex/Claude Code/Cursor 生成落地页和原型的开发者——你的每一页都有 AI 味，你感觉到了但说不清。装上，先跑一次 audit，你会第一次看清"AI 味"到底长什么样。
- 想把设计审查标准沉淀到 Git 仓库的产品团队——Hallmark 的价值不是生成代码，是把审美规则从"老大的口头反馈"变成了"可版本管理、可讨论、可执行的规则文件"。
- 需要从参考页面提取设计语言但不想被指责抄袭的设计师——study 动词提取的是 DNA 不是像素，输出的是 design.md 不是复制品。
- 维护多品牌网站的工作室——log.json 确保不同 brief 拿不同骨架，不会出现两个客户拿到同一套模板换色的尴尬。
先别装的：
- 你已经在用成熟的组件库系统（shadcn/ui + 设计 token）——Hallmark 输出独立 HTML/CSS，要适配进组件系统有额外成本。这种情况下更适合把 Hallmark 的 57 条规则当自查清单，而不是装进项目里跑。
- 你对设计完全不在意——如果你觉得"AI 生成的页面挺好看的啊"，Hallmark 带来的不是提升，是困惑。它假设你已经对 AI 默认设计不满意了。
- 你的项目跑在 Windows 上且不打算折腾路径配置——等 Cursor 文档和跨平台安装说明更成熟了再入。
看法
提示工程（Prompt Engineering）做的事是"说对话"。Hallmark 做的事是"不许说那几句话"。
这两个方向是相反的。市面上大多数 AI 设计工具在教你"怎么写 prompt 让 AI 出更好的设计"。Hallmark 教你的是"怎么设置路障让 AI 没法走那条最懒的路"。
57 道 slop test 真正的价值不是它堵住了 57 个坑——是你学会了一种思考方式：设计质量不是靠一句好 prompt 碰运气，是靠一套可执行、可复现、可版本管理的检查规则来保证。 你甚至不需要用 Hallmark——你可以照它的结构为自己品牌写一套规则：三个动词（build/audit/redesign）、一个参考文件夹、一个检查清单、一个 log 文件记录历史决策。
先装。先跑一次 audit。你可能会被它揪出来的问题数量惊到——然后你就再也回不去"直接让 AI 生成页面"了。
GitHub 地址：
评论(0)