Hallmark实测：反AI味设计技能，57道闸门让AI生成的页面不再“一眼假“

1. 为什么 AI 生成的页面总像同一个模子刻出来的你让 Claude Code 或 Cursor 生成一个落地页第一次看还挺惊艳第二次换个需求再生成紫色渐变 hero、三张等宽功能卡、居中大标题、底部一个 Get Started 按钮——配方几乎没变。业内管这个叫 AI slop也就是AI 味。很多人以为这是配色问题调调渐变、换个主色就好了但 Hallmark 这个项目的核心论断恰恰相反AI 生成的 UI 视觉各异结构却高度雷同每个模型都吐出 hero → 3 features → CTA → footer 的同一节奏结构同质化才是 AI 真正的指纹。Hallmark 就是专治这个的反 AI 味设计技能它给 AI 编程助手装了一套审美闸门用 57 道二元判定拦住模板化排版和廉价视觉。它适配 Claude Code、Cursor、Codex 三类工具核心不是换配色而是坚持结构多样性——两个不同 brief 生成的页面应该像两个不同的网站而不是同一个模板换层皮。这篇我会拆开它的四个动词、21 种宏观结构、57 道闸门给出可复制的 settings.json / config.toml 骨架和 TaoToken 统一 Key 配置最后演示一次生成页面的验证动作让你能真正复现去 AI 味的效果。适合谁看正在用 AI 编程工具做前端页面、被一眼假困扰的开发者想把设计规范固化进 AI 工作流的团队以及想理解AI 味到底该怎么工程化治理的人。下面从问题场景讲到落地配置一步步来。2. Hallmark 反 AI 味设计技能的前置准备与 TaoToken 统一 Key 配置在动手之前先把工具链和模型接入理顺。Hallmark 本身是一个技能包skill它需要宿主——Claude Code、Cursor 或 Codex 之一。而这三个工具要调用模型就得配 Base URL、API Key、Model ID 三件套。我实测下来用 TaoToken 做统一入口最省事一个 Key 同时喂给三个工具切换工具不用重新申请模型 ID 也能统一管理。先说 Hallmark 的安装。官方给的是一条命令Claude Code / Cursor / Codex 通用npx skills add nutlope/hallmark装完之后在 Claude Code 里直接说 build me a landing page for a sourdough delivery app 就能触发。手动安装的路径按工具区分Claude Code 放在~/.claude/skills/hallmark/Cursor 放在.cursor/rules/hallmark.mdc注意只用 SKILL.md 的 body不要 frontmatterCodex 个人级放~/.codex/skills/hallmark/项目级放.codex/skills/hallmark/。接下来是模型接入。TaoToken 的 API 地址是https://taotoken.net/api官网在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。你需要先去控制台拿一个 Key地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite然后在 API Keys 页面创建https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite。注意Key 只显示一次创建后立刻复制保存。三个工具共用同一个 Key但各自的配置文件格式不同下面分别给骨架。Claude Code 用的是 settings.json路径通常在~/.claude/settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }Cursor 在设置里走 OpenAI 兼容模式填 Base URL 为https://taotoken.net/apiAPI Key 填 TaoToken 的 KeyModel ID 填你选的模型。Codex 用 config.toml路径~/.codex/config.tomlmodel gpt-5 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEYCodex 还需要一个 auth.json 配合路径~/.codex/auth.json{ OPENAI_API_KEY: sk-你的TaoToken密钥 }三件套齐了Base URL 是https://taotoken.net/apiKey 是 TaoToken 控制台拿的那串Model ID 按你实际选的填。这里的关键是三个工具指向同一个 Base URL 和同一个 Key模型 ID 可以不同——比如 Claude Code 用 Claude 系Codex 用 GPT 系但都从 TaoToken 走。这样 Hallmark 在哪个宿主里跑模型调用都不用手忙脚乱地换配置。配好之后建议先跑一次连通性验证别等生成页面时才发现 Key 错了。Claude Code 里随便问一句 hello 看有没有回复Cursor 在 Chat 里发一条消息Codex 用codex say hi。能正常回就说明三件套生效了。这一步别跳过我踩过的坑就是 Key 少复制了一位结果 Hallmark 跑到一半报 401排查了半天。3. 可复制的 Hallmark 配置骨架与 57 道闸门拆解配置通了接下来把 Hallmark 的行为固化下来。Hallmark 给 AI 装了四个动词build默认建新页、audit给现有页面打分、redesign扔掉视觉结构重建、study从截图或 URL 提取设计 DNA。每个动词都遵守六条通用规则这些规则可以直接写进你的项目规范文件里让 AI 每次都照做。六条通用规则是Pre-emit self-critique输出前六轴自评低于 3 分强制重做、Honest copy不编造数据统计导向的布局要么用真数字要么用占位符、Locked tokens颜色字体必须引用命名 CSS 变量禁止 inline OKLCH、No re-drawn chrome禁止假浏览器栏、手机框、IDE 窗口用真截图或不画、Mobile floor320/375/414/768px 验证无横向滚动无两行按钮标签、Typography purity标题保持 roman不乱加斜体粗体。把这六条写进 Cursor 的 rules 文件路径.cursor/rules/hallmark.mdc骨架如下--- description: Hallmark 反 AI 味设计规则 globs: [**/*.tsx, **/*.css, **/*.html] --- # Hallmark 设计约束 ## 通用规则 1. 输出前做六轴自评Philosophy/Hierarchy/Execution/Specificity/Restraint/Variety任一低于 3 分重做 2. 文案诚实不编造数据统计布局用真数字或占位符 3. 颜色字体引用命名 CSS 变量禁止 inline OKLCH 4. 禁止假浏览器栏/手机框/IDE 窗口 5. 320/375/414/768px 验证无横向滚动 6. 标题保持 roman不乱加斜体粗体 ## 宏观结构 每次 build 在 CSS 顶部注释 stamp 上次用的宏观结构强制跨次多样化 可选Bento Grid / Marquee Hero / Long Document / Workbench / single-column-narrative / magazine-split-hero 等 21 种Codex 项目级可以放.codex/skills/hallmark/SKILL.md内容类似。Claude Code 放~/.claude/skills/hallmark/SKILL.md。现在说 57 道闸门。它们分六个轴每道都是二元判定——过或重做。Philosophy 轴查是否坚持结构多样性Hierarchy 轴查字体层级是否刻意至少两字重两字号Execution 轴查颜色字体是否引用命名 CSS 变量Specificity 轴查文案是否诚实不编造数据Restraint 轴查是否拒绝假浏览器栏、假 IDE 截图Variety 轴查卡片是否有至少两种不同处理。输出前在六轴打 1-5 分任何一轴低于 3 触发完整修订轮分数戳在 CSS 注释里。主题层面Hallmark 内置 20 主题每个是结构字体色彩三元组。比如 Hum 是柔和圆润、奶油铁锈色、衬线 display适合酸面包 appCobalt 是锐利技术感、深蓝锚点、mono display适合提取 APILumen 是深色表面、冷色点缀、克制优先适合 AI 工具。当 brief 带创意意图且无目录主题匹配比如1987 年的磁带自动切到 Custom构建一次性 OKLCH 调色板加自由字体配对同样跑 57 道闸门底下无模板。宏观结构有 21 种专门打破hero三卡CTA的肌肉记忆Bento Grid、Marquee Hero、Long Document、Workbench、single-column-narrative、magazine-split-hero 等等。每次 build 会在 CSS 顶部注释里 stamp 上次用的宏观结构强制跨次多样化。这就是它和普通模板库的本质区别——模板库给你固定几套Hallmark 逼着 AI 每次换结构。提示audit 动词对存量页面特别有用。指向现有页面hallmark audit src/app/page.tsx它会列出所有让 UI 看起来像 AI 生成的反模式重复的 border-radius、相同卡片高度、Inter-at-400-everywhere、紫渐变深色底等等。HN 上有人反馈抓到 14 个我会漏掉的闸门。4. 验证请求生成一次页面并跑通 57 道闸门配置和规则都就位了现在做一次完整的验证。我以 Claude Code 为例其他工具流程一致。先确认 Hallmark 装好了在 Claude Code 里输入build me a landing page for a sourdough delivery app正常的话AI 会先问你 3 个澄清问题比如目标用户、核心卖点、品牌调性。回答之后它选宏观结构、套主题、生成页面然后跑 57 道闸门。任何一道挂了就重做全过才交给你。生成结果里CSS 顶部应该能看到类似这样的注释/* hallmark: macro-structuremagazine-split-hero themeHum self-critique: Philosophy4 Hierarchy4 Execution5 Specificity4 Restraint5 Variety4 */看到这行注释说明六轴自评跑过了分数都 ≥3。如果某轴低于 3它会自动触发修订轮你可能会看到多轮生成。这时候别急着催让它跑完。接着验证 audit 动词。拿一个你现有的页面比如src/app/page.tsx输入hallmark audit src/app/page.tsx它会输出一份反模式清单。典型的输出会列出重复的 border-radius 值、所有卡片高度相同、字体全是 Inter 400、紫渐变深色底、假浏览器栏等等。每一条对应一道闸门。你可以照着清单逐条改改完再 audit 一次看分数有没有上去。再验证 study 动词这是最被低估的。粘一个你欣赏的网站 URLhallmark study https://example.com它会提取设计 DNA——宏观结构、字体配对、色彩锚点、间距节奏输出一份可移植的 design.md。注意这不是像素级克隆是设计语言迁移。Hallmark 明确拒绝克隆付费模板比如 Themeforest 或带水印的 Framer 模板。验证模型调用是否走 TaoToken可以在生成过程中看日志或者故意把 Key 改错一位看是否报 401。正常走 TaoToken 的话请求会打到https://taotoken.net/api。如果你想单独验证模型对话可以去https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite发一条消息确认 Key 和模型 ID 都对。整个验证流程跑下来你应该能看到生成页面的结构和你之前用默认 AI 生成的不一样了卡片处理有变化字体层级更刻意没有假浏览器栏。这就是 57 道闸门在起作用。如果效果不明显多半是规则文件没生效或者宿主没读到 skill回到第 2 节检查路径。5. 本篇常见报错排查401、local proxy failed、reading choices、OAuth配置和生成过程中最容易撞上四类报错。我按真实遇到的顺序拆开讲。第一类401 Unauthorized。这个最常见九成是 Key 问题。表现是 Hallmark 跑到一半突然中断日志里出现 401。排查顺序先确认 TaoToken 控制台里 Key 还有效、没被删再确认配置文件里 Key 没多空格、没少字符然后确认 Base URL 是https://taotoken.net/api不是别的。Claude Code 的 settings.json 里字段名是ANTHROPIC_AUTH_TOKEN不是ANTHROPIC_API_KEY写错了也会 401。Codex 的 auth.json 里字段是OPENAI_API_KEY别和 config.toml 里的env_key搞混。第二类local proxy failed。这个通常出现在 Cursor 或 Codex 走本地代理配置时。表现是请求发不出去提示本地代理失败。原因一般是配置文件里残留了旧的代理地址或者环境变量里设了HTTP_PROXY/HTTPS_PROXY指向一个已经关掉的本地端口。排查检查 shell 环境变量env | grep -i proxy有的话 unset 掉检查 Cursor 设置里的网络代理项清空Codex 的 config.toml 里确认没有多余的 proxy 字段。清干净之后重启工具。第三类reading choices 相关报错。这个多出现在模型返回格式不符合预期时比如 Hallmark 期望结构化输出但模型返回了纯文本解析时报 reading choices 或类似字段缺失。根因通常是 Model ID 填错了或者选了一个不支持结构化输出的模型。排查确认 Model ID 和你实际想用的模型一致换一个支持 function calling / 结构化输出的模型试试如果走 TaoToken去https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite单独测一下这个模型能不能正常返回结构化内容。第四类OAuth 报错。Claude Code 和 Codex 都支持 OAuth 登录但如果你同时配了 OAuth 和 API Key可能冲突。表现是提示 OAuth token 无效或重复认证。排查如果你决定用 TaoToken 的 Key就把 OAuth 登录态清掉Claude Code 可以claude logoutCodex 删掉~/.codex/auth.json里的 OAuth 字段只留 API Key。反过来如果你要用 OAuth就别在 settings.json 里塞ANTHROPIC_AUTH_TOKEN。二选一别混用。注意这四类报错里401 和 OAuth 是配置问题local proxy failed 是环境问题reading choices 是模型问题。排查时先定位是哪一类再对症下药别一上来就重装。另外如果 Hallmark 的 57 道闸门没生效页面还是老样子先确认 skill 文件路径对不对。Claude Code 是~/.claude/skills/hallmark/Cursor 是.cursor/rules/hallmark.mdcCodex 是~/.codex/skills/hallmark/或.codex/skills/hallmark/。路径错了AI 根本读不到规则自然不跑闸门。确认路径后在对话里显式提一句 use hallmark skill强制触发。6. 把 Hallmark 接进你的日常 AI 编程工作流配置跑通、报错排查完最后说怎么把它变成日常习惯。Hallmark 的价值不在单次生成而在持续约束。我的做法是把它写进项目的 rules 文件跟着仓库走团队里谁用 AI 生成页面都自动带上这套闸门。Cursor 的.cursor/rules/hallmark.mdc提交到 gitCodex 的.codex/skills/hallmark/也提交Claude Code 的个人级配置可以放全局项目级配置跟仓库。模型接入这块长期编码和 Agent 场景建议走 Coding Plan地址https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite比按量计费更适合高频调用。如果你只是偶尔生成页面按量走 API 也行。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有各工具的详细配置说明。Claude Code 专项接入可以看https://taotoken.net/claude-code?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-codeutm_campaignrewrite。一个实用技巧每次 build 之后把生成的 CSS 顶部那行 self-critique 注释留着别删。下次生成前先看一眼上次用的宏观结构手动在 brief 里要求换一个比如 use a different macro structure than last time。这样即使 AI 忘了 stamp你也能主动推动多样性。另一个技巧是 audit 和 build 交替用——先 audit 现有页面拿到反模式清单再 build 新页面时把这些反模式写进 brief 的负面约束里效果比单纯跑闸门更直接。Hallmark 的不足也要心里有数20 个主题本身也是模板库有设计师批评二十套主题再怎么加闸门本质还是模板库有用户反馈能认出这是 Hallmark 生成的它只治前端 UI对后端代码和文档写作的 AI 味无能为力学习曲线不低四个动词加 21 种结构加 57 道闸门初学者容易被选项淹没。所以别指望它包治百病把它当成工作流里的一道过滤网就好。最后一步去 GitHub 给原作者点个 Star仓库是https://github.com/Nutlope/hallmark演示站在https://usehallmark.com按 T 可以切换主题直观感受 20 套主题和 21 种宏观结构的差异。看完演示站再回来调你的配置会更有方向。