@gong-ym/ai-spec-auto 0.2.14 → 0.2.15

package/.agents/skills/domains/web/design-analysis/rules/tools-design-guidelines.md

@@ -1,108 +1,108 @@
----
-title: 设计稿工具使用指南
-impact: HIGH
-impactDescription: 根据设计稿类型选择 Pencil MCP 或 Figma MCP 获取布局与节点信息
-tags: tools, design, pencil, figma
----
-
-# 设计稿工具使用指南
-
-## 概述
-
-根据设计稿类型选择相应的工具，获取设计稿的结构、截图、布局和节点信息。
-
-## 设计稿类型与工具选择
-
-### .pen（Pencil 设计稿）
-
-**工具**：Pencil MCP
-
-**可用功能**：
-- `snapshot_layout` - 获取布局快照
-- `get_screenshot` - 获取截图
-- `batch_get` - 批量获取节点信息
-- `get_variables` - 获取变量和主题
-
-**使用步骤**：
-1. 打开 `.pen` 文件
-2. 使用 `snapshot_layout` 获取整体布局结构
-3. 使用 `get_screenshot` 获取页面截图
-4. 使用 `batch_get` 获取具体节点的详细信息
-
-**示例**：
-```javascript
-// 获取布局快照
-snapshot_layout(filePath)
-
-// 获取截图
-get_screenshot(nodeId)
-
-// 批量获取节点
-batch_get(patterns, nodeIds)
-```
-
-### Figma 链接
-
-**工具**：Figma MCP
-
-**可用功能**：
-- `get_screenshot` - 获取截图
-- `get_design_context` - 获取设计上下文
-- 从链接中解析 file key / node id
-
-**使用步骤**：
-1. 从 Figma 链接中解析 file key 和 node id
-2. 使用 `get_screenshot` 获取对应节点的截图
-3. 使用 `get_design_context` 获取布局与节点信息
-
-**示例**：
-```javascript
-// 从链接解析
-// https://www.figma.com/file/{fileKey}/{name}?node-id={nodeId}
-
-// 获取截图
-get_screenshot(fileKey, nodeId)
-
-// 获取设计上下文
-get_design_context(fileKey, nodeId)
-```
-
-## 扫描顺序
-
-**按「从上到下、再从左到右」扫描**：
-- 先按 y 从大到小（或从 0 起向下）确定所有横向区域顺序
-- 再在同一行内按 x 从左到右读取
-- 使用 Pencil MCP 或 Figma MCP 时也按此顺序逐层获取布局与节点信息
-
-详见 `analysis-order.md`。
-
-## 获取内容
-
-使用工具时，需要获取以下内容：
-
-### 布局信息
-- 整体尺寸（宽度、高度）
-- 区域列表（x, y, w, h）
-- 区域间间距
-
-### 节点信息
-- 文字内容、字体、字号、字重、颜色、行高
-- 图片尺寸、位置、比例、圆角
-- 布局参数（padding, gap, margin, align-items, justifyContent）
-- 层级关系（嵌套、父子、兄弟）
-
-详见 `workflow-layout-map.md` 和 `workflow-element-extraction.md`。
-
-## 注意事项
-
-1. **多状态设计稿**：如有多个 frame（如「有数据 / 无数据」），分别获取每个状态的布局和节点信息
-2. **顶层 frame**：确认顶层 frame，确保获取的是正确的设计稿区域
-3. **节点 ID**：记录重要节点的 ID，便于后续获取详细信息
-4. **截图对比**：使用截图与实现页面对比时，确保截图区域与实现页面区域一致
-
-## 相关规则
-
-- `analysis-order.md` - 分析顺序（必守）
-- `workflow-layout-map.md` - 第一步：建立布局 Map（使用这些工具）
-- `workflow-element-extraction.md` - 第二步：区域与元素提取（使用这些工具）
-- `ui-verification` 技能的 `tools-design-guidelines.md`（类似内容，用于验收阶段）
+---
+title: 设计稿工具使用指南
+impact: HIGH
+impactDescription: 根据设计稿类型选择 Pencil MCP 或 Figma MCP 获取布局与节点信息
+tags: tools, design, pencil, figma
+---
+
+# 设计稿工具使用指南
+
+## 概述
+
+根据设计稿类型选择相应的工具，获取设计稿的结构、截图、布局和节点信息。
+
+## 设计稿类型与工具选择
+
+### .pen（Pencil 设计稿）
+
+**工具**：Pencil MCP
+
+**可用功能**：
+- `snapshot_layout` - 获取布局快照
+- `get_screenshot` - 获取截图
+- `batch_get` - 批量获取节点信息
+- `get_variables` - 获取变量和主题
+
+**使用步骤**：
+1. 打开 `.pen` 文件
+2. 使用 `snapshot_layout` 获取整体布局结构
+3. 使用 `get_screenshot` 获取页面截图
+4. 使用 `batch_get` 获取具体节点的详细信息
+
+**示例**：
+```javascript
+// 获取布局快照
+snapshot_layout(filePath)
+
+// 获取截图
+get_screenshot(nodeId)
+
+// 批量获取节点
+batch_get(patterns, nodeIds)
+```
+
+### Figma 链接
+
+**工具**：Figma MCP
+
+**可用功能**：
+- `get_screenshot` - 获取截图
+- `get_design_context` - 获取设计上下文
+- 从链接中解析 file key / node id
+
+**使用步骤**：
+1. 从 Figma 链接中解析 file key 和 node id
+2. 使用 `get_screenshot` 获取对应节点的截图
+3. 使用 `get_design_context` 获取布局与节点信息
+
+**示例**：
+```javascript
+// 从链接解析
+// https://www.figma.com/file/{fileKey}/{name}?node-id={nodeId}
+
+// 获取截图
+get_screenshot(fileKey, nodeId)
+
+// 获取设计上下文
+get_design_context(fileKey, nodeId)
+```
+
+## 扫描顺序
+
+**按「从上到下、再从左到右」扫描**：
+- 先按 y 从大到小（或从 0 起向下）确定所有横向区域顺序
+- 再在同一行内按 x 从左到右读取
+- 使用 Pencil MCP 或 Figma MCP 时也按此顺序逐层获取布局与节点信息
+
+详见 `analysis-order.md`。
+
+## 获取内容
+
+使用工具时，需要获取以下内容：
+
+### 布局信息
+- 整体尺寸（宽度、高度）
+- 区域列表（x, y, w, h）
+- 区域间间距
+
+### 节点信息
+- 文字内容、字体、字号、字重、颜色、行高
+- 图片尺寸、位置、比例、圆角
+- 布局参数（padding, gap, margin, align-items, justifyContent）
+- 层级关系（嵌套、父子、兄弟）
+
+详见 `workflow-layout-map.md` 和 `workflow-element-extraction.md`。
+
+## 注意事项
+
+1. **多状态设计稿**：如有多个 frame（如「有数据 / 无数据」），分别获取每个状态的布局和节点信息
+2. **顶层 frame**：确认顶层 frame，确保获取的是正确的设计稿区域
+3. **节点 ID**：记录重要节点的 ID，便于后续获取详细信息
+4. **截图对比**：使用截图与实现页面对比时，确保截图区域与实现页面区域一致
+
+## 相关规则
+
+- `analysis-order.md` - 分析顺序（必守）
+- `workflow-layout-map.md` - 第一步：建立布局 Map（使用这些工具）
+- `workflow-element-extraction.md` - 第二步：区域与元素提取（使用这些工具）
+- `ui-verification` 技能的 `tools-design-guidelines.md`（类似内容，用于验收阶段）

