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

package/.agents/skills/domains/web/ui-verification/rules/errors-flex-layout.md

@@ -1,46 +1,46 @@
----
-title: Flex 布局问题
-impact: HIGH
-impactDescription: Flex 不铺满、留空白
-tags: errors, layout, flex, flex-grow, width
----
-
-## Flex 布局问题
-
-**错误模式**：Flex 不铺满、留空白
-
-| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
-|---------|---------|----------|----------|
-| **Flex 不铺满、留空白** | 横向列表右侧留大片空白 | 使用了 `flex: 0 1 fixed-width`，不允许增长 | 使用 `flex-grow: 1` 或 `flex: 1 1 min-width` |
-
-**Incorrect（Flex 不允许增长）：**
-
-```css
-.flex-item {
-  flex: 0 1 280px; /* 不允许增长，右侧留空白 */
-}
-```
-
-**Correct（Flex 允许增长）：**
-
-```css
-.flex-item {
-  flex: 1 1 minmax(280px, 1fr); /* 允许增长，铺满宽度 */
-}
-
-/* 或 */
-.flex-item {
-  flex-grow: 1; /* 允许增长 */
-  flex-shrink: 1;
-  flex-basis: 280px;
-}
-```
-
-**验收时检查**：
-- [ ] Flex 布局需要铺满时是否使用了 `flex-grow: 1`，而非 `flex: 0 1 fixed-width`？
-
-**验收时特别关注**：
-- 检查 Flex 布局是否正确使用了 `flex-grow`
-
-**相关规则**：
-- `writing-list-layout.md` - 横向列表布局规则
+---
+title: Flex 布局问题
+impact: HIGH
+impactDescription: Flex 不铺满、留空白
+tags: errors, layout, flex, flex-grow, width
+---
+
+## Flex 布局问题
+
+**错误模式**：Flex 不铺满、留空白
+
+| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
+|---------|---------|----------|----------|
+| **Flex 不铺满、留空白** | 横向列表右侧留大片空白 | 使用了 `flex: 0 1 fixed-width`，不允许增长 | 使用 `flex-grow: 1` 或 `flex: 1 1 min-width` |
+
+**Incorrect（Flex 不允许增长）：**
+
+```css
+.flex-item {
+  flex: 0 1 280px; /* 不允许增长，右侧留空白 */
+}
+```
+
+**Correct（Flex 允许增长）：**
+
+```css
+.flex-item {
+  flex: 1 1 minmax(280px, 1fr); /* 允许增长，铺满宽度 */
+}
+
+/* 或 */
+.flex-item {
+  flex-grow: 1; /* 允许增长 */
+  flex-shrink: 1;
+  flex-basis: 280px;
+}
+```
+
+**验收时检查**：
+- [ ] Flex 布局需要铺满时是否使用了 `flex-grow: 1`，而非 `flex: 0 1 fixed-width`？
+
+**验收时特别关注**：
+- 检查 Flex 布局是否正确使用了 `flex-grow`
+
+**相关规则**：
+- `writing-list-layout.md` - 横向列表布局规则

package/.agents/skills/domains/web/ui-verification/rules/errors-grid-container-width.md

@@ -1,44 +1,44 @@
----
-title: Grid 容器宽度问题
-impact: HIGH
-impactDescription: Grid 一行只有一个元素，列表竖向排列
-tags: errors, layout, grid, container, width
----
-
-## Grid 容器宽度问题
-
-**错误模式**：Grid 一行只有一个
-
-| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
-|---------|---------|----------|----------|
-| **Grid 一行只有一个** | 列表竖向排列，一行只有一个元素 | Grid 容器宽度不确定，`auto-fill` 只算出一列 | 确保 Grid 容器有明确宽度（如 `width: 100%`） |
-
-**Incorrect（Grid 容器宽度不确定）：**
-
-```css
-.grid-container {
-  /* 缺少 width，auto-fill 可能只算出一列 */
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-}
-```
-
-**Correct（Grid 容器有明确宽度）：**
-
-```css
-.grid-container {
-  width: 100%; /* 必须明确宽度 */
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-}
-```
-
-**验收时检查**：
-- [ ] Grid 容器是否有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列？
-
-**验收时特别关注**：
-- 检查 Grid 容器是否有明确宽度
-
-**相关规则**：
-- `writing-list-layout.md` - 横向列表布局规则
+---
+title: Grid 容器宽度问题
+impact: HIGH
+impactDescription: Grid 一行只有一个元素，列表竖向排列
+tags: errors, layout, grid, container, width
+---
+
+## Grid 容器宽度问题
+
+**错误模式**：Grid 一行只有一个
+
+| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
+|---------|---------|----------|----------|
+| **Grid 一行只有一个** | 列表竖向排列，一行只有一个元素 | Grid 容器宽度不确定，`auto-fill` 只算出一列 | 确保 Grid 容器有明确宽度（如 `width: 100%`） |
+
+**Incorrect（Grid 容器宽度不确定）：**
+
+```css
+.grid-container {
+  /* 缺少 width，auto-fill 可能只算出一列 */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+```
+
+**Correct（Grid 容器有明确宽度）：**
+
+```css
+.grid-container {
+  width: 100%; /* 必须明确宽度 */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+```
+
+**验收时检查**：
+- [ ] Grid 容器是否有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列？
+
+**验收时特别关注**：
+- 检查 Grid 容器是否有明确宽度
+
+**相关规则**：
+- `writing-list-layout.md` - 横向列表布局规则

