Hallmark：21.1K Star的反AI设计技能

不知道你有没有发现？让 Claude Code、Cursor 或 Codex 生成产品落地页，无论需求怎么变，输出总有一股“AI 味”：紫色到蓝色的渐变 Hero、Inter 字体从标题用到正文、所有内容居中对齐、三张圆角图标特征卡、底部一个 “Learn More →” 按钮。第一次看还行，第十次开始穿帮，第一百次用户也知道了。这并非某个模型的问题，而是大模型在海量同质化 SaaS 模板上训练的均值回归。Hallmark 就是为打破这种均值而生的开源设计技能。

Hallmark 目前在 GitHub 上已有 21.1K Star、1.1K Fork，采用 MIT 协议，由 Together AI 赞助开发。它不提供组件库，也不定义设计系统，而是作为一个“设计技能”安装到 AI 编程助手中，从源头改变它生成 UI 的决策过程。

项目地址：https://github.com/Nutlope/hallmark 在线演示：https://www.usehallmark.com

Hallmark 是什么？

一句话定义：一个给 AI 编程助手用的设计技能，让生成出来的 UI 看起来是“人做的”，而不是“AI 生成的”。

支持三个主流的 AI 编程工具：

• Claude Code（Anthropic 的命令行编码助手）
• Cursor（当下流行的 AI IDE）
• Codex（OpenAI 的代码生成工具）

装好之后，你正常跟 AI 说“帮我做一个落地页”，Hallmark 会自动介入：先选一个宏观结构，再挑一套主题，跑 57 道“AI 味检测”，最后才把代码交给你。

两次完全不同的需求，最终页面看起来像两个不同设计师做的网站，而不是同一个模板换了颜色。这就是 Hallmark 的核心差异化：结构性多样性，而不只是视觉多样性。

四大功能：Build / Audit / Redesign / Study

Hallmark 有一个默认行为和三个显式动词，覆盖 UI 设计的全生命周期。

Build（默认）——生成不像 AI 做的页面

你正常提需求，Hallmark 自动启动。例如：

帮我做一个咖啡订阅服务的落地页，小批量烘焙，周日烘焙周一发货。

Hallmark 的处理流程：

1. 解析需求：提取受众、用途、调性
2. 选宏观结构：从多种布局原型中选一个（长文档式 / 信件式 / 目录式 / 引言式 / 工作台式等）
3. 选主题：从 20 套命名主题中匹配（Linen 暖纸衬线 / Salon 温暖手写 / Terminal 暗色等宽 / Brutal 近黑粗体等）
4. 跑 57 道 slop-test：检测 AI 味反模式
5. 预发射自评：按哲学 / 层级 / 执行 / 特异性 / 克制 / 多样性 6 个维度打分，低于 3 分的维度自动重做
6. 输出代码：完整的 HTML + CSS，每个颜色和字体都引用命名 token

关键点：Hallmark 会拒绝重复。连续做多个页面时，它会避免和最近 3 次的宏观结构重复，所以做 5 个不同客户的落地页，得到的是 5 个结构不同的网站。

Audit —— 给现有代码“体检”

你有一段已经写好的 UI 代码，想看看 AI 味有多重：

hallmark audit ./src/pages/Landing.tsx

Hallmark 会读取代码，对照反模式清单逐项检查，输出一个排好序的问题清单：

• 紫色渐变 Hero → 改为单色锚点
• Inter 同时做标题和正文 → 配一个有辨识度的展示字体
• 全居中布局 → 打破对称，做偏置布局
• 图标方块特征卡 → 改为非对称变体或去掉图标
• ✨ emoji 做 Badge → 选一个图标库，或者去掉

只诊断，不改代码。改不改、怎么改，由你来决定。

Redesign —— 换骨不换皮

你有一个现有落地页，内容没问题，但视觉太“AI”了：

hallmark redesign ./src/pages/Landing.tsx

Hallmark 会：

• 保留：文案、信息架构、品牌元素、路由、组件归属
• 重建：段落节奏、标题位置、组件风格、视觉结构

出来的页面，内容还是你的内容，但“骨头”完全不同：新的分区节奏、新的标题位置、新的组件气质。

Study —— 提取设计 DNA

你看到一个喜欢的设计（截图或 URL），想让 AI 学习它的精髓：

hallmark study https://stripe.com

或者附带一张截图。Hallmark 会提取这个设计的“DNA”：

• 宏观结构：分区方式、布局节奏
• 原型分类：属于哪种页面类型
• 字体配对：展示字体 + 正文字体的搭配模式
• 色彩锚点：主色、强调色、中性色的分布

你可以选择：用这个 DNA 重新构建页面（默认行为）；锁定为 design.md 生成可移植的设计规范文件，交给其他 AI 工具使用；只看诊断报告，不实际构建。

重要：Hallmark 拒绝像素级克隆，拒绝复制付费模板。它提取的是设计思维，不是设计成品。

20 套主题：不是换色卡，是换性格

Hallmark 内置 20 套命名主题，每套都有自己的性格和适用场景。下面列举其中几个：

主题名	风格	适用场景
Hum	暖色泡泡感	生活方式类产品、食品、温度感品牌
Cobalt	蓝色极简	技术产品、开发者工具、API 服务
Carnival	活力撞色	唱片公司、创意工作室、文化品牌
Lumen	冷峻科技	AI 工具、数据分析平台
Linen	暖纸衬线	咖啡、烘焙、手工艺品、编辑型内容
Salon	温暖手写	播客、个人博客、独立项目
Terminal	暗色等宽	CLI 工具、开源项目、技术文档
Brutal	近黑粗体	工作室宣言、态度鲜明的品牌
Plain	纯白极简	个人主页、作品集、Index 式页面
Midnight	深蓝冷色	SaaS、可观测性工具、开发者平台

