Hallmark 横空出世：专门治疗 AI 网页设计千篇一律病，20 个主题 + 57 项反套路检查，拒绝模板味
Hallmark 横空出世：专门治疗 AI 网页设计千篇一律病，20 个主题 + 57 项反套路检查，拒绝模板味
所有用过 AI 写网页的人，肯定都遇到过这个问题： 不管你怎么描述，不管你换什么模型，不管你怎么调提示词，最后出来的页面永远都长得差不多。 都是那种一眼就能看出来的「AI 味」：
- 永远是居中的容器，1200px 宽，左右各 24px padding
- 永远是渐变按钮，圆角 8px 或者 12px
- 永远是三列卡片，带阴影，带 hover 上移效果
- 永远是那种无衬线字体，字重 400、600、700
- 配色永远是蓝白灰，或者紫白灰
- 排版永远是标题 3rem，副标题 1.5rem，正文 1rem
- 你甚至不用看内容，扫一眼就知道这是 AI 做的
所有人都在骂这个问题，但是没有人真正解决它。 直到昨天，Hallmark 横空出世。
GitHub 地址：https://github.com/Nutlope/hallmark 官网：https://www.usehallmark.com
这不是又一个提示词模板，不是又一个 UI 组件库，不是又一个设计系统。 这是一个专门为 Claude Code、Cursor、Codex 设计的网页设计技能。 它存在的唯一目的就是： 做出看起来完全不像 AI 生成的网页。
这个项目太狠了，狠到什么程度？ 它内置了 57 项「烂设计检查」，生成完页面之后，它会自己先检查一遍，如果发现有任何 AI 常见的烂大街套路，它自己就会先改掉，然后再把代码交给你。
先看效果：真的完全不一样
说再多都不如直接看效果。这是 Hallmark 生成的几个页面：
| 主题 | 风格 | 项目 |
|---|---|---|
| Hum | 温暖手工感，面包酵母应用 | 酸面团烘焙指导应用 |
| Cobalt | 硬朗工业风，高对比度 | 内容提取 API 产品页 |
| Carnival | 复古热闹，大字体撞色 | 独立唱片公司 EP 发布页 |
| Lumen | 科技未来感，半透明玻璃 | AI 推理工具官网 |
| Garden | 自然有机，手绘线条质感 | 蜂蜜农场官网 |
| Riso | 孔版印刷风，套色偏移 | 艺术印刷展活动页 |
| Custom | 完全定制，从零开始设计 | 卧铺火车票网站、修复咖啡馆 |
最神奇的是什么？ 你完全看不出来这些页面是同一个工具做出来的。 它们的布局不一样，字体不一样，配色逻辑不一样，间距不一样，交互细节不一样，甚至连设计的底层方法论都不一样。 两个不同主题的页面放在一起，你会觉得是两个完全不同的设计师做的。
而不是像其他 AI 生成的页面那样，只是换了个颜色的同一个模板。
这才是真正的突破。
它到底是怎么做到的？四层防护，层层围堵 AI 味
Hallmark 不是简单地给你一堆好看的参考图，也不是简单地在提示词里加一句"不要有 AI 味"。 它做了四层完整的防护体系，从根上把 AI 的那些默认套路全部堵死。
第一层：宏观结构优先，而不是组件优先
绝大多数 AI 做设计的顺序是： 我要做一个首页 → 先做个导航栏 → 然后做个 Hero → 然后做三个特性卡片 → 然后做个客户评价 → 然后做个 CTA → 然后做个页脚。 永远是这个顺序，永远是这个结构。
Hallmark 的顺序完全反过来： 接到需求之后，它第一件事不是想放什么组件。 它第一件事是选择这个页面的宏观结构（macrostructure）。
- 是全屏 bleed 结构？还是居中窄栏？
- 是左文右图？还是右文左图？还是上下？
- 是对称结构？还是不对称的偏移结构？
- 是大留白的极简风？还是信息密度很高的报纸风？
先定大的骨架，再往里面填内容。 这才是人类设计师的工作方式，而不是 AI 的工作方式。
第二层：20 个完整的设计主题，每个都有自己的规则
这是 Hallmark 最核心的部分。 它内置了 20 个完全不同的设计主题。 每个主题不是简单的配色和字体，而是一整套完整的设计规则。
比如一个主题里面会定义：
- 字体组合：标题用什么字体，正文用什么字体，注释用什么字体
- 字号阶梯：h1 多大，h2 多大，正文多大，行高多少，字重多少
- 间距系统：8px 基础？还是 10px？还是 16px？
- 圆角规则：全圆角？小圆角？还是根本没有圆角？
- 阴影风格：软阴影？硬阴影？长阴影？还是根本没有阴影？
- 按钮风格：实心？空心？下划线？还是纯文字按钮？
- 动画风格：快的？慢的？弹性的？还是根本没有动画？
- 网格系统：12 列？16 列？还是根本不用网格？
每个主题都有自己完整的、自洽的、和其他主题完全不一样的一整套规则。 一旦选定了主题，所有的设计决策都必须遵守这个主题的规则，不能乱来。
这就从根本上避免了 AI 那种"什么都来一点"的和稀泥设计。
第三层：57 项反烂设计检查（Slop Test Gates）
这是最狠的一层。
Hallmark 把所有 AI 最常见的、最烂大街的、最让人恶心的套路，全部列了出来，一共 57 项。 生成完代码之后，它会自己跑一遍这个检查清单，一项一项对照。
比如这些检查项：
❌ 禁止使用 8px、12px、16px 这种 AI 最喜欢的魔数圆角 ❌ 禁止所有按钮都加悬停上移 2px 的动画 ❌ 禁止所有卡片都加那种模糊到妈都认不出来的阴影 ❌ 禁止无缘无故的渐变背景 ❌ 禁止所有图标用同样的大小，同样的边距 ❌ 禁止三列布局永远等宽 ❌ 禁止行高永远是 1.5 ❌ 禁止字重永远是 400、600、700 的组合 ❌ 禁止所有间距都是 8 的倍数 ❌ 禁止永远居中对齐 ❌ 禁止永远用 1200px 的最大宽度 ❌ ...
一共 57 项。 任何一项没通过，它自己就会先改掉，然后再进入下一轮检查。
这才是真正的灵魂所在。 AI 之所以像 AI，就是因为它有太多没有道理的、没有经过思考的默认习惯。 Hallmark 就是把这些默认习惯，一个一个全部给你掰过来。
第四层：输出前的自我批判
最后，在把代码交给你之前，它还会做一次完整的自我批判。
它会自己问自己：
- 这个设计，有没有什么地方看起来像是 AI 做的？
- 有没有什么地方偷懒了，用了最省事最常见的方案？
- 有没有什么决策是没有道理的，只是因为 AI 见过无数次所以就这么做了？
- 如果我是一个人类设计师，我会这么做吗？
- 有没有什么地方可以再大胆一点，再不一样一点？
然后它会根据这个自我批判，再做最后一轮的修改。
四个命令模式，覆盖所有使用场景
Hallmark 不只是用来做新页面的。 它有四个非常完整的命令，覆盖了所有你能想到的使用场景。
| 命令 | 功能 |
|---|---|
| （默认） | 从零开始做新的 UI。自动选宏观结构，应用规则集，跑烂设计检查，最后交给你。 |
hallmark audit <target> |
审计你现有的代码，把所有符合 AI 烂套路的地方全部给你列出来，给你一个整改清单，但是不直接改。 |
hallmark redesign <target> |
彻底重新设计。保留文案、信息架构和品牌，但是用完全不同的设计指纹重新做一遍。 |
hallmark study <截图 或 URL> |
从你给的设计里提取 DNA：宏观结构、字体组合、色彩锚点。拒绝像素级抄袭，也拒绝付费模板。还可以输出一个可移植的 design.md 文件，交给其他任何 AI 工具用。 |
特别是最后这个 study 命令，想象力空间太大了。 以后你看到任何一个好看的网站，不需要自己去扒，不需要去看它的 CSS，直接扔给 Hallmark。 它会把那个网站的设计灵魂给你提取出来，然后用同样的设计语言去做你的页面。
而且它不是像素级抄，它抄的是神，不是形。
这件事真正的意义是什么？
Hallmark 这个项目，我觉得它的意义远不止是一个好用的设计工具这么简单。 它代表了一个非常重要的转向。
第一个转向：从「能力」到「品味」
前两年，所有的努力都在解决「AI 能不能做出来」的问题。 现在这个问题已经解决了，AI 什么都能做出来。 但是新的问题出现了：AI 做出来的东西，品味都太差了。 而且所有的 AI，品味都差得一模一样。
接下来的竞争，不再是谁能做出来，而是谁能做得好，谁能做得有品味，谁能做得不像 AI。 Hallmark 就是这个方向的第一个里程碑式的产品。
第二个转向：从「告诉 AI 做什么」到「告诉 AI 如何做」
以前我们用 AI，我们要告诉它我们要什么。 你要写得非常详细，非常具体，要写很长的提示词，要给很多参考图。 就像是在和一个完全没有自己想法的实习生说话。
但是现在不一样了。 有了 Hallmark 这样的技能，你不需要告诉它具体怎么设计。 你只需要说："用 Carnival 主题，给我做一个独立游戏的首页。" 剩下的所有设计决策，它会帮你做，而且做得比大多数人类设计师还要好。
这才是技能系统真正的威力。 它不是存储知识，它存储的是方法论，是品味，是做事的方式。
第三个转向：AI 创作终于开始有了风格和辨识度
以前所有的 AI 作品，不管是谁做的，不管用什么模型，看起来都差不多。 没有风格，没有辨识度，没有个人印记。
但是现在不一样了。 以后你可以有你自己的设计技能，有你自己的 57 项检查规则，有你自己的主题，有你自己的方法论。 AI 做出来的所有东西，都会带着你的风格，你的品味，你的印记。
别人一看就知道：哦，这是你做的。
这才是真正的创作。
写在最后
用了半天 Hallmark 之后，我最大的感受是： 终于，AI 做出来的东西，不再像是从同一个模子里刻出来的了。 终于，它可以做出有性格、有脾气、有风格、有灵魂的设计了。
很长一段时间以来，我们都在担心：AI 会不会把所有的设计都拉平，让整个互联网变得千篇一律，让所有的网站看起来都差不多。 这个担心不是没有道理的。 我们现在确实正在滑向那个方向。
但是 Hallmark 这样的项目告诉我们： 事情不一定会变成那个样子。 AI 也可以用来创造更多的多样性，更多的风格，更多的可能性。 AI 也可以帮助我们做出更有个性、更有灵魂、更有人味的东西。 只要我们知道怎么正确地指挥它。
而技能系统，就是那根指挥棒。
非常推荐所有经常用 AI 写前端的开发者，都去把这个技能装上。 装完之后，你再也回不去了。
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
本文首发于 AI人工智能时代，转载请注明出处。
