Hallmark：让 Claude Code、Cursor、Codex 生成的网站不再一眼看出是 AI 做的

大家好，这里是「代码简单说」。

现在使用 Claude Code、Cursor、Codex 这类 AI 编程工具开发前端项目，已经越来越方便。输入一句需求，AI 就能帮你快速生成完整的页面。

但很多人会发现一个问题：

AI 生成的网站越来越像了。

常见的圆角卡片、渐变背景、居中的 Hero、大号标题、紫蓝色按钮、统一的 SaaS 布局……功能可能没问题，但从设计上看，经常有一种明显的“AI 味”。

最近发现一个比较有意思的开源项目：Hallmark。

它并不是一个普通的 UI 组件库，而是一套专门用于 Claude Code、Cursor 和 Codex 的设计 Skill。

它的目标非常直接：

让 AI 生成的页面拒绝看起来像 AI 生成的。

项目由 Together AI 制作，目前提供在线 Demo、21 套主题以及 4 种核心操作。

项目地址：

GitHub： https://github.com/nutlope/hallmark
在线 Demo： https://www.usehallmark.com

---

一、Hallmark 是什么？

Hallmark 本质上是一套面向 AI Coding Agent 的 Web Design Skill。

它不是简单告诉 AI：

“帮我做得漂亮一点。”

而是通过一套预定义的设计规则、主题体系、页面结构策略和反模板化检查机制，让 AI 在生成页面时主动避免那些非常典型的 AI UI 模式。

项目介绍中有一个很核心的概念：

slop test

也就是专门检查页面中是否存在大量典型的“AI 生成感”。

Hallmark 在生成页面之后，会运行多达 57 个 slop-test 检查项，同时还会执行一次生成前的自我审查。

最终目的就是避免：

• 所有页面结构都一样
• 所有按钮都长得一样
• 所有产品都是相同的 SaaS 模板
• 页面只是换了颜色
• Hero 区域高度和布局高度雷同
• AI 喜欢滥用的渐变、圆角和卡片堆叠
• 缺乏真正的视觉识别度

Hallmark 的理念可以简单理解为：

不是让 AI 学会一个模板，而是让 AI 学会不要总用同一个模板。

---

二、为什么 AI 生成的网站越来越像？

这个问题其实非常有意思。

目前大量 AI Coding 工具训练数据中包含了海量互联网网页、开源项目、组件库和设计案例。

因此，当你让 AI：

“设计一个现代化 SaaS 首页”

AI 很容易选择统计意义上最常见的答案。

例如：

顶部 Navbar
↓
Hero 标题
↓
副标题
↓
两个 CTA 按钮
↓
产品截图
↓
三列功能卡片
↓
客户 Logo
↓
价格表
↓
FAQ
↓
Footer

这套结构当然没有问题。

问题是：

所有网站都这么做，就没有辨识度了。

再配上一些典型元素：

border-radius: 16px;
gradient background;
glassmorphism;
purple / blue accent;
soft shadow;
huge headline;
three-column cards;

最终就会产生一种非常熟悉的视觉风格。

Hallmark 针对的恰恰就是这个问题。

---

三、Hallmark 的核心特点

Hallmark 最有意思的地方，不是“有多少主题”，而是它试图让 页面结构、视觉语言和内容类型之间建立关联。

官方目前提供：

21 种主题

同时支持多种页面宏观结构。

也就是说，AI 在拿到一个 Brief 之后，并不是固定套模板，而是会根据产品内容选择：

主题
+
页面结构
+
字体组合
+
配色
+
视觉元素
+
布局方式

最终组合出一个更具有独立设计指纹的页面。

因此两个完全不同的项目，不应该只是：

同一个页面 + 换一种颜色。

而应该真正拥有不同的：

Design Fingerprint

也就是设计指纹。

---

四、四种核心操作

Hallmark 目前主要提供四个动作。

1、默认模式：Build

这是最常用的模式。

当你直接让 Hallmark 创建页面时，它会：

读取 Brief
↓
选择 Macrostructure
↓
选择 Theme
↓
应用设计规则
↓
生成页面
↓
运行 Slop Test
↓
进行自我检查
↓
输出代码

