AI 做的网页一眼就是 AI 味？给 Claude Code / Codex 装 Hallmark v2，按 48 套主题出页并自查（第三方 API Key 实测）

让 AI 写个落地页，结果十个里有八个长得差不多：圆角卡片六宫格、渐变按钮、标题里单独一个彩色词，页尾再来一个邮箱订阅框。Together AI 的 Hallmark 就是冲着这些套路去的。据作者 @nutlope 10 月 23 日的帖子，Hallmark 在 v1 拿到 3 万 star、6 万次安装后从头重写，推出 v2，可在 Claude Code、Codex 和 OpenCode 里用。

先说结论：

• Hallmark 是一个网页设计 skill，一行 npx skills add nutlope/hallmark 装好。README 写明支持 Claude Code、Codex、Cursor 和 OpenCode。
• v2 有 48 套主题。每次按你的需求先挑 3 套给你选，选完才动手写页面。
• 写完会用 sloplint --render 在真实 Chrome 里检查（README 写的是 8 个宽度），查「AI 味」套路、对比度、焦点环、手机布局，不过关就自己改。
• 我们用本站 API Key 实测：Claude Code 出 3 套主题用了 26 秒，写完整页并改到 sloplint 0 FAIL 用了 3 分 40 秒；/hallmark audit 一个普通 AI 落地页，查出 41 个 FAIL；/hallmark redesign 全量重做 6 分 11 秒，重做后 0 FAIL。Codex 里 $hallmark 出 3 套主题用了 34 秒。

创建 API Key →

AI 味的网页长什么样

Hallmark 的 README 把模型最爱犯的套路列得很直白，下面几条你多半见过：

Hallmark 把检查分成三档：Floor 必须过（对比度、焦点、减弱动效、编造的事实、手机布局）；Reflex 是模型的惯性默认值，有理由可以记录在案后豁免；Finish 是细节打磨，不挡发布。

如果你要处理的是文章的 AI 味，而不是网页，可以看用 Claude Code 改写 AI 文章。

Hallmark v2 有什么

以下据 Hallmark README 和官网：

官网的问答里写了：Hallmark 本身不需要单独的 API Key，照片来自它自己的开放许可图库，图像生成 Key 可选。真正消耗的是你在 Claude Code 或 Codex 里用的模型。

第一步：Claude Code / Codex 指向本站

Claude Code

在全局 ~/.claude/settings.json 里写：

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.aicodewith.ai",
    "ANTHROPIC_AUTH_TOKEN": "你的 API Key"
  },
  "model": "claude-sonnet-5-5"
}

ANTHROPIC_BASE_URL 不要带 /v1。我们这次实测用的是 Claude Code 2.1.309 + claude-sonnet-5-5。

Hallmark 一次构建会多轮调用模型、跑脚本、反复改页面，比普通对话吃额度。如果你用的是 Claude 订阅，额度怎么算可以先看Claude Code 额度用完怎么办。

Codex

在全局 ~/.codex/config.toml 里写自定义 provider，写法和Codex config.toml 配置教程一致：

model = "gpt-6.1-sol"
model_reasoning_effort = "medium"
model_provider = "aicodewith"

[model_providers.aicodewith]
name = "aicodewith"
base_url = "https://api.aicodewith.ai/chatgpt/v1"
wire_api = "responses"
experimental_bearer_token = "你的 API Key"

我们实测用的是 Codex CLI 0.164.0 + gpt-6.1-sol。

第二步：安装 Hallmark

# 装给所有项目（-g），Claude Code 和 Codex 都装
npx skills add nutlope/hallmark -g

# 只装给一个客户端
npx skills add nutlope/hallmark -g --agent claude-code
npx skills add nutlope/hallmark -g --agent codex

需要 Node 18 以上。我们实测单独装 Claude Code 用了 14 秒。装完的位置和调用方式：

浏览器自查（sloplint --render）还要 Chrome 和 puppeteer-core：

npm i -g puppeteer-core

没有这两样，Hallmark 只跑静态检查。我们的机器有 /usr/bin/google-chrome，脚本自己找到了。

