2026 年 7 月，一个名为 Nutlope/hallmark 的开源项目在 GitHub Trending 上疯狂涨粉 —— 单日暴涨 3,181 星，迅速突破 10,000+ stars。它不是新的 AI 模型，不是编程框架，而是一个反 AI-slop 的设计 Skill。

如果你也受够了 AI 生成的网页千篇一律、长得像同一个模板，Hallmark 就是为你准备的。

什么是 Hallmark？

Hallmark 是一个开源的"反 AI 味"设计 Skill，专为 Claude Code、Cursor 和 Codex 等 AI 编程工具设计。它由 Together AI 团队开发，采用 MIT 协议开源。

为什么 AI 生成的设计总是"一个样"？

所有大语言模型都训练自相同的互联网数据，默认会收敛到相似的"分布中心"（on-distribution defaults）。这导致：

  • 每个 landing page 都是 hero + 三列 features + CTA
  • 配色永远是渐变色 + 白色卡片
  • 字体永远是 Inter / sans-serif
  • 布局几乎一模一样

这种现象被称为 "AI slop" —— AI 生成的内容看起来像是同一个模子里刻出来的。

Hallmark 如何解决这个问题？

Hallmark 的核心机制非常聪明：

机制 说明
21 种宏观结构 每次从 21 种布局中随机选择，确保结构多样性
20+ 主题 涵盖 Distil、Cold Snap、Bubble、Garden、Riso 等风格迥异的设计
57 道 slop 检测门 生成后自动检测 57 种 AI 常见设计反模式
预发射自检 输出前进行自我审查，不符合要求就拒绝输出

效果就是：用 Hallmark 生成的两个页面，看起来像两个完全不同的网站，而不是同一个模板的换色版。

安装 Hallmark

方法一：使用 npx（推荐）

最简单的方式是通过 npx skills add 命令安装：

npx skills add nutlope/hallmark

这条命令会自动下载 Hallmark 的 Skill 文件到你的 AI 工具配置目录中。以后更新时再次运行即可。

方法二：手动安装

如果你更喜欢手动管理，只需下载 SKILL.md 和 references/ 文件夹，放到对应的目录：

Claude Code：

mkdir -p ~/.claude/skills/hallmark/
# 将 SKILL.md 和 references/ 放进去

Cursor：

# 在项目根目录创建
mkdir -p .cursor/rules/
# 将 SKILL.md 的内容（不含 frontmatter）放到 .cursor/rules/hallmark.mdc

Codex：

# 个人级别（全局）
mkdir -p ~/.codex/skills/hallmark/

# 项目级别（仅当前项目）
mkdir -p .codex/skills/hallmark/

Hallmark 的四大核心命令

Hallmark 提供了四个强大的命令，覆盖从新建到重构的完整工作流：

1. hallmark（默认命令）

这是最常用的命令，用于从零开始构建新 UI。

hallmark

它会： - 为你的需求选择一个宏观结构 - 应用一套规则集 - 运行 57 道 slop 测试 - 在输出前进行自我审查

✅ 效果：每个新页面都有独特的"设计指纹"，绝不雷同

2. hallmark audit <target>

用于评估现有代码，检测其中的 AI-slop 反模式。

hallmark audit src/components/LandingPage.jsx

它会： - 分析目标文件或目录中的代码 - 打分并列出所有发现的 AI 设计反模式 - 生成修复建议清单 - 不修改任何代码，纯诊断

✅ 效果：快速识别哪些地方需要重构，避免盲目重写

3. hallmark redesign <target>

用于重构现有页面，保留核心内容但彻底改变外观。

hallmark redesign src/pages/Home.jsx

它会： - 丢弃原有结构 - 保留文案、信息架构和品牌元素 - 用全新的设计指纹重建整个页面 - 确保新设计符合 Hallmark 的反 slop 标准

✅ 效果：一次重构，焕然一新，同时保持业务逻辑不变

4. hallmark study <screenshot | URL>

用于学习优秀设计，提取其设计 DNA。

hallmark study https://example.com/design-inspiration

它会： - 分析截图或网页 URL - 提取宏观结构、字体配对、色彩锚点等核心设计要素 - 拒绝像素级复制和付费模板 - 可选生成可移植的 design.md 文件，用于与其他 AI 工具协作

✅ 效果：把大师级设计变成可复用的设计系统

实战演示：从零构建一个 Landing Page

让我们用 Hallmark 创建一个现代 SaaS 产品的落地页：

  1. 启动 Claude Code，确保 Hallmark Skill 已启用
  2. 输入提示词： text 使用 hallmark 构建一个 SaaS 产品的落地页，产品名称是 "Hyperlane"，功能是 Dev Infrastructure 监控平台，目标用户是工程师，强调实时性和可靠性。
  3. 观察输出： - Hallmark 自动选择了 "Hyperlane" 主题（来自其官方示例） - 使用了独特的网格布局和配色方案 - 包含了专门针对工程师的文案和视觉元素 - 生成的 HTML/CSS 文件自带注释，标明使用的宏观结构

这就是 Hallmark 的魔力 —— 不再是通用模板，而是为特定产品量身定制的设计。

Hallmark 的设计哲学

Hallmark 的背后是一套深刻的设计哲学：

  • 拒绝模板化：没有"默认主题"，每次都是全新创作
  • 拥抱多样性：21 种宏观结构确保结构不重复
  • 质量优先：57 道检测门比人类设计师更严格
  • 可追溯性：每个生成的 HTML 文件都带有 CSS 注释，标明设计指纹
  • 可组合性：生成的 design.md 可以导入其他 AI 工具，形成设计流水线

总结

Hallmark 不是一个简单的 CSS 框架，而是一个设计思维的 AI 代理。它教会 AI 工具如何像人类设计师一样思考：理解上下文、尊重品牌、追求独特性、避免平庸。

在 AI 设计工具泛滥的今天，Hallmark 提供了一种截然不同的思路：不是让 AI 更快地生成更多东西，而是让 AI 生成更少但更好的东西。

🚀 立即行动： 1. 访问 Hallmark 官网 查看所有示例 2. 在 GitHub 上给 Nutlope/hallmark 点 Star 3. 运行 npx skills add nutlope/hallmark 开始你的反 AI-slop 设计之旅

本文基于 Hallmark v2.1.0 撰写，最新版本请参考 GitHub 仓库