package/.agents/skills/domains/web/ui-verification/rules/errors-page-container-width.md

@@ -1,39 +1,39 @@
----
-title: 页面容器宽度限制错误
-impact: HIGH
-impactDescription: 右侧大片留白，影响视觉体验
-tags: errors, layout, container, max-width, responsive
----
-
-## 页面容器宽度限制错误
-
-**错误模式**：页面容器宽度限制
-
-| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
-|---------|---------|----------|----------|
-| **页面容器宽度限制** | 右侧大片留白 | 写死 `max-width`，未考虑响应式 | 除非设计稿特别说明，否则不限制 `max-width` |
-
-**Incorrect（写死 max-width）：**
-
-```css
-.page-container {
-  max-width: 1200px; /* 写死宽度，未考虑响应式 */
-  margin: 0 auto;
-}
-```
-
-**Correct（自适应宽度）：**
-
-```css
-.page-container {
-  width: 100%; /* 自适应视口宽度 */
-  padding: 0 16px; /* 可选：添加内边距 */
-}
-```
-
-**验收时检查**：
-- [ ] 页面容器是否有不必要的 `max-width` 限制？
-- [ ] 是否有右侧大片留白的问题？
-
-**相关规则**：
-- `writing-page-container-width.md` - 页面容器宽度规则
+---
+title: 页面容器宽度限制错误
+impact: HIGH
+impactDescription: 右侧大片留白，影响视觉体验
+tags: errors, layout, container, max-width, responsive
+---
+
+## 页面容器宽度限制错误
+
+**错误模式**：页面容器宽度限制
+
+| 错误模式 | 典型表现 | 根本原因 | 避免方法 |
+|---------|---------|----------|----------|
+| **页面容器宽度限制** | 右侧大片留白 | 写死 `max-width`，未考虑响应式 | 除非设计稿特别说明，否则不限制 `max-width` |
+
+**Incorrect（写死 max-width）：**
+
+```css
+.page-container {
+  max-width: 1200px; /* 写死宽度，未考虑响应式 */
+  margin: 0 auto;
+}
+```
+
+**Correct（自适应宽度）：**
+
+```css
+.page-container {
+  width: 100%; /* 自适应视口宽度 */
+  padding: 0 16px; /* 可选：添加内边距 */
+}
+```
+
+**验收时检查**：
+- [ ] 页面容器是否有不必要的 `max-width` 限制？
+- [ ] 是否有右侧大片留白的问题？
+
+**相关规则**：
+- `writing-page-container-width.md` - 页面容器宽度规则

package/.agents/skills/domains/web/ui-verification/rules/tools-browser-navigation.md

