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

package/.agents/skills/domains/web/design-analysis/SKILL.md

@@ -1,89 +1,89 @@
----
-name: design-analysis
-description: 当用户提供设计稿、UI 描述或页面还原需求时，分析界面结构与交互细节，输出可执行的 UI 分析清单供开发和验收使用。
-compatibility: Requires access to design artifacts and the local repository output path docs/样式还原/; may reference sibling skills and local .agents/rules.
----
-
-# 设计稿分析
-
-## 使用时机
-
-当满足以下任一情况时使用本技能：
-
-- 需要**分析设计稿**（`.pen`、Figma 链接、其它设计图或标注等），把界面结构、样式、元素梳理成可执行的前端任务
-- 需要产出一份**UI 分析清单**文档，供后续开发按清单实现、或供验收时对照
-
-不限定阶段：可在写提案前、写提案中、或单独做一次「只分析不写提案」时使用。
-
-## 环境依赖
-
-- 默认将分析清单落到 `docs/样式还原/`
-- 若涉及复杂交互，会引用本仓库内的交互摘要模板与提案 skill
-
----
-
-## 核心原则
-
-**必须按「从上到下、从左到右、从外到里」的顺序分析，并逐条准确记录文字、图片、布局、层级四类重中之重。**详见 `rules/analysis-order.md` 和 `rules/analysis-priorities.md`。
-
----
-
-## 目标产出
-
-| 产出物 | 路径 | 用途 |
-|--------|------|------|
-| UI 分析清单 | `docs/样式还原/<名称>-UI分析清单.md` | 开发时按此文档精确还原；验收时作为对照基准 |
-
----
-
-## 工作流程（4步）
-
-1. **建立布局 Map**：获取设计稿结构，记录页面状态、整体尺寸、区域划分。详见 `rules/workflow-layout-map.md`
-2. **区域与元素提取**：对每个区域按「从外到里」逐项提取，确保文字、图片、布局、层级四者均准确记录。详见 `rules/workflow-element-extraction.md`
-3. **样式规范汇总**：汇总颜色、字体、圆角、间距、阴影等样式规范。详见 `rules/workflow-style-summary.md`
-4. **复杂交互补充**：若页面含搜索、表单、弹窗、批量操作或复杂状态切换，补一段交互说明摘要。可参考 `../create-proposal/references/interaction-spec-template.md`
-5. **输出 UI 分析清单文档**：将分析结果输出为文档。详见 `rules/workflow-output-checklist.md` 和 `rules/output-analysis-checklist.md`
-
----
-
-## 快速参考
-
-### Analysis Rules（分析原则与顺序）
-- `rules/analysis-order.md` - 分析顺序（必守）
-- `rules/analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
-
-### Workflow Rules（工作流程步骤）
-- `rules/workflow-layout-map.md` - 第一步：建立布局 Map
-- `rules/workflow-element-extraction.md` - 第二步：区域与元素提取
-- `rules/workflow-style-summary.md` - 第三步：样式规范汇总
-- `rules/workflow-output-checklist.md` - 第四步：输出文档要求
-
-### Output Rules（输出文档模板）
-- `rules/output-analysis-checklist.md` - UI 分析清单文档完整模板
-
-### Implementation Rules（实现建议）
-- `rules/implementation-guidelines.md` - 主流网页设计常识
-- `rules/implementation-common-errors.md` - 常见错误模式与避免方法
-
-### Checklist Rules（检查清单）
-- `rules/checklist-common-misses.md` - 常见遗漏检查点
-
-### Tools Rules（工具使用指南）
-- `rules/tools-design-guidelines.md` - 设计稿工具使用（Pencil MCP / Figma MCP）
-
----
-
-## 与其它技能的关系
-
-- **create-proposal**：提案前置分析时，若涉及「有设计稿或 UI 描述」的页面/组件，可先或同步使用本技能产出分析清单，再委托 `/opsx:propose` 生成提案
-- **复杂交互说明**：若页面包含搜索、表单、弹窗、批量操作等复杂交互，可先按 `../create-proposal/references/interaction-spec-template.md` 整理摘要，再回写到 proposal / design / tasks
-- **ui-verification**：以本分析清单为基准做 UI 验收时使用；验收若发现「分析遗漏」或「描述不清」，应将结论反哺本技能
-- **create-route / create-component**：开发时若涉及样式还原，应引用本分析清单中的区域与样式规范
-
----
-
-## 相关规范
-
-- `.agents/rules/09-样式规范.md` - 设计稿颜色、圆角等提取规范
-- `.agents/skills/create-proposal/SKILL.md` - 提案前置分析与 OpenSpec 增强层（有设计稿时可先或同步使用本技能）
-- `.agents/skills/ui-verification/SKILL.md` - UI 验收（以分析清单为基准做验收）
+---
+name: design-analysis
+description: 当用户提供设计稿、UI 描述或页面还原需求时，分析界面结构与交互细节，输出可执行的 UI 分析清单供开发和验收使用。
+compatibility: Requires access to design artifacts and the local repository output path docs/样式还原/; may reference sibling skills and local .agents/rules.
+---
+
+# 设计稿分析
+
+## 使用时机
+
+当满足以下任一情况时使用本技能：
+
+- 需要**分析设计稿**（`.pen`、Figma 链接、其它设计图或标注等），把界面结构、样式、元素梳理成可执行的前端任务
+- 需要产出一份**UI 分析清单**文档，供后续开发按清单实现、或供验收时对照
+
+不限定阶段：可在写提案前、写提案中、或单独做一次「只分析不写提案」时使用。
+
+## 环境依赖
+
+- 默认将分析清单落到 `docs/样式还原/`
+- 若涉及复杂交互，会引用本仓库内的交互摘要模板与提案 skill
+
+---
+
+## 核心原则
+
+**必须按「从上到下、从左到右、从外到里」的顺序分析，并逐条准确记录文字、图片、布局、层级四类重中之重。**详见 `rules/analysis-order.md` 和 `rules/analysis-priorities.md`。
+
+---
+
+## 目标产出
+
+| 产出物 | 路径 | 用途 |
+|--------|------|------|
+| UI 分析清单 | `docs/样式还原/<名称>-UI分析清单.md` | 开发时按此文档精确还原；验收时作为对照基准 |
+
+---
+
+## 工作流程（4步）
+
+1. **建立布局 Map**：获取设计稿结构，记录页面状态、整体尺寸、区域划分。详见 `rules/workflow-layout-map.md`
+2. **区域与元素提取**：对每个区域按「从外到里」逐项提取，确保文字、图片、布局、层级四者均准确记录。详见 `rules/workflow-element-extraction.md`
+3. **样式规范汇总**：汇总颜色、字体、圆角、间距、阴影等样式规范。详见 `rules/workflow-style-summary.md`
+4. **复杂交互补充**：若页面含搜索、表单、弹窗、批量操作或复杂状态切换，补一段交互说明摘要。可参考 `../create-proposal/references/interaction-spec-template.md`
+5. **输出 UI 分析清单文档**：将分析结果输出为文档。详见 `rules/workflow-output-checklist.md` 和 `rules/output-analysis-checklist.md`
+
+---
+
+## 快速参考
+
+### Analysis Rules（分析原则与顺序）
+- `rules/analysis-order.md` - 分析顺序（必守）
+- `rules/analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
+
+### Workflow Rules（工作流程步骤）
+- `rules/workflow-layout-map.md` - 第一步：建立布局 Map
+- `rules/workflow-element-extraction.md` - 第二步：区域与元素提取
+- `rules/workflow-style-summary.md` - 第三步：样式规范汇总
+- `rules/workflow-output-checklist.md` - 第四步：输出文档要求
+
+### Output Rules（输出文档模板）
+- `rules/output-analysis-checklist.md` - UI 分析清单文档完整模板
+
+### Implementation Rules（实现建议）
+- `rules/implementation-guidelines.md` - 主流网页设计常识
+- `rules/implementation-common-errors.md` - 常见错误模式与避免方法
+
+### Checklist Rules（检查清单）
+- `rules/checklist-common-misses.md` - 常见遗漏检查点
+
+### Tools Rules（工具使用指南）
+- `rules/tools-design-guidelines.md` - 设计稿工具使用（Pencil MCP / Figma MCP）
+
+---
+
+## 与其它技能的关系
+
+- **create-proposal**：提案前置分析时，若涉及「有设计稿或 UI 描述」的页面/组件，可先或同步使用本技能产出分析清单，再委托 `/opsx:propose` 生成提案
+- **复杂交互说明**：若页面包含搜索、表单、弹窗、批量操作等复杂交互，可先按 `../create-proposal/references/interaction-spec-template.md` 整理摘要，再回写到 proposal / design / tasks
+- **ui-verification**：以本分析清单为基准做 UI 验收时使用；验收若发现「分析遗漏」或「描述不清」，应将结论反哺本技能
+- **create-route / create-component**：开发时若涉及样式还原，应引用本分析清单中的区域与样式规范
+
+---
+
+## 相关规范
+
+- `.agents/rules/09-样式规范.md` - 设计稿颜色、圆角等提取规范
+- `.agents/skills/create-proposal/SKILL.md` - 提案前置分析与 OpenSpec 增强层（有设计稿时可先或同步使用本技能）
+- `.agents/skills/ui-verification/SKILL.md` - UI 验收（以分析清单为基准做验收）

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

