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

package/.agents/skills/domains/web/design-analysis/rules/workflow-layout-map.md

@@ -1,131 +1,131 @@
----
-title: 第一步：建立布局 Map
-impact: CRITICAL
-impactDescription: 设计稿分析第一步，获取整体结构、区域划分与区域间关系
-tags: workflow, layout-map, analysis, critical
----
-
-# 第一步：建立布局 Map
-
-## 概述
-
-建立布局 Map 是设计稿分析的第一步，目的是获取设计稿的整体结构，确定页面状态、整体尺寸、区域划分和区域间关系。
-
-## 1.1 获取设计稿结构
-
-### 打开设计稿文件或链接
-
-根据设计稿类型选择工具：
-
-- **.pen（Pencil 设计稿）**：
-  - 使用 **Pencil MCP** 查看结构、截图等
-  - 可用工具：`snapshot_layout`、`get_screenshot` 等
-  - 确认顶层 frame 及多状态（如有）
-
-- **Figma 链接**：
-  - 使用 **Figma MCP** 从链接中解析 file key / node id
-  - 可用工具：`get_screenshot`、`get_design_context` 等
-  - 获取对应 frame 或节点的截图、布局与节点信息
-
-详见 `tools-design-guidelines.md`。
-
-### 扫描顺序
-
-**按「从上到下、再从左到右」扫描**：
-- 先按 y 从大到小（或从 0 起向下）确定所有横向区域顺序
-- 再在同一行内按 x 从左到右读取
-- 使用 Pencil MCP 或 Figma MCP 时也按此顺序逐层获取布局与节点信息
-
-详见 `analysis-order.md`。
-
-## 1.2 必须记录的内容
-
-| 项目 | 说明 |
-|------|------|
-| 页面/界面状态 | 若有多个 frame（如「有数据 / 无数据」），分别标注 id 与用途 |
-| 整体尺寸 | 宽度、高度（如 1440×1150） |
-| 区域列表 | **按从上到下（y）排序**：区域名称、x / y / w / h、包含的主要子元素（**含该区内的主要文字、图片**） |
-| 区域间间距 | 上一区域底部到下一区域顶部的垂直间距 |
-| 主内容区起始 | 相对画布或导航栏的 x/y（如 132, 52） |
-| **文字（每区）** | 该区域内所有可见文案：内容、字体、字号、字重、颜色、行高；**不可遗漏**，尤其页面顶部/首屏大字号文案 |
-| **图片（每区）** | 该区域内所有图片/占位图/图标区：尺寸、位置、比例、圆角、多图时的布局关系；**不可遗漏** |
-| **布局（每区）** | 位置、尺寸、间距、对齐、排列方向、多图拼接方式等；**不可错位或比例失调** |
-| **层级（每区）** | 从外到里的嵌套（谁包谁）、父子/兄弟、先后与叠放顺序；**不可丢层或顺序颠倒** |
-
-**注意**：文字、图片、布局、层级是四类重中之重，详见 `analysis-priorities.md`。
-
-## 1.3 布局 Map 模板
-
-```markdown
-## 页面布局 Map
-
-### 整体尺寸
-- 页面宽度: ___ px
-- 页面高度: ___ px
-
-### 页面状态（如有多个）
-| 状态 | Frame ID | 说明 |
-|------|----------|------|
-| 状态1 | id | 说明 |
-
-### 区域列表（按从上到下 y 排序，同层内从左到右）
-| 区域 | x | y | w | h | 包含子元素（含主要文字、图片、布局、层级） |
-|------|---|---|---|---|------------------------------------------|
-| ... |   |   |   |   |                                          |
-
-### 区域间垂直间距
-- 区域 A 底部 → 区域 B 顶部: ___ px
-```
-
-## 使用示例
-
-### 示例：单状态页面
-
-```markdown
-## 页面布局 Map
-
-### 整体尺寸
-- 页面宽度: 1440 px
-- 页面高度: 1150 px
-
-### 区域列表（按从上到下 y 排序）
-| 区域 | x | y | w | h | 包含子元素 |
-|------|---|---|---|---|----------|
-| 导航栏 | 0 | 0 | 1440 | 80 | Logo、导航菜单、用户头像 |
-| 主内容区 | 132 | 80 | 1176 | 970 | 标题、列表、分页 |
-| 底部 | 0 | 1050 | 1440 | 100 | 版权信息、链接 |
-
-### 区域间垂直间距
-- 导航栏底部 → 主内容区顶部: 0 px（紧贴）
-- 主内容区底部 → 底部顶部: 0 px（紧贴）
-```
-
-### 示例：多状态页面
-
-```markdown
-## 页面布局 Map
-
-### 整体尺寸
-- 页面宽度: 1440 px
-- 页面高度: 1150 px
-
-### 页面状态（如有多个）
-| 状态 | Frame ID | 说明 |
-|------|----------|------|
-| 有数据 | frame-1 | 显示数据列表 |
-| 无数据 | frame-2 | 显示空状态提示 |
-
-### 区域列表（按从上到下 y 排序）
-| 区域 | x | y | w | h | 包含子元素 |
-|------|---|---|---|---|----------|
-| 导航栏 | 0 | 0 | 1440 | 80 | Logo、导航菜单 |
-| 主内容区（有数据） | 132 | 80 | 1176 | 970 | 标题、列表、分页 |
-| 主内容区（无数据） | 132 | 80 | 1176 | 970 | 空状态图标、提示文字、操作按钮 |
-```
-
-## 相关规则
-
-- `analysis-order.md` - 分析顺序（必守）
-- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
-- `tools-design-guidelines.md` - 设计稿工具使用指南
-- `workflow-element-extraction.md` - 第二步：区域与元素提取
+---
+title: 第一步：建立布局 Map
+impact: CRITICAL
+impactDescription: 设计稿分析第一步，获取整体结构、区域划分与区域间关系
+tags: workflow, layout-map, analysis, critical
+---
+
+# 第一步：建立布局 Map
+
+## 概述
+
+建立布局 Map 是设计稿分析的第一步，目的是获取设计稿的整体结构，确定页面状态、整体尺寸、区域划分和区域间关系。
+
+## 1.1 获取设计稿结构
+
+### 打开设计稿文件或链接
+
+根据设计稿类型选择工具：
+
+- **.pen（Pencil 设计稿）**：
+  - 使用 **Pencil MCP** 查看结构、截图等
+  - 可用工具：`snapshot_layout`、`get_screenshot` 等
+  - 确认顶层 frame 及多状态（如有）
+
+- **Figma 链接**：
+  - 使用 **Figma MCP** 从链接中解析 file key / node id
+  - 可用工具：`get_screenshot`、`get_design_context` 等
+  - 获取对应 frame 或节点的截图、布局与节点信息
+
+详见 `tools-design-guidelines.md`。
+
+### 扫描顺序
+
+**按「从上到下、再从左到右」扫描**：
+- 先按 y 从大到小（或从 0 起向下）确定所有横向区域顺序
+- 再在同一行内按 x 从左到右读取
+- 使用 Pencil MCP 或 Figma MCP 时也按此顺序逐层获取布局与节点信息
+
+详见 `analysis-order.md`。
+
+## 1.2 必须记录的内容
+
+| 项目 | 说明 |
+|------|------|
+| 页面/界面状态 | 若有多个 frame（如「有数据 / 无数据」），分别标注 id 与用途 |
+| 整体尺寸 | 宽度、高度（如 1440×1150） |
+| 区域列表 | **按从上到下（y）排序**：区域名称、x / y / w / h、包含的主要子元素（**含该区内的主要文字、图片**） |
+| 区域间间距 | 上一区域底部到下一区域顶部的垂直间距 |
+| 主内容区起始 | 相对画布或导航栏的 x/y（如 132, 52） |
+| **文字（每区）** | 该区域内所有可见文案：内容、字体、字号、字重、颜色、行高；**不可遗漏**，尤其页面顶部/首屏大字号文案 |
+| **图片（每区）** | 该区域内所有图片/占位图/图标区：尺寸、位置、比例、圆角、多图时的布局关系；**不可遗漏** |
+| **布局（每区）** | 位置、尺寸、间距、对齐、排列方向、多图拼接方式等；**不可错位或比例失调** |
+| **层级（每区）** | 从外到里的嵌套（谁包谁）、父子/兄弟、先后与叠放顺序；**不可丢层或顺序颠倒** |
+
+**注意**：文字、图片、布局、层级是四类重中之重，详见 `analysis-priorities.md`。
+
+## 1.3 布局 Map 模板
+
+```markdown
+## 页面布局 Map
+
+### 整体尺寸
+- 页面宽度: ___ px
+- 页面高度: ___ px
+
+### 页面状态（如有多个）
+| 状态 | Frame ID | 说明 |
+|------|----------|------|
+| 状态1 | id | 说明 |
+
+### 区域列表（按从上到下 y 排序，同层内从左到右）
+| 区域 | x | y | w | h | 包含子元素（含主要文字、图片、布局、层级） |
+|------|---|---|---|---|------------------------------------------|
+| ... |   |   |   |   |                                          |
+
+### 区域间垂直间距
+- 区域 A 底部 → 区域 B 顶部: ___ px
+```
+
+## 使用示例
+
+### 示例：单状态页面
+
+```markdown
+## 页面布局 Map
+
+### 整体尺寸
+- 页面宽度: 1440 px
+- 页面高度: 1150 px
+
+### 区域列表（按从上到下 y 排序）
+| 区域 | x | y | w | h | 包含子元素 |
+|------|---|---|---|---|----------|
+| 导航栏 | 0 | 0 | 1440 | 80 | Logo、导航菜单、用户头像 |
+| 主内容区 | 132 | 80 | 1176 | 970 | 标题、列表、分页 |
+| 底部 | 0 | 1050 | 1440 | 100 | 版权信息、链接 |
+
+### 区域间垂直间距
+- 导航栏底部 → 主内容区顶部: 0 px（紧贴）
+- 主内容区底部 → 底部顶部: 0 px（紧贴）
+```
+
+### 示例：多状态页面
+
+```markdown
+## 页面布局 Map
+
+### 整体尺寸
+- 页面宽度: 1440 px
+- 页面高度: 1150 px
+
+### 页面状态（如有多个）
+| 状态 | Frame ID | 说明 |
+|------|----------|------|
+| 有数据 | frame-1 | 显示数据列表 |
+| 无数据 | frame-2 | 显示空状态提示 |
+
+### 区域列表（按从上到下 y 排序）
+| 区域 | x | y | w | h | 包含子元素 |
+|------|---|---|---|---|----------|
+| 导航栏 | 0 | 0 | 1440 | 80 | Logo、导航菜单 |
+| 主内容区（有数据） | 132 | 80 | 1176 | 970 | 标题、列表、分页 |
+| 主内容区（无数据） | 132 | 80 | 1176 | 970 | 空状态图标、提示文字、操作按钮 |
+```
+
+## 相关规则
+
+- `analysis-order.md` - 分析顺序（必守）
+- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
+- `tools-design-guidelines.md` - 设计稿工具使用指南
+- `workflow-element-extraction.md` - 第二步：区域与元素提取