@@ -1,53 +1,53 @@
----
-title: 浏览器工具打开页面指南
-impact: HIGH
-impactDescription: 使用浏览器工具查看实际页面效果
-tags: tools, browser, navigation, playwright, cursor
----
-
-## 浏览器工具打开页面指南
-
-**核心原则**：验收必须以「实际页面效果 vs 设计稿」为准，必须使用浏览器工具查看目标页面。
-
-### 在 Cursor 中优先使用 `@Browser`
-
-**操作步骤**：
-1. 使用 Browser 的导航（如 `browser_navigate`）前往目标 URL（例如 `http://localhost:5222/craft-sheet`）
-2. 等待页面加载完成
-3. 确认页面已加载完成、无报错，能够看到需要验收的区域
-
-**工具说明**：
-- **Browser**（@Browser，Cursor 专用）：在 Cursor IDE 中可用于打开目标页面、截取页面截图、获取页面快照（DOM/元素）等；**在 Cursor 中优先使用**。
-
-### 仅当不在 Cursor 或 Browser 不可用时，使用 Playwright MCP
-
-**操作步骤**：
-1. 调用 Playwright MCP 提供的导航工具（如 `browser_navigate`）前往目标 URL
-2. 等待页面加载完成
-
-**工具说明**：
-- **Playwright MCP**：用于在任何支持 MCP 的环境中打开目标页面、截图（整页或元素）、获取页面快照（如可访问性树）、查找元素并执行点击/输入/滚动/表单提交等交互；也可在需要时配合设置 cookies/localStorage 或模拟登录来访问受保护页面。**仅当不在 Cursor 或 Browser 不可用时使用**。
-
-### 获取实际页面的可比对信息
-
-**截图比对**：
-- 在 Cursor 中优先用 Browser 的 `browser_take_screenshot` 对目标页面（或关键区域）截图
-- 无 Browser 时用 Playwright MCP 的截图工具
-- 用途：与设计稿同区域截图并排对比
-
-**元素/快照比对**：
-- 在 Cursor 中优先用 Browser 的 `browser_snapshot` 获取页面结构、元素位置与尺寸
-- 无 Browser 时用 Playwright MCP 的快照/可访问性树工具
-- 用途：与设计稿（.pen/Figma）中对应节点坐标、尺寸、样式逐项对比
-
-**建议**：先做**整体或分区域截图**，与设计稿截图对比，发现差异后再用**元素快照**精确定位（如某块 padding、某字体大小）。
-
-**验收时检查**：
-- [ ] **按钮高度、宽度**：必须用浏览器工具实际查看渲染效果，不能仅凭代码推测
-- [ ] **对齐效果**：必须用浏览器查看实际对齐效果
-- [ ] **hover/active 状态**：必须用浏览器实际触发查看
-- [ ] **响应式表现**：必须用浏览器在不同视口下查看
-
-**相关规则**：
-- `errors-button-dimensions.md` - 按钮尺寸问题
-- `tools-design-guidelines.md` - 设计稿工具使用指南
+---
+title: 浏览器工具打开页面指南
+impact: HIGH
+impactDescription: 使用浏览器工具查看实际页面效果
+tags: tools, browser, navigation, playwright, cursor
+---
+
+## 浏览器工具打开页面指南
+
+**核心原则**：验收必须以「实际页面效果 vs 设计稿」为准，必须使用浏览器工具查看目标页面。
+
+### 在 Cursor 中优先使用 `@Browser`
+
+**操作步骤**：
+1. 使用 Browser 的导航（如 `browser_navigate`）前往目标 URL（例如 `http://localhost:5222/craft-sheet`）
+2. 等待页面加载完成
+3. 确认页面已加载完成、无报错，能够看到需要验收的区域
+
+**工具说明**：
+- **Browser**（@Browser，Cursor 专用）：在 Cursor IDE 中可用于打开目标页面、截取页面截图、获取页面快照（DOM/元素）等；**在 Cursor 中优先使用**。
+
+### 仅当不在 Cursor 或 Browser 不可用时，使用 Playwright MCP
+
+**操作步骤**：
+1. 调用 Playwright MCP 提供的导航工具（如 `browser_navigate`）前往目标 URL
+2. 等待页面加载完成
+
+**工具说明**：
+- **Playwright MCP**：用于在任何支持 MCP 的环境中打开目标页面、截图（整页或元素）、获取页面快照（如可访问性树）、查找元素并执行点击/输入/滚动/表单提交等交互；也可在需要时配合设置 cookies/localStorage 或模拟登录来访问受保护页面。**仅当不在 Cursor 或 Browser 不可用时使用**。
+
+### 获取实际页面的可比对信息
+
+**截图比对**：
+- 在 Cursor 中优先用 Browser 的 `browser_take_screenshot` 对目标页面（或关键区域）截图
+- 无 Browser 时用 Playwright MCP 的截图工具
+- 用途：与设计稿同区域截图并排对比
+
+**元素/快照比对**：
+- 在 Cursor 中优先用 Browser 的 `browser_snapshot` 获取页面结构、元素位置与尺寸
+- 无 Browser 时用 Playwright MCP 的快照/可访问性树工具
+- 用途：与设计稿（.pen/Figma）中对应节点坐标、尺寸、样式逐项对比
+
+**建议**：先做**整体或分区域截图**，与设计稿截图对比，发现差异后再用**元素快照**精确定位（如某块 padding、某字体大小）。
+
+**验收时检查**：
+- [ ] **按钮高度、宽度**：必须用浏览器工具实际查看渲染效果，不能仅凭代码推测
+- [ ] **对齐效果**：必须用浏览器查看实际对齐效果
+- [ ] **hover/active 状态**：必须用浏览器实际触发查看
+- [ ] **响应式表现**：必须用浏览器在不同视口下查看
+
+**相关规则**：
+- `errors-button-dimensions.md` - 按钮尺寸问题
+- `tools-design-guidelines.md` - 设计稿工具使用指南

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

