Skill Hallmark 让 AI 生成的前端摆脱模板味

用 Claude Code、Cursor 或 Codex 生成一整个落地页，十次里有八次长一个样：Inter 字体、紫到蓝的渐变、卡片套卡片、灰色文字压在彩色块上、标题上方永远顶着一个小圆角图标。模型都在同一批 SaaS 模板上训练过，你不加约束，它只会复读那些“看起来高级但其实空洞”的套路。更糟的是，这些页面还常常带着 AI 味儿——每个标题下面一句 eyebrow、一个彩色关键词、页面末尾雷打不动的邮箱订阅框。

Hallmark 是 Together AI（仓库挂在 Nutlope 名下）做的一个设计技能（skill），专门用来治这种“AI 味”。它不替你决定页面放什么，而是先立一条硬底线（对比度、焦点、减弱动效、不编造事实、手机布局不能崩），再给一套可选的“材质主题”，最后用真实浏览器渲染去 lint 那些暴露机器痕迹的细节，并让一个带全新上下文的子代理做最终评审。

项目基本信息

一、项目介绍

Hallmark 把自己定位成“反 AI 水军味”的设计技能。它持有一条永不妥协的底线（Floor），然后主动让开：从四十八种材质里发三张牌，围绕访客真正要做的事搭页面，再用真实浏览器对照那些“读起来像机器生成”的破绽做检查。这些破绽包括：每个标题上方的小字、字间距拉开的英文标签、标题里那个被染色的单词、一整页空框或只剩照片、永远够不到首屏的 hero、每页末尾都来一个的订阅框、以及“感谢提交”却什么都不发送的表单。

门槛是分层的：Floor 是绝不出货的硬指标（对比度、焦点、减弱动效、编造事实、手机布局崩坏）；Reflex 是模型容易掉进去的默认套路，有理由时可以留记录推翻；Finish 是工艺细节，不阻断发布。v2 之后扩展到四十八种主题，每种都是一套材质（纸张、字体、配色、表面、自带组件与纹理），并配一张成品图，构建时自己据此排版。

二、核心优势

其一，底线不可绕过。对比度、焦点态、减弱动效这类 accessibility 硬指标由脚本强制，模型再会讨好也绕不过去。

其二，主题即材质而非模板。主题从不规定页面内容与顺序，所以同一主题下两个提示词能产出完全不同的页面，避免“千站一面”。

其三，真实浏览器校验。sloplint 在八种宽度下渲染页面，再交给一个带新鲜视角的子代理评审，把“我觉得还行”变成可复现的检查。

其四，支持改造与审计两种模式。/hallmark redesign 保留原内容与接线只换设计系统；/hallmark audit 只报不改，适合接手别人生成页时先摸清问题。

三、适用场景

适合“用 AI 写页面但不想看起来像 AI 写的”几乎所有前端场景：落地页、产品官网、活动页、作品集。特别是团队已经有设计系统、只是缺一个能把模型产出拉回正轨的守门员时，Hallmark 的 lint 与审计价值最大。

它也适合做存量页面的体检：把别人的 AI 生成页丢进去 audit，几秒拿到一份“哪里露怯”的报告，再决定要不要 redesign。对设计资源紧张、又不愿意被套模板的小团队尤其友好。

四、安装教程

Hallmark 通过 skills 机制安装，需要 Node 18 及以上。全局安装到所有项目：

npx skills add nutlope/hallmark -g

只装当前项目就去掉 -g。想限定单一 harness：

npx skills add nutlope/hallmark -g --agent claude-code

常见报错与处理：

command not found: npx

说明没装 Node。去 nodejs.org 装 18+ 版本，或确认 PATH 已包含 Node。

sloplint: puppeteer executable not found

浏览器渲染检查依赖 Chrome。装一下：npm i -g puppeteer-core 并确保本机有 Chrome；不装也能跑静态检查，只是少了真实渲染那一关。

各 harness 落点不同：Claude Code 在 ~/.claude/skills/hallmark，Codex 在 ~/.agents/skills/hallmark，Cursor 与 OpenCode 复用上面的副本。也可作为 Claude Code 插件：/plugin marketplace add nutlope/hallmark 后 /plugin install hallmark@hallmark。

五、使用示例

新建一个预订类页面，让 Hallmark 自己选材质并构建：

/hallmark build a booking page for a private chef service

它会先问你缺的素材（照片、截图、真实数字），然后 scripts/theme.mjs deal 发三张贴合提示词的主题牌，draw 按“订座”这个任务排出页面骨架，单独渲染并冷评审 hero，最后才补全其余部分。

假设你已有 ./src/app 想整体翻新但保留内容与路由：

/hallmark redesign ./src/app

预期它会先 sloplint --before 记录所有链接、字段、处理器与标题，重做后 sloplint --kept 校验一样没丢，并产出前后对比。若只想诊断：

/hallmark audit ./index.html

输出是一份“哪里像 AI 生成”的清单，而不是修改后的文件。

六、常见问题

问：Hallmark 会替我写内容吗？
答：不会。它坚持“绝不编造”——照片、截图、真实数据都来自你提供或它自己抓取的页面，没有的就不填，底线里明确禁止虚构事实。

问：主题只有四十八个够用吗？
答：主题是可扩展的材质，且支持 custom 模式——只给方向不给模板，让它从你的提示词里找一个只有你客户才有的点子来驱动页面。

问：照片版权有风险吗？
答：Hallmark 的图片库指向 Wikimedia Commons，每张都保留自己的许可（CC0、公有领域、CC BY 或 CC BY-SA）并在页脚署名，明确不使用 Unsplash、Pexels、Pixabay 这类禁止 AI 工具选图的图库。

问：能只做检查不改文件吗？
答：可以。audit 只报告；即便 redesign，也有 keep the layout / polish 等 milder 选项。

七、总结

Hallmark 解决的是一个被很多人忽略的问题：AI 能写页面，但写出来的“像 AI”。它用一条硬底线加真实浏览器 lint，把模型拉回“像人做过的设计”。MIT 协议，可自由 fork 与商用。建议从 usehallmark.com 看四十八种主题成品图，再在自己的下一个落地页上跑一次 build，体会“Floor 兜底、质感自选”的差别。