hallmark

环境要求

• Node.js 18 或更高版本
• 已安装 Claude Code、Codex CLI、Cursor 或 OpenCode 中的至少一个 AI 编程助手
• 如需浏览器渲染检查：Chrome 浏览器 + puppeteer-core
• 可选：从源码克隆安装时需要 git

安装与启动步骤

1. 1确认 Node 版本

   Hallmark 通过 npx 安装，先确认本机 Node 版本不低于 18，否则跳过安装直接升级 Node。

   node -v

   复制

2. 2全局安装技能包

   用 skills 命令把 hallmark 装到全局，所有项目都能调用；去掉 -g 则只装进当前项目。

   npx skills add nutlope/hallmark -g

   复制

3. 3安装浏览器检查依赖

   渲染检查与截图需要 puppeteer-core 和 Chrome；不装也能跑静态检查，只是少了八种宽度的渲染校验。

   npm i -g puppeteer-core

   复制

4. 4只装到单个助手

   不想装给所有工具时，用 --agent 指定目标，可选 claude-code、codex、opencode、cursor、github-copilot。

   npx skills add nutlope/hallmark -g --agent claude-code

   复制

5. 5插件方式安装

   Claude Code 用户可改用插件市场安装，装好后以 /hallmark:hallmark 形式调用。

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

   复制

6. 6从克隆安装

   克隆仓库后运行安装脚本，它会先校验所有主题与参考文件，再复制到助手技能目录。

   git clone https://github.com/Nutlope/hallmark.git
   node skills/hallmark/scripts/install.mjs

   复制

7. 7在助手中调用

   在对话里用斜杠命令指定模板，或直接描述要建的页面；若它没自动生效，就明确说“use hallmark to build ...”。

   /hallmark 做一个预约页面

   复制

8. 8检查生成页面

   用 sloplint 对单个文件或目录做静态与渲染检查，找出模板化痕迹和被 Floor 拦下的问题。

   node skills/hallmark/scripts/sloplint.mjs ./index.html --render

   复制

关键配置

如何确认成功

安装后 ~/.claude/skills/hallmark（或 ~/.agents/skills/hallmark）目录存在，在助手内输入 /hallmark 能触发技能即成功。

常见问题

注意事项

• 每个页面是自包含的 HTML 与 CSS，第一条 CSS 注释里会记录本次做出的设计决策。
• 构建流程会用 scripts/theme.mjs deal 抽三个主题，再用 draw 按页面用途生成结构，主题共五十套。
• Floor 级检查（对比度、焦点、减少动效、编造事实、手机布局断裂）不会放行，必须先修好。
• 从克隆安装前先确认 scripts/install.mjs 校验通过，它会逐项验证主题和参考文件。