package/.agents/skills/domains/web/design-analysis/rules/workflow-element-extraction.md

@@ -1,162 +1,162 @@
----
-title: 第二步：区域与元素提取
-impact: CRITICAL
-impactDescription: 文字、图片、布局、层级四者必须逐一准确记录，不允许出错或遗漏
-tags: workflow, element-extraction, analysis, critical
----
-
-# 第二步：区域与元素提取
-
-## 概述
-
-对**每个区域**按「从外到里」逐项提取，避免只做「大致印象」式记录。**文字、图片、布局、层级四者均为重中之重，必须逐一准确记录，不允许出错或遗漏。**
-
-详见 `analysis-priorities.md`。
-
-## 2.1 文字、图片、布局、层级（必记）
-
-### 文字
-
-区域内每一处可见文案都要记录。
-
-**记录项**：
-- **内容**（完整或典型示例）
-- **字体**（fontFamily）
-- **字号**（fontSize）
-- **字重**（fontWeight）
-- **颜色**（color，含透明度）
-- **行高**（lineHeight）
-- **字间距**（letterSpacing，若有）
-
-**易漏点**：
-- 页面最上方的欢迎语/大标题
-- 副标题
-- 按钮/链接文案
-- 占位提示文字
-- Tab 或标签文字
-
-**检查方法**：按「从上到下」扫到时立即记下。
-
-### 图片
-
-区域内每一处图片、占位图、图标区都要记录。
-
-**记录项**：
-- **尺寸**（宽×高）
-- **位置**（相对父级或相邻元素）
-- **比例/圆角**
-- **与相邻元素的间距**
-- **多图拼接时的布局**（左右/上下/网格）及每张的占比
-
-**易漏点**：
-- 小图标
-- 占位图
-- 多图拼接时的布局关系
-
-**检查方法**：逐区域扫描，确保每张图片都有记录。
-
-### 布局
-
-位置、尺寸、间距（padding/gap/margin）、对齐方式、排列方向（横/纵/网格）、多图拼接方式等必须与设计稿一致，不可错位或比例失调。
-
-**记录项**：
-- 位置（x, y）
-- 尺寸（width, height）
-- 间距（padding, gap, margin，含方向）
-- 对齐方式（align-items, justifyContent）
-- 排列方向（横向/纵向/网格）
-- 多图拼接方式
-
-**检查方法**：对照设计稿，确保布局参数与设计稿一致。
-
-### 层级
-
-从外到里的嵌套（谁包谁）、父子/兄弟关系、区块先后与叠放顺序必须写清，实现时不可丢层或顺序颠倒。
-
-**记录项**：
-- 嵌套关系（谁包谁、父子/兄弟）
-- 先后顺序
-- 叠放关系（z-index）
-
-**检查方法**：按「从外到里」逐层分析，确保每层都有记录。
-
-## 2.2 每个区域需提取的其它信息
-
-| 类型 | 提取内容 | 示例 |
-|------|----------|------|
-| 尺寸 | width, height | 382, 270 |
-| 位置 | 相对父级的 x, y | 20, 76 |
-| 颜色 | fill（含透明度） | `#13131c73` |
-| 边框 | stroke 颜色/宽度，cornerRadius | 1px solid #13131c40, 12px |
-| 阴影 | effect 类型与参数 | 需从设计稿读出 |
-| 字体 | fontFamily, fontSize, fontWeight | PingFang SC, 14px, 500 |
-| 间距 | padding, gap（含方向） | padding: 12px; gap: 4px |
-| 对齐 | align-items, justifyContent | flex-start, space-between |
-| 特殊效果 | 如 background_blur | backdrop-filter: blur(17.5px) |
-
-## 2.3 元素层级与嵌套（层级必准确）
-
-### 从外到里
-
-按「**从外到里**」：外层容器 → 内层容器 → 叶子元素；**层级是四类重中之重之一，嵌套与先后顺序不可错。**
-
-### 卡片类
-
-区分「整卡」与「卡内区块」（如标题区、图片区、操作区），每块内的文字、图片、布局、层级单独列清。
-
-**示例**：
-```
-卡片容器
-├── 标题区
-│   ├── 标题文字
-│   └── 副标题文字
-├── 图片区
-│   └── 图片
-└── 操作区
-    ├── 按钮1
-    └── 按钮2
-```
-
-### 列表/网格
-
-明确单项尺寸、间距、每行/列数量，以及单项内的文字、图片与层级关系。
-
-**示例**：
-```
-列表容器
-├── 列表项1
-│   ├── 图标
-│   ├── 标题文字
-│   └── 描述文字
-├── 列表项2
-│   └── ...
-└── 列表项3
-    └── ...
-```
-
-## 2.4 常见遗漏检查点（分析时必过一遍）
-
-详见 `checklist-common-misses.md` 获取完整检查清单。
-
-快速检查：
-
-- [ ] **所有可见文字**：欢迎语、大标题、副标题、说明、按钮/链接/占位/Tab 文案等，按从上到下逐条核对
-- [ ] **所有图片/占位图**：尺寸、位置、比例、多图拼接布局，无遗漏
-- [ ] **布局**：位置、尺寸、间距、对齐、排列方向、多图拼接方式与设计稿一致，无错位或比例失调
-- [ ] **层级**：从外到里的嵌套与先后顺序正确，无丢层或顺序颠倒
-- [ ] 背景色（页面、卡片、区块、按钮）
-- [ ] 边框（颜色、宽度、圆角）
-- [ ] 阴影（颜色、模糊、偏移）
-- [ ] 内边距与外边距（padding / gap / margin）
-- [ ] 对齐方式（左对齐 / 居中 / 右对齐）
-- [ ] **右侧或对称区域**（易只写左侧漏右侧）
-- [ ] **底部或折叠区域**
-- [ ] 小图标、小按钮、Tab 文字
-- [ ] 占位图/占位图标尺寸与比例
-
-## 相关规则
-
-- `analysis-order.md` - 分析顺序（必守）
-- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
-- `checklist-common-misses.md` - 常见遗漏检查点（详细版）
-- `workflow-style-summary.md` - 第三步：样式规范汇总
+---
+title: 第二步：区域与元素提取
+impact: CRITICAL
+impactDescription: 文字、图片、布局、层级四者必须逐一准确记录，不允许出错或遗漏
+tags: workflow, element-extraction, analysis, critical
+---
+
+# 第二步：区域与元素提取
+
+## 概述
+
+对**每个区域**按「从外到里」逐项提取，避免只做「大致印象」式记录。**文字、图片、布局、层级四者均为重中之重，必须逐一准确记录，不允许出错或遗漏。**
+
+详见 `analysis-priorities.md`。
+
+## 2.1 文字、图片、布局、层级（必记）
+
+### 文字
+
+区域内每一处可见文案都要记录。
+
+**记录项**：
+- **内容**（完整或典型示例）
+- **字体**（fontFamily）
+- **字号**（fontSize）
+- **字重**（fontWeight）
+- **颜色**（color，含透明度）
+- **行高**（lineHeight）
+- **字间距**（letterSpacing，若有）
+
+**易漏点**：
+- 页面最上方的欢迎语/大标题
+- 副标题
+- 按钮/链接文案
+- 占位提示文字
+- Tab 或标签文字
+
+**检查方法**：按「从上到下」扫到时立即记下。
+
+### 图片
+
+区域内每一处图片、占位图、图标区都要记录。
+
+**记录项**：
+- **尺寸**（宽×高）
+- **位置**（相对父级或相邻元素）
+- **比例/圆角**
+- **与相邻元素的间距**
+- **多图拼接时的布局**（左右/上下/网格）及每张的占比
+
+**易漏点**：
+- 小图标
+- 占位图
+- 多图拼接时的布局关系
+
+**检查方法**：逐区域扫描，确保每张图片都有记录。
+
+### 布局
+
+位置、尺寸、间距（padding/gap/margin）、对齐方式、排列方向（横/纵/网格）、多图拼接方式等必须与设计稿一致，不可错位或比例失调。
+
+**记录项**：
+- 位置（x, y）
+- 尺寸（width, height）
+- 间距（padding, gap, margin，含方向）
+- 对齐方式（align-items, justifyContent）
+- 排列方向（横向/纵向/网格）
+- 多图拼接方式
+
+**检查方法**：对照设计稿，确保布局参数与设计稿一致。
+
+### 层级
+
+从外到里的嵌套（谁包谁）、父子/兄弟关系、区块先后与叠放顺序必须写清，实现时不可丢层或顺序颠倒。
+
+**记录项**：
+- 嵌套关系（谁包谁、父子/兄弟）
+- 先后顺序
+- 叠放关系（z-index）
+
+**检查方法**：按「从外到里」逐层分析，确保每层都有记录。
+
+## 2.2 每个区域需提取的其它信息
+
+| 类型 | 提取内容 | 示例 |
+|------|----------|------|
+| 尺寸 | width, height | 382, 270 |
+| 位置 | 相对父级的 x, y | 20, 76 |
+| 颜色 | fill（含透明度） | `#13131c73` |
+| 边框 | stroke 颜色/宽度，cornerRadius | 1px solid #13131c40, 12px |
+| 阴影 | effect 类型与参数 | 需从设计稿读出 |
+| 字体 | fontFamily, fontSize, fontWeight | PingFang SC, 14px, 500 |
+| 间距 | padding, gap（含方向） | padding: 12px; gap: 4px |
+| 对齐 | align-items, justifyContent | flex-start, space-between |
+| 特殊效果 | 如 background_blur | backdrop-filter: blur(17.5px) |
+
+## 2.3 元素层级与嵌套（层级必准确）
+
+### 从外到里
+
+按「**从外到里**」：外层容器 → 内层容器 → 叶子元素；**层级是四类重中之重之一，嵌套与先后顺序不可错。**
+
+### 卡片类
+
+区分「整卡」与「卡内区块」（如标题区、图片区、操作区），每块内的文字、图片、布局、层级单独列清。
+
+**示例**：
+```
+卡片容器
+├── 标题区
+│   ├── 标题文字
+│   └── 副标题文字
+├── 图片区
+│   └── 图片
+└── 操作区
+    ├── 按钮1
+    └── 按钮2
+```
+
+### 列表/网格
+
+明确单项尺寸、间距、每行/列数量，以及单项内的文字、图片与层级关系。
+
+**示例**：
+```
+列表容器
+├── 列表项1
+│   ├── 图标
+│   ├── 标题文字
+│   └── 描述文字
+├── 列表项2
+│   └── ...
+└── 列表项3
+    └── ...
+```
+
+## 2.4 常见遗漏检查点（分析时必过一遍）
+
+详见 `checklist-common-misses.md` 获取完整检查清单。
+
+快速检查：
+
+- [ ] **所有可见文字**：欢迎语、大标题、副标题、说明、按钮/链接/占位/Tab 文案等，按从上到下逐条核对
+- [ ] **所有图片/占位图**：尺寸、位置、比例、多图拼接布局，无遗漏
+- [ ] **布局**：位置、尺寸、间距、对齐、排列方向、多图拼接方式与设计稿一致，无错位或比例失调
+- [ ] **层级**：从外到里的嵌套与先后顺序正确，无丢层或顺序颠倒
+- [ ] 背景色（页面、卡片、区块、按钮）
+- [ ] 边框（颜色、宽度、圆角）
+- [ ] 阴影（颜色、模糊、偏移）
+- [ ] 内边距与外边距（padding / gap / margin）
+- [ ] 对齐方式（左对齐 / 居中 / 右对齐）
+- [ ] **右侧或对称区域**（易只写左侧漏右侧）
+- [ ] **底部或折叠区域**
+- [ ] 小图标、小按钮、Tab 文字
+- [ ] 占位图/占位图标尺寸与比例
+
+## 相关规则
+
+- `analysis-order.md` - 分析顺序（必守）
+- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
+- `checklist-common-misses.md` - 常见遗漏检查点（详细版）
+- `workflow-style-summary.md` - 第三步：样式规范汇总