也就是说，它并不是“直接生成”。

而是：

生成 → 检查 → 修正设计问题

这也是 Hallmark 与普通 Prompt 的一个重要区别。

---

2、hallmark audit

命令：

hallmark audit <target>

这个功能主要用于：

检查已经存在的页面。

它不会直接修改代码，而是给出一份问题清单。

例如可以理解成：

页面检查
├── Hero 结构过于常见
├── CTA 样式具有明显模板化特征
├── 卡片数量过多
├── 间距系统缺少层次
├── 色彩锚点不足
├── 页面结构缺乏品牌个性
└── AI Anti-pattern 命中若干项

因此它更类似一个：

AI UI 设计审计工具。

---

五、hallmark redesign

命令：

hallmark redesign <target>

这个功能会更加激进。

它不是在原有页面上：

改一下颜色、换一下按钮。

而是：

重新设计页面结构。

同时保留：

• 文案
• 信息架构
• 品牌信息

但重新设计：

页面布局
视觉层级
主题
字体
颜色
模块排列
Hero 结构
CTA 位置
内容组织方式

可以理解为：

保留产品，不保留原来的视觉模板。

这对于已经存在一个明显“AI 风格”的页面尤其有用。

---

六、hallmark study：从优秀设计中提取 DNA

另外一个比较有意思的功能是：

hallmark study <screenshot | URL>

这个命令不是让 AI 完全复制一个网页。

Hallmark 强调的是：

Extract the DNA

也就是提取设计 DNA。

例如可以分析：

Macrostructure
Type Pairing
Colour Anchor
Layout Rhythm
Visual Hierarchy

最终得到的是：

设计规律，而不是像素级复制。

这其实非常重要。

因为：

学习一个优秀设计的结构逻辑

和

直接复制一个网页

是完全不同的两件事情。

Hallmark 明确拒绝：

• Pixel Clone
• Paid Template Clone

而是尝试提取：

设计方法。

---

七、21 套主题

Hallmark 当前提供 21 套主题体系。

从项目示例来看，不同主题之间的视觉差异比较明显。

例如：

Bubble

适合：

• 食品
• 生活方式
• 轻量级产品
• 消费产品

示例项目：

Bubble

定位是一个酸面包应用。

---

Cobalt

整体更加偏：

• 技术
• API
• 开发者工具
• 数据产品

示例：

Distil

Extraction API。

---

Carnival

视觉表达更加大胆。

示例：

Cold Snap

是一个唱片厂牌 EP 项目。

它与典型 SaaS 页面完全不是一个视觉体系。

---

Lumen

更加适合：

• AI 产品
• 推理工具
• 技术产品

例如：

Cinder

AI reasoning tool。

---

除此之外，还有：

Garden
Riso
Press
Tally
Wayfare
NAJM
Hyperlane
Custom
...

不同主题会尝试形成完全不同的视觉语言。

这意味着：

主题并不仅仅是颜色变化。

---

八、Custom：没有合适主题，就自己设计

Hallmark 新增加了一个比较重要的能力：

Custom

当项目需求和已有主题都不匹配的时候，Hallmark 不会强行从 21 个主题中选择。

而是进入 Custom 分支。

此时 AI 可以重新设计：

Palette
Typography
Layout
Visual Language
Macrostructure

也就是说：

从零建立一套设计系统。

例如官方展示的：

The Cascadia Nightjar

一个卧铺列车票务页面。

以及：

The Mend Assembly

一个维修咖啡馆相关页面。

这种类型的网站本身就不适合套标准 SaaS 模板。

因此 Custom 模式更适合：

• 品牌官网
• 活动网站
• 艺术类项目
• 编辑类网站
• 文化项目
• 小众产品
• 创意项目

---

九、Hallmark 的 57 个 Slop Test

这是整个项目比较核心的一部分。

很多 AI 设计工具最大的特点就是：

能够快速生成漂亮页面。

但“漂亮”并不等于“有设计”。

例如 AI 特别喜欢：