第三步：给记账 App 做落地页，先挑 3 套主题

在一个空目录里启动 Claude Code，输入：

/hallmark 给记账 App「账小记」做一个落地页，写成 /workspace/hm/build/index.html。先给我 3 套主题挑。

Hallmark 先跑 theme.mjs deal，从 48 套里按需求挑出 3 套：Grid（网格海报）、Formwork（混凝土工地牌）、Studio（设计工作室校样），每套写了配色、字体和适不适合记账 App。它还会追问素材：有没有 App 截图、真实用户数、价格和评价。没有的话它明确说不会编，图片位先放占位。这一轮用了 26 秒。

Claude Code 里 /hallmark 先发 3 套主题并追问素材的终端输出

我们回复：

选 1 Grid。受众是上班族，转化动作是下载 App，调性偏轻松。没有截图和真实数据，用占位，不要编数字。

接下来它做了这些事：

1. 用 theme.mjs scaffold 生成 tokens.css 和 base.css，所有颜色、字号、间距都进 token。
2. 给 Grid 的英文字体栈补了中文回退（PingFang SC、Noto Sans SC、微软雅黑）。
3. 先只写首屏，跑一次 sloplint.mjs --render，在 1280、1440、1920 三个首屏尺寸和 1440、375 两个整页尺寸截图检查。
4. 第一次检查报了「示例数据」标签对比度 1.00:1、下载区太薄等问题，它逐条改，直到 sloplint: clean. 0 FAIL, 0 REFLEX, 0 WARN。

整轮用了 3 分 40 秒。成品首屏如下：标题整句一种颜色，没有眉标，没有单独染色的词，手机示意里的数字都是 ¥ 00.00 并标了「示例数据」。

Hallmark 用 Grid 主题做出的记账 App 落地页首屏（headless Chrome 截图）

用 Codex 也一样。我们在 Codex 里输入 $hallmark 给记账 App「账小记」做一个落地页。这一步只发 3 套主题让我挑，不要写页面。，它同样先跑 theme.mjs deal，这次抽到 Newsprint、Hedgerow、Editorial 三套，用了 34 秒。每次抽签的种子不同，所以两个客户端给的 3 套不一样。

Codex 里 $hallmark 发出 3 套主题的终端输出

第四步：/hallmark audit 给现有页面打分

为了有对照，我们先不用 Hallmark，让 Claude Code 直接「给记账 App 做一个单页落地页」，28 秒就写完了：绿色主题、首屏手机示意、六宫格功能卡、三步上手、FAQ、下载色带。它还自作主张写了一条收费政策，我们把这条编造的说明和相关按钮文案先删了，再拿来审。

/hallmark audit /workspace/hm/bare/index.html

audit 只出报告，不改文件。50 秒后结果是 41 个 FAIL、18 个 REFLEX、5 个 WARN，挑几条有代表性的：

• Floor：颜色和字体写死在 token 之外；10 个 emoji 当图标；焦点环对比度只有 1.60:1；白字绿底按钮对比度 3.45:1。
• Reflex 38iii：「月底不糊涂」单独上色，就是开头说的「标题里单独一个彩色词」。
• 首屏：1440×900 的屏幕上，首屏内容在 575px 就结束了；按钮前堆了 4 个文字块。
• 编造的数字：「三秒」「¥ 2,368.50」「预算已用 68%」「一分钟内」都被当成事实写在页面上。脚本判不了真假，它列出来让你确认。
• 套路化结构：功能六宫格、三步上手、FAQ、CTA 色带，换成任何一家记账 App 的名字都成立。

最后它会告诉你哪一档能修好：restyle（保留版式，换样式系统）能清掉大部分 Floor 问题；首屏、体量和结构问题只有 full（重做版式）能处理。

/hallmark audit 对普通 AI 落地页的审计报告终端输出

第五步：/hallmark redesign 重做并对比

我们把这个页面复制一份，让它全量重做：