@@ -1,53 +1,53 @@
----
-title: 设计稿工具使用指南（Pencil/Figma）
-impact: HIGH
-impactDescription: 使用设计稿工具获取可比对信息
-tags: tools, design, pencil, figma, mcp
----
-
-## 设计稿工具使用指南（Pencil/Figma）
-
-**核心原则**：验收时必须获取设计稿侧的可比对信息，与实现页进行对比。
-
-### 设计稿类型与工具选择
-
-验收时：用 **Cursor Browser**（优先）或 **Playwright MCP**（无 Browser 时）获取实际页面截图/快照，再根据设计稿来源选择：
-
-- 设计稿为 `.pen` 时，用 **Pencil MCP** 获取设计稿截图或节点信息
-- 设计稿为 Figma 链接时，用 **Figma MCP** 获取对应截图或节点信息
-- 二者与实现页比对得出结论
-
-### 设计稿为 .pen（Pencil 设计稿）
-
-**工具**：**Pencil MCP**
-
-**操作**：
-- 对指定节点或画布截图（`get_screenshot`）
-- 获取布局结构（`snapshot_layout`）
-- 与实现页的截图或快照对应比对
-
-**工具说明**：
-- **.pen** 是 **Pencil** 的设计稿文件后缀
-- **Pencil MCP**：用于 `.pen` 设计稿，可查看设计稿细节、对指定节点或画布截图（如 `get_screenshot`）、获取布局结构（如 `snapshot_layout`）等，与实现页截图或快照对照
-
-### 设计稿为 Figma 链接
-
-**工具**：**Figma MCP**
-
-**操作**：
-- 从链接中解析 file key / node id
-- 对指定 frame 或节点调用 `get_screenshot`、`get_design_context` 等
-- 获取截图或布局/样式信息
-- 与实现页的截图或快照对应比对
-
-**工具说明**：
-- **Figma 链接**：如 `https://www.figma.com/design/<fileKey>/<fileName>?node-id=...`
-- **Figma MCP**：用于 Figma 设计稿，可从链接中解析 file key / node id，获取指定 frame 或节点的截图与布局/节点信息（如 `get_screenshot`、`get_design_context` 等）
-
-### 设计稿为其它静态图片
-
-**操作**：
-- 直接使用设计稿图片与 `browser_take_screenshot` 的截图并排或叠放对比
-
-**相关规则**：
-- `tools-browser-navigation.md` - 浏览器工具打开页面指南
+---
+title: 设计稿工具使用指南（Pencil/Figma）
+impact: HIGH
+impactDescription: 使用设计稿工具获取可比对信息
+tags: tools, design, pencil, figma, mcp
+---
+
+## 设计稿工具使用指南（Pencil/Figma）
+
+**核心原则**：验收时必须获取设计稿侧的可比对信息，与实现页进行对比。
+
+### 设计稿类型与工具选择
+
+验收时：用 **Cursor Browser**（优先）或 **Playwright MCP**（无 Browser 时）获取实际页面截图/快照，再根据设计稿来源选择：
+
+- 设计稿为 `.pen` 时，用 **Pencil MCP** 获取设计稿截图或节点信息
+- 设计稿为 Figma 链接时，用 **Figma MCP** 获取对应截图或节点信息
+- 二者与实现页比对得出结论
+
+### 设计稿为 .pen（Pencil 设计稿）
+
+**工具**：**Pencil MCP**
+
+**操作**：
+- 对指定节点或画布截图（`get_screenshot`）
+- 获取布局结构（`snapshot_layout`）
+- 与实现页的截图或快照对应比对
+
+**工具说明**：
+- **.pen** 是 **Pencil** 的设计稿文件后缀
+- **Pencil MCP**：用于 `.pen` 设计稿，可查看设计稿细节、对指定节点或画布截图（如 `get_screenshot`）、获取布局结构（如 `snapshot_layout`）等，与实现页截图或快照对照
+
+### 设计稿为 Figma 链接
+
+**工具**：**Figma MCP**
+
+**操作**：
+- 从链接中解析 file key / node id
+- 对指定 frame 或节点调用 `get_screenshot`、`get_design_context` 等
+- 获取截图或布局/样式信息
+- 与实现页的截图或快照对应比对
+
+**工具说明**：
+- **Figma 链接**：如 `https://www.figma.com/design/<fileKey>/<fileName>?node-id=...`
+- **Figma MCP**：用于 Figma 设计稿，可从链接中解析 file key / node id，获取指定 frame 或节点的截图与布局/节点信息（如 `get_screenshot`、`get_design_context` 等）
+
+### 设计稿为其它静态图片
+
+**操作**：
+- 直接使用设计稿图片与 `browser_take_screenshot` 的截图并排或叠放对比
+
+**相关规则**：
+- `tools-browser-navigation.md` - 浏览器工具打开页面指南

