Hallmark：把「拒绝 AI 味」写成一册设计宪法的技能
在 GitHub Trending 上，一个叫 hallmark 的仓库一天之内新增了两千多个 star。它出自 Together AI 的开发者关系工程师 Nutlope（哈桑·马哈茂德）之手，定位一行说清：给 Claude Code、Cursor、Codex 和 OpenCode 用的设计技能，产出「看起来被人设计过，而非被机器生成」的页面。MIT 协议，仓库 2026 年 4 月底创建，如今累计 36,000+ star。
AI 生成网页有一种一眼可辨的气质：紫到蓝的渐变、每个标题上方浮一行小字标签、图标配圆角卡片的三等分排列、页尾必挂一个邮箱订阅框。社区给这类页面起了个名字，叫 AI slop。slop 原意是泔水，引申为大量廉价产出。hallmark 要解决的就是这个问题，但它给出的答案与「让模型更会设计」无关，而是一册把禁令逐条编号、分级、可执行化的设计宪法。
问题：模型的审美是训练出来的条件反射
编码智能体生成前端页面时的套路化，根源在训练数据。大量真实存在的落地页都长着同一副面孔：hero 区一行大标题配渐变背景，往下三栏功能卡片，页尾行动号召。模型见过几百万个这样的页面，于是「设计一个落地页」对它来说等价于复述统计均值。单个输出看不出问题，批量输出之后，所有页面开始趋同：同样的渐变、同样的卡片、同样的文案腔调（seamless、empower、unlock 这类空转的形容词）。
hallmark 的核心判断是：这些行为属于条件反射，与设计能力无关。模型的默认行为可以被规则强制打断。所以它的第一层结构是一份十六条的 Floor（底线），任何输出、任何宿主环境都不可豁免。
十六条底线的构成横跨四个层面。代码层面：所有颜色和字体必须经过 :root 声明的 token，token 块之外不允许出现字面量颜色；禁止 transition: all；禁止动画 width、height、top、left。视觉层面：禁止标题里嵌一个斜体词；禁止紫到蓝渐变；禁止卡片套卡片；禁止用 emoji 当图标；禁止手绘风格的浏览器窗口。版式层面：hero 区的标题、一句话简介和主动作必须在 1280 x 800 视口内一屏可见；任一屏幕文字量约 80 词封顶；1920 宽度下容器封顶居中，长出的是页边距而非内容。文案层面：禁止编造指标、证言、客户 logo 墙；禁止「Learn more →」这类箭头粘在链接文字上的写法；禁止中点连接的元信息串（A · B · C）。
其中最值得展开的是第 54 号门（eyebrow 禁令）。eyebrow 指标题上方那行短小的预告文字，比如标题是「产品定价」，上方浮一行灰色的「PRICING」。这是 AI 生成页面的最高频特征之一，hallmark 把它定为 house rule（家规）：没有 admired page 会故意违反的规则才配进 Floor，而 eyebrow 被模型滥用的频率高到 hallmark 宁可比整个行业更严格。同类家规还有 58 号（80 词屏幕预算）、63 号（模板标点）、67 号（大写间隔字母标签）。
三级门禁：Floor、Reflex、Finish
十六条底线之外，hallmark 把约束组织成完整的分级系统，这套分级才是它区别于普通 style guide 的地方。
Floor（底线） 永不豁免：对比度、焦点可见性、reduced-motion 回退、编造事实、破损的手机布局，加上上述家规。Reflex（条件反射） 是模型的默认倾向，如果有真实理由可以在「记录在案」的前提下豁免——豁免要写进 CSS 首行的 stamp 注释块，格式是三段式：违反哪条门、守卫证据是什么、这页为什么例外。同一道门连续三次构建都被豁免，sloplint 会提示「这是你的 house style，该写进 design.md 了」而非继续放行。Finish（收尾） 是工艺细节，只报告不阻断发布。
分级的执行者是一个零依赖、Node 18+ 的静态检查器 sloplint。它解析 HTML/CSS，连 Tailwind 工具类和 cva/clsx 调用里的类字符串都扫；加 --render 参数后在真实浏览器按八种宽度渲染检查；对每条发现输出 FAIL（Floor 违反，不许上线）、REFLEX（未应答的条件反射：修复或豁免）、WARN（疑似：确认或驳回）等六种等级。门的编号有退休机制：5、13、14 等旧编号永不复用，保证旧项目的 stamp 注释今天仍然可读。
这个设计里有一个工程上很讲究的取舍：sloplint 的层级映射直接从 gates.md 文件派生，文档与代码冲突时文档优先。规则的可读版本就是权威版本，lint 工具只是它的实现。
四十八种材质，发牌而非模板
只有禁令做不出好设计，hallmark 的正面供给是主题系统。四十八个主题，每个是一个不超过 8 KB 的 Markdown 文件加一张成品页图片。主题定义的是材质（material）：纸张、字体、色彩、表面、组件质感，但刻意不定义布局和内容顺序。文档里写得很清楚：主题是材质而非方案，同一个主题、同一个提示词，构建两次得到两个不同的页面。
以金融软件主题 Dusk 为例：OKLCH 色彩空间定义的完整 token（纸面 oklch(17.5% 0.014 268)、骨白色井字亮面、一个长春花蓝信号色加一个杏黄强调色）、Wix Madefor Display 的展示字重、三个可调拨盘（hero 照片在雾谷/水岸/山脊之间选、信号色对、产品表面用烟玻璃还是骨白井）。构建时 theme.mjs deal 按 prompt 从牌堆里发三张，构建者看三张图片挑一张撑得起这个 prompt 的材质。发牌机制配合 mirror test 使用：如果隔壁同类 prompt 会得到一模一样的组合，就换掉一个决定并声明换了哪个。
构建流程与诚实原则
一次构建的流程是七步：pre-flight 读取项目现状（锁定的 design.md 优先级最高、项目字体色板、真实产品截图）→ 一次性问齐四件事（素材、受众、用途、语气，「clean and modern」不算语气）→ 从职业分类读解剖结构（订票页面就该订票，页面在动作处结束）→ 发牌定主题 → 输出 Picks 块（本次所有设计决策的唯一陈述，也是用户的redirect窗口）→ 先单独构建并冷评审 hero，再建整页 → sloplint 扫描直到零 FAIL，再由一个子代理用新鲜上下文终审。
整套流程里反复出现的是诚实原则。素材清单三分类：real（prompt 和项目真实提供的）、pictures（页面要展示什么、每张来自哪里）、absent（这个页面不会有的证明：没人给过 logo、引言、数字）。第 46a 号门把编造指标定为 Floor 级；第 70 号门拦截「假发送」——表单没接后端就打出「已提交」成功提示；第 84 号门要求产品能跑就必须真跑起来截图，不许画一个假的界面示意图。配图也遵循同一逻辑：内置 755 张开放授权照片库（来自 Wikimedia Commons，逐张标注许可并在页面署名），刻意不用 Unsplash、Pexels 这类明确禁止 AI 工具调用其图库的图站。
对已有设计，hallmark 态度克制：不主动碰任何已存在的设计，除非用户显式调用 /hallmark redesign。重设计时先用 sloplint --before 记录页面上每个链接、表单域、事件处理器和标题，完工后 --kept 核对一个都没丢，交付物是一张前后对照。/hallmark audit 则只报告不改动。
安装与定位
安装一行命令：npx skills add nutlope/hallmark -g，全局装到 ~/.claude/skills/hallmark（Codex 是 ~/.agents/skills/hallmark，Cursor 和 OpenCode 自动发现已有副本）。渲染检查需要 npm i -g puppeteer-core 加 Chrome，没有则静态检查照常运行。也可以走 Claude Code 插件市场：/plugin marketplace add nutlope/hallmark。
把 hallmark 放进更大的背景看，它属于编码智能体工具链里正在成形的一层：skill（技能）作为可安装的专业能力包。模型不缺设计知识，缺的是把「好设计」翻译成模型无法绕过的机械约束。hallmark 用编号门禁、分级豁免、静态检查器、发牌式主题把这整套翻译做完了，四十八条门禁每条一行，读起来像法典，执行起来像 lint。对每天用编码智能体产出页面的人，这是一个可以直接装上改变输出质量的工具；对设计工程化这个方向，它是一份足够完整的参考实现。