共计 4709 个字符，预计需要花费 12 分钟才能阅读完成。
Hallmark 是一个给 AI 编程助手用的设计技能。它装进 Claude Code、Cursor、Codex 或 OpenCode 之后，会按一套固定规则帮你做页面：先要真实素材，再从 48 套主题里抽出合适的一套，先把首屏做好并冷审一遍，再用浏览器里的检查脚本挑「一眼 AI」的毛病。仓库 README 原句是：A design skill for Claude Code, Codex, Cursor and OpenCode that refuses to look AI-generated。
截至 10 月 26 日上午（北京时间），Nutlope/hallmark 在 GitHub 上有 33,709 个 star，当日登上 Trending 日榜第 2，今日新增约 1,359 个 star（数字来自 GitHub Trending 页面与 REST API 同日抓取）。许可证是 MIT。package.json 版本号是 2.0.0。官网是 https://www.usehallmark.com/ 。README 写明 Made by Together AI。本文按官方 README 和官网整理安装与常用命令；我没有在本机完整跑通一次「从提示词到成品页」的构建，凡未实测处会标明，命令以仓库最新文档为准。
它解决什么问题
用大模型直接出落地页、产品介绍页或小型营销站时，版面经常会收敛到同一张「默认脸」：每个标题上面挂一条眉题、标签用拉得很开的全大写、标题里故意涂一个彩色词、整页都是空框或只剩照片、首屏没有占满视口、每页结尾塞邮箱订阅、表单提交后只显示感谢却什么也没发出去。Hallmark 把这些现象写成可执行的检查，靠规则拦，不靠「再写得文艺一点」。
检查分三层，README 的英文名是 Floor、Reflex、Finish，可以这样理解：
- Floor（地板）：对比度不够、焦点样式缺失、不尊重减少动态、捏造事实、手机布局炸掉。这类问题命中了就不让交付。
- Reflex（反射）：模型默认会犯的套路。有正当理由时可以留档后覆盖一条，不能无声无息地放过。
- Finish（收尾）：工艺细节。会提示，但不挡交付。
主题不是「填空模板」。每个主题是一份材料：纸张、字体、颜色、表面和组件习惯，外加一张成品示例图；主题说明文件通常不超过约 8 KB，放在 skills/hallmark/references/themes/。一次构建只读其中一个主题。同一主题、两次不同提示，页面结构也可以完全不同。官网和 README 都强调：主题规定的是材料，不是章节清单。
如果你不想用这 48 套材料，在提示里明确说 custom。Hallmark 会丢掉主题目录，只保留地板规则、检查门槛，以及 direction.md 里那一小段方向说明——找出只属于这个客户的一个想法，再让它撑起整页。
官网首页有「同一提示词，左边只有模型、右边走 Hallmark」的对照，并用它自己的 linter 统计问题数。那是产品演示，不是第三方评测。写进自己的笔记时，不要把它说成外部权威分数。
安装
需要 Node.js 18 或更高。全局安装（所有项目都能用）：
npx skills add nutlope/hallmark -g
不加 -g 则只装进当前项目。只要某一个助手时加上 --agent：
npx skills add nutlope/hallmark -g --agent claude-code
# 也可换成：codex、opencode、cursor、github-copilot
Claude Code 还可以走插件市场。在助手里执行：
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark
插件方式的唤起名是 /hallmark:hallmark。如果你是从 Git 克隆仓库再装，README 写的是先运行：
node skills/hallmark/scripts/install.mjs
它会先校验主题和引用文件，再拷贝。install-hook.mjs 还可以给 Claude Code 加上编辑时的 Floor 检查，改文件时就能提前拦一部分地板级问题。
各助手落地位置和唤起方式（来自 README 表格，路径以官方文档为准）：
| 助手 | 大致落地目录 | 怎么唤起 |
|---|---|---|
| Claude Code | ~/.claude/skills/hallmark | /hallmark <提示> 或直接描述要新建页面 |
| Codex CLI | ~/.agents/skills/hallmark | $hallmark <提示> 或描述新建 |
| Cursor | 会找到上面这些拷贝 | /hallmark <提示> 或描述新建 |
| OpenCode | 同上 | /hallmark <提示> 或描述新建 |
浏览器渲染检查（sloplint --render、截图）额外需要：
npm i -g puppeteer-core
并安装 Chrome。没有它们时，静态检查仍然可以跑，只是少了真实多宽度渲染这一环。如果技能没有自动触发，README 的建议是直接点名：use hallmark to build …。
对任意已有 HTML 目录单独跑检查（在克隆下来的仓库里）：
node skills/hallmark/scripts/sloplint.mjs <文件或目录> --render
第一次用：用一句话建页
在已装好技能的助手里，典型用法是：
/hallmark 给 Five Mile Gin 做一个站点，这是一家自己采集植物原料的小型蒸馏厂
README 的「How a build runs」把一次构建拆成四步，按这个顺序理解即可：
- 预检。读项目里已有的字体、色板、框架，以及是否锁定了
design.md。然后问一次素材：照片、截图、真实数字。没有的事实不编。 - 抽主题与骨架。
scripts/theme.mjs deal给出三个适合当前提示的主题；draw再按「这份工作要让访客完成什么」排出页面解剖结构。预订页把预订放在该品类该放的位置，商店导向购买，新闻信导向订阅，并且页面结束在那个动作上。 - 先做首屏。hero 单独生成，在真实浏览器里渲染，并在其余区块还不存在时做一次冷审。通过之后再铺后面的内容。
- 全页检查。
scripts/sloplint.mjs --render在多个宽度下检查，再由另一个子代理用新的上下文复核。
成品是自包含的 HTML 和 CSS。第一段 CSS 注释里会盖上本次决策戳，以后对照「当时为什么选这个主题、为什么这样排」时用得上。
主题怎么选、custom 怎么用
v2 提供四十八个主题。官网主题墙按风格粗分过几组，例如偏编辑排版、偏现代极简、偏氛围、偏活泼。README 展示过的名字包括 Dusk、Cobalt、Studio、Atelier、Ribbon、Furrow、Dose、Hum、Terminal、Hedgerow 等；完整列表以官网为准。你不需要先背主题名：默认流程会先给你三个候选，你再定一个。
说 custom 时，主题目录不用了，但 Floor / Reflex / Finish 仍然在。适合品牌已经很明确、或不想被「材料库」带偏的情况。
指向真实产品
如果你已经有线上 URL、本地 npm run dev 地址或应用目录，把地址或路径写进提示。Hallmark 可以自己打开并截屏，减少「模型凭空画假界面」的情况。照片默认来自 Wikimedia Commons 上公开许可的图（仓库里的 photos.json 只存列表和元数据，不存图文件），并在用到的页面上署名。README 写明不使用 Unsplash、Pexels、Pixabay——这类站点的条款限制 AI 工具挑选图片。基础流程不需要 API key；和图片相关的 key 是可选项。
改造已有页面：audit 和 redesign
Hallmark 默认不会碰已经存在的设计，除非你点名路径：
/hallmark redesign ./src/app
/hallmark audit ./index.html
两者差别很清楚：
- audit：只出报告，不改文件。适合先摸清「这页有哪些一眼 AI 的症状」。
- redesign：保留内容和接线，换设计系统和布局。链接、表单字段、处理函数、标题这些要留下来。若你只想换风格、布局先不动，可以说 keep the layout；若只想打磨模板味痕迹，可以说 polish。
完整 redesign 时，sloplint --before 会先记录链接、字段、处理函数和标题；sloplint --kept 会在有东西丢失时失败。交接通常是一份前后对照。这套机制要防的是：改皮之后按钮点不了，或表单字段失踪。
使用边界和常见误区
Hallmark 适合独立开发者和小团队快速出营销页、产品介绍页、小型站点骨架，尤其是你已经厌倦「每页长得像同一份演示文稿封面」。它不能替代专业设计团队，也不会自动遵守你公司还没写进仓库的品牌规范。若有设计系统，先把 token 和 design.md 放进项目，预检才会读到。
它检查的是页面上可观测的症状，不是你的商业策略对不对。Floor 拦的是可访问性和捏造事实这类硬伤；价格、承诺、合规表述是否准确，仍要你自己核对源材料。两个不同的人用同一句提示，一般也不会得到同一页面——主题提供材料，不规定章节顺序。
社区讨论目前不算热闹。Hacker News 上能搜到 2026 年 7 月和 10 月的提交帖，分数不高；热度主要来自 GitHub Trending 和开发者在 Claude Code / Cursor 生态里传播技能的习惯。写教程时不必夸大「全网都在用」。
许可证是 MIT，可以自用、修改和再分发。主题预览与更多示例见 https://www.usehallmark.com/ ，仓库见 https://github.com/Nutlope/hallmark 。
和「只靠提示词写页面」差在哪
不装 Hallmark 时，你也可以在 Claude Code 或 Cursor 里反复说「少一点 AI 味」「参考某某站点」。差别主要在三处，都来自 README 和官网已经写明的机制，而不是我主观评价：
- 素材先于文案。预检会问照片、截图和真实数字；没有就不编。很多「假精致」页面，问题出在数字和图片是模型填的。
- 主题是材料不是骨架。48 套主题提供纸张、字体、颜色和组件习惯，不规定这一页必须有哪些区块；custom 还能整组丢掉。
- 有机器可跑的检查。sloplint 在真实浏览器宽度下找对比度、标签套路、假表单等问题，并且 redesign 用
--before/--kept防止接线丢失。你靠聊天提醒模型「别丢按钮」，没有同一套硬门槛。
它仍然依赖你用的底层模型。技能规定流程和否决条件，不保证每一次构图都让人满意。若不满意，更稳妥的做法是换主题、改提示里的「访客要完成的动作」，或先 audit 再决定要不要 redesign，而不是连续空喊「再高级一点」。
写完之后可以怎么验收
按官方能力，最小验收可以是：
- 助手里能稳定唤起
/hallmark或对应前缀（Codex 用$hallmark）。 - 新建一页时，它会先问素材，而不是直接输出一长段假数据。
- 若已装 puppeteer-core 和 Chrome，构建末尾会出现基于渲染的检查；若没装，至少应能跑静态检查，并在文档层面知道缺了哪一环。
- 对旧页跑
audit能得到报告；跑redesign后，抽查原有链接和表单字段是否还在。
星标数字会变。本文开头的 33,709 和今日约 +1,359 只对 10 月 26 日上午那次抓取负责；你阅读时请以 GitHub 仓库页实时数字为准。
如果你主要用 Claude Code 或 Cursor 写前端，又总觉得生成页「太像说明书封面」，按上面装好之后，从一句 /hallmark 建新页，再对旧页跑一次 /hallmark audit，通常就够建立手感。需要改皮时再上 redesign，并盯住 --kept 有没有报丢失。
