本文由 辛梓煜@词元2号站（www.ciyuanerhao.com）撰写，转载请注明出处。

快速摘要

如果你用 Claude Code、Cursor 或 Codex 这类 AI 编程工具做过网页，大概率遇到过同一个尴尬：一句话丢进去，几分钟拿到一个能跑的页面，但紫色渐变的大标题、全部居中的布局、三列圆角图标卡片，一眼假。这不是你的问题，是模型"默认审美"的问题——它被训练数据里的最大公约数带偏了。本文要拆解的 Hallmark，正是冲着这个痛点来的：一个由 AI 圈知名开发者 Hassan El Mghari（Nutlope）开源的"反 AI 味"设计 Skill，通过 8 条硬性设计规则、20 套内置主题、57 道"AI 味"检测关卡加一层自我批判，逼着大模型绕开那些被训练进骨子里的模板腔，目前已拿下 2.1 万+ GitHub Star。安装就一行命令 npx skills add nutlope/hallmark，Claude Code、Cursor、Codex 三端通用。

下面用列表把核心信息先给你，省得翻半天：

• 项目名：Hallmark（GitHub: Nutlope/hallmark），MIT 开源协议
• 作者：Hassan El Mghari（Nutlope），Together AI 开发者体验总监，roomGPT、restorePhotos 等爆款项目作者
• 解决问题：AI 生成网页的"同质化"——紫渐变 hero、Inter 单字体、全居中布局、图标卡片、标准导航栏
• 核心机制：先定页面宏观结构 → 从 20 套主题里匹配 → 生成前过 57 道检测关卡 → 一轮自我批判
• 四个动词：build（默认生成）、audit（打分诊断）、redesign（推倒重构）、study（提取设计 DNA）
• 安装方式：npx skills add nutlope/hallmark，支持 Claude Code、Cursor、Codex
• 官方演示：usehallmark.com，网页上按 T 键可以循环预览 20 套主题效果

想看完整拆解，往下翻。从"为什么 AI 写的网页都长一个样"讲起，一步步把原理、规则、安装、实战、进阶全部走一遍。

本文目录

• 第一章 为什么 AI 写的网页一眼就能被认出来——紫色问题的由来、模型默认审美、五大 AI 味特征
• 第二章 Hallmark 是什么——作者背景、Agent Skills 机制、项目定位与数据
• 第三章 设计哲学：8 条基础规则——字体配对、单锚色、布局偏置、结构指纹、自我批判
• 第四章 五大 AI 味反模式与解法——反模式对照表 + 修复前后代码示例
• 第五章 四个动词——build / audit / redesign / study 逐个拆解
• 第六章 20 套主题与 Custom 模式——主题匹配机制与特殊需求兜底
• 第七章 从安装到实战——三端安装、四个案例、常见问题
• 第八章 进阶：自己写反 AI 味规则集——Skill 文件结构与可复制模板
• 第九章 我的实操体验与总结——感受、边界、趋势判断与三类人群建议

第一章 为什么 AI 写的网页一眼就能被认出来

先把现象摆出来。现在用 AI 工具写前端，门槛已经低到几乎不存在了：一句话描述需求，几分钟拿到一个完整可部署的页面，谁都能做到。但紧跟着的尴尬也来了——这些页面长得太像了。

紫色渐变大标题、所有元素居中、三列圆角图标大卡片，几乎是标配。我自己的体验是：连续让同一个模型生成五个不同行业的落地页，交出来的东西除了文案不同，骨架和配色几乎是"换皮"。如果是拿去交付客户或者给自己产品做推广页，这种页面确实拿不出手——客户不是不懂设计，是见得太多了。

1.1 那个著名的"紫色问题"

在海外设计圈，这事儿有个专门的词，叫 Purple Problem（紫色问题）。梗的由来挺有意思：Tailwind CSS 里有个高频色号 bg-indigo-500，在 AI 训练语料里出现的频率高得离谱。模型学到的不是"这个颜色适合某类场景"，而是"这个颜色出现在大量网页里，所以它安全"。于是生成任何页面，第一个想到的都是蓝紫渐变。

