🎨 Hallmark：给你的 AI 编程助手装上“设计灵魂”，对抗千篇一律的 AI-Slop | GitHub Trending

你是否有过这样的经历：让 Claude Code 或 Cursor 帮你生成一个登录页面，结果它给了你一个白底黑框、按钮样式像上世纪 90 年代遗物的界面？你刷新、重试、换提示词，它依然固执地把所有组件堆成一种毫无生气的“AI灰”。这就是开发者圈子里正在怒火的 AI-Slop —— 由 AI 模型批量生成的、千篇一律且毫无设计感的 UI 代码。

直到我遇到 Nutlope/hallmark，一个专为现代 AI 编程助手打造的“设计技能”，才终于让这些 AI 工具有了真正的审美细胞。

📦 项目登场：Hallmark 是什么？

Hallmark 不是一个框架，也不是一个 UI 库。它是一套注入到 Claude Code、Cursor 和 GitHub Codex 等 AI 编程助手里的“设计宪章”。作者 Nutlope 的定位非常精准：

“We don't need another component library. We need the AI to stop making ugly shit.”
—— Nutlope

简单说，Hallmark 通过一份精巧的 系统提示 + 规则引擎，在 AI 生成前端代码时强制其遵守一套高标准的现代设计规范。结果就是：同样的要求“给我一个 Dashboard 页面”，开启 Hallmark 后，AI 从“生成勉强能用的代码”变成“生成可以直接上线的作品”。

⚙️ 核心机制：它如何驯服 AI 的审美？

Hallmark 的核心是一份名为 .hallmarkrc 的配置文件（或直接嵌入提示词），它从三个维度重塑 AI 的生成行为：

🎨 1. 视觉语言锁定

Hallmark 内置了基于 几何美学 的约束规则，例如：

圆角范围锁定在 8-16px，避免 AI 随意使用 2px 直角或 24px 胶囊
阴影层数精确到 1-3 级，且扩散半径必须保持逻辑关系
间距系统强制使用 4px 网格，告别 AI 随机的 margin/padding

🧩 2. 组件行为标准化

AI 最常犯的错误就是生成“长得像按钮的 div”。Hallmark 强制要求交互元素必须使用正确的语义标签或 ARIA 属性，并且直接注入了一套 “设计令牌” —— 一组预定义的 CSS 变量，如：


:root {
  --hm-radius-sm: 10px;
  --hm-radius-md: 14px;
  --hm-shadow-dialog: 0 8px 30px rgba(0,0,0,0.12);
  --hm-space-stack: 16px;
}

这让 AI 生成的组件无论在哪个项目里，视觉语言都保持高度一致。

🚫 3. 反 AI-Slop 黑名单

可能是最令人拍案的部分：Hallmark 维护了一个不断更新的“不良模式列表”，直接禁止 AI 生成以下内容：

纯灰色背景卡片（#f5f5f5 党直接哭泣）
无层级关系的单一按钮样式
缺乏留白的信息密集型表格
永远等宽的老旧字体栈

一旦 AI 企图生成这些模式，Hallmark 会通过提示词重定向，强制其输出更现代的方案。

🛠️ 实战集成：三种 AI 工具的最佳打开方式

目前 Hallmark 支持三大主流 AI 编程工具，集成方式都极尽优雅。

Claude Code 集成

在 .claude/settings.json 中添加一行规则引用：


{
  "customInstructions": "Always follow the design guidelines from https://github.com/Nutlope/hallmark/blob/main/CLAUDE.md"
}

这样 Claude 在每次生成 UI 代码前，都会吞下整个设计法则。

Cursor 集成

更简单，直接在项目的 .cursorrules 文件中粘贴 Hallmark 提供的提示词片段：


// .cursorrules
你是世界级 UI 设计师，严格遵循以下规则：
- 使用 var(--hm-radius-md) 作为默认圆角
- 永远不生成全灰卡片，改用半透明玻璃态
- 输入框必须有 2px 彩色焦点环
...

GitHub Codex

通过自定义模型上下文，将 Hallmark 规则注入系统提示。官方仓库提供了 codex-instructions.md 文件，直接复制到你的 Codex 设置即可。

所有集成都有一个共同点：零侵入。不需要安装 npm 包，不需要 import 组件库，你的项目依赖保持纯净。

🔥 见证奇迹：生成效果对比

我们用同一个简单提示词测试：“创建一个用户设置页面，包含头像、用户名编辑、主题切换、通知开关。”

未启用 Hallmark 的 Cursor：

一个白色背景大卡片，内部四个灰色小节
按钮全是 #e0e0e0 背景配合黑色文字
头像是一个灰色方块占位符
整体如同政府网站后台

启用 Hallmark 后：

卡片采用玻璃拟态（backdrop-filter: blur()），带有柔和的阴影
每一行设置项都有清晰的层次感：图标 + 描述 + 交互控件
主题切换是精致的滑动开关，带有过渡动画
头像自带渐变色边框和编辑浮层

最关键的是，这些提升没有增加任何外部依赖，完全由 Hallmark 注入的设计约束驱动 AI 写出更优秀的 CSS 和 HTML 结构。

💡 为什么 Hallmark 值得你立刻尝试

在 AI 编程工具百花齐放的 2026 年，设计质量 正在成为区分“能用”与“好用”的分水岭。Hallmark 解决了一个根本性问题：我们不需要再花大量时间手动修正 AI 的审美错误。与其咒骂 AI-Slop，不如给它一套牢不可破的设计法则。

它尤其适合：

独立开发者：一个人全栈时，让 AI 生成的界面直接达到专业水准
快速原型团队：保证每次生成的页面都符合现代设计直觉，无需设计师反复审查
设计师转行前端：把自己的设计规范通过 Hallmark 编码，让 AI 成为最忠实的执行者

项目地址：https://github.com/Nutlope/hallmark ，阅读它的提示词文件你会惊叹于对细节的把控。如果你也是被 AI 丑陋 UI 折磨过的开发者，这可能是今天打开的最有价值的仓库。

让我们的 AI 助手不再是“代码复制机”，而真正成为有品位的合作者。🎯