ARTICLE · 1258495

网页也能去 AI 味:Hallmark 这套设计 Skill 怎么用

发布时间：2026-10-27 10:19:55 最近访问：2026-10-27 10:19:56

紫蓝渐变、大标题、三张并排的功能卡片，这套网页组合看多了，确实容易认出来。Hallmark 把这些常见套路写进设计规则，让 Claude Code、Codex 这类 Agent 做页面时，先想清楚要展示什么、让访客做什么，再写代码。^[1]

● ● ●

Hallmark

Hallmark 是一套前端设计 Skill，不是在线建站平台，也不是新的生图模型。它给 coding agent 提供设计流程、主题和检查脚本，支持 Claude Code、Codex、Cursor、OpenCode。当前官方文档提供 48 个主题，也允许明确要求 custom，自行确定设计方向。^[1]

它管得挺细：不能编客户数字和用户评价，交互元素要有键盘焦点样式，页面不能在手机上横向溢出。连“表单没接任何服务，却提示提交成功”这种问题，也在检查范围里。^[1]^[2]

下面用官方任务和命令说明怎么用；配图是仓库里的主题样例，不是这次运行生成的页面。

怎么让 Hallmark 开始设计新页面？

装好 Skill 后，在 Claude Code 里用 /hallmark 调用，再描述你要做的页面；Codex 对应的是 $hallmark。安装入口放在文末，先看实际怎么提任务。^[1]

比如官方测试任务里有这条原文，可以作为页面需求交给它：^[1]

Hallmark

Build a page for a late-night, browser-based drum machine.

+提示词示例

意思是：做一个深夜风格、在浏览器里使用的鼓机页面。它没有指定“先放大标题，再摆三张卡片”，而是把页面是什么说清楚。

按官方流程，Hallmark 会先读项目已有的框架、字体和配色，再集中确认几件事：^[2]

有什么真实素材，可以给图片、文件路径，也可以指向产品网址
页面给谁看，对方最关心什么
希望访客完成哪个动作，比如试用、预约或购买
想要什么明确的风格，而不只是一句“简洁现代”

没有给出的客户数、评价和品牌 Logo，就不能凭空补上。有可访问的产品，它会按流程截取真实产品画面；缺少照片时，才使用图库占位，并在交付中说明。^[2]

接着，它会从主题库里给出三个候选，查看样例后选择适合需求的一个。主题规定字体、配色和表面质感，但不锁死每一节放什么、按什么顺序排。^[2]

看两张官方样例就有感觉了。Cobalt 用蓝色、技术文本和事件流表现 webhook 产品；Atelier 则用暖色纸面、衬线大字和香水照片展示香氛工作室。它们展示的是不同的视觉方向：^[1]

选好方向后，Hallmark 先做 Hero，也就是页面首屏：导航、主标题、核心画面和主要按钮。首屏渲染、审查过，再往下做其余内容，避免整页写完才发现最重要的一屏不对。常规主题构建交付的是页面代码，并生成 tokens.css 和 base.css，把主题样式与基础规则写进项目。^[2]

怎么检查页面有没有真的做好？

页面看着顺眼，还得确认换个屏幕不会散架。Hallmark 自带 sloplint，README 给了独立检查页面的命令，在终端运行：^[1]

●●●bash

node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --render

这里的 <file-or-dir> 要替换成实际文件或目录；脚本路径对应仓库中的位置。--render 会进入浏览器渲染检查，而不只读源码。^[1]

检查结果分层处理，不能只看一句“通过了”：^[1]

Floor 是硬性底线，出现 FAIL 就要修，比如焦点不可见、对比度不够、布局溢出
Reflex 是模型容易反复套用的设计习惯，要修改，或者写明有理由保留
Finish 是收尾细节，需要回应，但不作为阻止交付的硬门槛

这里面也有 Hallmark 自己的审美规矩。比如限制标题上方的小标签、反对某些常见装饰，不代表整个设计行业都禁止这样做；它就是用这些明确偏好，约束 Agent 别总回到熟悉的套路。^[1]

首屏和整页做完后，还各有一次审查。支持 subagent 的环境会用新上下文再看一遍；没有这项能力，就在当前线程复核，并如实记录。^[1]^[2]

浏览器没跑起来，就不能算渲染通过。官方要求 Node 18 或更高版本；浏览器检查还需要 puppeteer-core 和 Chrome 或 Chromium。缺少依赖时只能运行静态检查，交付里应说明哪些检查没做。^[1]

怎么给已有网页改版？

不想一上来就动代码，可以先在 Claude Code 里用官方审计命令：^[1]

Hallmark

/hallmark audit ./index.html

+提示词示例

audit 停在报告阶段，不修改项目源码。它会记录当前页面、查看截图，指出问题所在，并判断是小修、换视觉系统，还是需要重新组织页面。^[1]

确认要改，再用官方改版示例：^[1]

Hallmark

/hallmark redesign ./src/app

+提示词示例

这两个路径都是官方示例，使用时换成自己的目标路径。redesign 默认是完整改版，会调整视觉系统和布局；只想保留布局换皮，需要明确说 keep the layout，只修细节则用 polish。别把完整改版当成自动微调。^[1]

改版前，它会保存链接、表单字段、事件处理等记录；改版后用 --kept 核对有没有丢失，并生成 .hallmark/compare.html，把前后截图并排展示。项目原有的构建、类型检查和测试也要继续过，不能为了新外观把功能改坏。^[1]

这里的“保留功能”是流程要求，不是绝不出错的保证。拿到结果后，除了看对比页，还要实际点链接、试表单，再决定是否接受改动。

● ● ●

网页也能去 AI 味:Hallmark 这套设计 Skill 怎么用