还有 Custom 分支：当需求携带明确的创意意图（指定品牌色、描述多重氛围），Hallmark 会切换到 Custom 模式，从零构建一套专属 OKLCH 色板 + 免费字体配对。普通的“做一个落地页”请求永远不会触发 Custom，它在后台默默运行。

五大 AI 设计反模式：你一定见过

Hallmark 官网列出了五个最常见的 AI 设计“告诉”，每个 LLM 都会默认使用这些模式。

反模式 1：紫色渐变 Hero

紫到蓝、紫到粉的渐变背景 + 白色居中文字，这是最被广泛识别的 AI 美学。

Hallmark 的解法：选一个单一锚点色、一个强调色，Hero 不用渐变背景。需要温度感就给中性色加暖色调。

反模式 2：Inter 一字体走天下

Inter（或者 Roboto、Open Sans）同时做标题和正文，不配第二个字体。一个页面只用一种字体，就是模板页面。

Hallmark 的解法：配一个有辨识度的展示字体 + 一个精致的正文字体，两种字体起步，同一家族不能同时干两件事。

反模式 3：全居中布局

标题居中、正文居中、按钮居中，一个接一个的居中列，对称成为默认。

Hallmark 的解法：偏置布局。左边大留白右边窄内容，或者反过来。打破一次对称就足以传递设计意图。

反模式 4：图标方块特征卡

圆角矩形，左上角彩色方块里的图标，两行标题，三行描述，可能还有一个 “Learn more →” 按钮，是万能模板。

Hallmark 的解法：如果非要特征卡，让它们非对称——变尺寸、变对齐方式、图标内联化。或者去掉图标，用排版来主导。

反模式 5：AI 标准导航栏

左边品牌名、中间四个链接、右边 CTA 按钮、滚动时 sticky、底部细线边框，每个 LLM 都会输出这个形状。

Hallmark 的解法：选一个匹配页面类型的导航原型——报纸报头、终端命令栏、极简边对齐。导航栏应该告诉你“这是什么类型的网站”。

安装使用教程

理论到此为止，开始动手。

安装

一行命令搞定：

npx skills add nutlope/hallmark

随时重新运行来更新。或者手动复制 SKILL.md 和 references/ 目录到对应位置。

三大平台配置

Claude Code：

# 自动检测 ~/.claude/skills/hallmark/ 目录
# npx skills add 会自动完成安装
# 重启 Claude Code 即可生效

Cursor：

# 将 SKILL.md 的内容（去掉 frontmatter）复制到：
.cursor/rules/hallmark.mdc

# Cursor 会自动检测项目级规则文件

Codex：

# 个人级别：~/.codex/skills/hallmark/
# 项目级别：.codex/skills/hallmark/

# 目录结构：
# hallmark/
# ├── SKILL.md
# └── references/
#     ├── structure.md
#     ├── slop-test.md
#     ├── anti-patterns.md
#     ├── custom-theme.md
#     ├── study.md
#     ├── responsive.md
#     └── interaction-and-states.md

验证安装

安装完成后，在你的项目里试一句：

Build me a landing page for a small-batch coffee subscription.

如果 Hallmark 正确安装，你会得到一个带衬线字体的暖色编辑风格页面，而不是紫色的 SaaS 模板。

真实使用示例

示例 1：咖啡订阅服务（编辑暖调）

Prompt：

Build me a landing page for Coffeebox — a small-batch coffee subscription.
Roast on Sunday, ship on Monday, drink Tuesday.
Audience: people who already buy good coffee.
Tone: warm, hand-set, editorial — like a small café's chalkboard.

Hallmark 的选择：

• 结构：Long Document（长文档式）
• 主题：Linen（暖纸衬线）
• 字体：Cormorant Garamond + 正文字体
• 装饰：Tier-B 手绘 SVG 咖啡豆图标

输出效果：

“Coffeebox · est. 2026 · n.º 12. The first roast leaves the drum at 6:14 a.m. Sunday. By Monday morning it's in a paper bag in your post box. By Tuesday the kitchen smells like a café.”

没有 Hero 渐变，没有特征卡片，没有假数据。一个温暖的编辑型页面，像一个独立咖啡馆的黑板。

示例 2：开源 CLI 工具（终端暗调）

Prompt：

Build me a landing page for Streampipe — a small, fast, single-binary CLI
for parsing log and event streams from stdin. Filter, transform, route.
Audience: developers. Tone: technical. Use the Terminal theme.

Hallmark 的选择：

• 结构：Long Document
• 主题：Terminal（暗色磷光绿，全等宽字体）
• 装饰：内联 CSS 终端代码块

输出效果：

“$ streampipe — a small, fast, single-binary CLI for parsing log and event streams from stdin.”

包含真实命令行示例（tail -f access.log | streampipe parse --format nginx）、三段安装说明（brew / cargo / curl）、六行参数表。纯 CSS，无 JS。

示例 3：艺术面包店（目录式）

Prompt：

Build a landing page for Maple Street Bread — a small artisan bakery
in Lisbon. Sourdough, slow, by hand. Thirty loaves, gone by noon.
Audience: locals. Tone: warm, hand-set.

Hallmark 的选择：

• 结构：Catalogue（目录式）
• 主题：Almanac（暖色羊皮纸，IM Fell 罗马衬线）
• 装饰：手绘 SVG 面包轮廓（每种面包一个）

输出效果：

一个两列目录网格，列出八种面包（乡村酸面团、法棍传统、迷迭香佛卡夏等），每行配一个 96px 的面包剪影、名称、一行描述和价格。底部是中央对齐的“到访与营业时间”信息面板。没有 CTA——需求是“看看有什么 + 找到我们”。