@@ -1,61 +1,61 @@
----
-title: 分析顺序（必守）
-impact: CRITICAL
-impactDescription: 不按顺序分析是遗漏与还原错误的主要来源，必须严格按从上到下、从左到右、从外到里
-tags: analysis, order, workflow, critical
----
-
-# 分析顺序（必守）
-
-## 重要性
-
-**必须按以下顺序阅读与记录设计稿，否则容易产生疏漏。**
-
-不按顺序分析是分析遗漏与还原错误的主要来源之一。严格按顺序分析，才能保证分析完整且实现不出错。
-
-## 分析顺序
-
-### 1. 从上到下
-
-先按垂直方向，从页面最上方扫到最下方，确定所有横向「带」与区块的先后顺序（与前端布局的从上至下一致）。
-
-**为什么重要**：
-- 与前端布局顺序一致，避免实现时顺序颠倒
-- 确保顶部或首屏的大字号文案（如欢迎语）不被遗漏
-- 避免只关注页面下方内容而漏掉顶部区域
-
-### 2. 从左到右
-
-在同一行或同一层级内，再按从左到右依次记录，不跳过、不凭印象合并。
-
-**为什么重要**：
-- 避免只记录左侧内容而漏掉右侧或对称区域
-- 确保同一层级内的元素顺序正确
-- 避免凭印象合并相似元素，导致细节丢失
-
-### 3. 从外到里
-
-在每个区块内部，按「外层容器 → 内层容器 → 叶子元素」逐层进入，先轮廓后细节。
-
-**为什么重要**：
-- 确保层级嵌套关系正确，不丢层或顺序颠倒
-- 先理解整体结构，再深入细节
-- 避免只关注细节而忽略整体布局
-
-## 扫描顺序示例
-
-**设计稿扫描**：
-1. 先按 y 坐标从 0 起向下（或从大到小）确定所有横向区域顺序
-2. 再在同一行内按 x 坐标从左到右读取
-3. 使用 Pencil MCP 或 Figma MCP 时也按此顺序逐层获取布局与节点信息
-
-**记录顺序**：
-- 区域列表：按从上到下（y）排序
-- 同层元素：从左到右（x）排序
-- 嵌套结构：从外到里逐层进入
-
-## 相关规则
-
-- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
-- `workflow-layout-map.md` - 建立布局 Map 时应用此顺序
-- `workflow-element-extraction.md` - 区域与元素提取时应用此顺序
+---
+title: 分析顺序（必守）
+impact: CRITICAL
+impactDescription: 不按顺序分析是遗漏与还原错误的主要来源，必须严格按从上到下、从左到右、从外到里
+tags: analysis, order, workflow, critical
+---
+
+# 分析顺序（必守）
+
+## 重要性
+
+**必须按以下顺序阅读与记录设计稿，否则容易产生疏漏。**
+
+不按顺序分析是分析遗漏与还原错误的主要来源之一。严格按顺序分析，才能保证分析完整且实现不出错。
+
+## 分析顺序
+
+### 1. 从上到下
+
+先按垂直方向，从页面最上方扫到最下方，确定所有横向「带」与区块的先后顺序（与前端布局的从上至下一致）。
+
+**为什么重要**：
+- 与前端布局顺序一致，避免实现时顺序颠倒
+- 确保顶部或首屏的大字号文案（如欢迎语）不被遗漏
+- 避免只关注页面下方内容而漏掉顶部区域
+
+### 2. 从左到右
+
+在同一行或同一层级内，再按从左到右依次记录，不跳过、不凭印象合并。
+
+**为什么重要**：
+- 避免只记录左侧内容而漏掉右侧或对称区域
+- 确保同一层级内的元素顺序正确
+- 避免凭印象合并相似元素，导致细节丢失
+
+### 3. 从外到里
+
+在每个区块内部，按「外层容器 → 内层容器 → 叶子元素」逐层进入，先轮廓后细节。
+
+**为什么重要**：
+- 确保层级嵌套关系正确，不丢层或顺序颠倒
+- 先理解整体结构，再深入细节
+- 避免只关注细节而忽略整体布局
+
+## 扫描顺序示例
+
+**设计稿扫描**：
+1. 先按 y 坐标从 0 起向下（或从大到小）确定所有横向区域顺序
+2. 再在同一行内按 x 坐标从左到右读取
+3. 使用 Pencil MCP 或 Figma MCP 时也按此顺序逐层获取布局与节点信息
+
+**记录顺序**：
+- 区域列表：按从上到下（y）排序
+- 同层元素：从左到右（x）排序
+- 嵌套结构：从外到里逐层进入
+
+## 相关规则
+
+- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
+- `workflow-layout-map.md` - 建立布局 Map 时应用此顺序
+- `workflow-element-extraction.md` - 区域与元素提取时应用此顺序

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

