1. 为什么 AI 写的 UI 总是一眼假:Hallmark 反 AI 味 Skill 的真实场景
你让 AI 写一个 SaaS 后台登录页,它给你紫色渐变 hero 区加居中三栏卡片;你让它写一个金融产品首页,它还是紫色渐变加玻璃拟态弹窗。换到第四个 React 项目,Ctrl+C 到 Vue 项目里,发现连圆角数值都没变过。这不是模型能力不够,而是它被训练成了“高分布值输出机器”——什么组合出现频率最高,它就吐什么。
Hallmark 这个 Skill 就是冲着这件事来的。它在 GitHub 周榜冲到第二、拿到 1.27 万星,核心承诺只有一句话:refuses to look AI-generated。它不教你写 JSX,也不替代 Tailwind,它管的是一件事——AI 在生成 UI 之前,先过一套审美纪律。
适合谁用?三类人最对症:一是前端开发者,受够了每次 AI 生成都要手动改配色和间距;二是独立开发者,一个人做产品没设计师,希望 AI 直接给出“像人做的”页面;三是技术团队,想把“AI 生成 UI 的验收标准”从主观感受变成可量化规则。
我实测下来,Hallmark 的价值不在“帮你写代码”,而在“帮你判断”。它定义了四个动词:build 做新页面、audit 给旧页面打 AI 味分数、redress 改造已有 UI、extract 提取设计 DNA。配合 20 套主题和 57 条 slop-test 闸门,把“好不好看”从玄学变成了可执行清单。
但这里有个现实问题:Hallmark 本身是 Skill 规则文件,它需要挂载到 AI 编程工具里才能跑。Claude Code、Cursor、Codex 都支持,但如果你手头没有稳定的 API 通道,或者多个工具各配各的 Key,测试成本会很高。下面我会先讲怎么用 TaoToken 统一 Key 和 API 通道,再给可复制的 Skill 配置片段和验证步骤。
2. TaoToken 前置:统一 Key 与 API 通道,让 Hallmark 在多个工具里跑起来
Hallmark 的安装命令是npx skills add Nutlope/hallmark --skill hallmark,它会自动识别你本地已安装的 AI 代理,把规则文件注入对应位置。但注入之后,真正执行 build/audit 的还是背后的模型。如果你同时用 Claude Code 和 Cursor,两边各配一套 Key,切换时容易乱;如果 Key 额度分散,测试到一半报 401 更麻烦。
TaoToken 在这里的角色是统一入口:一个 Key 覆盖多个模型通道,Base URL 统一走https://taotoken.net/api,这样你在 Claude Code、Cursor、Codex 里配置的接入点一致,Hallmark 的 Skill 规则不管挂到哪个工具,底层调用链路是同一套。
先拿 Key。打开https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite,登录后创建一个 API Key,复制保存。注意这个 Key 只在创建时完整显示一次,后面配置要用。
拿到 Key 之后,你需要确认三件套:Base URL、API Key、Model ID。Base URL 固定为https://taotoken.net/api,API Key 就是你刚复制的那串,Model ID 根据你用的模型填,比如claude-sonnet-4-20250514或gpt-4o。这三个值在下面每个工具的配置里都会出现。
如果你用的是 Claude Code,它读取的是环境变量或 settings 文件;Cursor 走的是 settings.json;Codex 走的是 auth.json。不同工具路径不同,但核心三件套不变。我建议你先在模型对话里验证一次 Key 是否可用,打开https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite,发一条测试消息,确认能正常返回,再往下配。
这一步别跳过。很多人直接改配置文件,结果报错分不清是 Key 问题还是配置格式问题。先在对话页确认 Key 有效,能省掉一半排障时间。
另外,如果你打算长期用 Hallmark 做编码和 Agent 任务,可以看一下 Coding Plan,https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite,它针对高频编码场景做了额度优化,比按量计费更适合每天跑 build/audit 的节奏。
3. 可复制配置:Hallmark Skill 片段与三工具接入参数
这一节给可直接复制的配置。先装 Hallmark,再配 TaoToken 三件套,最后把 Skill 规则挂到工具里。
安装 Hallmark 在你的项目根目录执行:
npx skills add Nutlope/hallmark --skill hallmark执行后它会扫描本地已安装的 AI 代理,把 hallmark 规则文件注入对应目录。如果你同时装了 Claude Code 和 Cursor,它会分别注入。注入完成后,你可以在项目里看到.skills/hallmark或类似路径的规则文件。
接下来配 TaoToken。以 Claude Code 为例,它的 settings 文件通常在~/.claude/settings.json,写入以下 JSON:
{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的TaoToken Key", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" } }注意 Base URL 不要加 UTM 参数,API 通道就是https://taotoken.net/api。Model ID 按你实际用的模型填,上面只是示例。
如果你用 Cursor,打开~/.cursor/settings.json,加入:
{ "models": { "custom": { "baseUrl": "https://taotoken.net/api", "apiKey": "你的TaoToken Key", "model": "claude-sonnet-4-20250514" } } }Codex 用户改~/.codex/auth.json:
{ "base_url": "https://taotoken.net/api", "api_key": "你的TaoToken Key", "model": "gpt-4o" }三件套对照表:
| 配置项 | 值 | 说明 |
|---|---|---|
| Base URL | https://taotoken.net/api | 固定,不加 UTM |
| API Key | 你的 TaoToken Key | 从 api-keys 页复制 |
| Model ID | 如claude-sonnet-4-20250514 | 按实际模型填 |
配完之后,Hallmark 的 Skill 规则会通过工具调用模型执行。你在 Claude Code 里说“用 hallmark 做一个 SaaS 后台登录页”,它会先读 hallmark 规则,选宏观结构,套主题,跑 57 道 slop-test,再输出。整个过程底层走的是你配的 TaoToken 通道。
如果你用 CC Switch 管理多个工具配置,记得在切换时确认 Base URL 和 Key 同步更新,避免一个工具改了另一个没改,导致 audit 跑到一半报 local proxy failed。
4. 验证请求:用 build 和 audit 复现反 AI 味效果
配好之后,先做一次最小验证。在 Claude Code 或 Cursor 里输入:
用 hallmark 给我做一个 SaaS 后台的登录页,要求严肃商务风Hallmark 会走 build 动词:选一个宏观结构,比如双栏登录加品牌叙事;套上严肃商务风主题,可能是海军蓝加衬线标题加大留白;跑 57 道 slop-test;自审一次;输出代码。
输出后你重点看三件事:有没有紫色渐变 hero 区、有没有居中三栏卡片、有没有玻璃拟态弹窗。如果这三样都没出现,说明 slop-test 生效了。
接着做 audit 验证。把你之前 AI 写的一版 home page 贴进去,输入:
用 hallmark 审计一下我现在的 home page,告诉我多少分它会返回一个 0-100 的分数,越低越像 AI 写的。同时列出触发了哪几条 slop 规则,具体哪些组件需要改,怎么改。这一步是 Hallmark 最硬核的地方——设计评审第一次有了分数。
我试过拿一个典型的 AI 生成页面去 audit,得分 34,触发了“紫色渐变 hero”“Inter 字体加 slate-900 配色”“居中三栏卡片”“圆角 16px 按钮”四条规则。按它的建议 redress 之后,再 audit 得分 71。这个对比很直观。
如果你想验证模型通道是否正常,可以在 audit 前后各发一条简单请求,确认返回稳定。如果 audit 过程中报reading choices错误,通常是模型返回格式和工具预期不一致,换一个 Model ID 再试。
验证成功后,你可以把 extract 动词用起来:从你满意的页面里提取主题 DNA,跨项目复用。这样团队里不同项目能保持一致的审美基线,而不是每个项目重新调一遍。
5. 常见错排查:401、local proxy failed、reading choices、OAuth
这一节对照真实报错给排查路径。Hallmark 本身是规则文件,报错基本都出在模型通道或工具配置上。
401 Unauthorized:最常见。先检查 API Key 是否复制完整,有没有多余空格。然后确认 Base URL 是https://taotoken.net/api,不是首页地址。如果 Key 刚创建,等几秒再试。如果还报 401,去 api-keys 页确认 Key 状态是否正常,有没有被禁用或额度耗尽。
local proxy failed:这个通常出现在你用了本地代理工具或 CC Switch 切换配置后。检查 settings.json 里的 Base URL 是否被改成了本地地址。Hallmark 执行时需要直连https://taotoken.net/api,如果中间有本地代理层,可能拦截失败。把 Base URL 改回官方 API 地址,重启工具。
reading choices 报错:这个错误说明模型返回的 JSON 结构和工具预期不匹配。常见原因是 Model ID 填错了,比如填了一个不支持 function calling 的模型。换成claude-sonnet-4-20250514或gpt-4o再试。如果还报,检查工具版本是否支持当前模型。
OAuth 相关报错:如果你在 Codex 里看到 OAuth 错误,说明 auth.json 格式不对。Codex 的 auth.json 需要base_url、api_key、model三个字段,缺一个都可能触发 OAuth 回退逻辑。确认三个字段都填了,且 base_url 没有尾部斜杠。
Skill 没生效:如果你说了“用 hallmark”但输出还是老样子,检查npx skills add是否执行成功。在项目根目录看有没有.skills/hallmark目录。如果没有,重新执行安装命令。另外确认你用的工具支持 Skill 注入,Claude Code、Cursor、Codex 都支持,但版本要够新。
audit 分数不返回:如果 audit 只输出文字不输出分数,可能是模型没按规则返回结构化结果。换一个 Model ID 再试,或者在 prompt 里明确说“输出 0-100 分数和触发的规则列表”。
排障时建议按顺序:先确认 Key 有效(在模型对话页发消息),再确认 Base URL 正确,再确认 Model ID 支持,最后确认 Skill 注入成功。这个顺序能覆盖 90% 的问题。
6. 语义一致 CTA:把 Hallmark 接入你的日常编码流
Hallmark 的四个动词里,build 和 audit 是最常用的组合。我的习惯是:新页面先 build,输出后立刻 audit,看分数和触发规则,再决定要不要 redress。这样一轮下来,AI 生成的 UI 至少不会“一眼假”。
如果你还没配 TaoToken,先去https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite拿 Key,然后按第 3 节的 JSON 片段配到你的工具里。配完在模型对话页验证一次,再跑 Hallmark 的 build 和 audit。
接入文档在https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite,里面有各工具的详细配置说明。如果你用 Claude Code,也可以直接看 ClaudeCodeAnthropic 的接入页,路径和参数都列清楚了。
长期做编码和 Agent 任务的话,Coding Plan 比按量计费更划算,https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite。Hallmark 的 audit 和 redress 会频繁调用模型,额度稳定很重要。
最后说一个实用技巧:把 Hallmark 的 audit 分数写进你的 CI 流程。每次 AI 生成 UI 后自动跑一次 audit,分数低于阈值就阻断合并。这样“反 AI 味”就从个人习惯变成了团队规范。设计,也是一种工程。