/hallmark redesign /workspace/hm/redo/index.html 做 full 重做，这个目录是干净的副本。页面里的编造数字一律改成占位或删掉。

redesign 的关键是「保留内容和链接」。它先用 sloplint --before 把原页的链接、字段、标题都记下来，重做后再用 sloplint --kept 比对，少了什么就报警。实测里它把原标题「三秒记一笔，月底不糊涂」改成了「随手记一笔，月底不糊涂」，--kept 立刻报了 headings gone or reworded，它把改动理由写进页面 CSS 第一行的 Hallmark 记录里才放行。

这次它选了 Loom 主题（米白纸、衬线标题、一条靛蓝色带），结果：

• 4 个站内锚点、6 条功能、3 个步骤、FAQ 都保留。
• 「三秒」「一分钟内」等说法删掉，¥2,368.50、68%、+8,000.00 换成 00.00 并标「示例数据」。
• emoji 图标和手机边框去掉。
• sloplint --render --kept：0 FAIL、0 REFLEX、1 WAIVED、1 WARN。WAIVED 是「常见问题」体量偏薄，它给的理由是重做不能加原页没有的内容；WARN 是 lint 把「8,000」按逗号拆开没匹配上，正文里已经没有这个数。

整轮用了 6 分 11 秒。

/hallmark redesign 全量重做后的终端输出

左边是重做前，右边是重做后，同一份内容（headless Chrome 截图，1440×900 首屏）：

普通 AI 落地页与 Hallmark redesign 后的首屏对比（headless Chrome 截图）

实测耗时汇总

用 Hallmark 写一页比直接写慢得多，时间主要花在「改一轮、渲染检查一轮」的循环上。

使用建议

• 先给素材：Hallmark 不编用户数、评分和评价。你给得越多（截图、真实数字、品牌色），页面越像你的产品。
• 改现有站点要点名：它不会主动改已有页面，必须用 /hallmark redesign <路径>。要保留版式只换样式，就说 keep the layout；只清套路，就说 polish。
• redesign 前先备份或用副本：我们是复制一份再重做，方便对比。
• 不触发就点名：如果它没自动用上，直接说「use hallmark to build ...」。
• 装 Chrome：没有 Chrome 和 puppeteer-core，只有静态检查，首屏高度、对比度这类要渲染才能量的问题查不出来。

创建 API Key →

常见问题

Hallmark 是什么？

Together AI 做的网页设计 skill，给 Claude Code、Codex、Cursor、OpenCode 用。它先从 48 套主题里挑 3 套让你选，再按页面要完成的任务排版，最后在真实浏览器里检查 AI 味套路和可访问性问题。

Hallmark skill 怎么安装？

npx skills add nutlope/hallmark -g，需要 Node 18 以上。只装一个客户端加 --agent claude-code 或 --agent codex。浏览器检查还要 npm i -g puppeteer-core 和 Chrome。

Claude Code 和 Codex 里怎么调用？

Claude Code 用 /hallmark <需求>，Codex 用 $hallmark <需求>。直接描述「做一个落地页」通常也会触发。

48 套主题能指定吗？

可以。它先给 3 套，你回编号就行。不想用主题就说 custom，它只按你的描述设计。

audit 和 redesign 有什么区别？

audit 只出报告，按 Floor、Reflex、Finish 分档列问题，不改文件。redesign 会重做页面，默认保留内容和链接，并用 sloplint --kept 检查有没有漏掉什么。

用第三方 API Key 能跑 Hallmark 吗？

能。我们把 Claude Code 的 ANTHROPIC_BASE_URL 指向 https://api.aicodewith.ai，把 Codex 的自定义 provider 指向 https://api.aicodewith.ai/chatgpt/v1：Claude Code 里安装、出主题、写页面、audit、redesign 都跑通了，Codex 里出主题也跑通了。Hallmark 本身不需要额外的 Key。

生成的页面能直接上线吗？

还要补真实内容。实测里下载按钮的链接、页脚联系方式、App 截图都是占位，Hallmark 会在结尾列出哪些需要你补。上线前在浏览器里自己看一遍。