设计参考
参考：$ARGUMENTS
1. 捕获参考
URL： 使用共享工具包在1440和375宽度下截图，然后读取样式表：
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
通过--inject拉取计算后的样式，或使用一次性CDP脚本导入${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs（launch() → navigate() → evaluate()）。对body、h1–h3、p、a、button、主CTA、卡片、眉毛/kicker元素、输入框和页脚进行getComputedStyle采样。收集font-family/size/weight/line-height/letter-spacing、color、background、border-radius、box-shadow、padding和gap。
粘贴的HTML/邮件： 将其保存到/tmp/design-ref/ref.html，使用render-html.mjs渲染，并直接读取内联样式。
2. 提炼系统
- 颜色角色： 画布、表面、墨水、柔和墨水、强调色、强调色墨水、边框、成功/警告。给出十六进制值以及每种颜色出现的位置。
- 排版： 字体家族（如果字体需要许可，给出最接近的免费替代品）、缩放步进的px/行高/字重/字间距，以及大小写（眉毛元素是否大写并增加字间距？）。
- 间距： 实际使用的节奏（例如8/16/24/40/64）、章节内边距和卡片内边距。
- 形状： 每种元素类别的圆角值、阴影配方和边框粗细。
- 解剖结构： 按钮（高度、内边距、圆角、字重、图标）、卡片、眉毛元素和主角布局。
- 色调： 3个形容词加上文案的特点（短句？第二人称？数字？）。
3. 映射到项目上（不要分叉）
读取项目的令牌（app/globals.css中的@theme/:root、tailwind.config或主题文件）及其现有组件。生成：
| 角色 | 参考值 | 当前项目令牌 | 建议 |
|---|---|---|---|
| 强调色 | #FF5A1F | --color-brand #… | 保留 / 调整值 / 新的（需说明理由） |
规则：
- 在新增令牌之前优先调整现有令牌。每个新增令牌都需要一行理由。
- 品牌锁定的项目不触碰：徽标、项目已有的品牌颜色以及已经许可或正在使用的字体。
- 检查每个建议的强调色在画布上以及墨水在表面上的对比度（文本≥4.5:1，UI≥3:1）。
- 如果项目保持Figma文件与代码同步，则令牌更改在同一任务中放入Figma。
退出标准
- 令牌表完成，每行标记为保留、调整或新增。
- 已检查建议对的对比度。
- 尚未更改代码。那是
design-pass阶段，在用户同意表格之后进行。 - 给用户一句总结，并在下方附上表格。