docs(skills): 更新 SKILL.md 脚本调用参数对齐实际接口
- parse-prototype.mjs: 输出 tokens/inlineStyles/screens/components - extract-screenshots.mjs: 参数改为 <html> <output-dir> - match-tokens.mjs: 参数改为 <parse-result.json> <tokens.yml> - infer-interactions.mjs: 参数改为 <html> <rules.yml> - 输出目录结构对齐 spec: docs/design/mp-00-visitor/
This commit is contained in:
iven
@@ -87,50 +87,50 @@ radius:
|
|||||||
node scripts/parse-prototype.mjs <html文件路径>
|
node scripts/parse-prototype.mjs <html文件路径>
|
||||||
```
|
```
|
||||||
|
|
||||||
**输出：** JSON 格式的 DOM 结构树，包含：
|
**输出（stdout JSON）：**
|
||||||
- 节点层级关系
|
- `tokens`: T 对象所有键值对（如 `{"T.pri": "#C4623A", ...}`）
|
||||||
- 每个节点的样式属性（从 inline style + `const T = {}` + CSS class 提取）
|
- `inlineStyles`: 内联样式值收集（按 CSS 属性分组，如 `{"fontSize": ["32","28",...], ...}`）
|
||||||
- 文本内容
|
- `screens`: 每个屏幕的标签和组件名（如 `[{"label": "访客首页", "component": "GuestHome"}]`）
|
||||||
- 嵌套组件边界推断
|
- `components`: 所有组件函数定义列表
|
||||||
|
|
||||||
**若脚本不存在：** LLM 自行解析 HTML，提取以下信息：
|
**若脚本不存在：** LLM 自行解析 HTML，提取 T 对象和 DOM 结构。
|
||||||
- 从 `const T = {}` 提取所有 Token 值
|
|
||||||
- 遍历 DOM 树提取每个节点的 `style` 属性和文本内容
|
|
||||||
- 按缩进/嵌套层级推断组件边界
|
|
||||||
|
|
||||||
### Step 2: 截图
|
### Step 2: 截图
|
||||||
|
|
||||||
调用 `scripts/extract-screenshots.mjs` 生成截图：
|
调用 `scripts/extract-screenshots.mjs` 生成截图：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
node scripts/extract-screenshots.mjs <html文件路径> --output <输出目录>
|
node scripts/extract-screenshots.mjs <html文件路径> <输出目录>
|
||||||
```
|
```
|
||||||
|
|
||||||
**输出：**
|
**输出：** PNG 文件到输出目录，文件名由中文标签自动翻译为英文。
|
||||||
- `screenshots/full.png` — 整页截图
|
- 每个 `.screen-wrap` 生成一张截图（裁掉 IosFrame 设备框、状态栏、Home Indicator）
|
||||||
- `screenshots/sections/` — 按语义区块拆分的局部截图（若脚本支持）
|
- 无 `.screen-wrap` 时降级为整页截图 `full-page.png`
|
||||||
|
|
||||||
**若脚本不存在：** 指导用户手动截图或使用浏览器 DevTools 截图，保存到 `docs/design/{原型名}/screenshots/`。
|
**若脚本不存在：** 指导用户手动截图，保存到 `docs/design/{原型名}/screenshots/`。
|
||||||
|
|
||||||
### Step 3: Token 匹配
|
### Step 3: Token 匹配
|
||||||
|
|
||||||
调用 `scripts/match-tokens.mjs` 进行 Token 匹配：
|
调用 `scripts/match-tokens.mjs` 进行三层 Token 匹配：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
node scripts/match-tokens.mjs <解析结果.json> --tokens <tokens.yml路径>
|
# 先保存 Step 1 的输出到临时文件
|
||||||
|
node scripts/parse-prototype.mjs <html> > /tmp/parse-result.json
|
||||||
|
node scripts/match-tokens.mjs /tmp/parse-result.json .design/tokens.yml
|
||||||
```
|
```
|
||||||
|
|
||||||
**输出：** Token 匹配报告，包含：
|
**三层匹配算法：**
|
||||||
- `matched` — 已匹配的 Token（原型中的值 → Token 名称）
|
1. **别名直查** — 在 `aliases.prototype_keys` 中查找已确认映射
|
||||||
- `unmatched` — 未匹配的值（需要新增 Token 或确认别名）
|
2. **值精确匹配** — 按 CSS 属性上下文消歧（borderRadius→radius, fontSize→typography）
|
||||||
- `pending` — 接近匹配但需人工确认的项
|
3. **色彩模糊匹配** — RGB 欧几里得距离 < 30 视为近似
|
||||||
|
|
||||||
**若脚本不存在：** LLM 自行匹配：
|
**输出（stdout JSON）：**
|
||||||
1. 读取 `.design/tokens.yml` 中的所有 Token 定义
|
- `matched`: 已匹配 Token（含 confidence: confirmed/pending/approximate）
|
||||||
2. 将 HTML 中的每个样式值（颜色、字号、间距、圆角等）与 Token 比对
|
- `unmatched`: 未匹配的 Token key 列表
|
||||||
3. 精确匹配 → `matched`
|
- `inlineTokenMap`: 内联样式值的 Token 映射
|
||||||
4. 无匹配 → `unmatched`（附带建议的 Token 名称）
|
- `summary`: 统计（confirmed/pending/approximate/unmatched 数量）
|
||||||
5. 相似但不确定 → `pending`
|
|
||||||
|
**若脚本不存在：** LLM 自行读取 tokens.yml 执行匹配。
|
||||||
|
|
||||||
### Step 4: 组件映射推断
|
### Step 4: 组件映射推断
|
||||||
|
|
||||||
@@ -165,14 +165,12 @@ node scripts/match-tokens.mjs <解析结果.json> --tokens <tokens.yml路径>
|
|||||||
调用 `scripts/infer-interactions.mjs` 推断交互行为：
|
调用 `scripts/infer-interactions.mjs` 推断交互行为：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
node scripts/infer-interactions.mjs <解析结果.json>
|
node scripts/infer-interactions.mjs <html文件路径> rules/interaction-rules.yml
|
||||||
```
|
```
|
||||||
|
|
||||||
**输出：** 交互行为清单，包含：
|
**输出（stdout JSON）：**
|
||||||
- `onClick` — 可点击元素及其预期行为（导航、弹窗、状态切换等）
|
- `interactions`: 每条规则的匹配结果（matched/unmatched、命中的 pattern、location 定位）
|
||||||
- `onScroll` — 滚动相关行为（无限加载、吸顶、视差等）
|
- `summary`: matched/unmatched 统计
|
||||||
- `onInput` — 表单输入行为（验证、联动、提交等）
|
|
||||||
- `transitions` — 过渡动画（hover 效果、展开折叠等）
|
|
||||||
|
|
||||||
**若脚本不存在：** LLM 自行推断：
|
**若脚本不存在：** LLM 自行推断：
|
||||||
1. 检查 DOM 中的 `onClick` / `onChange` 等事件绑定
|
1. 检查 DOM 中的 `onClick` / `onChange` 等事件绑定
|
||||||
@@ -277,13 +275,15 @@ node scripts/infer-interactions.mjs <解析结果.json>
|
|||||||
### 目录结构
|
### 目录结构
|
||||||
|
|
||||||
```
|
```
|
||||||
docs/design/{原型名}/
|
docs/design/
|
||||||
SPEC.md # 设计规格文档（Step 6 产物）
|
mp-00-visitor.html # 原始原型（不修改）
|
||||||
tokens.json # Token 匹配结果（Step 3 产物）
|
mp-00-visitor/ # 交付包目录（与原型同名）
|
||||||
META.yml # 元数据
|
├── SPEC.md # 设计规格文档（Step 6 产物）
|
||||||
screenshots/
|
├── screenshots/ # 截图目录
|
||||||
full.png # 整页截图（Step 2 产物）
|
│ ├── home.png
|
||||||
sections/ # 局部截图（可选）
|
│ └── profile.png
|
||||||
|
├── tokens.json # Token 匹配结果（Step 3 产物）
|
||||||
|
└── META.yml # 元数据
|
||||||
```
|
```
|
||||||
|
|
||||||
### META.yml 格式
|
### META.yml 格式
|
||||||
|
|||||||
Reference in New Issue
Block a user