你可以做个实验：随便找个 AI 编程工具，不加任何风格约束，让它"做一个 SaaS 产品官网"，十次里有八次会给你 from-indigo-500 to-purple-600 这种渐变。这已经不是审美偏好，是模型的条件反射。

1.2 模型的"默认审美"是什么

往深了说，大模型没有审美，它只有统计规律。训练数据里什么页面最多、什么配色最泛滥、什么结构最"安全"，它就会倾向输出什么——这就是所谓的"分布内默认值"（on-distribution default）。一句话总结：模型的默认审美，就是训练数据的最大公约数。

这带来一个很反直觉的结果：AI 生成的东西不是"太难看"，而是"太标准"。标准到没有性格、没有取舍、没有记忆点。人类设计师会做减法、会打破对称、会故意留白，模型不会——它只会把见过的最高频元素拼在一起，因为这样"出错的概率最低"。

把"AI 默认动作"和"人类设计惯例"摆在一起看，差距更明显：

这张表我建议收藏。它既是"AI 味"的判据，也是改版时的自查表——每一条从左边改到右边，页面的"人味儿"就回来一分。

1.3 五个最容易暴露"AI 味"的特征

结合我自己刷过的 AI 生成页面，也参考了海外社区（包括 Anthropic 官方前端设计文档）的共识，AI 味最重的五个特征基本可以固定下来：

这五条看着简单，却是"AI 味"最核心的指纹。我后来在实操里发现，只要把这几条按反方向约束住，页面观感立刻不一样——而 Hallmark 这个项目，做的正是这件事，而且是系统化地做。

1.4 同质化到底代价有多大

有人觉得"能用就行，好看不好看无所谓"。这话在个人练手阶段没问题，但放到真实场景里，代价是实打实的：

• 交付场景：给客户做的官网跟市面上 AI 批量生成的页面撞脸，专业度直接打折，客户会觉得你敷衍。
• 品牌场景：产品页是用户对你的第一印象，跟一万个网站长一个样，等于没有记忆点，转化无从谈起。
• 信任场景：现在用户对 AI 生成内容的辨识度已经很高了，一眼 AI 的页面，用户潜意识里会降低信任。

我自己在这上面栽过跟头：有一次给一个独立开发者朋友做产品落地页，让 AI 直出的版本我自己看着都别扭，改来改去反而更乱。后来才意识到，问题不在某一次 prompt 写得不好，而在没有一个系统性的"审美约束层"。这正好引出今天的主角——Hallmark。

第二章 Hallmark 是什么：给编程 Agent 装上的"审美"Skill

先交代一下背景。Hallmark 的作者是 Hassan El Mghari，网名 Nutlope，AI 圈子里很活跃的开发者，目前在 Together AI 做开发者体验方向的工作。他之前做过好几个现象级开源项目：上传房间照片生成装修方案的 roomGPT（用户量超过两百万）、老照片修复的 restorePhotos、用 Llama 跑起来的 llamacoder 等等。可以说，他对"怎么让 AI 应用被大量用户真正用起来"这件事，经验比大多数人都足。

这次做 Hallmark，他瞄准的不是功能，而是审美。2026 年 7 月，项目在 GitHub Trending 上爆发，单日涨星三千多个，随后一路冲到两万一千多 Star，一度排到 Trending 第二。一个"教 AI 怎么做设计"的 Skill 能火成这样，侧面说明"AI 生成页面同质化"已经是个足够大的公共痛点。

2.1 先搞懂 Skill 是什么

如果你平时不折腾 AI Agent，可能对"Skill"这个词有点陌生。简单说：Skill 是打包好的"专业知识 + 工作流程"，让 AI 在执行某类任务时按一套稳定规则干活。

Anthropic 在 2025 年 10 月随 Claude Code 首次推出 Skills 功能，同年 12 月把它发布为开放标准——这意味着 Skill 不再只属于 Claude，而是一个跨工具通用的规范。Cursor、Codex 这些工具也能读同一套 Skill 文件。用一句话区分两个容易混淆的概念：

Hallmark 就是后者：它不负责让 AI 能生成网页（这个能力模型本来就有），它负责让 AI 生成网页时按一套"反 AI 味"的规矩来。

Skill 生态的时间线，我简单梳理了一下，方便你理解为什么一个"设计 Skill"能跨三个工具通用：