border-radius: 16px;

然后：

一张卡片
一张卡片
一张卡片
一张卡片

接着：

蓝紫色渐变
+
巨大标题
+
两个按钮
+
阴影

从视觉上看当然没有问题。

但继续生成 20 个网站之后：

全部长一样。

Hallmark 的思路是增加反向限制。

也就是：

AI 不仅要知道应该做什么，还要知道什么不应该做。

因此 Hallmark 会针对页面进行大量反模式检查。

最终通过：

57 个 Slop Test Gates
+
Pre-emit Self-Critique

共同完成最终审查。

这里的核心思想其实非常值得借鉴：

设计质量有时候来自限制，而不是来自更多生成。

---

十、不同 Brief，应该得到不同形状

Hallmark 官方展示了一系列页面。

例如：

Sourdough App
Extraction API
Record Label
AI Tool
Tea Menu
Honey Farm
Print Fair
Type Studio
SaaS
Travel
Fashion
Developer Infrastructure

这些产品的业务属性完全不同。

如果使用传统 AI Prompt，很容易得到：

“现代化互联网产品官网”

然后全部套同一种结构。

而 Hallmark 的目标是让：

产品是什么

影响：

网站应该长什么样。

比如：

Honey Farm

自然可以更偏：

Organic
Editorial
Natural
Warm

而：

Developer Infrastructure

可能更适合：

Technical
Structured
Dense
Systematic

这才是真正意义上的：

Design follows context。

---

十一、安装 Hallmark

Hallmark 最大的优势之一是安装非常简单。

直接执行：

npx skills add nutlope/hallmark

即可。

安装完成以后，也可以再次执行这个命令进行更新。

---

十二、Claude Code 安装

如果使用 Claude Code，可以将相关文件放入：

~/.claude/skills/hallmark/

核心文件包括：

SKILL.md
references/

其中：

SKILL.md

是核心规则。

而：

references/

则存放具体的设计参考规则。

---

十三、Cursor 安装

Cursor 可以将 Hallmark 作为规则使用。

官方提供的路径：

.cursor/rules/hallmark.mdc

需要注意：

这里使用的是 SKILL.md 的主体内容。

同时：

不要保留 frontmatter。

也就是说，需要将规则内容转换成 Cursor 可以直接使用的 Rule。

---

十四、Codex 安装

如果使用 Codex，可以放在：

~/.codex/skills/hallmark/

这是个人级 Skill。

如果希望只对当前项目生效，则可以放：

.codex/skills/hallmark/

也就是：

Project Scoped Skill。

这样就可以针对不同项目使用不同设计规则。

---

十五、Hallmark 项目目录结构

从项目结构来看，可以重点关注：

hallmark/
├── skills/
│   └── hallmark/
│       ├── SKILL.md
│       └── references/
├── docs/
│   ├── recipes.md
│   └── study-examples.md
├── site/
│   ├── _tests/
│   └── ...
└── ...

其中最关键的部分：

SKILL.md

核心设计规则。

references/

更加详细的设计规则和主题参考。

recipes.md

实际设计案例。

study-examples.md

Study 模式的使用示例。

---

十六、为什么 Hallmark 值得关注？

我认为 Hallmark 最值得关注的地方，不是它有 21 个主题。

而是它代表了一种很有意思的 AI Coding 思路：

不要只给 AI 更多能力，也要给 AI 更多约束。

过去我们写 Prompt：

帮我设计一个高级、现代、美观的网站。

AI 的理解非常宽泛。

最终往往会返回：

Modern SaaS
Gradient
Rounded Cards
Huge Hero
Three Columns

Hallmark 则开始反过来告诉 AI：

不要这样做。

例如：

不要使用常见模板
不要所有页面采用相同结构
不要简单换色
不要堆叠相同卡片
不要直接克隆设计
需要建立设计指纹
需要根据 Brief 选择结构
生成之后必须进行 Anti-pattern 检查

这其实是一种：

Negative Constraint Prompting

也可以理解为：

通过明确禁止某些默认行为，让模型跳出训练数据中最常见的统计答案。

