引言
让 AI 生成的页面“看起来像人做的”，难点不在于加什么，而在于不要什么。
这是"一天一个开源项目"系列的第 249 篇文章。今天带你了解的项目是 Hallmark（Nutlope/hallmark）。
你大概已经见过那种页面：标题上方一行小字大写的“眉标”，标题里有一个词被染成渐变色，卡片套着卡片，页面末尾一个邮件订阅框，表单点了提交却什么也没发送。这些不是某个模型独有的毛病，而是几乎所有编程助手在没有约束时会掉进去的默认值。
Hallmark 的定位很明确：它是一个 Skill，让编程助手生成的 UI 看上去是“做出来的”而不是“生成出来的”。它不教模型审美，而是把“机器味”的特征逐条写成规则，再用工具去检查。
你将学到什么
- Hallmark 解决什么问题，以及它为什么选择"约束"而不是"提示词润色"
- Floor / Reflex / Finish 三档规则的设计思路
- “发牌”机制：48 套主题、三选一、用日志避免连续构建趋同
- sloplint 如何在真实浏览器里检查页面，以及“新鲜上下文评审”的作用
- redesign 和 audit 两个动词如何保证不丢内容与功能
- 适用场景与局限
前置知识
- 用过 Claude Code、Codex、Cursor 等编程助手，知道 Skill 是什么
- 了解基本的 HTML / CSS，知道 :focus-visible、prefers-reduced-motion 这类概念更好
- 对“怎么给 AI 的产出加质量门禁”感兴趣
项目背景
项目简介
Hallmark 是一个设计类 Skill，适配 Claude Code、Codex CLI、Cursor 和 OpenCode。README 的概括是：它守住一条硬底线，然后让开；从 48 套"材质"里发三套主题，围绕访客来做的事搭页面，再在真实浏览器里用一套规则检查结果，最后交给一个全新上下文的评审者做最终判断。
它检查的"机器味"包括：
- 每个标题上方都有一行眉标
- 全大写加字距的标签
- 标题里只有一个词上了色
- 整页都是空框，或者全是照片
- 首屏装不进屏幕的 hero
- 每个页面结尾都有一个邮件订阅
- 点了"提交"只显示感谢、实际什么都没发的表单
作者与团队
- 出品：Together AI（README 署名"Made by Together AI"）
- 仓库所有者：Nutlope，即 Hassan El Mghari，GitHub 上约 8800 关注者、111 个公开仓库
- 创建时间：2026-04-27，当前为 v2.0.0
- 官网：usehallmark.com
项目数据
数据取自 2026-10-27 的 GitHub，仅供参考：
- ⭐ GitHub Stars: 约 37,900
- 🍴 Forks: 约 1,970
- 📦 版本: v2.0.0（SKILL.md 中标注）
- 📄 License: MIT（照片库中的图片各自保留原授权）
- 🌐 官网: usehallmark.com
- 💻 语言构成: CSS、HTML、JavaScript、Python、TypeScript（仓库里大量 CSS / HTML 来自站点和评测夹具）
主要功能
核心作用
Hallmark 在一次页面构建里做四件事：
- 预检：读项目现有的字体、色板、框架和锁定的 design.md，只问一次需要的素材
- 发牌：从 48 套主题里发三套，选定一套；再按页面要完成的"工作"发出页面的解剖结构
- 先建 hero：只写导航和首屏，渲染出来，用全新上下文评审，通过后再写其余部分
- 扫描：sloplint --render 在 8 种宽度下检查页面，随后由子智能体用新鲜的眼睛评审
产出是自包含的 HTML 和 CSS，第一段 CSS 注释里会盖一个"戳"，记录这页做了哪些决定。
使用场景
- 从零生成落地页或营销页
- 给一句话需求，让助手发牌、搭页面，而不是套通用模板
- 给现有页面做体检
- /hallmark audit ./index.html 只出报告，不改文件
- 重做现有页面但保留内容与功能
- /hallmark redesign ./src/app 保留内容和接线，只换系统与布局
- 给团队的 UI 输出加质量门禁
- 用 sloplint 单独检查任意页面或目录，可以接到编辑时的钩子里
- 做自定义设计
- 说一句 custom，Hallmark 放弃主题，只留底线和门禁，从你的提示词里找出"只有这个客户才有的一个点子"
快速开始
# 安装到所有项目（去掉 -g 则只装到当前项目）
npx skills add nutlope/hallmark -g
# 只装给某一个 harness
npx skills add nutlope/hallmark -g --agent claude-code
需要 Node 18 或更高版本。浏览器检查（sloplint --render、截图）还需要 npm i -g puppeteer-core 和 Chrome；没有它们，静态检查仍然会跑。
也可以作为 Claude Code 插件安装：
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark
如果它没有自己触发，直接说：use hallmark to build ...。
单独检查任意页面：
node skills/hallmark/scripts/sloplint.mjs <文件或目录> --render
核心特性
- 48 套材质主题
- 每套是一个"材质"（纸张、字体、颜色、表面、自己的组件和质感），附一张成品页面图，每个主题文件不超过 8 KB
- 从工作出发搭页面
- 预约页就是用来预约的，商店就是用来卖的，订阅页就是用来订阅的：行动放在这类网站通常放的位置，页面也以它收尾
- 真实产品截图
- 给一个 URL、开发服务器或应用，它自己截图，而不是画一个假的产品窗口
- 755 张开放授权照片
- 按主题挑选并在页面上署名，来自 Wikimedia Commons，不使用 Unsplash、Pexels 等条款禁止 AI 工具选图的图库
- redesign 与 audit
- 前者重做并保留内容与接线，后者只报告问题
- 三档规则
- Floor 永不放行，Reflex 可有理由地豁免，Finish 只提示不阻塞
项目优势
为什么值得看？
- 它把"设计好不好"这种主观问题，拆成了一批可以机器检查的具体规则
- 规则分档，承认并非所有规则都该一刀切，同时保留不可破的底线
- 对任何想给 AI 产出加门禁的 Skill 作者，这是一个完整的参考实现
项目详细剖析
三档规则：Floor、Reflex、Finish
这是整个项目的骨架。gates.md 里每条门禁都有一个档位，它决定你能不能不同意它：
Floor 里有 16 条规则，比如：
- 颜色和字体必须经过 :root 里声明的 token，之后不许出现字面颜色或 font-family
- 禁止 transition: all，禁止对 width、height、top、left 做动画
- 禁止标题里只有一个斜体词
- 每个可交互元素都有 :focus-visible，并且是即时出现
- 每个动画都要有 prefers-reduced-motion: reduce 的回退，关掉脚本内容也必须可见
- 禁止编造指标、评价、Logo 墙或案例数量
- 禁止眉标，禁止全大写加字距的标签
- 禁止用中点连接的元数据字符串、紧贴链接文字的箭头、装饰性状态圆点
- 禁止紫到蓝的渐变、卡片套卡片、用 emoji 当图标、手绘的浏览器或系统窗口
- 单屏大约 80 个词，hero 的文字只有一个标题、一句话和操作
注意其中有几条被明确标成"家规"：眉标（54）、屏幕字数预算（58）、模板标点（63）和字距大写（67）。作者的意思是，这些是"机器味"最稳定的信号，所以 Hallmark 比业界一般做法更严。
豁免写在 CSS 的戳里，格式是三个字段：门禁号、保护证据、理由。
/* Hallmark · waive 47b · one frame, a real terminal capture inside · the terminal is the product being sold */
对 Floor 门禁提出的豁免会被拒绝，门禁照常触发。sloplint 会重新推导保护条件，所以说不出理由的豁免通常自己就站不住。
门禁编号里还有一个细节：已退役的编号（5、13、14、21 等）永不复用，这样旧的戳依然可以读。
发牌：用日志避免趋同
怎么让连续的几次构建不长一个样？Hallmark 的做法是发牌：
node <skill-dir>/scripts/theme.mjs deal --genre <genre> --prompt "<提示词>" [--log .hallmark/log.json]
它从 48 套主题里发出三套符合提示词、并且避开日志中近期已用过的主题。助手看三张图片，选材质最能承载这次需求（动效、照片、代码）的一张，并说明理由。
选定主题后，再运行 draw：
node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <job> --theme <slug>
它按页面的"工作"发出：页面的形态、hero 的姿态、导航、页脚、第一个区块、行动的位置、两个要避开的构图，以及 hero 以什么领头。
README 里有一句话概括这个设计：主题是材质，不是计划。主题从不规定页面包含什么、按什么顺序，所以同一个主题下的两个提示词会得到两个不同的页面。
作者还加了一个"镜像测试"：邻近的同类提示词，会不会得到完全相同的组合？如果会，就改掉一个决定并说明改了哪个。
每次构建都会写入 .hallmark/log.json，字段包括 shape、theme、hero、nav、footer、photos、signature、waived 和 fingerprint，下一次发牌据此回避。
主题长什么样
以 Dusk 为例（金融对账类产品）。一个主题文件的头部是一份元数据：
name: Dusk
slug: dusk
genre: modern-minimal
paper: dark 17.5 268
display: grotesk-sans Wix Madefor Display
accent: cool 274
posture: committed
keywords: treasury, banking, fintech, payments, reconciliation, ledger, ...
keywords 是发牌时匹配提示词用的。正文描述这个材质："一天结束时的钱款软件"：hero 后面是黄昏时分的真实土地照片，标题放在最亮的部分上，产品窗口是带高光边缘的烟熏玻璃，往下页面转为石板色，浅色表面是骨白色的"井"。
后面是完整的 token（用 oklch 色彩空间），以及三个"旋钮"：同一次运行里两个 Dusk 页面至少要在两个旋钮上不同。
仓库里的 48 个主题都遵循类似的格式，从 almanac、arcade、atelier 到 terminal、vellum、werkstatt。
构建流程：先建 hero，再建其余
SKILL.md 把流程拆成 7 步，关键约束有：
- 先问一次：材质（页面能展示什么）、受众、用途、语气。"clean and modern"不算语气，必须选一个极端（编辑、粗野、柔和、实用、奢华、顽皮、技术、克制）
- 事实不推断：没给的数字、评价、Logo 一律缺席，没给的图片就用库里的图占位
- 先建 hero：只写导航和首屏，跑 sloplint --stage hero，再让全新上下文评审，通过后才建其余区块
- 一屏一个想法，放大来讲：标题不超过 7 个词，一句话不超过 12 个词，6 到 9 个区块，可见文字最多 450 词，照片最多占 hero 以下页面的三分之一
- 从脚手架起步：theme.mjs scaffold <slug> 写出 tokens.css 和 base.css，助手只写页面本身
- 已有样式表只追加：导入语句放在最后一个 @import 之后，复用项目已有的 token 名
“签名”这一条也很有意思：每个页面要有一个访客会记住的东西，是这个提示词里最强的真实素材被展示到最好，比如一张就是那个地方的照片，或者产品正在做它的那件事，并且在首屏展示、在 Picks 块和戳里点名。
评审：sloplint 加新鲜上下文
检查分两层。
sloplint 是一个零依赖的脚本（sloplint.mjs 约 230 KB，渲染层 sloplint-render.mjs 约 99 KB），能读 HTML、CSS、框架组件和 Tailwind 类名。加上 --render 后，它会在真实浏览器里测量：
- 三种宽度下的首屏
- 文字与它背后像素的对比度
- 通过 Tab 键找到的焦点环
- 区块节奏、照片占页面的比例
- 标题是否挤压了前面的内容
- 文字是否贴着盒子边缘、或被别的元素盖住
它对每条门禁给出分级：FAIL、REFLEX、WAIVED、WARN、ANSWERED、NOTE。
新鲜上下文评审是第二层：由子智能体在没看过构建过程的情况下，只读评审提示词和成品，给出第一个词作为结论（recapture、rebuild、fix 或 ship）。SKILL.md 明确说"构建者永远不打开 review-*.md"，避免构建者对着评审标准写页面。
构建者要在 Picks 块的最后一行如实写结果，例如 Floor 0 FAIL · Reflex 2 (1 waived: 47b) · finish-review: subagent, 3 resolved。文档里有一句：伪造的通过本身就是 slop。
redesign：先记录，再重做，丢了就失败
redesign 是 Hallmark 里最像"安全工程"的部分。它只在用户点名时才会碰已有设计：
/hallmark redesign ./src/app
/hallmark audit ./index.html
完整的 redesign 保留内容和接线，只换系统与布局；说 keep the layout 是换皮，说 polish 只修"机器味"。
机制上：
- sloplint --before 先记录页面里的每个链接、表单字段、事件处理器和标题
- sloplint --kept 在重做完成后对比，少了任何一项就让 redesign 失败
- 交付物是前后对比
另外 SKILL.md 还规定：在已有项目里，先说出要改哪些文件；没有用户批准的文件级计划，不删除任何路由或组件树。
图片与素材的诚实性
Hallmark 对图片的态度很克制：
- 优先用户自己的图片，其次是对真实产品的截图（scripts/capture.mjs），再其次是在无法触达产品时按全保真度搭出来的产品，最后才是库里的照片
- 照片库 photos.json 约 450 KB，只列出托管在 Wikimedia Commons 上的照片，不含任何图片文件；每张保留自己的授权（CC0、公有领域、CC BY 或 CC BY-SA），页脚会署名
- 禁止的东西包括：stock 网站 URL、手绘插画、空白色块、一排计数标记、编造的数字
评测：eval 目录
仓库的 eval/ 目录有一套评测，包括 briefs.json（测试用的需求）、run-matrix.py、judge.py、score.mjs、report.mjs 和 index.html，用来在不同模型和 harness 上批量生成页面、截图、打分、出报告。ROADMAP 里也承认："在 Claude Code、codex exec 和 OpenCode 上跑同一个需求，断言它们都能达到 0 FAIL"这一项还在"Now"里，没有做完。
路线图里值得注意的几条
ROADMAP 里列了作者自己的判断：
- 米白或奶油纸张、药丸按钮、近黑加一个酸性强调色、发丝线报纸风，现在都已经"读起来像生成的"。自定义模式已经把它们当作用完的风格，但目录里的主题还需要决定：是保留为只在特定关键词下发的有意材质，还是重新换纸换形
- 未来方向包括：随主题变化的动效 token、多页面一致性（锁定品牌轴，变化页面语气轴）、从产品描述生成完整品牌的"品牌优先"流程、编辑时钩子默认开启，以及应用界面的深度检查
这说明作者在持续追着"AI 味"本身的漂移：今天的反套路，明天可能就成了新套路。
适用范围与局限
- 只用于新建，或点名使用：SKILL.md 明确说"除非用户点名 Hallmark，否则不要在现有设计上使用"。别的改动应该按项目自己的体系来做
- 强观点：规则多且严格，比如禁止眉标、禁止字距大写，如果你的品牌恰好依赖这些，需要在自己的 design.md 里锁定，并且 Floor 级规则不能豁免
- 浏览器检查需要额外依赖：puppeteer-core 和 Chrome；没有的话只有静态检查
- 多 harness 一致性仍在验证中：这是 ROADMAP "Now" 里的事项
- 成本：流程里有预检、先建 hero、两次评审、sloplint 渲染多轮，单次构建的 token 与时间成本不低；ROADMAP 里也有"测量一次构建"的任务。SKILL.md 提供了 fast mode，适用于"快速、粗糙、原型"的场景
- 照片库的局限：来自 Wikimedia Commons，题材和风格有限，并且必须在页面署名
项目地址与资源
官方资源
- 🌟 GitHub: github.com/Nutlope/hal…
- 🌐 官网与全部主题: www.usehallmark.com
- 📚 规则正文: 仓库内 skills/hallmark/references/gates.md
- 🗺️ 路线图: 仓库内 ROADMAP.md
- 🐛 Issues: github.com/Nutlope/hal…
相关资源
- Together AI（出品方）: together.ai
- 评测套件: 仓库内 eval/README.md
总结与展望
核心要点回顾
- 约束胜过提示词润色：把"AI 味"拆成可以逐条检查的规则，再用工具去检查，比反复叮嘱模型"要有设计感"可靠得多
- 规则分三档：Floor 不可破，Reflex 可有理由地豁免并留下记录，Finish 只提示，既有底线又不僵化
- 发牌防趋同：48 套主题加日志，让连续的构建不撞车，"主题是材质不是计划"
- 两层验证：sloplint 在真实浏览器里量，再交给新鲜上下文的评审者，且构建者看不到评审标准
- 重做要可证明地不丢东西：先记录每个链接和字段，丢了就失败
适用人群
- 经常让 AI 生成落地页、官网、产品页，又对"千篇一律"的结果不满意的开发者和独立创作者
- 想给自己的 Skill 加质量门禁、需要参考"规则分档加机器检查加独立评审"结构的 Skill 作者
- 做前端工程的同学，可以直接拿 sloplint 当页面质量检查工具使用
使用建议
先用 /hallmark audit 对一个现有页面跑一遍，看看它报出哪些问题，感受规则的尺度；再选一个小需求完整走一遍构建，注意读它最后的 Picks 块。如果你有品牌规范，先用 design.md 把系统锁起来。
探索 PrimeSkills —— 精选 AI agent 和技能工具，每一个都经过真实工作流验证。没有炒作，只有真正好用的工具。
访问我的个人主页，获取更多见解和有趣的产品。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。