• 2025 年 10 月：Anthropic 随 Claude Code 首次推出 Skills 功能，支持 Claude App / Claude Code / API / Agent SDK
• 2025 年 12 月：Agent Skills 发布为开放标准，Skill 不再绑定单一工具，和 MCP 一样走向跨平台通用
• 2026 年上半年：Cursor、Codex 等主流 AI 编程工具陆续接入 Skills 规范，生态开始互通
• 2026 年 7 月：Hallmark 在 GitHub Trending 上爆发，单日涨星三千多，累计 Star 突破两万

Hallmark 正好踩在"开放标准成熟"的节点上发布，所以它能同时喂给三家工具吃。如果你早一年做这件事，还得给每个工具各写一套规则文件。

2.2 项目自己的定位：有主见、简短、刻意无聊

Hallmark 的官方描述里有一句话很值得玩味：它说自己"有主见、简短、刻意无聊"（opinionated, short, boring on purpose）。

翻译成人话就是：这份 Skill 不打算跟你商量审美，规则是写死的；文件本身很短，不啰嗦；而且故意不追求花哨——它要的就是稳定、可复现、每个页面都不同。它把整套设计流程拆成几条硬规则：接到需求先确定页面的宏观结构，再从内置 20 套主题里匹配，生成之前还要过 57 道"AI 味"检测关卡，外加一轮自我批判，最后才把代码交出来。

• 20 套主题：每套主题有独立的字体配对、色彩锚点、结构节奏，生成时按需求匹配
• 57 道检测关卡：生成后逐条检查是否命中 AI 味反模式，命中就返工
• 4 个动词：build（默认）、audit（诊断）、redesign（重构）、study（学习）
• 40 个参考文件：字体、色彩、结构、组件等规则全部拆进 references 目录，按需加载

2.3 规则从哪来：不是拍脑袋

Hallmark 的规则不是作者自己拍脑袋定的。项目说明里明确提到，它综合了三个来源：Anthropic 官方的前端设计 Skill、Claude Cookbook 里关于前端美学的章节，以及 2026 年设计圈兴起的"触觉反叛"（tactile rebellion）趋势——这个趋势反对过度数字化的光滑感，主张回归有质感、有触感、有"人味儿"的设计。

把这些共识编码成规则，再塞进 Skill 文件，AI 每次生成页面时就等于随身带了一份"设计总监的批注"。这也是为什么它叫 Hallmark（印章、印记）——每个页面生成出来，都像是被打上了"这不是 AI 随手糊的"的印记。

回头看它为什么能火，我觉得是三个因素叠在了一起：

• 痛点足够普遍：但凡用 AI 写过页面的人，都被"紫渐变 + 居中卡片"折磨过。这个痛点不挑人群，独立开发者、产品经理、外包团队全都中招，所以传播面特别广。
• 方案足够轻：安装就一行命令，不换工具、不换模型、不改代码，装完立刻见效。相比"换更强的模型"或"学一套设计系统"，这个边际成本几乎为零。
• 结果可视化强：官网那个按 T 键循环主题的演示，几秒钟就能让人直观看到"同一页面 20 种面孔"，传播性极强。项目能冲上 GitHub Trending，这个交互功不可没。

三个因素缺一个，它都可能只是又一个"好但没人用"的开源项目。这种"痛点 × 轻量 × 可视化"的组合拳，值得做开源项目的朋友参考。

到这儿，Hallmark 是什么、为什么会出现，应该讲清楚了。下一章我们钻进它的内部，看那 8 条撑起整个项目的基础规则到底写了什么。

第三章 设计哲学：8 条基础规则

Hallmark 整套东西的灵魂，是写在 SKILL.md 里的 8 条基础规则（官方叫 Foundations）。这 8 条规则横跨所有主题，是生成任何页面的"宪法"——不叫设置，叫底线，每条都写死了，模型没有讨价还价的余地。

我自己啃完这 8 条之后最大的感受是：它们不是教 AI "怎么画得好看"，而是教 AI "哪些默认动作不许做"。审美这种事很难量化，但"禁止什么"是完全可以量化的，这是 Hallmark 最聪明的地方。

3.1 八条规则的完整清单