---

十七、对前端开发者有什么意义？

对于前端开发者来说，这类 Skill 的价值非常明显。

以前：

产品经理
↓
设计稿
↓
前端开发

现在越来越多项目变成：

需求
↓
AI
↓
页面
↓
前端调整

问题是 AI 虽然可以快速生成：

HTML
CSS
Vue
React
Tailwind

但设计能力依然是很多项目的短板。

Hallmark 这种工具，实际上是在：

补足 AI Coding 的 Design Layer。

于是 AI Coding 可以逐渐变成：

需求理解
+
产品结构
+
设计系统
+
视觉设计
+
代码实现
+
自动审查

而不是单纯：

Prompt → React

---

十八、Hallmark 适合哪些场景？

我认为以下场景比较适合。

1、AI 官网

例如：

AI SaaS
AI Agent
AI API
AI 工具
模型平台
开发者工具

---

2、个人项目

例如：

独立开发者产品
开源项目
GitHub 项目官网
工具站
博客
个人主页

---

3、快速制作 Landing Page

尤其适合需要：

快速验证
快速上线
快速迭代

的项目。

---

4、已经被 AI “做成模板”的网站

如果你已经生成了一个：

“怎么看都像 AI 做的”

页面。

可以直接使用：

hallmark audit

先检查问题。

然后：

hallmark redesign

重新设计。

这个工作流非常适合现有项目改造。

---

十九、一个比较推荐的工作流

如果是我使用 Hallmark，我会采用这样的流程：

第一步
产品需求 → Brief

第二步
Hallmark Build
↓
生成初版

第三步
hallmark audit
↓
检查 AI UI 反模式

第四步
修改页面

第五步
再次 audit

第六步
必要时 hallmark redesign

第七步
最终交给前端继续开发

如果有一个非常喜欢的网站，还可以：

screenshot / URL
↓
hallmark study
↓
提取设计 DNA
↓
生成 design.md
↓
交给 AI Coding Agent
↓
结合新的产品需求重新设计

这个流程比简单复制一个网站更合理。

---

二十、Hallmark 的核心价值

如果把 Hallmark 用一句话总结：

让 AI 不只是“会写网页”，而是开始考虑“这个网页为什么应该长这样”。

传统 AI Coding 解决的是：

How to build

Hallmark 更关注：

How it should look

以及：

Why this design fits this product

这也是我认为它比较有意思的地方。

AI 生成代码现在已经越来越容易。

真正越来越稀缺的，反而可能是：

有辨识度的设计。

而 Hallmark 试图通过 Skill、Theme、Macrostructure、Slop Test 和 Design DNA 等机制，让 AI 摆脱那些最常见的网页生成套路。

---

二十一、项目地址与安装方式

项目名称：

Hallmark

GitHub：

https://github.com/nutlope/hallmark

在线体验：

https://www.usehallmark.com

安装：

npx skills add nutlope/hallmark

Claude Code：

~/.claude/skills/hallmark/

Cursor：

.cursor/rules/hallmark.mdc

Codex：

~/.codex/skills/hallmark/

或者项目级：

.codex/skills/hallmark/

项目采用：

MIT License

可以自由使用、Fork 和用于自己的项目。

---

总结

AI Coding 正在快速改变前端开发方式，但一个明显的问题也越来越突出：

代码越来越快，网站却越来越像。

Hallmark 的思路并不是继续增加更多 UI 模板，而是反过来限制 AI 的默认设计行为。

通过：

21 Themes
+
Macrostructure
+
Design Rules
+
57 Slop Tests
+
Self-Critique
+
Audit
+
Redesign
+
Study

让 AI 在生成网页时减少“模板化”。

对于使用 Claude Code、Cursor、Codex 开发前端项目的人来说，Hallmark 值得作为一个设计 Skill 体验一下。

特别是当你发现：

“这个页面功能没问题，但一看就像 AI 生成的。”

这时候，Hallmark 可能就是一个比较合适的解决思路。

项目地址：

https://github.com/nutlope/hallmark

在线 Demo：

https://www.usehallmark.com