Skill hallmark 给AI设计加底线拒绝千篇一律的机味页面

用 AI 写前端页面，最大的尴尬不是做不出来，而是做出来「一眼机味」：千篇一律的 Inter 字体、紫到蓝的渐变、卡片套卡片、灰色文字压在彩色背景上、每个标题上方都顶着一个小眼睛图标。这些「AI slop」告诉别人这页是机器生成的，专业感瞬间归零。更麻烦的是，模型都训练在同一批 SaaS 模板上，你不加约束，每个项目都会长出同样的那几个 tell。

Hallmark 是 Together AI 出品的一个设计 skill，专门给 Claude Code、Codex、Cursor、OpenCode 这类代理「立规矩」：它先守住一条设计底线（Floor），再用分层闸门（Reflex / Finish）在发布前卡掉那些读起来像机器产物的痕迹，最后让一个冷启动的审查代理拍板。

项目基本信息

一、项目介绍

Hallmark 是一个面向编码代理的设计 skill，口号是「让页面看起来不像 AI 生成的」。它的工作方式是先守底线、再让路：守住一条永远不能上线的 Floor（对比度、焦点、减弱动效、编造事实、手机布局崩坏），然后用 Reflex 闸门拦掉模型最容易掉进去的默认套路（每个标题上方的 eyebrow、tracking 大写标签、标题里一个彩色词、整页空框架、结尾千篇一律的邮件订阅框），最后用 Finish 检查做工艺层面的收尾，但工艺问题不阻塞发布。

它内置 48 套主题，每套都是一个「材质」而非「模板」：纸感、字体、配色、表面、组件和纹理各成体系，并附一张成品页截图。你给两个不同 prompt，同一个主题也能长出两页不同的东西。

二、核心优势

第一，硬底线加分层闸门。Floor 永远不发，Reflex 是模型默认陷阱、有理由可申诉，Finish 是工艺细节不卡发布，层次清楚。第二，48 套材质主题。每套独立成文件（最多 8 KB），构建时只读一份，可组合可定制。第三，真实浏览器 lint。脚本 sloplint.mjs --render 会在八个宽度下渲染页面，再由一个子代理冷眼复审，专门抓「机味」痕迹。第四，会自己抓图。指向一个 URL、dev server 或 app，它自己截图，不靠你手动喂素材。第五，重设计与审计分离。/hallmark redesign 重建页面但保留内容与接线，/hallmark audit 只出报告不动手。

三、适用场景

适合所有「用 AI 做落地页 / 产品页 / 官网」的场景：独立开发者快速出能拿出手的首页、设计师用 AI 辅助但怕同质化、团队想统一视觉规范又不想被模板绑架。也适合把已有页面丢给它做「去 AI 味」审计，找出那些暴露机器身份的痕迹。

四、安装教程

需要 Node 18 或更高版本。一行安装到全局（所有项目可用）：

npx skills add nutlope/hallmark -g

不加 -g 则只装进当前项目。若只想装进某一个 harness：

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

（--agent 可换 codex、opencode、cursor、github-copilot。）

常见报错：浏览器相关检查（sloplint --render、自动截图）需要额外装 npm i -g puppeteer-core 和 Chrome；没装时静态检查仍会运行，只是不会做渲染级复审。另外第一次调用若没自动触发，直接在对话里点名「use hallmark to build ...」即可。

五、使用示例

装好后，在代理里直接说一句话就能开建：

/hallmark build a landing page for my indie reading app

想重建已有页面并保留内容与接线：

/hallmark redesign ./src/app

只想审计、不改：

/hallmark audit ./index.html

构建流是：预检读取项目（字体、配色、框架、锁定的 design.md）→ theme.mjs deal 发三套契合 prompt 的主题 → 先把 hero 单独建出来冷渲染复审 → sloplint.mjs --render 在八宽度下检查，最后子代理复审。产出是自带 HTML/CSS 的单页，并在首条 CSS 注释里盖了它做过的决策章。

六、常见问题

问：Hallmark 和 Anthropic 的 frontend-design skill 什么关系？答：Hallmark 受后者启发但更完整，加了 48 主题、浏览器级 lint 和重设计/审计命令。问：一定要用浏览器检查吗？答：不强制，缺 puppeteer-core 时静态闸门照常跑，只是少了渲染级复审。问：主题能定制吗？答：可以，说 custom 它就只靠底线、闸门和一条方向文件来为你从 prompt 生发设计。问：图片版权？答：它用的是 Wikimedia Commons 上 755 张开放授权照片并逐页署名，不碰 Unsplash/Pexels 这类禁止 AI 取图的图库。

七、总结

Hallmark 解决的是 AI 做页面最尴尬的「同质化机味」问题：它不替你决定内容，而是用底线 + 闸门 + 真实浏览器复审，把那些暴露机器身份的痕迹挡在发布之前。对于想用 AI 又快又体面地出页面的开发者，它比单纯让模型自由发挥靠谱得多；代价是要装 Node 18 和可选的 Chrome 才能跑满全部检查。