如果你最近用 AI 写过前端,大概率会有这种崩溃时刻:
“这玩意儿怎么又是紫色渐变 + 居中英雄区 + 三个等宽卡片 + 玻璃拟态?”
“Ctrl+C、Ctrl+V 到第四个项目,发现还是同一个调调……”
别急。GitHub 周榜第二、短短 1.27 万星、周增长 8572 的
Nutlope/hallmark来了,它就是来干掉这一切的。一句话:Anti-AI-slop。设计不止能交差,还能不油腻。
一、这个项目的故事:一个"图形天才"的愤怒
hallmark的作者是Nutlope(Hassan El Mghari),如果你混 AI 圈,这个名字你一定不陌生。
他是开源界的老熟人了——他做过的项目随手一列就是:
- roomGPT(10.7k Star):上传照片,AI 给你"梦想房间"
- GFPGAN(4.4k Star):老照片修复神器
- together-art(6.9k Star):开源版的 Claude Artifacts
- logoCreator(7k Star):免费开源 logo 生成器
图形领域出身的他,受够了 AI 生成 UI 的「样板戏」。
于是 2026 年 4 月 28 日,hallmark正式开源。它的目标极其简单粗暴:
“refuses to look AI-generated.”—— 拒绝看起来像 AI 生成的。
短短 2 个多月,GitHub Star 飙到 12,759+,周增长 8,572,稳坐 GitHub 周榜第二。
它不是又一个换皮前端框架,也不是又一个新的设计系统。
它是一套 AI 编码的"审美纪律"。
二、痛点:为什么你 AI 写的 UI 总"一眼假"?
先来看看 AI 生成 UI 的「四大通病」,每一条都戳中痛点:
1. 风格没有判断同样是后台系统、金融产品、医疗产品、电商页面,视觉语言其实完全不一样。但 AI 生成结果,总是一套模板到处套。
2. 配色字体很随意页面结构对了,但整体气质不对。你想做企业级产品,它给你来一套花哨渐变;你想做消费类产品,它给你来一套过于冷静的后台风。
3. 只会"拼组件",不会"做体验"按钮有了,表单有了,导航也有了,但细节没想过:触控热区够不够大?焦点态清不清楚?错误反馈是不是离用户太远?动画是不是只在"装饰"而不是传递状态?
4. 跨技术栈复用能力差今天用 React,明天用 Vue,后天又想 React Native 或 SwiftUI,设计建议经常断层。
说到底:AI 做 UI 最大的短板,从来不是 JSX、CSS 或 Tailwind 写不出来,而是它缺一套系统化的设计判断逻辑。
而hallmark,恰好补上了这一环。
三、Hallmark 的设计哲学:AI 编码的"审美纪律"
打开hallmark的 README,你会看到一段非常"反 LLM"的话:
Hallmark picks a macrostructure for the brief, dresses it in one of twenty themes, runs fifty-seven slop-test gates plus a pre-emit self-critique, and refuses the on-distribution defaults every LLM was trained into. Two pages by Hallmark for two different briefs feel like different sites, not colour-swaps of the same template.
翻译成人话:
- 为 brief 选择一种宏观结构
- 套上一种主题(共 20 种)
- 跑过57 个 slop-test 闸门
- 输出前自我批评
- 拒绝所有 LLM 默认会输出的"高分布值"
两个不同 brief 出来的页面,看起来像两个不同的网站,而不是同一套模板换了配色。
这才是它最核心的承诺——不是"看起来还行",而是"看起来像真人设计师做的"。
四、四大动词:不止"做新页面"
hallmark的设计非常有产品感,它不是只有一个命令,而是定义了四个动词:
| 动词 | 作用 |
|---|---|
| build | 创建一个新 UI,挑选宏观结构,套用规则集,跑 slop-test |
| audit | 审视一段已有 UI,给出 0-100 的"AI 味"评分,并指明具体哪条 slop 规则被触发 |
| redress | 把一段"一眼 AI"的 UI,改造成符合 hallmark 标准的"有审美"版本 |
| extract | 从一段 UI 中提取宏观结构与主题 DNA,用于生成新页面时复用 |
一句话总结:hallmark不是只会"做新页面",它能审计、改造、复刻——形成完整的设计工作闭环。
五、20 套主题:告别"同质化"从这一行命令开始
hallmark另一个让我惊艳的设计,是它预置了20 套主题。
这 20 套主题覆盖了从极简到华丽、从复古到未来感的全光谱:
- 严肃稳重类:适合金融、企业、SaaS 后台
- 活力消费类:适合电商、内容、社交
- 极致克制类:适合工具、效率、个人作品集
- 品牌氛围类:适合品牌官网、营销活动
每套主题都不只是"换个色",而是包括配色 + 字体 + 圆角 + 间距 + 动效曲线的完整设计系统。
按 README 上说:“press T to cycle”——在 demo 里按 T 键就能在 20 套主题间循环切换,看你的设计在不同主题下的呈现。
这一招太狠了。
以前你做一版 UI,顶多换 3 套配色就已经累死。 现在按 T 键,20 套主题任你选,而且每一套都是"有审美"的那一档。
六、57 个 Slop-Test 闸门:把"AI 味"量化
hallmark最硬核的部分,是它定义了57 个 “slop-test” 闸门。
什么是 slop?
AI slop= AI 工具生成的视频、图像、音频、文本,或者混合形式。The Conversation 给的定义。
放在 UI 设计领域,slop 就是:
- 紫色渐变 hero 区
- Inter 字体 + slate-900 配色
- 居中三栏卡片
- 玻璃拟态弹窗
- 360 度无限旋转的微动效
- 圆角 16px 的按钮
- emoji 装饰的标题
- “Learn More →” 风格的 CTA
- ……
hallmark把这些烂大街的「AI 默认值」逐条编码成 57 条可执行的检测规则。
任何输出在交付前,都要先过这 57 道闸门:
- 哪条没过?
- 扣多少分?
- 怎么改?
最终你拿到的不是"AI 写完没检查"的半成品,而是"AI 反复自审后才出"的成品。
它自己就能拒绝 on-distribution defaults(LLM 默认会输出那些"高分布值",但 hallmark 明确告诉它:别这么干)。
七、四步上手:从 0 到 1 体验 hallmark
第一步:确认你的环境
hallmark适配三大主流 AI 编程工具:
- Claude Code
- Cursor
- Codex
(注:本 Skill 主要服务通用 AI 编程场景,OpenClaw 用户可通过 Claude Code 子代理或 Codex 兼容层使用。)
第二步:一行命令安装
打开终端,在你的项目根目录执行:
npx skills add Nutlope/hallmark --skill hallmark这会自动识别你本地已安装的 AI 代理,并把 hallmark 规则文件注入对应位置。
第三步:用 build 动词做新页面
在 Claude Code / Cursor / Codex 里直接说:
“用 hallmark 给我做一个 SaaS 后台的登录页,要求严肃商务风”
Hallmark 会:
- 选一个宏观结构(可能是「双栏登录 + 品牌叙事」)
- 套上严肃商务风主题(可能是「海军蓝 + 衬线标题 + 大留白」)
- 跑 57 道 slop-test
- 自审一次
- 输出
第四步:用 audit 动词给旧页面打分
如果你已经有一版 AI 写的 UI,想看看它有多少"AI 味":
“用 hallmark 审计一下我现在的 home page,告诉我多少分”
Hallmark 会逐条告诉你:
- 总体得分(0-100,越低越像 AI 写的)
- 触发了哪几条 slop 规则
- 具体哪些组件/区块需要改
- 怎么改
八、四大核心亮点:为什么它能火?
总结一下,hallmark之所以两周就能登顶 GitHub 周榜第二,靠的是这四点:
亮点 1:产品级抽象,不是技术级抽象
很多 Skill 都是技术级抽象(给你一堆 API、规则、钩子),但hallmark是产品级抽象:
- 4 个动词(build/audit/redress/extract),清晰明了
- 20 套主题,所见即所得
- 57 道闸门,黑盒透明
任何用户——哪怕是产品经理、设计师,不需要懂一行代码,都能用。
亮点 2:把"审美"从玄学变成可执行的规则
AI 写 UI 最难的不是写代码,而是判断"这个页面好不好看"。
hallmark把"好看"拆解成了 20 主题 × 57 闸门 × 4 动词的可执行规则集。
审美不再是玄学,而是一份工程化清单。
亮点 3:可审计,可量化,告别主观
传统设计评审:“我觉得这个页面有点假”——设计师说不上来,产品经理也不服气。
Hallmark 的 audit 动词给出0-100 的客观分,以及具体哪条规则被触发。
设计评审第一次有了"分数"。
亮点 4:跨技术栈,跨工具
无论你用 React、Vue、SwiftUI、React Native,hallmark 输出的设计判断都是一致的——它管的不是"怎么写代码",而是"这个页面应该长什么样"。
设计系统与具体技术栈解耦,这是真正的前端架构级抽象。
九、同类对比:hallmark vs 其他设计类 Skill
市面上做"AI 设计"的不止 hallmark 一家,我把它们放在一起对比:
| Skill / 工具 | 核心定位 | 优势 | 劣势 |
|---|---|---|---|
| hallmark | AI 编码的反 AI-slop 审美纪律 | 4 动词设计、20 主题、57 闸门、可审计 | 主要服务 Claude Code/Cursor/Codex 三大工具 |
| Taste-Skill | 便携式高端审美技能包 | 30k+ Star,历史更久 | 抽象层次较散,主题数量没 hallmark 系统化 |
| frontend-design | 生产级前端设计,避免 AI slop | 偏实践建议、组件级 | 没有 hallmark 的可审计机制 |
| ui-ux-pro-max | UI/UX 设计的"百科全书" | 知识面广 | 偏静态知识库,缺少 hallmark 这种"反 AI 味"的强针对性 |
| vercel-react-best-practices | Vercel 官方背书的 React 性能 | 性能优化强 | 重点是性能而非审美 |
一句话总结:
- Taste-Skill 是 “美学通识课”
- hallmark 是 “AI 编码反 slop 实战课”
- vercel-react-best-practices 是 “性能工程课”
- ui-ux-pro-max 是 “设计工具书”
如果你的痛点很明确——“AI 写的 UI 一眼假”——那 hallmark 就是目前最对症的那个。
十、避坑指南:用 hallmark 必知的三件事
坑 1:不要把 hallmark 当"自动设计器"
hallmark 不是"按一个按钮就有完美设计"的魔法棒。它是一套规则集 + 工作流,需要你:
- 写好 brief(对产品、用户、品牌的清晰描述)
- 在四个动词里选对当前阶段该用的
- 必要时自己微调主题和规则
坑 2:不要忽略 audit 报告
很多人装上 hallmark 只用 build,不用 audit。这就像只做体检不看病。
build 之后一定要 audit,看哪些 slop 规则被触发了。这是 hallmark 给你最大的价值——可量化的反馈。
坑 3:别忘了主题可以叠加
20 套主题是"基础款",hallmark 允许你:
- 提取已有 UI 的 DNA(extract 动词)
- 改造成新主题(redress 动词)
- 跨项目复用主题
真正的高手,会建立自己团队的"主题库",而不是只用预置那 20 套。
十一、写在最后:AI 编程的下半场,审美也是工程
2026 年的 AI 编程圈,已经走过三个阶段:
- 能不能写?——2023 年,大家问 AI 能不能写代码
- 写得对不对?——2024-2025 年,大家问 AI 写的代码对不对
- 写得好不好?——2026 年,大家开始问 AI 写的东西好不好
好不好这个阶段,有两个维度:
- 性能好不好(vercel-react-best-practices 解决的)
- 审美好不好(hallmark 解决的)
hallmark的横空出世,标志着 AI 编程进入「审美工程化」阶段。
它不是又一个"AI 工具",而是给整个 AI 编程行业立下了审美纪律。
你装它不是为了"换皮",而是为了让你的 AI 写出来的东西不再"一眼假"。
如果你受够了 AI 写 UI 的样板戏,装上它。 如果你想给团队立一套"AI 时代设计规范",研究它。 如果你想跟上 2026 年 AI 编程的最新趋势,clone 它。
GitHub 地址:https://github.com/Nutlope/hallmark
安装命令:
npx skills add Nutlope/hallmark --skill hallmark记住三个数字:4 个动词、20 套主题、57 道闸门。
下次你 AI 写 UI,它再给你整出紫色渐变 hero,直接 audit 一下,让分数告诉你真相。
设计,也是一种工程。
