@guru-ai-product/ai-product-kit 0.2.251113215925 → 0.2.251117145040

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/package.json +1 -1
  2. package/skills/aipk_design/GURU_AI.md +5 -3
  3. package/skills/aipk_design/SKILL.md +5 -0
  4. package/skills/aipk_design/format-requirement-pages-with-design/SKILL.md +129 -0
  5. package/skills/aipk_design/format-requirement-pages-with-design/requirement-page-table-format.md +250 -0
  6. package/skills/aipk_design/update-requirements-from-design/SKILL.md +39 -21
  7. package/skills/aipk_development/GURU_AI.md +1 -1
  8. package/skills/aipk_init_project/GURU_AI.md +2 -2
  9. package/skills/aipk_operations/GURU_AI.md +1 -1
  10. package/skills/aipk_requirements/GURU_AI.md +9 -7
  11. package/skills/aipk_requirements/documentation/template/1_/344/272/247/345/223/201/345/256/232/344/275/215/344/270/216/345/210/206/346/236/220.md +19 -17
  12. package/skills/aipk_requirements/documentation/template/2_/345/212/237/350/203/275/351/234/200/346/261/202.md +12 -12
  13. package/skills/aipk_requirements/documentation/template/3_/345/225/206/344/270/232/345/214/226/347/255/226/347/225/245.md +1 -1
  14. package/skills/aipk_requirements/documentation/template/{4_/347/224/250/346/210/267/347/225/214/351/235/242/344/270/216/344/275/223/351/252/214.md → 4.1_/347/224/250/346/210/267/344/275/223/351/252/214/346/265/201/347/250/213/344/270/216/344/277/241/346/201/257/346/236/266/346/236/204.md} +4 -278
  15. package/skills/aipk_requirements/documentation/template/4.2_/345/205/263/351/224/256/347/225/214/351/235/242.md +248 -0
  16. package/skills/aipk_requirements/documentation/template/4.3_/344/272/244/344/272/222/344/270/216/345/223/215/345/272/224/345/274/217/350/256/276/350/256/241.md +87 -0
  17. package/skills/aipk_requirements/documentation/template/index.md +19 -1
  18. package/skills/aipk_requirements/documentation/template//351/234/200/346/261/202/350/277/255/344/273/243/346/250/241/346/235/277.md +112 -122
  19. package/skills/aipk_skill_generate/GURU_AI.md +1 -1
  20. package/skills/aipk_tool_prompts/GURU_AI.md +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guru-ai-product/ai-product-kit",
3
- "version": "0.2.251113215925",
3
+ "version": "0.2.251117145040",
4
4
  "description": "Sync the AI Product Kit Skill bundle through npx without cloning the repository.",
