暴涨12.8k Star！一键去除 Claude Code \ Codex \ Cursor 生成网页的 AI 味！

yfj-unicorn

231人浏览 · 2026-07-25 18:28:48

yfj-unicorn · 2026-07-25 18:28:48 发布

你有没有发现这件事

打开任何一个「AI 生成的落地页」，你几乎能在 3 秒内认出它：

Inter 字体，一定是 Inter
紫色渐变背景，或者蓝紫色渐变
六张等高的卡片，整齐排一行
每个 hover 都有弹跳动效
Hero 区居中，大标题 + 一行副标题 + 两个 CTA 按钮

这就是所谓的「AI Slop」——AI 训练数据里出现频率最高的视觉惯用语，被所有大模型一遍遍复制。

我最近试了一个开源项目，专门来解决这个问题：Hallmark。

Hallmark 主图

Hallmark 是什么

简单说：一个给 Claude Code、Cursor、Codex 用的 design skill，专门拒绝生成看起来像 AI 做的界面。

项目由 Together AI 的 Hassan El Mghari（GitHub: Nutlope）开发，MIT 开源，上线后迅速走红——一天涨了 3,181 星，目前总 Star 数超过 12,500。

Hallmark 的核心逻辑是：不是帮你生成「更好看的」AI 界面，而是主动拒绝那些大模型被训练出来的视觉默认项。

它选一个宏观结构，配一套主题，跑 57 个 slop 检测门，再做一次 pre-emit 自评——这些都在你看到结果之前全部跑完。

为什么说 AI 生成的 UI 是「统计学平均值」

这是我觉得这个项目最值得思考的地方。

语言模型的本质是概率分布。没有约束时，它输出的是训练数据中最常见的模式——也就是「统计学上最安全的答案」。

问题在于，如果几千万个网站都是用类似工具生成的，这些「最安全的答案」就会互相强化，最后锁死在一个极其狭窄的视觉风格里。

Hallmark 的解法不是换个模型，而是在模型和用户之间插入一层质量门控。这个思路在工程上比「让模型变得有品味」务实得多。

57 个「Slop 检测门」是怎么工作的

这是 Hallmark 最核心的机制。

每次生成界面之前，Hallmark 会把草稿过一遍 57 个确定性检查项，覆盖六个维度：

维度	示例检测项
Philosophy	是否对每个元素都用了相同的 border-radius？
Hierarchy	是否存在六张等高的卡片排一行？
Execution	body 字体是不是 Inter-at-400？
Specificity	是否出现了深色背景 + 紫色渐变？
Restraint	是否每个 hover 都有 ease-in-out 弹跳？
Variety	整个页面的间距节奏是否完全相同？

每个门控都是二选一：通过，或者重新生成。

更聪明的地方在于，Hallmark 在跑 57 个门控之前，还会做一次「pre-emit self-critique」——让模型对草稿自评六个维度，任何一个维度低于 3 分，直接触发全面修订，不进入门控流程。

最后，每个生成的 HTML 文件里都有一段 CSS 注释，记录本次设计的宏观结构和自评分——可以直接看到模型的「推理痕迹」。

四个动词，四种用法

Hallmark 不只是一个生成工具，它暴露了四个操作：

默认：生成

给出一个 brief，Hallmark 会：

选一个宏观结构（21 种之一）
配一套主题（20 种之一）
生成自包含的 HTML + CSS
跑 57 个门控，不过关就重来

`hallmark audit <target>`：诊断

对现有代码做「AI Slop 体检」。只给诊断报告，不改一行代码。

把之前用 Claude 生成的落地页喂进去，给出了七条问题：Inter everywhere、六卡等高、紫色系渐变……准确率挺高。可以接入 CI 流程，每次发布前跑一遍，当成 ESLint 一样用。

`hallmark redesign <target>`：重建

保留文案、信息架构和品牌，彻底推倒视觉结构重建。适合「内容没问题，但长得太 AI 了」的情况。

`hallmark study <screenshot | URL>`：提取设计 DNA

这个是最意外的功能——给它一个你喜欢的网站截图或 URL，它会提取设计语言：宏观结构、字体搭配、颜色锚点……然后输出一个可移植的 design.md，可以直接给其他 AI 工具用。

不是像素级复制，是「设计语言迁移」。

20 种主题 × 21 种宏观结构

先说宏观结构（Macrostructure）——这是 Hallmark 区别于普通主题系统的关键。

21 种命名的页面骨架包括：Bento Grid、Marquee Hero、Long Document、Workbench、Asymmetric Split……Hallmark 根据 brief 的内容类型匹配宏观结构，而不是随机给。SaaS 定价页和开发者文档门户的骨架结构是不同的。

再说主题——Hallmark 的主题不是「换个颜色变量包」。每个主题都定义了完整的设计系统：具体字体栈、颜色锚点和派生调色板、间距节奏、动效特征。

来看几个实际的主题效果：

Bubble — 面包订阅 App，Hum 主题

Distil — 内容提取 API，Cobalt 主题

Cold Snap — 唱片厂牌，Carnival 主题

Cinder — AI 推理工具，Lumen 主题

同一个 brief，两次生成出来的不是「换了个颜色」——而是两个看起来像不同设计师做的不同网站。

Custom 模式：当 20 个主题都不够用

当 brief 携带的创意意图无法被任何现有主题匹配时，Hallmark 切换到 Custom 模式——从零设计调色板、字体和布局。同样跑 57 个门控，只是没有模板垫底。

The Cascadia Nightjar — 夜班卧铺车票，Custom 模式

The Mend Assembly — 修理咖啡馆宣传页，Custom 模式

更多案例：风格差异有多大

Tally — SaaS 产品页，modern-minimal 风格

Wayfare — 旅行预订，atmospheric 氛围感

NAJM — 摩洛哥时尚品牌

Hyperlane — 开发者基础设施平台

每个页面都是独立的 HTML + CSS，CSS 注释里记录了宏观结构。全部案例在 usehallmark.com 可以看，按 T 键可以在 22 个主题之间切换。

安装和使用

一行命令搞定：

npx skills add nutlope/hallmark

重新运行即可更新。也可以手动复制文件：

Claude Code：

~/.claude/skills/hallmark/

Cursor：

.cursor/rules/hallmark.mdc

Codex：

~/.codex/skills/hallmark/

装完之后不需要额外配置——下次让 agent 生成 UI 时提一句「用 hallmark」，57 个门控和自评机制自动跑起来。

说说局限性

有几点得实话实说：

1. 输出是 HTML + CSS，不是 React 组件

如果你的项目是 React/Vue 组件库，生成出来的 HTML 还要手动移植。这个时间成本可能抵消掉节省的。Hallmark 更适合落地页、营销页、原型验证，不适合 app 内的组件 UI。

2. 已有设计系统的项目用处有限

如果你的品牌、调色板、字体都已锁定，Hallmark 的 20 个主题反而是噪音。这种情况下，一个 DESIGN.md token 文件比 Hallmark 更有用。很多团队的最佳方案是两者组合：DESIGN.md 锁定 token，Hallmark 的门控来兜底那些 token 描述不到的 slop。

3. 57 个门控是手写规则，需要持续维护

随着模型训练数据变化，AI Slop 的具体表现形式也会变。今天能识别的 Inter + 紫色渐变，明天可能不再是主要问题。这套规则需要跟着演进。