package/.agents/skills/domains/web/design-analysis/rules/workflow-output-checklist.md

@@ -1,70 +1,70 @@
----
-title: 第四步：输出文档要求
-impact: HIGH
-impactDescription: 文档路径、结构和质量要求，输出前需过质量检查清单
-tags: workflow, output, checklist
----
-
-# 第四步：输出文档要求
-
-## 概述
-
-第四步是将分析结果输出为「UI 分析清单」文档，供开发与验收参照。本文档说明文档路径、结构和质量要求。
-
-## 4.1 文档路径
-
-```
-docs/样式还原/<页面或模块名称>-UI分析清单.md
-```
-
-**示例**：
-- `docs/样式还原/用户中心-UI分析清单.md`
-- `docs/样式还原/商品列表页-UI分析清单.md`
-
-## 4.2 文档结构（必须包含）
-
-文档必须包含以下章节，详见 `output-analysis-checklist.md` 获取完整模板：
-
-1. **文档说明**：设计稿路径/链接、分析日期
-2. **一、设计稿整体分析**：页面状态、整体尺寸、区域划分、区域间间距
-3. **二、区域详细分析**：按从上到下、从左到右、从外到里顺序，每个区域包含所有文字、图片、布局、层级
-4. **三、样式规范汇总**：颜色、字体、圆角、间距、阴影、效果
-5. **四、交互状态分析**：默认 / hover / active / 禁用等（如有）
-6. **五、占位元素说明**：图标占位尺寸与位置、图片占位尺寸与比例
-7. **六、常见遗漏检查点**：本次分析已核对项，可列 checklist
-8. **七、实现建议**：组件划分、主流网页设计常识、常见错误模式
-9. **八、验证检查清单**：后续验收时用的布局/样式/元素/交互检查项
-10. **九、备注**：坐标系统、响应式、占位策略等
-
-## 4.3 文档质量要求
-
-| 要求 | 说明 |
-|------|------|
-| **分析顺序** | 区域与章节按「从上到下、从左到右、从外到里」书写，与前端布局一致，避免漏掉顶部或某一侧 |
-| **文字、图片、布局、层级** | 四者为页面元素重中之重，均不允许出错：所有文字与图片无遗漏；布局（位置/尺寸/间距/对齐）与设计稿一致；层级（嵌套与先后）正确无丢层或颠倒 |
-| 完整性 | 覆盖设计稿中所有关键区域与关键元素，无「略」式省略 |
-| 准确性 | 尺寸、颜色、字号等从设计稿中读取并写明，不猜测 |
-| 可执行 | 开发仅凭此文档即可实现布局与样式，无需反复看图 |
-| 可维护 | 设计稿变更时，同步更新本文档并标注更新日期 |
-
-## 质量检查清单
-
-输出文档前，检查以下项：
-
-- [ ] 文档路径正确，符合命名规范
-- [ ] 文档结构完整，包含所有必需章节
-- [ ] 分析顺序正确（从上到下、从左到右、从外到里）
-- [ ] 所有文字、图片、布局、层级都已记录，无遗漏
-- [ ] 样式规范汇总完整，包含颜色、字体、圆角、间距、阴影
-- [ ] 实现建议包含组件划分、设计常识、常见错误模式
-- [ ] 文档可执行，开发人员无需反复看图即可实现
-- [ ] 文档可维护，设计稿变更时可同步更新
-
-## 相关规则
-
-- `output-analysis-checklist.md` - UI 分析清单文档完整模板
-- `analysis-order.md` - 分析顺序（必守）
-- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
-- `workflow-layout-map.md` - 第一步：建立布局 Map
-- `workflow-element-extraction.md` - 第二步：区域与元素提取
-- `workflow-style-summary.md` - 第三步：样式规范汇总
+---
+title: 第四步：输出文档要求
+impact: HIGH
+impactDescription: 文档路径、结构和质量要求，输出前需过质量检查清单
+tags: workflow, output, checklist
+---
+
+# 第四步：输出文档要求
+
+## 概述
+
+第四步是将分析结果输出为「UI 分析清单」文档，供开发与验收参照。本文档说明文档路径、结构和质量要求。
+
+## 4.1 文档路径
+
+```
+docs/样式还原/<页面或模块名称>-UI分析清单.md
+```
+
+**示例**：
+- `docs/样式还原/用户中心-UI分析清单.md`
+- `docs/样式还原/商品列表页-UI分析清单.md`
+
+## 4.2 文档结构（必须包含）
+
+文档必须包含以下章节，详见 `output-analysis-checklist.md` 获取完整模板：
+
+1. **文档说明**：设计稿路径/链接、分析日期
+2. **一、设计稿整体分析**：页面状态、整体尺寸、区域划分、区域间间距
+3. **二、区域详细分析**：按从上到下、从左到右、从外到里顺序，每个区域包含所有文字、图片、布局、层级
+4. **三、样式规范汇总**：颜色、字体、圆角、间距、阴影、效果
+5. **四、交互状态分析**：默认 / hover / active / 禁用等（如有）
+6. **五、占位元素说明**：图标占位尺寸与位置、图片占位尺寸与比例
+7. **六、常见遗漏检查点**：本次分析已核对项，可列 checklist
+8. **七、实现建议**：组件划分、主流网页设计常识、常见错误模式
+9. **八、验证检查清单**：后续验收时用的布局/样式/元素/交互检查项
+10. **九、备注**：坐标系统、响应式、占位策略等
+
+## 4.3 文档质量要求
+
+| 要求 | 说明 |
+|------|------|
+| **分析顺序** | 区域与章节按「从上到下、从左到右、从外到里」书写，与前端布局一致，避免漏掉顶部或某一侧 |
+| **文字、图片、布局、层级** | 四者为页面元素重中之重，均不允许出错：所有文字与图片无遗漏；布局（位置/尺寸/间距/对齐）与设计稿一致；层级（嵌套与先后）正确无丢层或颠倒 |
+| 完整性 | 覆盖设计稿中所有关键区域与关键元素，无「略」式省略 |
+| 准确性 | 尺寸、颜色、字号等从设计稿中读取并写明，不猜测 |
+| 可执行 | 开发仅凭此文档即可实现布局与样式，无需反复看图 |
+| 可维护 | 设计稿变更时，同步更新本文档并标注更新日期 |
+
+## 质量检查清单
+
+输出文档前，检查以下项：
+
+- [ ] 文档路径正确，符合命名规范
+- [ ] 文档结构完整，包含所有必需章节
+- [ ] 分析顺序正确（从上到下、从左到右、从外到里）
+- [ ] 所有文字、图片、布局、层级都已记录，无遗漏
+- [ ] 样式规范汇总完整，包含颜色、字体、圆角、间距、阴影
+- [ ] 实现建议包含组件划分、设计常识、常见错误模式
+- [ ] 文档可执行，开发人员无需反复看图即可实现
+- [ ] 文档可维护，设计稿变更时可同步更新
+
+## 相关规则
+
+- `output-analysis-checklist.md` - UI 分析清单文档完整模板
+- `analysis-order.md` - 分析顺序（必守）
+- `analysis-priorities.md` - 文字、图片、布局、层级四类重中之重
+- `workflow-layout-map.md` - 第一步：建立布局 Map
+- `workflow-element-extraction.md` - 第二步：区域与元素提取
+- `workflow-style-summary.md` - 第三步：样式规范汇总

