@gong-ym/ai-spec-auto 0.2.3

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

@@ -0,0 +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` - 常见遗漏检查点

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

@@ -0,0 +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`（类似内容，用于验收阶段）

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

@@ -0,0 +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` - 第三步：样式规范汇总

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

@@ -0,0 +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` - 第二步：区域与元素提取