@@ -1,136 +1,136 @@
----
-title: 文字、图片、布局、层级四类重中之重
-impact: CRITICAL
-impactDescription: 四者均不允许出错或遗漏，分析时必须逐条准确记录
-tags: analysis, priorities, text, image, layout, hierarchy, critical
----
-
-# 文字、图片、布局、层级四类重中之重
-
-## 核心原则
-
-**文字、图片、布局、层级是页面元素的四类重中之重，均不允许出错或遗漏。**
-
-不按顺序分析，或漏记、错记文字/图片/布局/层级，是分析遗漏与还原错误的主要来源。**严格按「从上到下、从左到右、从外到里」并逐条准确记录这四者，才能保证分析完整且实现不出错。**
-
-## 一、文字
-
-### 记录要求
-
-**所有可见文案都必须记录**，包括：
-- 欢迎语、标题、副标题、说明文字
-- 按钮/链接文案
-- 占位文案
-- Tab 文字
-- 标签文字
-- 任何可见的文字内容
-
-### 记录项
-
-每处文字需记录：
-- **内容**：完整或典型示例
-- **字体**：fontFamily
-- **字号**：fontSize
-- **字重**：fontWeight
-- **颜色**：color（含透明度）
-- **行高**：lineHeight
-- **字间距**：letterSpacing（若有）
-
-### 易漏点
-
-- 页面最上方的欢迎语/大标题（最容易在「只记了下面小字」时被漏掉）
-- 副标题
-- 按钮/链接文案
-- 占位提示文字
-- Tab 或标签文字
-
-**检查方法**：按「从上到下」扫到时立即记下，不要等到后面再补。
-
-## 二、图片
-
-### 记录要求
-
-**所有图片、占位图、图标区域都必须记录**，包括：
-- 图片
-- 占位图
-- 图标区域
-- 任何可见的图像内容
-
-### 记录项
-
-每处图片需记录：
-- **尺寸**：宽×高（width × height）
-- **位置**：相对父级或相邻元素的 x, y
-- **比例**：宽高比
-- **圆角**：cornerRadius（如有）
-- **与相邻元素的间距**：margin 或 gap
-- **多图拼接时的布局关系**：左右/上下/网格，以及每张的占比
-
-### 易漏点
-
-- 小图标
-- 占位图
-- 多图拼接时的布局关系
-- 图片的圆角和比例
-
-**检查方法**：逐区域扫描，确保每张图片都有记录。
-
-## 三、布局
-
-### 记录要求
-
-**区域与元素的位置、尺寸、间距、对齐方式、排列方向、多图拼接方式等必须准确记录，与设计稿一致，不可错位或比例失调。**
-
-### 记录项
-
-- **位置**：x, y（相对父级）
-- **尺寸**：width, height
-- **间距**：padding, gap, margin（含方向）
-- **对齐方式**：align-items, justifyContent
-- **排列方向**：横向/纵向/网格
-- **多图拼接方式**：左右/上下/网格布局
-
-### 易漏点
-
-- 间距（padding/gap/margin）的方向性
-- 对齐方式（左对齐/居中/右对齐）
-- 排列方向（横向/纵向/网格）
-- 多图拼接时的布局方式
-
-**检查方法**：对照设计稿，确保布局参数与设计稿一致。
-
-## 四、层级
-
-### 记录要求
-
-**从外到里的嵌套关系（谁包谁、父子/兄弟）、区块的先后顺序与叠放关系必须写清，保证实现时结构正确、不丢层或顺序颠倒。**
-
-### 记录项
-
-- **嵌套关系**：谁包谁、父子/兄弟关系
-- **先后顺序**：区块的显示顺序
-- **叠放关系**：z-index 或层叠顺序
-
-### 易漏点
-
-- 外层容器被忽略
-- 嵌套层级丢失
-- 顺序颠倒
-- 叠放关系不明确
-
-**检查方法**：按「从外到里」逐层分析，确保每层都有记录。
-
-## 检查清单
-
-分析时必过一遍：
-
-- [ ] **所有可见文字**：欢迎语、大标题、副标题、说明、按钮/链接/占位/Tab 文案等，按从上到下逐条核对
-- [ ] **所有图片/占位图**：尺寸、位置、比例、多图拼接布局，无遗漏
-- [ ] **布局**：位置、尺寸、间距、对齐、排列方向、多图拼接方式与设计稿一致，无错位或比例失调
-- [ ] **层级**：从外到里的嵌套与先后顺序正确，无丢层或顺序颠倒
-
-## 相关规则
-
-- `analysis-order.md` - 分析顺序（必守）
-- `workflow-element-extraction.md` - 区域与元素提取时应用这些优先级
-- `checklist-common-misses.md` - 常见遗漏检查点（详细版）
+---
+title: 文字、图片、布局、层级四类重中之重
+impact: CRITICAL
+impactDescription: 四者均不允许出错或遗漏，分析时必须逐条准确记录
+tags: analysis, priorities, text, image, layout, hierarchy, critical
+---
+
+# 文字、图片、布局、层级四类重中之重
+
+## 核心原则
+
+**文字、图片、布局、层级是页面元素的四类重中之重，均不允许出错或遗漏。**
+
+不按顺序分析，或漏记、错记文字/图片/布局/层级，是分析遗漏与还原错误的主要来源。**严格按「从上到下、从左到右、从外到里」并逐条准确记录这四者，才能保证分析完整且实现不出错。**
+
+## 一、文字
+
+### 记录要求
+
+**所有可见文案都必须记录**，包括：
+- 欢迎语、标题、副标题、说明文字
+- 按钮/链接文案
+- 占位文案
+- Tab 文字
+- 标签文字
+- 任何可见的文字内容
+
+### 记录项
+
+每处文字需记录：
+- **内容**：完整或典型示例
+- **字体**：fontFamily
+- **字号**：fontSize
+- **字重**：fontWeight
+- **颜色**：color（含透明度）
+- **行高**：lineHeight
+- **字间距**：letterSpacing（若有）
+
+### 易漏点
+
+- 页面最上方的欢迎语/大标题（最容易在「只记了下面小字」时被漏掉）
+- 副标题
+- 按钮/链接文案
+- 占位提示文字
+- Tab 或标签文字
+
+**检查方法**：按「从上到下」扫到时立即记下，不要等到后面再补。
+
+## 二、图片
+
+### 记录要求
+
+**所有图片、占位图、图标区域都必须记录**，包括：
+- 图片
+- 占位图
+- 图标区域
+- 任何可见的图像内容
+
+### 记录项
+
+每处图片需记录：
+- **尺寸**：宽×高（width × height）
+- **位置**：相对父级或相邻元素的 x, y
+- **比例**：宽高比
+- **圆角**：cornerRadius（如有）
+- **与相邻元素的间距**：margin 或 gap
+- **多图拼接时的布局关系**：左右/上下/网格，以及每张的占比
+
+### 易漏点
+
+- 小图标
+- 占位图
+- 多图拼接时的布局关系
+- 图片的圆角和比例
+
+**检查方法**：逐区域扫描，确保每张图片都有记录。
+
+## 三、布局
+
+### 记录要求
+
+**区域与元素的位置、尺寸、间距、对齐方式、排列方向、多图拼接方式等必须准确记录，与设计稿一致，不可错位或比例失调。**
+
+### 记录项
+
+- **位置**：x, y（相对父级）
+- **尺寸**：width, height
+- **间距**：padding, gap, margin（含方向）
+- **对齐方式**：align-items, justifyContent
+- **排列方向**：横向/纵向/网格
+- **多图拼接方式**：左右/上下/网格布局
+
+### 易漏点
+
+- 间距（padding/gap/margin）的方向性
+- 对齐方式（左对齐/居中/右对齐）
+- 排列方向（横向/纵向/网格）
+- 多图拼接时的布局方式
+
+**检查方法**：对照设计稿，确保布局参数与设计稿一致。
+
+## 四、层级
+
+### 记录要求
+
+**从外到里的嵌套关系（谁包谁、父子/兄弟）、区块的先后顺序与叠放关系必须写清，保证实现时结构正确、不丢层或顺序颠倒。**
+
+### 记录项
+
+- **嵌套关系**：谁包谁、父子/兄弟关系
+- **先后顺序**：区块的显示顺序
+- **叠放关系**：z-index 或层叠顺序
+
+### 易漏点
+
+- 外层容器被忽略
+- 嵌套层级丢失
+- 顺序颠倒
+- 叠放关系不明确
+
+**检查方法**：按「从外到里」逐层分析，确保每层都有记录。
+
+## 检查清单
+
+分析时必过一遍：
+
+- [ ] **所有可见文字**：欢迎语、大标题、副标题、说明、按钮/链接/占位/Tab 文案等，按从上到下逐条核对
+- [ ] **所有图片/占位图**：尺寸、位置、比例、多图拼接布局，无遗漏
+- [ ] **布局**：位置、尺寸、间距、对齐、排列方向、多图拼接方式与设计稿一致，无错位或比例失调
+- [ ] **层级**：从外到里的嵌套与先后顺序正确，无丢层或顺序颠倒
+
+## 相关规则
+
+- `analysis-order.md` - 分析顺序（必守）
+- `workflow-element-extraction.md` - 区域与元素提取时应用这些优先级
+- `checklist-common-misses.md` - 常见遗漏检查点（详细版）