package/.agents/skills/domains/web/design-analysis/rules/workflow-style-summary.md

@@ -1,91 +1,91 @@
----
-title: 第三步：样式规范汇总
-impact: HIGH
-impactDescription: 颜色、字体、圆角、间距、阴影等样式规范汇总，便于开发与验收统一使用
-tags: workflow, style, summary
----
-
-# 第三步：样式规范汇总
-
-## 概述
-
-在分析清单中单独成章，便于开发与验收统一使用。汇总设计稿中的颜色、字体、圆角、间距、阴影等样式规范，形成可复用的样式指南。
-
-## 汇总内容
-
-### 颜色规范
-
-提取设计稿中的主要颜色，按用途分类：
-
-| 用途 | 颜色值 | 说明 |
-|------|--------|------|
-| 主文本 | `#13131c` | 主要文字颜色 |
-| 次要文本 | `#13131c73` | 次要文字颜色（含透明度） |
-| 边框 | `#13131c40` | 边框颜色 |
-| 背景 | `#ffffff` | 页面背景色 |
-| 按钮主色 | `#1890ff` | 主要按钮颜色 |
-| 按钮禁用 | `#d9d9d9` | 禁用状态颜色 |
-
-### 字体规范
-
-按用途汇总字体族、字号、字重、行高：
-
-| 用途 | 字体族 | 字号 | 字重 | 行高 | 示例 |
-|------|--------|------|------|------|------|
-| 大标题 | PingFang SC | 24px | 600 | 32px | 页面主标题 |
-| 副标题 | PingFang SC | 18px | 500 | 26px | 区块标题 |
-| 正文 | PingFang SC | 14px | 400 | 20px | 普通文本 |
-| 说明文字 | PingFang SC | 12px | 400 | 18px | 辅助说明 |
-| 按钮文字 | PingFang SC | 14px | 500 | 20px | 按钮内文字 |
-
-### 圆角规范
-
-按元素类型汇总圆角值：
-
-| 元素类型 | 圆角值 | 说明 |
-|----------|--------|------|
-| 卡片 | 12px | 卡片容器 |
-| 按钮 | 8px | 按钮圆角 |
-| 输入框 | 8px | 输入框圆角 |
-| 图片 | 8px | 图片圆角 |
-| 标签 | 4px | 标签圆角 |
-
-### 间距规范
-
-按层级汇总间距值：
-
-| 层级 | 间距值 | 说明 |
-|------|--------|------|
-| 页面边距 | 132px | 页面左右边距 |
-| 区块间距 | 24px | 区块之间的垂直间距 |
-| 组件内 gap | 12px | 组件内部元素间距 |
-| 组件内 padding | 16px | 组件内边距 |
-
-### 阴影与效果
-
-汇总阴影和特殊效果：
-
-| 效果类型 | 参数 | 说明 |
-|----------|------|------|
-| 卡片阴影 | `0 2px 8px rgba(0,0,0,0.1)` | 卡片阴影 |
-| 按钮阴影 | `0 1px 4px rgba(0,0,0,0.1)` | 按钮阴影 |
-| 背景模糊 | `backdrop-filter: blur(17.5px)` | 背景模糊效果 |
-
-## 汇总方法
-
-1. **从区域分析中提取**：在第二步「区域与元素提取」时，记录每个区域的样式信息
-2. **按类型分类**：将相同类型的样式值归类汇总
-3. **去重合并**：相同的样式值只记录一次，避免重复
-4. **标注用途**：明确每个样式值的用途和使用场景
-
-## 使用建议
-
-- **开发时**：参考样式规范汇总，确保实现时使用统一的样式值
-- **验收时**：对照样式规范汇总，检查实现是否符合设计稿规范
-- **维护时**：设计稿变更时，同步更新样式规范汇总
-
-## 相关规则
-
-- `workflow-element-extraction.md` - 第二步：区域与元素提取（提取样式信息）
-- `output-analysis-checklist.md` - UI 分析清单文档模板（包含样式规范汇总章节）
-- `workflow-output-checklist.md` - 第四步：输出文档要求
+---
+title: 第三步：样式规范汇总
+impact: HIGH
+impactDescription: 颜色、字体、圆角、间距、阴影等样式规范汇总，便于开发与验收统一使用
+tags: workflow, style, summary
+---
+
+# 第三步：样式规范汇总
+
+## 概述
+
+在分析清单中单独成章，便于开发与验收统一使用。汇总设计稿中的颜色、字体、圆角、间距、阴影等样式规范，形成可复用的样式指南。
+
+## 汇总内容
+
+### 颜色规范
+
+提取设计稿中的主要颜色，按用途分类：
+
+| 用途 | 颜色值 | 说明 |
+|------|--------|------|
+| 主文本 | `#13131c` | 主要文字颜色 |
+| 次要文本 | `#13131c73` | 次要文字颜色（含透明度） |
+| 边框 | `#13131c40` | 边框颜色 |
+| 背景 | `#ffffff` | 页面背景色 |
+| 按钮主色 | `#1890ff` | 主要按钮颜色 |
+| 按钮禁用 | `#d9d9d9` | 禁用状态颜色 |
+
+### 字体规范
+
+按用途汇总字体族、字号、字重、行高：
+
+| 用途 | 字体族 | 字号 | 字重 | 行高 | 示例 |
+|------|--------|------|------|------|------|
+| 大标题 | PingFang SC | 24px | 600 | 32px | 页面主标题 |
+| 副标题 | PingFang SC | 18px | 500 | 26px | 区块标题 |
+| 正文 | PingFang SC | 14px | 400 | 20px | 普通文本 |
+| 说明文字 | PingFang SC | 12px | 400 | 18px | 辅助说明 |
+| 按钮文字 | PingFang SC | 14px | 500 | 20px | 按钮内文字 |
+
+### 圆角规范
+
+按元素类型汇总圆角值：
+
+| 元素类型 | 圆角值 | 说明 |
+|----------|--------|------|
+| 卡片 | 12px | 卡片容器 |
+| 按钮 | 8px | 按钮圆角 |
+| 输入框 | 8px | 输入框圆角 |
+| 图片 | 8px | 图片圆角 |
+| 标签 | 4px | 标签圆角 |
+
+### 间距规范
+
+按层级汇总间距值：
+
+| 层级 | 间距值 | 说明 |
+|------|--------|------|
+| 页面边距 | 132px | 页面左右边距 |
+| 区块间距 | 24px | 区块之间的垂直间距 |
+| 组件内 gap | 12px | 组件内部元素间距 |
+| 组件内 padding | 16px | 组件内边距 |
+
+### 阴影与效果
+
+汇总阴影和特殊效果：
+
+| 效果类型 | 参数 | 说明 |
+|----------|------|------|
+| 卡片阴影 | `0 2px 8px rgba(0,0,0,0.1)` | 卡片阴影 |
+| 按钮阴影 | `0 1px 4px rgba(0,0,0,0.1)` | 按钮阴影 |
+| 背景模糊 | `backdrop-filter: blur(17.5px)` | 背景模糊效果 |
+
+## 汇总方法
+
+1. **从区域分析中提取**：在第二步「区域与元素提取」时，记录每个区域的样式信息
+2. **按类型分类**：将相同类型的样式值归类汇总
+3. **去重合并**：相同的样式值只记录一次，避免重复
+4. **标注用途**：明确每个样式值的用途和使用场景
+
+## 使用建议
+
+- **开发时**：参考样式规范汇总，确保实现时使用统一的样式值
+- **验收时**：对照样式规范汇总，检查实现是否符合设计稿规范
+- **维护时**：设计稿变更时，同步更新样式规范汇总
+
+## 相关规则
+
+- `workflow-element-extraction.md` - 第二步：区域与元素提取（提取样式信息）
+- `output-analysis-checklist.md` - UI 分析清单文档模板（包含样式规范汇总章节）
+- `workflow-output-checklist.md` - 第四步：输出文档要求