Hallmark：拒绝”AI味”的设计技能——让 AI 生成的网页不再千篇一律

如果你经常用 AI 工具生成网页，那你一定见过这种风格：紫色渐变背景、Inter 字体从头用到尾、所有内容居中排列、圆角图标卡片配”了解更多→”……这种被称作”AI slop”的视觉风格，已经快让人审美疲劳了。

今天要介绍的开源项目 Hallmark，正是为了解决这个问题而生——它是一套专门为 Claude Code、Cursor 和 Codex 设计的设计规范技能，能够让 AI 生成的网页彻底摆脱”一眼 AI”的既视感。

GitHub: Nutlope/hallmark | 在线演示: usehallmark.com | 今日 Trending #2，1,277+ stars today | 总计 8,734+ stars

🎯 核心功能

1. Build（默认模式）—— 生成页面

向 AI 提出设计需求，Hallmark 会先选取页面宏观结构（macrostructure），再搭配 20 种不同主题之一进行设计。每次生成都会经过 57 道”反 AI 痕迹”检测关卡，拒绝套用任何 LLM 默认会使用的模板化设计。

同一个需求用 Hallmark 跑两次，出来的页面从布局到字体到配色完全不一样——不是换个颜色那么简单，而是结构性的差异。

2. Study（学习模式）—— 提取设计 DNA

hallmark study <截图|URL> —— 给它一张你欣赏的设计截图或网站链接，它会分析出该设计的宏观结构、字体搭配、色彩锚点等核心设计要素，生成一张”设计 DNA 卡片”。还可以导出为 design.md 文件，交给其他 AI 工具继续使用。

注意：它不会像素级克隆，也不会识别具体字体系列——它提取的是设计骨骼，而不是皮肤。

3. Audit（审计模式）—— 检测 AI 痕迹

hallmark audit <目标> —— 对现有代码进行评分诊断，逐项检查是否包含典型的 AI 生成痕迹：紫色渐变 Hero、单字体全家桶、居中布局、图标卡片阵、模板化导航栏等。只给诊断报告，不做修改。

4. Redesign（重设计模式）—— 换骨不换皮

hallmark redesign <目标> —— 保留原有内容和品牌信息，但彻底重建页面的结构指纹：新的段落节奏、新的标题布局、新的组件风格。就像给同一篇文章换了一本完全不同的杂志排版。

🧬 20 种主题，四种操作模式

Hallmark 内置了 20 种精心设计的主题，分别适用于不同场景：

• Hum — 温暖亲切，适合食品/生活类 App
• Cobalt — 科技感强，适合 API/SaaS 产品
• Carnival — 大胆张扬，适合音乐/娱乐品牌
• Lumen — 轻盈透亮，适合 AI 工具类产品
• Garden — 自然有机，适合农业/手工艺
• Riso — 印刷美学，适合艺术/出版
• 以及 Modern Minimal、Atmospheric 等更多风格

当需求超出了所有预设主题的适配范围，Hallmark 会切换到 Custom 模式，完全从零设计配色、字体和布局，但同样经过 57 道 Slop 检测——没有模板，全是定制。

🔍 五大 AI 痕迹检测与修正

Hallmark 定义了五种最常见的 AI 生成痕迹，并给出了对应的修正方案：

📐 八大设计基础法则

Hallmark 还定义了横跨所有主题的八条基础规则：

1. 字体：标题+正文双字体配对，绝不用单字体全家桶
2. 色彩：OKLCH 色域，一个锚点色，强调色不超过 5% 面积
3. 间距：具名间距系统，4 的倍数，不存在 17px 这种任意值
4. 动效：指数缓出曲线，所有动画提供 reduced-motion 替代方案
5. 语调：每个主题有独立的文字语感，拒绝 SaaS 式的中性平淡
6. 布局：偏轴设计，不对称即意图；居中排版是露馅的信号
7. 层级：展示-正文-标签三级权重阶梯，两秒内可扫读
8. 克制：宁缺毋滥，最有力的容错状态是留白

🛠️ 安装与使用

安装

一行命令安装：

npx skills add nutlope/hallmark

如果要手动安装，将 SKILL.md + references/ 复制到对应目录：

• Claude Code：~/.claude/skills/hallmark/
• Cursor：.cursor/rules/hallmark.mdc（SKILL.md 正文部分，去掉 frontmatter）
• Codex：~/.codex/skills/hallmark/（个人）或 .codex/skills/hallmark/（项目级）

使用示例

# 生成一个播客平台的着陆页
/hallmark build a landing page for an indie podcast platform

# 分析一个你喜欢的设计
/hallmark study https://together.ai

# 审计现有页面的 AI 痕迹
/hallmark audit src/pages/landing.tsx

# 重设计——保留内容，换新结构
/hallmark redesign src/pages/landing.tsx

安装后在 Claude Code、Cursor 或 Codex 中直接提 UI 需求即可，Hallmark 会自动介入。

🎯 适用场景

• 独立开发者：用 AI 快速搭建产品落地页，但不想看起来像”又一个 AI 生成的网站”
• 设计师 + AI 协作：用 Study 模式提取参考设计的骨架，再让 AI 基于此生成方案
• 前端团队：用 Audit 模式对 AI 生成的代码做质量检查，确保交付物有”人味”
• 快速原型：同一个产品概念，让 Hallmark 生成多个视觉风格截然不同的页面，快速对比选型

💭 总结

Hallmark 的价值不在于它写得有多复杂——它是一个纯 CSS 规范文件加上设计约束规则的集合——而在于它精准地诊断并解决了一个真实痛点：AI 生成的 UI 正在变得越来越同质化。

它不依赖任何运行时、不引入额外依赖、不需要 API Key。本质上一个 Markdown 规则文件 + 几个参考文档，却能让 LLM 从”套模板”升级到”做设计”。这种 lightweight but high-impact 的思路，本身就是开源社区该有的样子。

MIT 协议开源，感兴趣可以直接去 GitHub 体验：github.com/Nutlope/hallmark