今天 GitHub 日榜第一行是它。我用 api.github.com 复核了一遍:Nutlope/hallmark 35,252★、1,837 个 fork、62 个未关 issue,主语言 CSS,MIT,建仓 2026 年 4 月 27 日,最近一次推送是 10 月 22 日。当天单日新增 2,235 星。
作者是 GitHub 上的 Nutlope(Hassan El Mghari),README 里署着 Made by Together AI。第一句就把立场写死了:一个拒绝看起来像 AI 生成的设计 skill,给 Claude Code、Codex、Cursor、OpenCode 用。版本号 2.0.0,四天前刚重写过一轮——这大概是它今天突然上榜的原因。
一句话定位:它不给你模板,给你一把尺子和一叠材料
- 它是一份可执行的设计规范,不是一个建站工具。装进 agent 之后,模型照常写 HTML 和 CSS,但每一步都被一份 90 条的清单盯着;写完了还要跑 linter,不合格就改到合格。
- 它管的是“像不像机器做的”,不管“该不该做这个页面”。定位、卖点、素材从哪来是你的事,它只负责把结果从“一眼 AI”拉回“像有人做过决定”。
- 它发牌,不指定答案。48 套主题里每次抽三套备选,页面的骨架、导航、首屏姿态从 21 种结构里现抽;抽过的记进
.hallmark/log.json,下回避开最近三次。 - 素材纪律比审美更硬。一句话写在 Floor 里:不许编造数字、证言、logo 墙、案例数量。没有真实数据的地方就留空位,不许填。
它到底装了什么:90 条闸门,48 套主题
仓库里 skills/hallmark/references/gates.md 有 39 KB,是整份规范的核心。我数了一遍表里的行:
| 组成 | 数量 | 作用 |
|---|---|---|
| Floor 闸门 | 39 条 | 不可豁免的硬底线,违反就不许交付 |
| Reflex 闸门 | 50 条 | 模型最容易犯的默认毛病,留一条书面理由可以推翻 |
| Ledger 闸门 | 1 条 | 记录型的检查 |
| Finish 检查(F1–F26) | 26 项 | 手艺细节,只提示,永不拦发布 |
| 主题 | 48 套 | 每套不超过 8 KB,含一份完整的 OKLCH token |
| 页面骨架 | 21 种 | macrostructures,决定页面怎么开、怎么排 |
| 题材分支 | 4 个 | editorial、modern-minimal、atmospheric、playful |
| 照片库 | 755 张 | Wikimedia Commons 的开放授权图,用一张署一张 |
三档闸门的区别值得单独说。Floor 是“交付即废品”的那一类:对比度不够、首屏装不下内容、手机布局崩掉、编造了数据。Reflex 是“大多数模型都会这么干,但你可以有理有据地不这么干”:默认拿 Inter 当标题字体、三列等高的图标卡片、紫到蓝的渐变。Finish 是手艺账,比如同一页出现两种主按钮样式、display 尺寸的数字没开等宽数字——不拦发布,但你得回答。
主题也不是配色方案。随手翻开 references/themes/dusk.md(7,955 字节),开头是元信息:genre: modern-minimal、paper: dark 17.5 268、display: grotesk-sans Wix Madefor Display、posture: committed,再加三十来个关键词(银行、对账、结算、月末结账……),往下才是一屏 :root 里的 token:--color-paper、--color-accent、--glass、--shadow-card、--font-display,全是 oklch() 写法。所谓“材料”,就是这个意思:纸、字、色、表面、组件、纹理一整套,而不是一张截图让你照抄。
那 90 条到底在管什么
规则清单读下来,能看出作者对“AI 做的页面”有多具体的不耐烦。挑几条 Floor 原文:
- 颜色和字体必须走
:root的 token,不许在别处写颜色字面值和font-family;这条编号 48,是全文出现频率最高的一条。 - 禁
transition: all,禁给width、height、top、left做动画。 - 标题里不许插一个斜体词;小字(15px 以下)不许大写、不许加字距——也就是那种全站随处可见的 “FEATURES” 小标签,编号 67,作者把它定成 house rule。
- 禁 eyebrow,就是每个标题上方那行小字导语,编号 54。
- 禁卡片套卡片、禁 emoji 当图标、禁手画的浏览器窗口。
- 首屏必须装得下:1280 × 800 下,标题、一句话说明、主按钮要全在视口里,编号 44b。
- 单屏文字不超过 80 词;容器最宽 1360–1520,1920 宽屏时只放大留白不放大网格。
- CSS 源码第一行必须写 stamp,记下这次建设用了哪些决定,编号 20。
Reflex 那一档更有意思,因为它列的是“模型的舒适区”:Inter/Roboto/Poppins 当标题字体(1)、正文行宽跑出 45–75ch(25)、渐变文字(2b)、三列等高的图标卡片(3)、hero + 三个特性 + CTA + footer 的标准骨架(8)、每段间距一模一样(9)、结尾一律是邮件订阅(85)、用 div 堆一个假的产品界面(84)。这些不是审美偏好,是统计意义上的重复。
执行层面靠 scripts/sloplint.mjs:单文件 231 KB,零依赖,读 HTML/CSS,也能读 jsx/tsx/vue/svelte/astro 里的 Tailwind 类名。加 --render 之后它会开 Chrome,在八个宽度上真量:按像素算文字背后的对比度、靠 tab 找 focus ring、量首屏折叠、算照片占页面多少比例、找挤在一起的标题。
我们实跑了一遍:一张典型 AI 落地页被判 45 处 FAIL
规则写得漂亮不等于能跑。我把仓库里的 sloplint.mjs 单独取出来,在本机 Node 26.7 上,对着自己写的一页 100 行的“标准 AI 落地页”跑了一次——紫蓝渐变首屏、标题上方一行大写小字、标题里一个斜体词、三列图标卡、结尾邮件订阅、Inter 字体、10,000+ 团队与 99.9% uptime。静态检查,没开浏览器那一档。
结果:45 处 FAIL、6 处 REFLEX、9 处 WARN,退出码 1。
| 闸门 | 判定 | 命中 | 抓的是什么 |
|---|---|---|---|
| 48 | FAIL | 17 | 颜色与字体全是字面值,没走 token |
| 19 | FAIL | 10 | 文案套话:seamless、empower、unlock,buzzword 列表命中 |
| 7a | FAIL | 6 | 纯 #000 与 #fff 当底色和字色 |
| 30a | FAIL | 3 | emoji 当图标 |
| 2a / 6a / 34 / 38i / 54 / 67 / 26a / 20 | FAIL | 各 1 | 紫蓝渐变、100vh 首屏、横向溢出隐患、标题斜体词、eyebrow、小字大写加字距、没有 :focus-visible、缺 stamp |
| 46a | WARN | 2 | 编造的数字:10,000+ 团队、99.9% uptime |
输出也好用:每条都带行号和证据原文,比如 purple-to-blue gradient on .hero、hero sized in vh: height: 100vh on .hero,后面跟一句改法。也就是说它不是黑箱打分,而是给你一份可以直接照着改的清单——这也是为什么它能进 CI。我们实际跑了一下,测完临时目录已删干净。
怎么用起来:三步,四个坑
- 装:
npx skills add nutlope/hallmark -g。Node 18 以上;-g装到所有项目,不加就装进当前项目。落到~/.claude/skills/hallmark或~/.agents/skills/hallmark,Cursor 和 OpenCode 直接认这两处。想只装一个 harness,就加--agent claude-code(或codex、opencode、cursor)。 - 叫:会话里
/hallmark <你的需求>,Codex 用$hallmark;也可以直接说“用 hallmark 建一个……”。要改已有页面,只有你点名才动:/hallmark redesign <路径>保内容保接线重做,/hallmark audit <路径>只出报告。 - 验:页写完让它跑
node <skill-dir>/scripts/sloplint.mjs <产物> --render。浏览器那一档要先npm i -g puppeteer-core并装好 Chrome,否则只有静态检查——这一点 README 写得很直白。
四个坑:
- 它不一定会自己触发。仓库
eval/README.md里有一句实测记录:在claude -p这种非交互模式里,skill 不会自动触发,所以他们自己的评测也是按名字调的。装好之后第一句就点名,别指望模型自觉。 - 它会在你的 CSS 第一行盖章。这是第 20 条闸门,不是可选动作。页面源码里会留下一行说明这次建设做了哪些决定的注释,介意页面留痕的人要提前知道。
- 它很吃输出长度。完整包等于 SKILL.md 的 18 KB 加上
craft.md的 19 KB 再加闸门表,而它要求模型一次吐出整页 HTML+CSS。官方评测里记着:Claude 在某个需求上必须给到 64K 输出上限,32K 会在 CSS 中间被截断。 - 不是所有模型都吃得下。见下一节的数字。
官方自己的成绩单,和一份横向对比
仓库里的 eval/ 是一套跑了 8 个 brief 的评测,不在 npm 包里,只留在仓库。2026 年 7 月 23 日那一轮的结果是这样的:
- 给全量 skill(SKILL.md + craft + 闸门表塞进 system prompt):Kimi K2.7-Code 在 6 个 brief 上 0 处机械 FAIL,GLM 5.2 是 11 处,Claude 0 处。
- 只给 Floor 那一段:GLM 掉到 96 处 FAIL,而且每个格都不干净;Kimi 30 处;Claude 仍是 0。
- 修复环有效:GLM 的 11 处被 linter 反馈后一轮全部清掉,残留的正是被点名的三类——标题里的斜体 em、标题旁边的标签网格、不在间距刻度上的 padding。
- 诱饵 brief 没被骗:专门设了一个诱导编造指标的需求,所有模型 0 处编造。
这组数字有三层意思。第一,对 Claude 这一档模型,Floor 就够压住机械错误,它缺的是“别每次都长一个样”。第二,对 GLM、Kimi 这类开源模型,只给 Floor 等于没给,必须把整份规范塞进去。第三,代码检查 + 一轮返工,比反复抽卡有效得多。
| 维度 | Hallmark | Impeccable | 裸模型 |
|---|---|---|---|
| 星数 | 35,252 | 88,532 | 无 |
| 许可 | MIT | Apache-2.0 | 无 |
| 形态 | 1 个 skill + 90 条闸门 + 48 主题 + 21 骨架 | 1 个 skill + 24 条命令 + 62 条检测规则 | 无 |
| 检查器 | sloplint.mjs 单文件零依赖,可开浏览器实测八种宽度 | CLI 与浏览器扩展跑 62 条,不调模型 | 无 |
| 主题轮换 | 有,三选一 + 日志记录避重 | 无,靠 live 模式在浏览器里手调变体 | 无 |
| 起点 | 从零建新页、按需重做旧页 | 从 init 写 PRODUCT.md 开始,贯穿项目全程 | 无 |
两份规范其实是两种用法:Hallmark 像请一个只做一次交付的版面设计,做完就走;Impeccable 像在项目里常驻一个设计审稿人,24 条命令覆盖打磨、审计、收窄、加动效。
我的判断:谁该上,谁再等等,谁别碰
该上的。 手上有一堆单页要交付的人——产品落地页、活动页、招聘页、给客户做的小官网。这些页面的通病就是互相长得像,Hallmark 的随机发牌和 90 条闸门正好治这个。已经用 Claude Code 写前端、并且愿意把 sloplint 挂进提交前检查的团队,收益更直接:规则是文件,检查是命令,不依赖人的眼力。
再等等的。 已经有成熟设计系统的大站。它能 redesign 保内容保接线,但那仍然是换一套系统、换一套 token,跟你们现有的组件库对不上。另外多页一致性还在路线图的 “Next” 一节里:主题感知的动效 token、跨页品牌轴锁定,今天都还没有。
别碰的。 第一种是以为装上就有设计能力的人:它管的是别掉进 AI 的通病,不管你卖什么、对谁说、素材从哪来。第二种是没有真实素材的人:第 46a 条禁止编造数字,你给不出真实的客户数、上线时间、产品截图,页面就只能空着,反而更难交付。
它自己的路线图 “Now” 一节还写着三件没做完的事,我觉得比任何吹捧都值得引用:一是 最新的“生成感”默认已经变成新的通病——奶油色纸、药丸按钮、近黑配一个酸性色、细线大报版,目录需要决定这些主题是留作特定材料还是重新做旧;二是 三个 harness 的一致性还没跑完,同一个需求要在 Claude Code、codex exec、OpenCode 非交互模式里各跑到 0 FAIL;三是 一次构建的时间和 token 成本还没测。
还有一个结构性的风险:48 套主题听起来很多,但它是一台机器发牌。log.json 只保证同一个项目里不重复,保证不了不同人、不同项目之间不撞。真正的差异化仍然来自素材——你独有的照片、数字、场地,这部分它只能提醒,替不了你。
想给 agent 装 skill 之前先看清代码这件事,站里 Cloudflare 的 security-audit-skill 那篇讲过一套审计方法;如果你是刚开始用 Hugo 建站,从选型到本地预览那篇 里有更基础的准备。
本文由拾光札记编辑部整理,勘误请联系我们