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

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

@@ -1,247 +1,247 @@
----
-title: UI 分析清单文档模板
-impact: HIGH
-impactDescription: 设计稿分析结果输出模板，供开发与验收参照
-tags: output, checklist, template, analysis
----
-
-# UI 分析清单文档模板
-
-## 完整模板
-
-```markdown
-# <名称> - UI 分析清单
-
-> **文档说明**：设计稿分析结果，供前端 UI 开发与验收参照。  
-> **设计稿路径/链接**：`docs/设计稿/<路径>/<文件名>.pen` 或 Figma 链接（如 https://www.figma.com/...）  
-> **分析日期**：YYYY-MM-DD
-
-## 一、设计稿整体分析
-
-（页面状态、整体尺寸、**按从上到下排序的**区域划分、区域间间距）
-
-### 页面状态
-- 状态1：有数据状态
-- 状态2：无数据状态
-
-### 整体尺寸
-- 页面宽度: ___ px
-- 页面高度: ___ px
-
-### 区域列表（按从上到下排序）
-| 区域 | x | y | w | h | 包含子元素 |
-|------|---|---|---|---|----------|
-| 区域1 |   |   |   |   |          |
-| 区域2 |   |   |   |   |          |
-
-### 区域间垂直间距
-- 区域 A 底部 → 区域 B 顶部: ___ px
-
-## 二、区域详细分析
-
-（**按从上到下、从左到右、从外到里顺序**书写；每个区域必须包含：该区内的**所有文字**（内容+字体/字号/颜色等）、**所有图片/占位图**（尺寸、位置、布局）、**布局**（位置/尺寸/间距/对齐/排列）、**层级**（嵌套与先后顺序），以及元素结构、样式规范——四者均不允许出错）
-
-### 区域1：导航栏
-
-#### 文字
-- 标题文字：内容「首页」，字体 PingFang SC，字号 16px，字重 500，颜色 #13131c，行高 24px
-
-#### 图片
-- Logo：尺寸 120×40，位置 (20, 20)，比例 3:1
-
-#### 布局
-- 位置：(0, 0)
-- 尺寸：1440×80
-- 间距：padding 20px，gap 24px
-- 对齐：flex-start, space-between
-- 排列方向：横向
-
-#### 层级
-```
-导航栏容器
-├── Logo
-├── 导航菜单
-│   ├── 菜单项1
-│   └── 菜单项2
-└── 用户头像
-```
-
-### 区域2：主内容区
-
-（按相同格式记录每个区域）
-
-## 三、样式规范汇总
-
-（颜色、字体、圆角、间距、阴影、效果）
-
-详见 `workflow-style-summary.md` 获取汇总方法。
-
-### 颜色规范
-| 用途 | 颜色值 | 说明 |
-|------|--------|------|
-| 主文本 | `#13131c` | 主要文字颜色 |
-| 次要文本 | `#13131c73` | 次要文字颜色 |
-
-### 字体规范
-| 用途 | 字体族 | 字号 | 字重 | 行高 |
-|------|--------|------|------|------|
-| 大标题 | PingFang SC | 24px | 600 | 32px |
-
-### 圆角规范
-| 元素类型 | 圆角值 |
-|----------|--------|
-| 卡片 | 12px |
-
-### 间距规范
-| 层级 | 间距值 |
-|------|--------|
-| 页面边距 | 132px |
-
-### 阴影与效果
-| 效果类型 | 参数 |
-|----------|------|
-| 卡片阴影 | `0 2px 8px rgba(0,0,0,0.1)` |
-
-## 四、交互状态分析
-
-（默认 / hover / active / 禁用等，如有）
-
-### 按钮状态
-- 默认：背景色 #1890ff，文字颜色 #ffffff
-- hover：背景色 #40a9ff
-- active：背景色 #096dd9
-- 禁用：背景色 #d9d9d9，文字颜色 #ffffff
-
-## 五、占位元素说明
-
-（图标占位尺寸与位置、图片占位尺寸与比例）
-
-- 图标占位：尺寸 24×24，位置相对父级居中
-- 图片占位：尺寸 382×270，比例 16:9
-
-## 六、常见遗漏检查点
-
-（本次分析已核对项，可列 checklist）
-
-详见 `checklist-common-misses.md` 获取完整检查清单。
-
-- [x] 所有可见文字已记录
-- [x] 所有图片/占位图已记录
-- [x] 布局参数与设计稿一致
-- [x] 层级嵌套关系正确
-
-## 七、实现建议
-
-### 7.1 组件划分与样式文件
-
-（建议的组件划分、样式文件、开发顺序）
-
-- 组件划分：
-  - `NavBar` - 导航栏组件
-  - `ContentArea` - 主内容区组件
-- 样式文件：
-  - `styles/navbar.scss` - 导航栏样式
-  - `styles/content.scss` - 主内容区样式
-- 开发顺序：
-  1. 导航栏
-  2. 主内容区
-  3. 底部
-
-### 7.2 主流网页设计常识（实现时需遵循）
-
-详见 `implementation-guidelines.md` 获取详细说明。
-
-**核心原则**：实现时应遵循主流网页设计常识，避免反审美的效果。这些常识应在编写代码时就遵循，而非验收时才发现。
-
-#### 页面容器宽度
-- ❌ **不应写死 `max-width`** 导致右侧大片留白（除非设计稿特别说明）
-- ✅ **页面应自适应视口宽度**，避免割裂的留白效果
-
-#### 横向列表布局
-- ❌ **不应限制一行几个元素而留空白**（如固定列数导致右侧大片空白）
-- ❌ **不应出现元素被截断**（如半截卡片显示）
-- ✅ **应铺满可用宽度**，能放几个就放几个，不够再换行
-- ✅ **换行后应保持列宽一致**（使用 Grid 而非 Flex）
-
-**布局选择指导**：
-- **Grid**：适合等列宽、多行一致的情况
-  - 使用 `grid-template-columns: repeat(auto-fill, minmax(min, max))` 实现自适应列数
-  - 确保 Grid 容器有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列
-- **Flex**：适合自适应但每行独立计算的情况
-  - 需要铺满宽度时使用 `flex-grow: 1`，不要用 `flex: 0 1 fixed-width`
-  - 注意 Flex 每行独立计算，换行后列宽可能不一致
-
-#### 元素展示完整性
-- ❌ **不应展示不完整的元素**（如半截卡片、被裁切的按钮）
-- ✅ **要么完整展示，要么完全不展示**（使用 `overflow: hidden` 配合数量控制，而非视觉截断）
-
-#### 对齐方式
-- ✅ **图标与文本的对齐**：检查 `align-items` 值，常见应为 `center`（水平居中）而非 `flex-start`（顶部对齐）
-- ✅ **按钮、卡片等元素的定位**：仔细对照设计稿的 `padding`、`margin`、定位规则
-
-#### CSS 优先级与样式覆盖
-- ⚠️ **组件样式被页面级样式覆盖**：传入的 `className` 可能覆盖组件内部的关键样式（如 `display: block` 覆盖 `display: flex`）
-- ✅ **建议**：组件内部样式使用更具体的选择器，或使用 CSS Modules 避免冲突
-- ✅ **检查**：验收时检查组件样式是否被父级样式覆盖
-
-#### 必须用浏览器验证的细节
-- ⚠️ **按钮高度、宽度**：必须用浏览器工具实际查看渲染效果，不能仅凭代码推测
-- ⚠️ **对齐效果**：必须用浏览器查看实际对齐效果
-- ⚠️ **hover/active 状态**：必须用浏览器实际触发查看
-- ⚠️ **响应式表现**：必须用浏览器在不同视口下查看
-
-**看到设计稿时，默认不会出现以下反审美的效果**：
-- 右侧大片留白
-- 列表留空白
-- 元素截断
-- 换行后列宽不一致
-
-### 7.3 常见错误模式与避免方法
-
-详见 `implementation-common-errors.md` 获取详细说明。
-
-| 错误模式 | 原因 | 避免方法 |
-|---------|------|----------|
-| **Grid 一行只有一个** | Grid 容器宽度不确定，`auto-fill` 只算出一列 | 确保 Grid 容器有明确宽度（如 `width: 100%`） |
-| **Flex 不铺满、留空白** | 使用了 `flex: 0 1 fixed-width`，不允许增长 | 使用 `flex-grow: 1` 或 `flex: 1 1 min-width` |
-| **换行后列宽不一致** | Flex 布局每行独立计算 | 使用 Grid 而非 Flex 来保证列宽一致 |
-| **组件样式被覆盖** | 页面级样式覆盖了组件内部样式 | 检查 CSS 优先级，使用更具体的选择器或 CSS Modules |
-| **对齐方式错误** | 默认使用了 `flex-start` 而非 `center` | 明确设置 `align-items: center` |
-| **按钮尺寸不对** | 未用浏览器实际查看，仅凭代码推测 | **必须用浏览器工具查看实际渲染效果** |
-
-## 八、验证检查清单
-
-（后续验收时用的布局/样式/元素/交互检查项）
-
-- [ ] 布局：位置、尺寸、间距与设计稿一致
-- [ ] 层级：嵌套关系正确，无丢层或顺序颠倒
-- [ ] 文字：所有文字内容、样式与设计稿一致
-- [ ] 图片：所有图片尺寸、位置、比例与设计稿一致
-- [ ] 样式：颜色、字体、圆角、间距与设计稿一致
-- [ ] 交互：hover、active、禁用状态与设计稿一致
-
-## 九、备注
-
-（坐标系统、响应式、占位策略等）
-
-- 坐标系统：以页面左上角为原点 (0, 0)
-- 响应式：设计稿为桌面端 1440px 宽度，移动端需另行设计
-- 占位策略：图片加载失败时使用占位图，尺寸与比例需保持一致
-```
-
-## 使用说明
-
-1. **复制模板**：将上述模板复制到新文档中
-2. **替换占位符**：将 `<名称>`、`___` 等占位符替换为实际内容
-3. **填充内容**：根据设计稿分析结果，填充各个章节的内容
-4. **检查完整性**：使用 `workflow-output-checklist.md` 中的质量检查清单验证文档完整性
-
-## 相关规则
-
-- `workflow-output-checklist.md` - 文档路径和质量要求
-- `workflow-layout-map.md` - 第一步：建立布局 Map
-- `workflow-element-extraction.md` - 第二步：区域与元素提取
-- `workflow-style-summary.md` - 第三步：样式规范汇总
-- `implementation-guidelines.md` - 实现建议详细内容
-- `implementation-common-errors.md` - 常见错误模式
-- `checklist-common-misses.md` - 常见遗漏检查点
+---
+title: UI 分析清单文档模板
+impact: HIGH
+impactDescription: 设计稿分析结果输出模板，供开发与验收参照
+tags: output, checklist, template, analysis
+---
+
+# UI 分析清单文档模板
+
+## 完整模板
+
+```markdown
+# <名称> - UI 分析清单
+
+> **文档说明**：设计稿分析结果，供前端 UI 开发与验收参照。  
+> **设计稿路径/链接**：`docs/设计稿/<路径>/<文件名>.pen` 或 Figma 链接（如 https://www.figma.com/...）  
+> **分析日期**：YYYY-MM-DD
+
+## 一、设计稿整体分析
+
+（页面状态、整体尺寸、**按从上到下排序的**区域划分、区域间间距）
+
+### 页面状态
+- 状态1：有数据状态
+- 状态2：无数据状态
+
+### 整体尺寸
+- 页面宽度: ___ px
+- 页面高度: ___ px
+
+### 区域列表（按从上到下排序）
+| 区域 | x | y | w | h | 包含子元素 |
+|------|---|---|---|---|----------|
+| 区域1 |   |   |   |   |          |
+| 区域2 |   |   |   |   |          |
+
+### 区域间垂直间距
+- 区域 A 底部 → 区域 B 顶部: ___ px
+
+## 二、区域详细分析
+
+（**按从上到下、从左到右、从外到里顺序**书写；每个区域必须包含：该区内的**所有文字**（内容+字体/字号/颜色等）、**所有图片/占位图**（尺寸、位置、布局）、**布局**（位置/尺寸/间距/对齐/排列）、**层级**（嵌套与先后顺序），以及元素结构、样式规范——四者均不允许出错）
+
+### 区域1：导航栏
+
+#### 文字
+- 标题文字：内容「首页」，字体 PingFang SC，字号 16px，字重 500，颜色 #13131c，行高 24px
+
+#### 图片
+- Logo：尺寸 120×40，位置 (20, 20)，比例 3:1
+
+#### 布局
+- 位置：(0, 0)
+- 尺寸：1440×80
+- 间距：padding 20px，gap 24px
+- 对齐：flex-start, space-between
+- 排列方向：横向
+
+#### 层级
+```
+导航栏容器
+├── Logo
+├── 导航菜单
+│   ├── 菜单项1
+│   └── 菜单项2
+└── 用户头像
+```
+
+### 区域2：主内容区
+
+（按相同格式记录每个区域）
+
+## 三、样式规范汇总
+
+（颜色、字体、圆角、间距、阴影、效果）
+
+详见 `workflow-style-summary.md` 获取汇总方法。
+
+### 颜色规范
+| 用途 | 颜色值 | 说明 |
+|------|--------|------|
+| 主文本 | `#13131c` | 主要文字颜色 |
+| 次要文本 | `#13131c73` | 次要文字颜色 |
+
+### 字体规范
+| 用途 | 字体族 | 字号 | 字重 | 行高 |
+|------|--------|------|------|------|
+| 大标题 | PingFang SC | 24px | 600 | 32px |
+
+### 圆角规范
+| 元素类型 | 圆角值 |
+|----------|--------|
+| 卡片 | 12px |
+
+### 间距规范
+| 层级 | 间距值 |
+|------|--------|
+| 页面边距 | 132px |
+
+### 阴影与效果
+| 效果类型 | 参数 |
+|----------|------|
+| 卡片阴影 | `0 2px 8px rgba(0,0,0,0.1)` |
+
+## 四、交互状态分析
+
+（默认 / hover / active / 禁用等，如有）
+
+### 按钮状态
+- 默认：背景色 #1890ff，文字颜色 #ffffff
+- hover：背景色 #40a9ff
+- active：背景色 #096dd9
+- 禁用：背景色 #d9d9d9，文字颜色 #ffffff
+
+## 五、占位元素说明
+
+（图标占位尺寸与位置、图片占位尺寸与比例）
+
+- 图标占位：尺寸 24×24，位置相对父级居中
+- 图片占位：尺寸 382×270，比例 16:9
+
+## 六、常见遗漏检查点
+
+（本次分析已核对项，可列 checklist）
+
+详见 `checklist-common-misses.md` 获取完整检查清单。
+
+- [x] 所有可见文字已记录
+- [x] 所有图片/占位图已记录
+- [x] 布局参数与设计稿一致
+- [x] 层级嵌套关系正确
+
+## 七、实现建议
+
+### 7.1 组件划分与样式文件
+
+（建议的组件划分、样式文件、开发顺序）
+
+- 组件划分：
+  - `NavBar` - 导航栏组件
+  - `ContentArea` - 主内容区组件
+- 样式文件：
+  - `styles/navbar.scss` - 导航栏样式
+  - `styles/content.scss` - 主内容区样式
+- 开发顺序：
+  1. 导航栏
+  2. 主内容区
+  3. 底部
+
+### 7.2 主流网页设计常识（实现时需遵循）
+
+详见 `implementation-guidelines.md` 获取详细说明。
+
+**核心原则**：实现时应遵循主流网页设计常识，避免反审美的效果。这些常识应在编写代码时就遵循，而非验收时才发现。
+
+#### 页面容器宽度
+- ❌ **不应写死 `max-width`** 导致右侧大片留白（除非设计稿特别说明）
+- ✅ **页面应自适应视口宽度**，避免割裂的留白效果
+
+#### 横向列表布局
+- ❌ **不应限制一行几个元素而留空白**（如固定列数导致右侧大片空白）
+- ❌ **不应出现元素被截断**（如半截卡片显示）
+- ✅ **应铺满可用宽度**，能放几个就放几个，不够再换行
+- ✅ **换行后应保持列宽一致**（使用 Grid 而非 Flex）
+
+**布局选择指导**：
+- **Grid**：适合等列宽、多行一致的情况
+  - 使用 `grid-template-columns: repeat(auto-fill, minmax(min, max))` 实现自适应列数
+  - 确保 Grid 容器有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列
+- **Flex**：适合自适应但每行独立计算的情况
+  - 需要铺满宽度时使用 `flex-grow: 1`，不要用 `flex: 0 1 fixed-width`
+  - 注意 Flex 每行独立计算，换行后列宽可能不一致
+
+#### 元素展示完整性
+- ❌ **不应展示不完整的元素**（如半截卡片、被裁切的按钮）
+- ✅ **要么完整展示，要么完全不展示**（使用 `overflow: hidden` 配合数量控制，而非视觉截断）
+
+#### 对齐方式
+- ✅ **图标与文本的对齐**：检查 `align-items` 值，常见应为 `center`（水平居中）而非 `flex-start`（顶部对齐）
+- ✅ **按钮、卡片等元素的定位**：仔细对照设计稿的 `padding`、`margin`、定位规则
+
+#### CSS 优先级与样式覆盖
+- ⚠️ **组件样式被页面级样式覆盖**：传入的 `className` 可能覆盖组件内部的关键样式（如 `display: block` 覆盖 `display: flex`）
+- ✅ **建议**：组件内部样式使用更具体的选择器，或使用 CSS Modules 避免冲突
+- ✅ **检查**：验收时检查组件样式是否被父级样式覆盖
+
+#### 必须用浏览器验证的细节
+- ⚠️ **按钮高度、宽度**：必须用浏览器工具实际查看渲染效果，不能仅凭代码推测
+- ⚠️ **对齐效果**：必须用浏览器查看实际对齐效果
+- ⚠️ **hover/active 状态**：必须用浏览器实际触发查看
+- ⚠️ **响应式表现**：必须用浏览器在不同视口下查看
+
+**看到设计稿时，默认不会出现以下反审美的效果**：
+- 右侧大片留白
+- 列表留空白
+- 元素截断
+- 换行后列宽不一致
+
+### 7.3 常见错误模式与避免方法
+
+详见 `implementation-common-errors.md` 获取详细说明。
+
+| 错误模式 | 原因 | 避免方法 |
+|---------|------|----------|
+| **Grid 一行只有一个** | Grid 容器宽度不确定，`auto-fill` 只算出一列 | 确保 Grid 容器有明确宽度（如 `width: 100%`） |
+| **Flex 不铺满、留空白** | 使用了 `flex: 0 1 fixed-width`，不允许增长 | 使用 `flex-grow: 1` 或 `flex: 1 1 min-width` |
+| **换行后列宽不一致** | Flex 布局每行独立计算 | 使用 Grid 而非 Flex 来保证列宽一致 |
+| **组件样式被覆盖** | 页面级样式覆盖了组件内部样式 | 检查 CSS 优先级，使用更具体的选择器或 CSS Modules |
+| **对齐方式错误** | 默认使用了 `flex-start` 而非 `center` | 明确设置 `align-items: center` |
+| **按钮尺寸不对** | 未用浏览器实际查看，仅凭代码推测 | **必须用浏览器工具查看实际渲染效果** |
+
+## 八、验证检查清单
+
+（后续验收时用的布局/样式/元素/交互检查项）
+
+- [ ] 布局：位置、尺寸、间距与设计稿一致
+- [ ] 层级：嵌套关系正确，无丢层或顺序颠倒
+- [ ] 文字：所有文字内容、样式与设计稿一致
+- [ ] 图片：所有图片尺寸、位置、比例与设计稿一致
+- [ ] 样式：颜色、字体、圆角、间距与设计稿一致
+- [ ] 交互：hover、active、禁用状态与设计稿一致
+
+## 九、备注
+
+（坐标系统、响应式、占位策略等）
+
+- 坐标系统：以页面左上角为原点 (0, 0)
+- 响应式：设计稿为桌面端 1440px 宽度，移动端需另行设计
+- 占位策略：图片加载失败时使用占位图，尺寸与比例需保持一致
+```
+
+## 使用说明
+
+1. **复制模板**：将上述模板复制到新文档中
+2. **替换占位符**：将 `<名称>`、`___` 等占位符替换为实际内容
+3. **填充内容**：根据设计稿分析结果，填充各个章节的内容
+4. **检查完整性**：使用 `workflow-output-checklist.md` 中的质量检查清单验证文档完整性
+
+## 相关规则
+
+- `workflow-output-checklist.md` - 文档路径和质量要求
+- `workflow-layout-map.md` - 第一步：建立布局 Map
+- `workflow-element-extraction.md` - 第二步：区域与元素提取
+- `workflow-style-summary.md` - 第三步：样式规范汇总
+- `implementation-guidelines.md` - 实现建议详细内容
+- `implementation-common-errors.md` - 常见错误模式
+- `checklist-common-misses.md` - 常见遗漏检查点