AI 写页面的速度已经足够快，现在真正拉开差距的是设计判断：页面能不能让人相信，能不能把访客要做的事说清楚，以及有没有那些一眼就能认出来的“AI 模板味”。
图中的 Closewise、Fieldbook 和 The Sleeper 分别对应财务、农业和睡眠场景。它们不是三套固定模板，而是同一套 Skill 在不同材料与任务下生成的结果。
Hallmark 就是冲着这个问题来的。它不是 UI 组件库，也不是又一个低代码建站工具，而是一个给 AI 编程助手使用的设计 Skill。安装之后，Claude Code、Codex、Cursor 或 OpenCode 会在生成页面前先询问素材、确定页面任务、选择主题，再按一套硬规则构建和检查结果。
如果你还不熟悉 Agent Skills，可以先看本站的 Skills 入门。
它解决的不是“好不好看”
很多 AI 页面的问题并不只是配色普通，而是成套出现的模板习惯：
- 每个标题上方都要放一行大写、加字距的小标签；
- Hero 区永远是“标题 + 一句空话 + 两个按钮”；
- 三个等宽图标卡片排成一行；
- 没有真实产品截图，就用一堆渐变方块冒充界面；
- 页面结尾无论什么业务，都塞一个邮件订阅框；
- 为了显得专业，编造客户 Logo、增长数字和用户评价。
Hallmark 把这些称为 AI slop。它的目标不是让每个页面都变成获奖作品，而是先保证页面不廉价、不虚假、不违反基本的可用性，再在这个底线上建立真正的视觉方向。
核心机制
Hallmark 的流程大致分成四步：问素材、定任务、给方向、做检查。其中几个设计值得单独说明。
先要真实材料，不编造事实
开始构建前，Hallmark 会集中问四件事：
- Material：页面能展示什么？产品截图、照片、真实价格、客户数字，还是只有一段文案？
- Audience：谁会看这个页面，他们在意什么？
- Use：页面最重要的唯一动作是什么？预约、购买、注册、下载，还是阅读？
- Tone：想要哪种极端风格？编辑感、粗野主义、柔和、实用主义、奢华、俏皮或技术感。
如果缺少图片，它会从内置的 755 张开放授权照片库中挑选素材做占位，并要求你在交付前替换。但数字、评价、客户 Logo 这类事实不会被自动补全。没有提供就是没有，页面宁可留空，也不会编一个“服务 10,000+ 客户”出来。
这一点比很多“一键生成落地页”工具更重要：设计可以生成，事实不能。
主题是材质，不是整页模板
Hallmark v2 提供 50 套主题，例如纸张质感的 Editorial、工业感的 Terminal、暖灰色的 Coral、深色的 Kiln。每套主题定义的是字体、颜色、表面、纹理和组件气质，而不规定页面必须长成什么样。
Cobalt 主题下的 Relay，首屏左侧是标题、说明与操作，右侧用类型化事件的数据流承担视觉重量。这里没有渐变、eyebrow，也没有卡片套卡片。
构建时，它通常从匹配的主题里发三张牌，选择其中一张，然后重新安排页面的：
- hero 的构图；
- 每个区块的顺序；
- 导航和页脚；
- 主要行动出现在哪里；
- 图片、文字、表格或产品界面如何承担内容。
所以同一个主题处理两个不同业务，不会只是换文案。它还会读取项目里的 .hallmark/log.json，尽量避开最近几次构建用过的结构和构图，降低“连续做十个页面，十个页面都似曾相识”的概率。
如果主题库不符合品牌，也可以直接说 custom。Hallmark 会丢掉预设主题，从提示词和素材出发设计，但仍受同一套底线和检查规则约束。
从“页面要完成什么”反推结构
Hallmark 不会默认套用“Hero + 三个功能 + CTA + 页脚”的经典结构，而是先确认页面属于哪类任务：
- 餐厅页面要让人看菜单、订位；
- 商店要让人挑选并购买；
- 活动页要突出日期、地点和报名；
- SaaS 首页要让访客理解产品，并开始试用。
Furrow 主题下的 Fieldbook 是另一个方向：标题、地图和记录卡都围绕农场巡场这个任务展开。换一个业务，主题仍然是 Furrow，但页面结构会重新设计。
页面的章节和行动位置从这些真实任务里长出来，而不是为了填满一屏而堆内容。它的默认约束还包括：Hero 标题最多约 7 个词，只保留一句说明和一到两个行动，每个 900px 高的屏幕大约不超过 80 个词。
这也解释了为什么 Hallmark 生成的页面看起来往往更“安静”：不是内容少，而是每个区域只承担一个主要任务。
检查分成三个层级
Hallmark 的规则不是一个模糊的“请做得高级一点”，而分为三层：
| 层级 | 含义 | 处理方式 |
|---|---|---|
| Floor | 可访问性、事实真实性、布局完整性等硬底线 | 不可绕过，必须修复 |
| Reflex | 模型最容易落入的默认套路 | 可以基于具体页面理由豁免，但必须留下记录 |
| Finish | 间距、字重、按钮状态等工艺细节 | 必须回答，不阻塞发布 |
典型的 Floor 规则包括：
- 所有颜色和字体都必须来自 token；
- 交互元素必须有清晰的
:focus-visible； - 动画必须尊重
prefers-reduced-motion； - 不能编造指标、评价或 Logo 墙；
- 页面在 320px 到 1920px 之间不能出现横向滚动；
- 首屏主要内容和行动必须在 1280 × 800 内可见。
构建完成后，它会运行 sloplint：
- 静态检查 HTML、CSS、框架组件和 Tailwind 类名；
- 用真实浏览器在 8 个宽度下渲染，检查对比度、首屏折线、焦点环、区块节奏等；
- 让一个没有继承构建上下文的独立评审者再看一遍成品。
最后一步很关键。写页面的模型容易为自己的选择辩护，而独立评审者只拿截图、源代码和规则，不拿构建过程，因此更容易发现“看起来没问题，但其实很空”的地方。
重设计不会悄悄丢掉功能
Hallmark 默认不会拿已有设计开刀。只有你明确点名，才会进入重设计流程：
/hallmark redesign ./src/app
/hallmark audit ./index.html其中：
audit只输出报告，不改代码；redesign保留内容和交互接线，重做设计系统与布局；- 如果只想换皮，说 keep the layout；
- 如果只想清理明显的 AI 模板痕迹，说 polish。
重设计开始前，它会记录原有页面的链接、表单字段、事件处理和标题；完成后用 sloplint --kept 检查这些内容有没有丢失。对于已经有真实业务逻辑的项目，这个约束比“生成一个更漂亮的页面”重要得多。
安装
需要 Node.js 18 或更高版本。最省事的方式是：
npx skills add nutlope/hallmark -g-g 会把 Skill 安装到全局，所有项目都能使用；去掉 -g 则只安装到当前项目。
如果只想给某一种工具安装，可以指定 agent：
npx skills add nutlope/hallmark -g --agent codex
npx skills add nutlope/hallmark -g --agent claude-code
npx skills add nutlope/hallmark -g --agent cursor
npx skills add nutlope/hallmark -g --agent opencode安装位置大致如下：
| 工具 | 默认位置 | 调用方式 |
|---|---|---|
| Claude Code | ~/.claude/skills/hallmark | /hallmark <prompt> |
| Codex CLI | ~/.agents/skills/hallmark | $hallmark <prompt> |
| Cursor | 读取上述目录 | /hallmark <prompt> |
| OpenCode | 读取上述目录 | /hallmark <prompt> |
浏览器检查的额外依赖
静态检查只需要 Node。要让 Hallmark 用真实浏览器渲染、截图并检查首屏，还需要安装 puppeteer-core 和 Chrome：
npm i -g puppeteer-core缺少浏览器依赖时，静态规则仍然可以运行，只是首屏折线、对比度、焦点环等渲染检查会缺失。正式使用时建议补齐。
怎么调用
在 Codex 中最简单的调用方式是：
$hallmark 为一家独立咖啡烘焙工作室做一个首页。
材料：3 张门店和烘焙过程照片，真实豆单和价格，地址与营业时间。
受众：附近上班族。
目标：让人预约周六的杯测活动。
语气：编辑感，棕黑与纸张色，不要科技感。也可以在 Codex 或 Claude Code 里直接描述“用 Hallmark 做一个……”来触发。若 Skill 没有自动启用，明确说出 use hallmark 或 $hallmark 即可。
信息不全时，Hallmark 会先问一轮。如果你赶时间，可以回答 go ahead，让它自行推断受众、目标和风格；但素材与事实仍然不会替你编造。
在正式写代码前，它会输出一个 Picks block，列出这次准备采用的：
- 页面形状与 section 顺序；
- 主题及其理由；
- Hero 构图；
- 记忆点（signature）；
- 真实素材与缺失素材；
- 导航、页脚和执行摘要。
这是调整方向的最佳时机。比如你可以说“保留主题，但把预约表单放进首屏”，而不是等整页做完再返工。
适合用在哪些页面
Hallmark 最适合那些需要建立第一印象、且有明确行动目标的页面：
- 产品官网和 SaaS 落地页；
- 活动、餐厅、工作室、酒店等预约页；
- 个人作品集和设计工作室首页；
- 开源项目介绍页；
- 需要从旧模板重做的营销页面。
它也可以处理局部组件和后台界面，但文档和规则的重心仍然是页面设计。不要把它当成完整的设计系统迁移工具，更不要指望它替代产品层面的信息架构、业务验证和前端测试。
使用时有几个边界值得注意：
- 已有设计系统优先。 项目根目录有
design.md或DESIGN.md时，Hallmark 会把它视为锁定系统，主题不能随意覆盖。 - 它不会主动改已有页面。 必须明确执行
redesign或audit。 - 真实素材决定上限。 没有产品截图、真实照片和数字，再好的主题也只能做出漂亮的占位页。
- 代码仍要正常验证。 Hallmark 检查的是设计底线、可访问性和页面表现，不会替代项目自己的测试、Lint 和人工验收。
- 品牌独特性要靠 custom。 如果 50 套主题都太像“现成材料”，使用 custom，或者先锁定自己的
design.md，再在系统内生成页面。
一句话判断
如果你的 AI 编程助手已经能把页面写出来，但总是差一点“设计师做过”的感觉，Hallmark 值得装一次。它真正有价值的地方不是 50 套主题，而是把素材真实性、页面任务、浏览器验证和独立评审放进了同一条生成流程。
相关链接
文中页面截图来自 Hallmark 官方仓库。