一天一个开源项目（第249篇）：Hallmark —— 一个拒绝“AI 味”的设计 Skill，用 48 套材质主题和浏览器 Linter 约束编程助手

冬奇Lab
0 阅读16分钟

引言

让 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 在一次页面构建里做四件事：

  1. 预检：读项目现有的字体、色板、框架和锁定的 design.md，只问一次需要的素材
  2. 发牌：从 48 套主题里发三套，选定一套；再按页面要完成的"工作"发出页面的解剖结构
  3. 先建 hero：只写导航和首屏，渲染出来，用全新上下文评审，通过后再写其余部分
  4. 扫描：sloplint --render 在 8 种宽度下检查页面，随后由子智能体用新鲜的眼睛评审

产出是自包含的 HTML 和 CSS，第一段 CSS 注释里会盖一个"戳"，记录这页做了哪些决定。

使用场景

  1. 从零生成落地页或营销页

    • 给一句话需求，让助手发牌、搭页面，而不是套通用模板

  2. 给现有页面做体检

    • /hallmark audit ./index.html 只出报告，不改文件

  3. 重做现有页面但保留内容与功能

    • /hallmark redesign ./src/app 保留内容和接线，只换系统与布局

  4. 给团队的 UI 输出加质量门禁

    • 用 sloplint 单独检查任意页面或目录，可以接到编辑时的钩子里

  5. 做自定义设计

    • 说一句 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；没有它们，静态检查仍然会跑。

Harness安装位置调用方式
Claude Code~/.claude/skills/hallmark/hallmark <提示词> 或直接描述新建需求
Codex CLI~/.agents/skills/hallmark$hallmark <提示词>
Cursor读取上述副本/hallmark <提示词>
OpenCode读取上述副本/hallmark <提示词>

也可以作为 Claude Code 插件安装：

/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark

如果它没有自己触发，直接说：use hallmark to build ...。

单独检查任意页面：

node skills/hallmark/scripts/sloplint.mjs <文件或目录> --render

核心特性

  1. 48 套材质主题

    • 每套是一个"材质"（纸张、字体、颜色、表面、自己的组件和质感），附一张成品页面图，每个主题文件不超过 8 KB

  2. 从工作出发搭页面

    • 预约页就是用来预约的，商店就是用来卖的，订阅页就是用来订阅的：行动放在这类网站通常放的位置，页面也以它收尾

  3. 真实产品截图

    • 给一个 URL、开发服务器或应用，它自己截图，而不是画一个假的产品窗口

  4. 755 张开放授权照片

    • 按主题挑选并在页面上署名，来自 Wikimedia Commons，不使用 Unsplash、Pexels 等条款禁止 AI 工具选图的图库

  5. redesign 与 audit

    • 前者重做并保留内容与接线，后者只报告问题

  6. 三档规则

    • Floor 永不放行，Reflex 可有理由地豁免，Finish 只提示不阻塞

项目优势

对比项Hallmark直接让助手写页面通用前端模板
趋同问题发牌 + 日志，避免连续构建撞车模型默认值反复出现所有人用同一套
质量检查浏览器里量对比度、焦点环、首屏靠肉眼或事后反馈无
内容真实性不编造指标、评价、Logo容易编造占位文案
重做安全性先记录每个链接和字段，丢了就判失败容易漏掉接线不适用

为什么值得看？

  • 它把"设计好不好"这种主观问题，拆成了一批可以机器检查的具体规则
  • 规则分档，承认并非所有规则都该一刀切，同时保留不可破的底线
  • 对任何想给 AI 产出加门禁的 Skill 作者，这是一个完整的参考实现

项目详细剖析

三档规则：Floor、Reflex、Finish

这是整个项目的骨架。gates.md 里每条门禁都有一个档位，它决定你能不能不同意它：

档位含义处置
Floor没有一个被推崇的页面会故意违反它（正确性、可访问性、诚实性、禁令），或者是 Hallmark 比业界更严格的"家规"永不豁免，FAIL 就不能交付
Reflex模型会自己滑进去的默认值有真实理由时可以在记录里豁免；超过三次豁免会提示"这其实是你的房屋风格，该写进 design.md"
Finish手臂距离外看不出的手艺细节只报告并回答，从不阻塞
Ledger关于重复的记账只作 NOTE 记录，不计入裁决

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，题材和风格有限，并且必须在页面署名

项目地址与资源

官方资源

相关资源

  • Together AI（出品方）: together.ai
  • 评测套件: 仓库内 eval/README.md

总结与展望

核心要点回顾

  1. 约束胜过提示词润色：把"AI 味"拆成可以逐条检查的规则，再用工具去检查，比反复叮嘱模型"要有设计感"可靠得多
  2. 规则分三档：Floor 不可破，Reflex 可有理由地豁免并留下记录，Finish 只提示，既有底线又不僵化
  3. 发牌防趋同：48 套主题加日志，让连续的构建不撞车，"主题是材质不是计划"
  4. 两层验证：sloplint 在真实浏览器里量，再交给新鲜上下文的评审者，且构建者看不到评审标准
  5. 重做要可证明地不丢东西：先记录每个链接和字段，丢了就失败

适用人群

  • 经常让 AI 生成落地页、官网、产品页，又对"千篇一律"的结果不满意的开发者和独立创作者
  • 想给自己的 Skill 加质量门禁、需要参考"规则分档加机器检查加独立评审"结构的 Skill 作者
  • 做前端工程的同学，可以直接拿 sloplint 当页面质量检查工具使用

使用建议

先用 /hallmark audit 对一个现有页面跑一遍，看看它报出哪些问题，感受规则的尺度；再选一个小需求完整走一遍构建，注意读它最后的 Picks 块。如果你有品牌规范，先用 design.md 把系统锁起来。

探索 PrimeSkills —— 精选 AI agent 和技能工具，每一个都经过真实工作流验证。没有炒作，只有真正好用的工具。

访问我的个人主页，获取更多见解和有趣的产品。

avatar
文章
阅读
粉丝