5
5
  "bin": {
6
6
  "ai-product-kit": "bin/setup.js",
@@ -1,10 +1,12 @@
1
1
  # GURU AI Snapshot
2
2
 
3
- Last refreshed: 2025-11-13T13:59:26.059Z
3
+ Last refreshed: 2025-11-17T06:50:40.492Z
4
4
 
5
5
  | File | Last Modified (UTC) |
6
6
  | --- | --- |
7
- | `SKILL.md` | 2025-11-13T13:11:54.681Z |
7
+ | `format-requirement-pages-with-design/requirement-page-table-format.md` | 2025-11-17T06:21:56.025Z |
8
+ | `format-requirement-pages-with-design/SKILL.md` | 2025-11-17T06:43:43.341Z |
9
+ | `SKILL.md` | 2025-11-17T06:17:37.196Z |
8
10
  | `update-requirements-from-design/scripts/sharp-runtime/node_modules/.bin/semver` | 2025-11-13T12:53:04.813Z |
9
11
  | `update-requirements-from-design/scripts/sharp-runtime/node_modules/.package-lock.json` | 2025-11-13T12:53:10.727Z |
10
12
  | `update-requirements-from-design/scripts/sharp-runtime/node_modules/@img/colour/color.cjs` | 2025-11-13T12:53:05.063Z |
@@ -119,4 +121,4 @@ Last refreshed: 2025-11-13T13:59:26.059Z
119
121
  | `update-requirements-from-design/scripts/sharp-runtime/package.json` | 2025-11-13T12:53:10.715Z |
120
122
  | `update-requirements-from-design/scripts/split-design-boards.js` | 2025-11-13T13:11:29.610Z |
121
123
  | `update-requirements-from-design/scripts/sync-design-to-requirements.js` | 2025-11-13T13:11:32.947Z |
122
- | `update-requirements-from-design/SKILL.md` | 2025-11-13T13:59:11.730Z |
124
+ | `update-requirements-from-design/SKILL.md` | 2025-11-17T06:12:02.571Z |
@@ -18,6 +18,11 @@ description: Central hub for automation-ready design-to-requirement workflows. W
18
18
  - 包含 `split-design-boards.js`(自动切分合成图)与 `sync-design-to-requirements.js`(资产映射与批量入库)等自动化工具。
19
19
  - **适用场景**:任务中提到"基于设计图更新需求"、"收到合成设计稿"、"根据视觉稿修改需求"时立即使用。
20
20
 
21
+ - **Format Requirement Pages with Design**(`./format-requirement-pages-with-design/`)
22
+ - 将需求文档中的页面说明和设计图按照标准表格格式组织。遵循两列表格格式(页面说明 | 设计图),支持多图处理、页面标题外部放置等规范。
23
+ - 包含 `requirement-page-table-format.md`(详细的表格格式规范和示例)参考文档。
24
+ - **适用场景**:任务中提到"将设计图放入表格"、"格式化需求页面"、"整理页面说明和设计图"时立即使用。
25
+
21
26
  如需扩展新的设计场景,请在 `skills/aipk_design/` 下创建子目录,按照模板完成 `SKILL.md`、`references/` 等结构,并在本文件的"当前可用的设计 Skill"中登记用途与入口路径。
22
27
 
23
28
  ## 使用方式
@@ -0,0 +1,129 @@
1
+ ---
2
+ name: format-requirement-pages-with-design
3
+ description: Format requirement document pages with design images into standardized tables. Use when requirement documents contain design images and need to be organized into a two-column table format (page description | design image) following the project's table formatting standards.
4
+ ---
5
+
6
+ # 需求页面表格格式化 Skill
7
+
8
+ **适用场景**:当需求文档中包含设计图时,将页面说明和设计图按照标准表格格式组织。当你看到任务中提到"将设计图放入表格"、"格式化需求页面"、"整理页面说明和设计图"或类似描述时,立即使用本 Skill。
9
+
10
+ ## 1. 技能定位
11
+
12
+ - **适用场景**:需求文档中包含设计图,需要将页面说明和设计图组织成标准表格格式
13
+ - **目标人群**:需求文档维护者、AI 协作写手、设计对接 PM
14
+ - **价值主张**:统一需求文档中页面说明和设计图的展示格式,提高文档可读性和一致性
15
+
16
+ ## 2. 快速上手
17
+
18
+ ### 2.1 核心规则
19
+
20
+ 1. **表格结构**:每个页面使用一个独立的 HTML 表格(`<table>`),包含两列(页面说明 | 设计图)
21
+ 2. **页面标题位置**:页面标题必须放在表格外部,作为表格的标题
22
+ 3. **多图处理**:如果一个页面有多张设计图,每张图必须单独占一行(`<tr>`),后续行页面说明列使用空的 `<td></td>`
23
+ 4. **换行格式**:表格单元格内使用 `<br>` 标签进行换行
24
+ 5. **图片引用**:使用 HTML `<img>` 标签,不使用 Markdown 图片语法
25
+
26
+ ### 2.2 基本格式示例
27
+
28
+ ```html
29
+ ##### 4.3.2.1 🆕 新增上传全身照页面
30
+
31
+ <table>
32
+ <tr>
33
+ <th>页面说明</th>
34
+ <th>设计图</th>
35
+ </tr>
36
+ <tr>
37
+ <td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...</td>
38
+ <td><img src="./assets/1-上传全身照-1.png" alt=""></td>
39
+ </tr>
40
+ </table>
41
+ ```
42
+
43
+ ### 2.3 多图格式示例
44
+
45
+ ```html
46
+ ##### 4.3.2.1 🆕 新增上传全身照页面
47
+
48
+ <table>
49
+ <tr>
50
+ <th>页面说明</th>
51
+ <th>设计图</th>
52
+ </tr>
53
+ <tr>
54
+ <td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"</td>
55
+ <td><img src="./assets/1-上传全身照-1.png" alt=""></td>
56
+ </tr>
57
+ <tr>
58
+ <td></td>
59
+ <td><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
60
+ </tr>
61
+ </table>
62
+ ```
63
+
64
+ ## 3. 标准流程
65
+
66
+ <table>
67
+ <tr>
68
+ <th>阶段</th>
69
+ <th>说明</th>
70
+ <th>交付物</th>
71
+ </tr>
72
+ <tr>
73
+ <td>识别</td>
74
+ <td>识别需求文档中包含设计图的页面</td>
75
+ <td>待格式化页面列表</td>
76
+ </tr>
77
+ <tr>
78
+ <td>提取</td>
79
+ <td>提取每个页面的说明内容和设计图引用</td>
80
+ <td>页面说明文本、设计图路径</td>
81
+ </tr>
82
+ <tr>
83
+ <td>格式化</td>
84
+ <td>按照表格格式规范组织内容</td>
85
+ <td>格式化的表格代码</td>
86
+ </tr>
87
+ <tr>
88
+ <td>验证</td>
89
+ <td>检查表格格式是否符合规范</td>
90
+ <td>验证通过的表格式需求文档</td>
91
+ </tr>
92
+ </table>
93
+
94
+ ## 4. 详细规范
95
+
96
+ 详细的格式规范、示例和注意事项请参考 [表格格式规范文档](./requirement-page-table-format.md)。该文档包含:
97
+
98
+ - 完整的表格结构规范
99
+ - 多张设计图的处理方式
100
+ - 页面说明内容的格式要求
101
+ - 设计图引用格式
102
+ - 正确和错误的示例对比
103
+ - 完整的检查清单
104
+
105
+ ## 5. AI 协作要点
106
+
107
+ ### 5.1 识别场景
108
+
109
+ 当遇到以下情况时,应使用本 Skill:
110
+
111
+ - 需求文档中包含设计图引用
112
+ - 需要将页面说明和设计图组织成表格
113
+ - 需要统一需求文档的格式规范
114
+
115
+ ### 5.2 处理步骤
116
+
117
+ 1. **扫描文档**:识别所有包含设计图的页面
118
+ 2. **提取内容**:提取每个页面的说明文本和设计图路径
119
+ 3. **应用格式**:按照规范将内容组织成表格
120
+ 4. **验证检查**:使用检查清单验证格式正确性
121
+
122
+ ### 5.3 检查清单
123
+
124
+ 详细的检查清单请参考 [表格格式规范文档](./requirement-page-table-format.md) 中的"检查清单"章节。
125
+
126
+ ## 6. 附加资源
127
+
128
+ - [表格格式规范参考](./requirement-page-table-format.md) - 详细的格式规范、示例和检查清单
129
+ - [需求文档撰写标准](../../../docs/guide_writing_standard/SKILL.md) - 项目文档撰写标准
@@ -0,0 +1,250 @@
1
+ # 需求文档页面表格格式规范
2
+
3
+ ## 概述
4
+
5
+ 本文档规范了在需求文档中如何将页面说明和设计图组织成 HTML 表格格式,以提高文档的可读性和渲染兼容性。
6
+
7
+ ## 基本格式
8
+
9
+ ### 表格结构
10
+
11
+ 每个页面使用一个独立的 HTML 表格,包含两列:
12
+
13
+ ```html
14
+ <table>
15
+ <tr>
16
+ <th>页面说明</th>
17
+ <th>设计图</th>
18
+ </tr>
19
+ <tr>
20
+ <td>[页面说明内容]</td>
21
+ <td>[设计图引用]</td>
22
+ </tr>
23
+ </table>
24
+ ```
25
+
26
+ ### 页面标题位置
27
+
28
+ **页面标题必须放在表格外部**,作为表格的标题。
29
+
30
+ **正确示例**:
31
+
32
+ ```html
33
+ ##### 4.3.2.1 🆕 新增上传全身照页面
34
+
35
+ <table>
36
+ <tr>
37
+ <th>页面说明</th>
38
+ <th>设计图</th>
39
+ </tr>
40
+ <tr>
41
+ <td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...</td>
42
+ <td><img src="./assets/1-上传全身照-1.png" alt=""></td>
43
+ </tr>
44
+ </table>
45
+ ```
46
+
47
+ **错误示例**:
48
+
49
+ ```html
50
+ ##### 4.3.2.1 🆕 新增上传全身照页面
51
+
52
+ <table>
53
+ <tr>
54
+ <th>页面标题</th>
55
+ <th>页面说明</th>
56
+ <th>设计图</th>
57
+ </tr>
58
+ <tr>
59
+ <td>新增上传全身照页面</td>
60
+ <td><strong>UI设计</strong>:...</td>
61
+ <td><img src="./assets/1-上传全身照-1.png" alt=""></td>
62
+ </tr>
63
+ </table>
64
+ ```
65
+
66
+ ## 多张设计图的处理
67
+
68
+ ### 规则
69
+
70
+ 如果一个页面有多张设计图,**每张图必须单独占一行**,避免将左侧页面说明列撑得太高。
71
+
72
+ ### 格式
73
+
74
+ 第一行包含完整的页面说明和第一张图,后续行页面说明列为空,只包含对应的设计图。
75
+
76
+ **格式示例**:
77
+
78
+ ```html
79
+ <table>
80
+ <tr>
81
+ <th>页面说明</th>
82
+ <th>设计图</th>
83
+ </tr>
84
+ <tr>
85
+ <td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br>...</td>
86
+ <td><img src="./assets/1-上传全身照-1.png" alt=""></td>
87
+ </tr>
88
+ <tr>
89
+ <td></td>
90
+ <td><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
91
+ </tr>
92
+ </table>
93
+ ```
94
+
95
+ ### 多图页面示例
96
+
97
+ **示例1:两张图**
98
+
99
+ ```html
100
+ ##### 4.3.2.1 🆕 新增上传全身照页面
101
+
102
+ <table>
103
+ <tr>
104
+ <th>页面说明</th>
105
+ <th>设计图</th>
106
+ </tr>
107
+ <tr>
108
+ <td><strong>UI设计</strong>:<br>- 顶部:引导页进度条和返回按钮<br>- 中央:功能示意图展示...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br>...</td>
109
+ <td><img src="./assets/1-上传全身照-1.png" alt=""></td>
110
+ </tr>
111
+ <tr>
112
+ <td></td>
113
+ <td><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
114
+ </tr>
115
+ </table>
116
+ ```
117
+
118
+ **示例2:四张图**
119
+
120
+ ```html
121
+ ##### 4.3.2.6 🆕 结果修改页面
122
+
123
+ <table>
124
+ <tr>
125
+ <th>页面说明</th>
126
+ <th>设计图</th>
127
+ </tr>
128
+ <tr>
129
+ <td><strong>UI设计</strong>:<br>- 复用现有手动输入页面的UI组件<br>- 预填充AI识别结果<br><br><strong>界面文案</strong>:<br>- 主标题:"Review and edit your information"<br>...</td>
130
+ <td><img src="./assets/7-性别-1.png" alt=""></td>
131
+ </tr>
132
+ <tr>
133
+ <td></td>
134
+ <td><img src="./assets/8-年龄-1.png" alt=""></td>
135
+ </tr>
136
+ <tr>
137
+ <td></td>
138
+ <td><img src="./assets/9-身高-1.png" alt=""></td>
139
+ </tr>
140
+ <tr>
141
+ <td></td>
142
+ <td><img src="./assets/10-身高-1.png" alt=""></td>
143
+ </tr>
144
+ </table>
145
+ ```
146
+
147
+ ## 页面说明内容格式
148
+
149
+ ### 使用HTML换行标签
150
+
151
+ 在表格单元格中,使用 `<br>` 标签进行换行,而不是使用 Markdown 的换行。
152
+
153
+ **正确示例**:
154
+
155
+ ```html
156
+ <table>
157
+ <tr>
158
+ <th>页面说明</th>
159
+ <th>设计图</th>
160
+ </tr>
161
+ <tr>
162
+ <td><strong>UI设计</strong>:<br>- 顶部:引导页进度条<br>- 中央:功能示意图<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"</td>
163
+ <td><img src="./assets/1.png" alt=""></td>
164
+ </tr>
165
+ </table>
166
+ ```
167
+
168
+ **错误示例**:
169
+
170
+ ```html
171
+ <table>
172
+ <tr>
173
+ <th>页面说明</th>
174
+ <th>设计图</th>
175
+ </tr>
176
+ <tr>
177
+ <td><strong>UI设计</strong>:
178
+ - 顶部:引导页进度条
179
+ - 中央:功能示意图
180
+
181
+ <strong>界面文案</strong>:
182
+ - 主标题:"Upload photo for feedback"</td>
183
+ <td><img src="./assets/1.png" alt=""></td>
184
+ </tr>
185
+ </table>
186
+ ```
187
+
188
+ ### 列表格式
189
+
190
+ 在表格单元格中,列表项使用 `-` 开头,并用 `<br>` 分隔。
191
+
192
+ **示例**:
193
+
194
+ ```html
195
+ <table>
196
+ <tr>
197
+ <th>页面说明</th>
198
+ <th>设计图</th>
199
+ </tr>
200
+ <tr>
201
+ <td><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br>- 被扫描后的功能示意图文案:<br> - 性别:"Female"<br> - 年龄:"20"</td>
202
+ <td><img src="./assets/1.png" alt=""></td>
203
+ </tr>
204
+ </table>
205
+ ```
206
+
207
+ ## 设计图引用格式
208
+
209
+ ### 基本格式
210
+
211
+ 使用 HTML `<img>` 标签:
212
+
213
+ ```html
214
+ <img src="./assets/image-name.png" alt="">
215
+ ```
216
+
217
+ ### 带描述文本的格式
218
+
219
+ 如果需要描述文本,使用 `alt` 属性:
220
+
221
+ ```html
222
+ <img src="./assets/image-name.png" alt="描述文本">
223
+ ```
224
+
225
+ **示例**:
226
+
227
+ ```html
228
+ <img src="./assets/12-传统方式上传-性别.png" alt="传统方式上传-性别">
229
+ ```
230
+
231
+ ## 注意事项
232
+
233
+ 1. **表格格式**:使用 HTML `<table>` 标签,不使用 Markdown 表格语法
234
+ 2. **页面标题位置**:页面标题(如 `##### 4.3.2.1`)必须放在表格外部
235
+ 3. **多图处理**:多张图时,每张图单独一行(`<tr>`),后续行页面说明列使用空的 `<td></td>`
236
+ 4. **换行格式**:表格单元格内使用 `<br>` 标签换行
237
+ 5. **图片引用**:使用 HTML `<img>` 标签,`src` 属性使用相对路径,`alt` 属性可添加描述文本
238
+ 6. **表格对齐**:保持表格格式整洁,列宽适中
239
+
240
+ ## 检查清单
241
+
242
+ 在创建或修改页面表格时,请检查:
243
+
244
+ - [ ] 使用 HTML `<table>` 标签,不使用 Markdown 表格语法
245
+ - [ ] 页面标题在表格外部
246
+ - [ ] 表格只有两列(`<th>页面说明</th>` 和 `<th>设计图</th>`)
247
+ - [ ] 多张图时,每张图单独一行(`<tr>`),后续行页面说明列为空 `<td></td>`
248
+ - [ ] 表格单元格内使用 `<br>` 进行换行
249
+ - [ ] 图片使用 `<img>` 标签,`src` 路径正确且可访问
250
+ - [ ] 表格格式整洁,列宽适中
@@ -1,13 +1,13 @@
1
1
  ---
2
2
  name: update-requirements-from-design
3
- description: Update requirement documents based on design mockups. Use this when your task involves receiving composite design boards, splitting them into panels, syncing visual assets to requirement docs, verifying differences between design mockups and existing documentation, and generating standardized change records. This skill handles the complete workflow from design assets to updated requirement documentation.
3
+ description: Update requirement documents based on design mockups (composite boards or individual UI frames). Use this when you need to split composite boards or directly align single/multiple standalone UI images with requirement docs, including syncing visuals, verifying differences, and generating change records.
4
4
  ---
5
5
 
6
6
  # Update Requirements from Design Skill
7
7
 
8
- **适用场景**:收到合成设计图(多屏拼板)后,需要切分设计图、同步更新需求文档中的插图、修正文案,并输出需求变动记录。当你看到任务中提到"基于设计图更新需求文档"、"根据视觉稿修改需求"、"核对设计图并更新需求"或类似描述时,立即使用本 Skill。
8
+ **适用场景**:收到合成设计图(多屏拼板)或单张/多张独立 UI 图后,需要将视觉稿同步更新到需求文档中的插图与文案,并输出需求变动记录。当你看到任务中提到"基于设计图更新需求文档"、"根据视觉稿修改需求"、"核对设计图并更新需求"或类似描述时,立即使用本 Skill。
9
9
 
10
- 处理流程:先用 [`./scripts/split-design-boards.js`](./scripts/split-design-boards.js) 自动切分合成设计图,再用 [`./scripts/sync-design-to-requirements.js`](./scripts/sync-design-to-requirements.js) 生成资产映射、批量入库,并同步需求文档/变动说明。
10
+ 处理流程:如果是合成图,先通过 [`./scripts/split-design-boards.js`](./scripts/split-design-boards.js) 拆分每个面板,再用 [`./scripts/sync-design-to-requirements.js`](./scripts/sync-design-to-requirements.js) 管理映射与入库;如果是单张或多张独立 UI 图,则在确认落库命名后直接调整需求文档,重点对齐图片与文案一致性,并在变动说明中汇总差异。
11
11
 
12
12
  > **注意**:脚本直接运行在 Node 环境,依赖集中安装在 [`./scripts/sharp-runtime/`](./scripts/sharp-runtime/) 中。首次使用或更新版本时,在该目录执行 `npm install`,即可获取 `sharp` 等运行时依赖,无需额外打包。
13
13
 
@@ -25,36 +25,54 @@ description: Update requirement documents based on design mockups. Use this when
25
25
 
26
26
  ```mermaid
27
27
  graph TD
28
- A[收到合成设计图] --> B[自动切分设计图]
29
- B --> C[生成映射模板CSV]
30
- C --> D[手动填充映射信息]
31
- D --> E[批量入库到assets目录]
32
- E --> F[更新需求文档并比对差异]
33
- F --> G[生成需求变动说明文档]
34
- G --> H[清理临时文件]
35
-
28
+ A[收到设计稿(合成或独立)] --> B{设计稿形式}
29
+ B -->|合成拼板| C[运行 split-design-boards.js 切分面板]
30
+ C --> D[生成映射模板并填充 file_slug/panel_title]
31
+ D --> E[运行 sync-design-to-requirements.js 批量入库]
32
+ B -->|单张或多张独立 UI 图| F[确认每张图的目标文档与命名]
33
+ F --> G[直接插入图片到需求文档的合适位置]
34
+ G --> H[核对文案、控件、交互与设计一致性]
35
+ E --> H
36
+ H --> I[生成需求变动说明、核对表与 check 记录]
37
+ I --> J[清理 .tmp 或确认不需要]
38
+
36
39
  style A fill:#e1f5ff
37
40
  style B fill:#fff4e1
38
41
  style C fill:#fff4e1
39
42
  style D fill:#ffe1f5
40
43
  style E fill:#fff4e1
41
- style F fill:#e1ffe1
42
- style G fill:#ffe1f5
43
- style H fill:#ffe1e1
44
+ style F fill:#fff4e1
45
+ style G fill:#e1ffe1
46
+ style H fill:#ffe1f5
47
+ style I fill:#ffe1e1
48
+ style J fill:#ffe1f5
44
49
  ```
45
50
 
46
51
  ### 2.2 详细步骤
47
52
 
48
- 1. **自动切分设计图**:运行 [`scripts/split-design-boards.js`](./scripts/split-design-boards.js) 将合成图拆成临时 PNG(详见第3节)。
49
- 2. **生成映射模板CSV**:执行 `node scripts/sync-design-to-requirements.js --source <tmp> --mapping <tmp>/mapping.csv --init-mapping`,脚本会扫描全部 PNG 并生成映射模板(详见第4节)。
50
- 3. **手动填充映射信息**:在 CSV 中补齐 `panel_title`(截图上方蓝色标题原文)与 `file_slug`(希望落库的文件名,推荐 kebab-case),必要时填写 `version`、`notes`(详见第5节)。
51
- 4. **批量入库到assets目录**:确认映射后,运行 `scripts/sync-design-to-requirements.js`(可指定 `--destination` 或 `--doc-slug/--iteration`)完成重命名与复制(详见第6节)。
52
- 5. **更新需求文档并比对差异**:在需求文档中更新图片引用与文案,同时比对设计图与文档的一致性,记录不一致项(详见第7节)。
53
- 6. **生成需求变动说明文档**:依照 [`需求变动说明模板`](../requirements/changes/template/需求变动说明文档模板.md) 在**需求文档版本文件夹下的 `changes/` 目录**中生成版本记录(详见第8节)。**重要**:变动说明文档必须保存在需求文档版本文件夹下的 `changes/` 目录中,例如 `../../sample/docs/requirement/v1.3.0/changes/YYYYMMDD_需求文档变动说明_*.md`。在删除 `.tmp` 目录前,必须将 `mapping.csv` 的内容以表格形式直接写入需求变动说明文档的附录中(推荐),或将其复制到需求文档版本文件夹下的 `changes/` 目录下(带时间戳命名,如 `YYYYMMDD_mapping.csv`)。同时附上脚本命令行和相关 issue/PR 链接。
54
- 7. **清理临时文件**:完成所有步骤后,删除 `.tmp` 目录下的所有临时文件(包括切分的 PNG 和 `mapping.csv`),保持工作区整洁(详见第9节)。
53
+ 1. **自动切分设计图**(合成拼板): 运行 [`scripts/split-design-boards.js`](./scripts/split-design-boards.js) 将合成图拆成临时 PNG(详见第3节)。
54
+ 2. **生成映射模板CSV**(合成拼板): 执行 `node scripts/sync-design-to-requirements.js --source <tmp> --mapping <tmp>/mapping.csv --init-mapping`,脚本会扫描全部 PNG 并生成映射模板(详见第4节)。
55
+ 3. **手动填充映射信息**(合成拼板): CSV 中补齐 `panel_title`(截图上方蓝色标题原文)与 `file_slug`(希望落库的文件名,推荐 kebab-case),必要时填写 `version`、`notes`(详见第5节)。
56
+ 4. **批量入库到assets目录**(合成拼板): 确认映射后,运行 `scripts/sync-design-to-requirements.js`(可指定 `--destination` 或 `--doc-slug/--iteration`)完成重命名与复制(详见第6节)。
57
+ 5. **更新需求文档并比对差异**:不论图是合成板还是独立 UI 图,都需要更新需求文档中的图片引用、文案与交互,并对照设计稿核对一致性(详见第7节)。
58
+ 6. **生成需求变动说明文档**:依照 [`需求变动说明模板`](../requirements/changes/template/需求变动说明文档模板.md) 在**需求文档版本文件夹下的 `changes/` 目录**中生成版本记录(详见第8节),并在附录保留 `mapping.csv` 内容或其等价记录(如直接粘贴表格或上传时间戳 CSV)。
59
+ 7. **清理临时文件或确认无需切分**:合成图需要删除 `.tmp` 中的切分文件(详见第9节),单张 UI 图仅需确认引用已更新并在变动说明/核对表中记录视觉稿来源即可。
55
60
 
56
61
  **⚠️ 重要提示**:步骤5中的"比对差异"是必要步骤,必须在步骤6(生成需求变动说明)之前完成,以确保变动说明文档中包含完整的差异核对信息。
57
62
 
63
+ ### 2.3 单张/多张独立 UI 图处理
64
+
65
+ - **适用情况**:用户直接提供一张 UI 图或一组独立 UI 图(非拼板),此时无需运行拆分脚本,也不需要生成 `mapping.csv` 模板。
66
+ - **步骤概览**:
67
+ 1. **确认图片落点**:与产品方/设计确认每张 UI 图在需求文档中的对应章节、状态和预期命名,并将这些信息记录在临时表格(至少包含 `file_slug`、`version`、`panel_title`/描述与设计来源链接)。
68
+ 2. **准备资产**:将图片复制到目标 `assets/` 目录(可手动复制或调试 `scripts/sync-design-to-requirements.js --doc-slug --iteration --dry-run`),确保文件名与后续文档引用一致,比如 `doc-slug-assets/xxx.png`。
69
+ 3. **更新需求文档**:在对应章节插入 `![描述](./assets/文件名.png)`,修正文案、交互描述,并按照第7节的核对表逐一确认文案、按钮、字段状态与设计一致。
70
+ 4. **记录差异与来源**:在变动说明的附录或手动表格中列出每张图片的命名、版本、设计链接(如 Figma 或 Sketch 链接),说明该图是新图还是覆盖旧图,便于审计。
71
+ 5. **生成核对表**:仍需执行第7.2节要求,将文案/设计对齐核对表保存在需求文档版本的 `check/` 目录(如 `check/YYYYMMDD_文案设计对齐核对表.md`)。
72
+ 6. **完成变动说明**:使用第8节的模版生成变动说明,附上每张独立 UI 图的简要处理说明,且在附录中包含该临时表格的内容。
73
+
74
+ **注意**:即便没有拆分步骤,也必须保留差异说明、截图来源(上传时间/设计链接/版本号)、核对表,并确保需求变动说明文档说明本流程的差异与依据,便于审计与检索。
75
+
58
76
  ## 3. 自动切分设计图
59
77
 
60
78
  ### 3.1 输入与输出约定
@@ -1,6 +1,6 @@
1
1
  # GURU AI Snapshot
2
2
 
3
- Last refreshed: 2025-11-13T13:59:26.059Z
3
+ Last refreshed: 2025-11-17T06:50:40.492Z
4
4
 
5
5
  | File | Last Modified (UTC) |
6
6
  | --- | --- |
@@ -1,10 +1,10 @@
1
1
  # GURU AI Snapshot
2
2
 
3
- Last refreshed: 2025-11-13T13:59:26.059Z
3
+ Last refreshed: 2025-11-17T06:50:40.492Z
4
4
 
5
5
  | File | Last Modified (UTC) |
6
6
  | --- | --- |
7
7
  | `scripts/check_agents.sh` | 2025-11-13T09:03:47.702Z |
8
8
  | `skill.ini` | 2025-11-13T09:47:02.793Z |
9
9
  | `SKILL.md` | 2025-11-13T10:06:33.764Z |
10
- | `template/AGENTS_TEMPLATE.md` | 2025-11-13T13:59:26.014Z |
10
+ | `template/AGENTS_TEMPLATE.md` | 2025-11-17T06:50:40.448Z |
@@ -1,6 +1,6 @@
1
1
  # GURU AI Snapshot
2
2
 
3
- Last refreshed: 2025-11-13T13:59:26.059Z
3
+ Last refreshed: 2025-11-17T06:50:40.492Z
4
4
 
5
5
  | File | Last Modified (UTC) |
6
6
  | --- | --- |
@@ -1,6 +1,6 @@
1
1
  # GURU AI Snapshot
2
2
 
3
- Last refreshed: 2025-11-13T13:59:26.059Z
3
+ Last refreshed: 2025-11-17T06:50:40.492Z
4
4
 
5
5
  | File | Last Modified (UTC) |
6
6
  | --- | --- |
@@ -10,16 +10,18 @@ Last refreshed: 2025-11-13T13:59:26.059Z
10
10
  | `changes/template/需求变动说明生成Prompt.md` | 2025-11-12T10:41:15.859Z |
11
11
  | `changes/template/需求变动说明生成指南.md` | 2025-11-12T10:41:15.859Z |
12
12
  | `documentation/SKILL.md` | 2025-11-13T12:30:17.269Z |
13
- | `documentation/template/1_产品定位与分析.md` | 2025-11-12T10:41:15.860Z |
14
- | `documentation/template/2_功能需求.md` | 2025-11-12T10:41:15.860Z |
15
- | `documentation/template/3_商业化策略.md` | 2025-11-12T10:41:15.860Z |
16
- | `documentation/template/4_用户界面与体验.md` | 2025-11-12T10:41:15.860Z |
13
+ | `documentation/template/1_产品定位与分析.md` | 2025-11-17T06:49:33.762Z |
14
+ | `documentation/template/2_功能需求.md` | 2025-11-17T06:49:38.006Z |
15
+ | `documentation/template/3_商业化策略.md` | 2025-11-17T06:43:53.421Z |
16
+ | `documentation/template/4.1_用户体验流程与信息架构.md` | 2025-11-17T06:49:16.631Z |
17
+ | `documentation/template/4.2_关键界面.md` | 2025-11-17T06:43:49.263Z |
18
+ | `documentation/template/4.3_交互与响应式设计.md` | 2025-11-17T06:43:51.131Z |
17
19
  | `documentation/template/AI 应用类APP通用埋点文档.xlsx` | 2025-11-12T10:41:15.861Z |
18
20
  | `documentation/template/Draft_产品需求草稿.md` | 2025-11-12T10:41:15.862Z |
19
21
  | `documentation/template/Draft_用户旅程草稿.md` | 2025-11-12T10:41:15.862Z |
20
- | `documentation/template/index.md` | 2025-11-12T10:41:15.862Z |
22
+ | `documentation/template/index.md` | 2025-11-17T06:43:52.439Z |
21
23
  | `documentation/template/埋点规范文档.md` | 2025-11-12T10:41:15.862Z |
22
- | `documentation/template/需求迭代模板.md` | 2025-11-12T10:41:15.863Z |
24
+ | `documentation/template/需求迭代模板.md` | 2025-11-17T06:43:45.748Z |
23
25
  | `documentation/template/需求迭代索引.md` | 2025-11-12T10:41:15.863Z |
24
26
  | `initiative_planning/SKILL.md` | 2025-11-12T10:41:15.863Z |
25
27
  | `initiative_planning/template/SWOT分析模板.md` | 2025-11-12T10:41:15.864Z |