package/.agents/skills/domains/web/ui-verification/rules/workflow-checklist.md

@@ -1,27 +1,27 @@
----
-title: 快速检查清单
-impact: HIGH
-impactDescription: 验收流程检查清单
-tags: workflow, checklist, verification
----
-
-## 快速检查清单
-
-### 验收前
-- [ ] 目标页面 URL 已确认（如 `http://localhost:5222/<route>`）
-- [ ] 设计稿（.pen 或图）可打开，可截图或取元素
-- [ ] 已有对应「UI 分析清单」更佳（作为按顺序比对的检查项列表）
-
-### 验收中（必须落地）
-- [ ] 已用 **Browser** 打开目标页面并获取截图或快照（详见 `tools-browser-navigation.md`）
-- [ ] 已获取设计稿对应区域截图或元素信息（详见 `tools-design-guidelines.md`）
-- [ ] **按从上到下、从左到右、从外到里**的顺序进行排查，**P0（布局、层级、文字、图片）四项无遗漏**（详见 `comparison-*.md`）
-- [ ] 已完成**实际页面 vs 设计稿**的截图比对或元素比对
-- [ ] 差异已按 P0（布局/层级/内容）/P1/P2 分类并写入「UI 问题清单」
-- [ ] **已检查布局常识问题**：页面容器宽度、横向列表铺满、元素完整性、对齐方式等（详见 `writing-*.md` 和 `errors-*.md`）
-
-### 修复后
-- [ ] 已再次用 **Browser** 打开页面并重新与设计稿比对（详见 `tools-browser-navigation.md`）
-- [ ] 问题清单状态与验收结论已更新
-- [ ] 完成「分析不足反思」并考虑反哺 design-analysis（详见 `workflow-reflection.md`）
-- [ ] **已检查常见错误模式**：CSS 优先级覆盖、Grid 容器宽度、Flex 布局铺满、对齐方式、按钮尺寸等（详见 `errors-*.md`）
+---
+title: 快速检查清单
+impact: HIGH
+impactDescription: 验收流程检查清单
+tags: workflow, checklist, verification
+---
+
+## 快速检查清单
+
+### 验收前
+- [ ] 目标页面 URL 已确认（如 `http://localhost:5222/<route>`）
+- [ ] 设计稿（.pen 或图）可打开，可截图或取元素
+- [ ] 已有对应「UI 分析清单」更佳（作为按顺序比对的检查项列表）
+
+### 验收中（必须落地）
+- [ ] 已用 **Browser** 打开目标页面并获取截图或快照（详见 `tools-browser-navigation.md`）
+- [ ] 已获取设计稿对应区域截图或元素信息（详见 `tools-design-guidelines.md`）
+- [ ] **按从上到下、从左到右、从外到里**的顺序进行排查，**P0（布局、层级、文字、图片）四项无遗漏**（详见 `comparison-*.md`）
+- [ ] 已完成**实际页面 vs 设计稿**的截图比对或元素比对
+- [ ] 差异已按 P0（布局/层级/内容）/P1/P2 分类并写入「UI 问题清单」
+- [ ] **已检查布局常识问题**：页面容器宽度、横向列表铺满、元素完整性、对齐方式等（详见 `writing-*.md` 和 `errors-*.md`）
+
+### 修复后
+- [ ] 已再次用 **Browser** 打开页面并重新与设计稿比对（详见 `tools-browser-navigation.md`）
+- [ ] 问题清单状态与验收结论已更新
+- [ ] 完成「分析不足反思」并考虑反哺 design-analysis（详见 `workflow-reflection.md`）
+- [ ] **已检查常见错误模式**：CSS 优先级覆盖、Grid 容器宽度、Flex 布局铺满、对齐方式、按钮尺寸等（详见 `errors-*.md`）