前 7 条管"怎么生成"，第 8 条管"怎么验收"。规则 8 是整套机制的闭环——没有它，前 7 条就是一张写了没人执行的便签。

3.2 规则是怎么"喂"给模型的

Hallmark 不是把这些规则塞进一句 system prompt 里完事，而是拆成了文件结构。官方文档里写得清楚：规则集主体在 SKILL.md，细节拆在 references/ 目录下约 40 个文件里——字体、色彩、宏观结构、主题、检测关卡、组件手册各归各档。模型接到生成任务时按需加载，用到字体就查字体文件，用到色彩就查色彩文件。这也符合 Agent Skills 的设计初衷：元数据只占几十个 token，完整文档按需加载，不浪费上下文窗口。

加载流程大致可以写成下面这段伪代码：

function generate_page(brief):
    # 1. 读取需求、项目标记、技术栈
    context = read(brief + project_tokens + framework)

    # 2. 先定宏观结构（不许重复最近 3 次用过的结构）
    structure = pick_macrostructure(avoid = last_3_structures)

    # 3. 匹配主题（或走 Custom 从零定制）
    theme = match_theme(brief) or custom_theme()

    # 4. 应用 8 条基础规则生成页面
    page = build_page(structure, theme, rules = FOUNDATIONS)

    # 5. 过 57 道检测关卡
    slop_score = run_slop_test(page)

    # 6. 自我批判，命中反模式就返工
    while slop_score < PASS_THRESHOLD:
        page = revise(page)
        slop_score = run_slop_test(page)

    # 7. 打上"已盖章"标记，交付
    return stamp(page)

3.3 几个值得细说的规则

规则 1 字体配对，是反 AI 味最立竿见影的一条。AI 默认输出 Inter、Roboto 这类"安全字体"当标题也当正文，一套字体打天下。Hallmark 要求至少两种字体配对：一个有个性的显示字体负责"记忆点"，一个克制的正文字体负责"读得舒服"。你去看那些让人觉得"不像 AI 做的"页面，十有八九标题字体跟正文字体是分开的。

规则 2 色彩，直接对准"紫色问题"。Hallmark 的做法是：调色板全部基于 OKLCH 色彩空间生成——这是一种更接近人类感知的色彩模型，比传统的 HEX/RGB 更利于 AI 生成和谐配色；同时规定页面只能有一个锚定色，背景禁用渐变，想要暖意就把中性色往暖色调一调，而不是糊一层渐变上去。

OKLCH 这个名字新手可能陌生，一句话解释：我们平时写的 #6366f1 是给机器看的颜色编码，人眼感知亮度和饱和度的方式跟它并不对齐；OKLCH 用"亮度 L + 色彩 C + 色相 H"三个维度描述颜色，更贴近人眼直觉。对 AI 来说，用 OKLCH 调色意味着"调整某个色相的亮度"这种操作可以精确执行，不会像改 HEX 那样牵一发动全身。举个实际例子，同样是"首屏背景 + 强调色"，两种做法的代码差异肉眼可见：

/* ❌ AI 默认风格：蓝紫渐变 hero */
.hero {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  color: #ffffff;
  text-align: center;
}

/* ✅ Hallmark 风格：单一锚定色 + 实色背景 */
.hero {
  background: #0f172a;            /* 深色中性底 */
  color: #f8fafc;                 /* 高对比正文 */
  border-top: 4px solid #f59e0b;  /* 单一锚定色做点缀 */
  text-align: left;               /* 左对齐制造偏置 */
}

左边那串渐变色码，就是"一眼 AI"的罪魁祸首；右边去掉渐变、只留一个锚定色，气质立刻沉下来。这套"少即是多"的配色思路，是我从 Hallmark 里学到的最实用的一课。

规则 4 宏观结构，是防"模板感"最关键的一招。同一个 AI 连续生成多个页面，最容易出现的情况是骨架完全一样——都是"hero + 三卡片 + 定价 + 底部导航"。Hallmark 要求每次生成都先选一个宏观结构，并且拒绝重复最近三次用过的结构。这意味着哪怕需求再像，交出来的页面骨架也会不同。

规则 8 自我批判，对应的是那 57 道检测关卡。生成完页面后，模型要逐条自检：有没有用渐变 hero？是不是一套字体？是不是全居