package/.agents/skills/domains/web/ui-verification/rules/workflow-problem-list.md

@@ -1,56 +1,56 @@
----
-title: UI 问题清单文档结构
-impact: HIGH
-impactDescription: 产出可追踪的问题清单文档
-tags: workflow, output, problem-list, template
----
-
-## UI 问题清单文档结构
-
-### 文档路径
-
-```
-docs/样式还原/<名称>-UI问题清单.md
-```
-
-### 文档结构建议
-
-```markdown
-# <名称> - UI 问题清单
-
-> **参照文档**：`docs/样式还原/<名称>-UI分析清单.md`  
-> **设计稿**：`docs/设计稿/<路径>/<文件名>.pen` 或 Figma 链接  
-> **创建/更新日期**：YYYY-MM-DD
-
-## 一、按区域列问题（区域按从上到下、从左到右顺序排列）
-
-### 区域 A
-| 编号 | 问题描述 | 类型 | 当前实现 | 设计稿要求 | 优先级 |
-|------|----------|------|----------|------------|--------|
-| A1   | ...      | ...  | ...      | ...        | P0/P1/P2 |
-
-## 二、问题统计与修复顺序
-
-| 优先级 | 数量 | 说明 |
-|--------|------|------|
-| P0（布局/层级/内容） | n | 先修，不得遗漏 |
-| P1 | n | 次之 |
-| P2 | n | 可后续 |
-
-建议修复顺序：P0 → P1 → P2；同优先级内按**从上到下、从左到右、从外到里**。
-
-## 三、验收结论（随修复更新）
-
-- [ ] **P0（布局、层级、文字、图片）** 全部修复，且验收时已按从上到下、从左到右、从外到里逐项检查无遗漏
-- [ ] P1 全部修复
-- [ ] P2 已记录/部分修复
-- [ ] 已使用 Browser 进行实际页面与设计稿比对
-- [ ] 还原度自评：___%
-```
-
-### 问题描述要求
-
-- **问题描述**：简短、可操作（如「欢迎语区域整体水平居中」）
-- **当前实现**：现状（如 `align-items: center`）
-- **设计稿/分析清单要求**：明确要求（如「左对齐 flex-start」）
-- **优先级**：便于排期与迭代
+---
+title: UI 问题清单文档结构
+impact: HIGH
+impactDescription: 产出可追踪的问题清单文档
+tags: workflow, output, problem-list, template
+---
+
+## UI 问题清单文档结构
+
+### 文档路径
+
+```
+docs/样式还原/<名称>-UI问题清单.md
+```
+
+### 文档结构建议
+
+```markdown
+# <名称> - UI 问题清单
+
+> **参照文档**：`docs/样式还原/<名称>-UI分析清单.md`  
+> **设计稿**：`docs/设计稿/<路径>/<文件名>.pen` 或 Figma 链接  
+> **创建/更新日期**：YYYY-MM-DD
+
+## 一、按区域列问题（区域按从上到下、从左到右顺序排列）
+
+### 区域 A
+| 编号 | 问题描述 | 类型 | 当前实现 | 设计稿要求 | 优先级 |
+|------|----------|------|----------|------------|--------|
+| A1   | ...      | ...  | ...      | ...        | P0/P1/P2 |
+
+## 二、问题统计与修复顺序
+
+| 优先级 | 数量 | 说明 |
+|--------|------|------|
+| P0（布局/层级/内容） | n | 先修，不得遗漏 |
+| P1 | n | 次之 |
+| P2 | n | 可后续 |
+
+建议修复顺序：P0 → P1 → P2；同优先级内按**从上到下、从左到右、从外到里**。
+
+## 三、验收结论（随修复更新）
+
+- [ ] **P0（布局、层级、文字、图片）** 全部修复，且验收时已按从上到下、从左到右、从外到里逐项检查无遗漏
+- [ ] P1 全部修复
+- [ ] P2 已记录/部分修复
+- [ ] 已使用 Browser 进行实际页面与设计稿比对
+- [ ] 还原度自评：___%
+```
+
+### 问题描述要求
+
+- **问题描述**：简短、可操作（如「欢迎语区域整体水平居中」）
+- **当前实现**：现状（如 `align-items: center`）
+- **设计稿/分析清单要求**：明确要求（如「左对齐 flex-start」）
+- **优先级**：便于排期与迭代