@guru-ai-product/ai-product-kit 0.2.251118123107 → 0.2.251118163500
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.
- package/README.md +6 -22
- package/mcp/skills/aipk_init_project/template/AGENTS_TEMPLATE.md +2 -0
- package/package.json +1 -1
- package/skills/aipk_aso-new-release/GURU_AI.md +1 -1
- package/skills/aipk_development/GURU_AI.md +1 -1
- package/skills/aipk_format-requirement-pages-with-design/GURU_AI.md +3 -3
- package/skills/aipk_format-requirement-pages-with-design/SKILL.md +14 -10
- package/skills/aipk_format-requirement-pages-with-design/requirement-page-table-format.md +55 -35
- package/skills/aipk_init_project/GURU_AI.md +2 -2
- package/skills/aipk_init_project/template/AGENTS_TEMPLATE.md +1 -0
- package/skills/aipk_initiative-planning/GURU_AI.md +1 -1
- package/skills/aipk_requirements-changes/GURU_AI.md +1 -1
- package/skills/aipk_requirements-documentation/GURU_AI.md +3 -3
- package/skills/aipk_requirements-documentation/template/4.2_/345/205/263/351/224/256/347/225/214/351/235/242.md +47 -33
- 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 +68 -42
- package/skills/aipk_requirements-intake/GURU_AI.md +1 -1
- package/skills/aipk_skill_generate/GURU_AI.md +1 -1
- package/skills/aipk_tool_prompts/GURU_AI.md +1 -1
- package/skills/aipk_update-requirements-from-design/GURU_AI.md +1 -1
package/README.md
CHANGED
|
@@ -7,28 +7,12 @@ Looking for the Chinese version? See `README_CN.md`.
|
|
|
7
7
|
## 📁 Repository Structure
|
|
8
8
|
|
|
9
9
|
```text
|
|
10
|
-
|
|
11
|
-
├──
|
|
12
|
-
├──
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
│ ├── aipk_requirements-changes/ # Change management templates and prompts
|
|
17
|
-
│ ├── aipk_initiative-planning/ # Initiative evaluation and scoping playbooks
|
|
18
|
-
│ ├── aipk_update-requirements-from-design/ # Align requirements to design mockups
|
|
19
|
-
│ ├── aipk_format-requirement-pages-with-design/ # Table-based layout for design+text pages
|
|
20
|
-
│ ├── aipk_aso-new-release/ # ASO content and store asset guidance
|
|
21
|
-
│ ├── aipk_development/ # Engineering playbooks and implementation templates
|
|
22
|
-
│ ├── aipk_skill_generate/ # Standards for creating or extending Skills
|
|
23
|
-
│ └── aipk_tool_prompts/ # Reusable AI prompt blocks referenced by other Skills
|
|
24
|
-
├── docs/ # Legacy landing pages and shared standards referenced by Skills
|
|
25
|
-
├── mcp/ # MCP local service (Node, entry `mcp/src/server.js`), documentation, and tests
|
|
26
|
-
├── bin/ # Distribution-ready CLI entry points (e.g., `ai-product-kit.js`)
|
|
27
|
-
├── tools/ # Unified build scripts via `tools/build_package`
|
|
28
|
-
├── scripts/ # Helper utilities invoked by Skills and templates
|
|
29
|
-
├── todos/ # Working drafts and in-progress notes
|
|
30
|
-
├── test/ # Automated coverage for CLI helpers and scripts
|
|
31
|
-
└── README*.md # Repository entry points (English + Chinese)
|
|
10
|
+
PACKAGE_ROOT/
|
|
11
|
+
├── README.md / README_CN.md # English / Chinese entry points (this file)
|
|
12
|
+
├── package.json # NPM package manifest
|
|
13
|
+
├── bin/ # Distribution-ready CLI entry points
|
|
14
|
+
├── mcp/ # MCP server implementation + templates
|
|
15
|
+
└── skills/ # Canonical lifecycle Skills and reusable guides
|
|
32
16
|
```
|
|
33
17
|
|
|
34
18
|
**Documentation Standards**: All documentation follows the standards defined in [`docs/guide_writing_standard/SKILL.md`](docs/guide_writing_standard/SKILL.md), covering document structure, content organization, formatting, and template writing guidelines.
|
|
@@ -15,6 +15,8 @@ Write a concise overview of your project here. Keep it brief and scannable.
|
|
|
15
15
|
|
|
16
16
|
Use these MCP tools to load a Skill by name. The server maps known Skill names to their `SKILL.md` files.
|
|
17
17
|
|
|
18
|
+
Always print a highlighted line such as **I'm using skill "XXXX"** (replace XXXX with the requested Skill) before invoking it so the active Skill is explicit.
|
|
19
|
+
|
|
18
20
|
<!-- MCP_SKILLS_TABLE_START -->
|
|
19
21
|
<mcp_skills>
|
|
20
22
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# GURU AI Snapshot
|
|
2
2
|
|
|
3
|
-
Last refreshed: 2025-11-
|
|
3
|
+
Last refreshed: 2025-11-18T08:35:00.385Z
|
|
4
4
|
|
|
5
5
|
| File | Last Modified (UTC) |
|
|
6
6
|
| --- | --- |
|
|
7
|
-
| `requirement-page-table-format.md` | 2025-11-
|
|
8
|
-
| `SKILL.md` | 2025-11-
|
|
7
|
+
| `requirement-page-table-format.md` | 2025-11-18T08:30:54.000Z |
|
|
8
|
+
| `SKILL.md` | 2025-11-18T08:29:44.000Z |
|
|
@@ -26,11 +26,13 @@ description: Format requirement document pages that include design images into s
|
|
|
26
26
|
|
|
27
27
|
### 2.1 核心规则
|
|
28
28
|
|
|
29
|
-
1. **表格结构**:每个页面使用一个独立的 HTML 表格(`<table
|
|
29
|
+
1. **表格结构**:每个页面使用一个独立的 HTML 表格(`<table>`),两列分别为“页面说明”和“设计图”
|
|
30
30
|
2. **页面标题位置**:页面标题必须放在表格外部,作为表格的标题
|
|
31
|
-
3.
|
|
32
|
-
4.
|
|
33
|
-
5.
|
|
31
|
+
3. **多图处理**:同一段说明对应多张图时,左列使用 `rowspan="[图片行数]"` 合并为一行,右列的每张图片单独占一行(`<tr>`)
|
|
32
|
+
4. **设计稿与线框稿顺序**:若同时有设计稿和线框稿,首行放设计稿,下一行放线框稿,保持文字说明与首行一致
|
|
33
|
+
5. **单元格对齐**:所有内容单元格使用 `<td valign="top">` 实现顶对齐,不额外添加其他 `style` 属性
|
|
34
|
+
6. **换行格式**:表格单元格内使用 `<br>` 标签进行换行
|
|
35
|
+
7. **图片引用**:使用 HTML `<img>` 标签,不使用 Markdown 图片语法
|
|
34
36
|
|
|
35
37
|
### 2.2 基本格式示例
|
|
36
38
|
|
|
@@ -43,8 +45,8 @@ description: Format requirement document pages that include design images into s
|
|
|
43
45
|
<th>设计图</th>
|
|
44
46
|
</tr>
|
|
45
47
|
<tr>
|
|
46
|
-
<td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...</td>
|
|
47
|
-
<td><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
48
|
+
<td valign="top"><strong>UI设计</strong>:<br>- 顶部:引导页进度条...</td>
|
|
49
|
+
<td valign="top"><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
48
50
|
</tr>
|
|
49
51
|
</table>
|
|
50
52
|
```
|
|
@@ -60,12 +62,14 @@ description: Format requirement document pages that include design images into s
|
|
|
60
62
|
<th>设计图</th>
|
|
61
63
|
</tr>
|
|
62
64
|
<tr>
|
|
63
|
-
<td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"
|
|
64
|
-
<td><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
65
|
+
<td valign="top" rowspan="3"><strong>UI设计</strong>:<br>- 顶部:引导页进度条...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br><br><strong>rowspan 说明</strong>:根据图片总数调整 `rowspan` 的数值</td>
|
|
66
|
+
<td valign="top"><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
65
67
|
</tr>
|
|
66
68
|
<tr>
|
|
67
|
-
<td></td>
|
|
68
|
-
|
|
69
|
+
<td valign="top"><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
|
|
70
|
+
</tr>
|
|
71
|
+
<tr>
|
|
72
|
+
<td valign="top"><pre><code>[线框图示例]</code></pre></td>
|
|
69
73
|
</tr>
|
|
70
74
|
</table>
|
|
71
75
|
```
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
### 表格结构
|
|
10
10
|
|
|
11
|
-
每个页面使用一个独立的 HTML
|
|
11
|
+
每个页面使用一个独立的 HTML 表格,固定为两列(页面说明 | 设计图),无需添加任何 `style` 属性:
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
14
|
<table>
|
|
@@ -17,12 +17,14 @@
|
|
|
17
17
|
<th>设计图</th>
|
|
18
18
|
</tr>
|
|
19
19
|
<tr>
|
|
20
|
-
<td>[页面说明内容]</td>
|
|
21
|
-
<td>[设计图引用]</td>
|
|
20
|
+
<td valign="top">[页面说明内容]</td>
|
|
21
|
+
<td valign="top">[设计图引用]</td>
|
|
22
22
|
</tr>
|
|
23
23
|
</table>
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
+
所有 `<td>` 单元格都必须写成 `<td valign="top">`,用来保持顶部对齐,同时避免额外的样式设置。
|
|
27
|
+
|
|
26
28
|
### 页面标题位置
|
|
27
29
|
|
|
28
30
|
**页面标题必须放在表格外部**,作为表格的标题。
|
|
@@ -38,8 +40,8 @@
|
|
|
38
40
|
<th>设计图</th>
|
|
39
41
|
</tr>
|
|
40
42
|
<tr>
|
|
41
|
-
<td><strong>UI设计</strong>:<br>- 顶部:引导页进度条...</td>
|
|
42
|
-
<td><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
43
|
+
<td valign="top"><strong>UI设计</strong>:<br>- 顶部:引导页进度条...</td>
|
|
44
|
+
<td valign="top"><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
43
45
|
</tr>
|
|
44
46
|
</table>
|
|
45
47
|
```
|
|
@@ -67,11 +69,11 @@
|
|
|
67
69
|
|
|
68
70
|
### 规则
|
|
69
71
|
|
|
70
|
-
|
|
72
|
+
如果一个页面有多张设计图,**每张图必须单独占一行**。左列说明使用 `rowspan="[图片行数]"` 合并为单行,只在首行写入说明。
|
|
71
73
|
|
|
72
74
|
### 格式
|
|
73
75
|
|
|
74
|
-
|
|
76
|
+
第一行包含完整的页面说明和第一张图,同时在左列设置 `rowspan="[图片行数]"`;后续行只包含右侧对应的设计图。
|
|
75
77
|
|
|
76
78
|
**格式示例**:
|
|
77
79
|
|
|
@@ -82,12 +84,11 @@
|
|
|
82
84
|
<th>设计图</th>
|
|
83
85
|
</tr>
|
|
84
86
|
<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
|
+
<td valign="top" rowspan="2"><strong>UI设计</strong>:<br>- 顶部:引导页进度条...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br>...</td>
|
|
88
|
+
<td valign="top"><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
87
89
|
</tr>
|
|
88
90
|
<tr>
|
|
89
|
-
<td></td>
|
|
90
|
-
<td><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
|
|
91
|
+
<td valign="top"><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
|
|
91
92
|
</tr>
|
|
92
93
|
</table>
|
|
93
94
|
```
|
|
@@ -105,12 +106,31 @@
|
|
|
105
106
|
<th>设计图</th>
|
|
106
107
|
</tr>
|
|
107
108
|
<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>
|
|
109
|
+
<td valign="top" rowspan="2"><strong>UI设计</strong>:<br>- 顶部:引导页进度条和返回按钮<br>- 中央:功能示意图展示...<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br>...</td>
|
|
110
|
+
<td valign="top"><img src="./assets/1-上传全身照-1.png" alt=""></td>
|
|
110
111
|
</tr>
|
|
111
112
|
<tr>
|
|
112
|
-
<td></td>
|
|
113
|
-
|
|
113
|
+
<td valign="top"><img src="./assets/1-上传全身照备份-1.png" alt=""></td>
|
|
114
|
+
</tr>
|
|
115
|
+
</table>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### 设计稿与线框稿顺序
|
|
119
|
+
|
|
120
|
+
当同一段说明需要同时展示设计稿与线框稿时,必须把设计稿放在第一行,线框稿放在其下方的新行中。
|
|
121
|
+
|
|
122
|
+
```html
|
|
123
|
+
<table>
|
|
124
|
+
<tr>
|
|
125
|
+
<th>页面说明</th>
|
|
126
|
+
<th>设计图</th>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td valign="top" rowspan="2">[页面说明]</td>
|
|
130
|
+
<td valign="top"><img src="./assets/[设计稿].png" alt=""></td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td valign="top"><pre><code>[线框图示例]</code></pre></td>
|
|
114
134
|
</tr>
|
|
115
135
|
</table>
|
|
116
136
|
```
|
|
@@ -126,20 +146,17 @@
|
|
|
126
146
|
<th>设计图</th>
|
|
127
147
|
</tr>
|
|
128
148
|
<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>
|
|
149
|
+
<td valign="top" rowspan="4"><strong>UI设计</strong>:<br>- 复用现有手动输入页面的UI组件<br>- 预填充AI识别结果<br><br><strong>界面文案</strong>:<br>- 主标题:"Review and edit your information"<br>...</td>
|
|
150
|
+
<td valign="top"><img src="./assets/7-性别-1.png" alt=""></td>
|
|
131
151
|
</tr>
|
|
132
152
|
<tr>
|
|
133
|
-
<td></td>
|
|
134
|
-
<td><img src="./assets/8-年龄-1.png" alt=""></td>
|
|
153
|
+
<td valign="top"><img src="./assets/8-年龄-1.png" alt=""></td>
|
|
135
154
|
</tr>
|
|
136
155
|
<tr>
|
|
137
|
-
<td></td>
|
|
138
|
-
<td><img src="./assets/9-身高-1.png" alt=""></td>
|
|
156
|
+
<td valign="top"><img src="./assets/9-身高-1.png" alt=""></td>
|
|
139
157
|
</tr>
|
|
140
158
|
<tr>
|
|
141
|
-
<td></td>
|
|
142
|
-
<td><img src="./assets/10-身高-1.png" alt=""></td>
|
|
159
|
+
<td valign="top"><img src="./assets/10-身高-1.png" alt=""></td>
|
|
143
160
|
</tr>
|
|
144
161
|
</table>
|
|
145
162
|
```
|
|
@@ -159,8 +176,8 @@
|
|
|
159
176
|
<th>设计图</th>
|
|
160
177
|
</tr>
|
|
161
178
|
<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>
|
|
179
|
+
<td valign="top"><strong>UI设计</strong>:<br>- 顶部:引导页进度条<br>- 中央:功能示意图<br><br><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"</td>
|
|
180
|
+
<td valign="top"><img src="./assets/1.png" alt=""></td>
|
|
164
181
|
</tr>
|
|
165
182
|
</table>
|
|
166
183
|
```
|
|
@@ -198,8 +215,8 @@
|
|
|
198
215
|
<th>设计图</th>
|
|
199
216
|
</tr>
|
|
200
217
|
<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>
|
|
218
|
+
<td valign="top"><strong>界面文案</strong>:<br>- 主标题:"Upload photo for feedback"<br>- 被扫描后的功能示意图文案:<br> - 性别:"Female"<br> - 年龄:"20"</td>
|
|
219
|
+
<td valign="top"><img src="./assets/1.png" alt=""></td>
|
|
203
220
|
</tr>
|
|
204
221
|
</table>
|
|
205
222
|
```
|
|
@@ -230,21 +247,24 @@
|
|
|
230
247
|
|
|
231
248
|
## 注意事项
|
|
232
249
|
|
|
233
|
-
1. **表格格式**:使用 HTML `<table
|
|
250
|
+
1. **表格格式**:使用 HTML `<table>`,不要使用 Markdown 表格或任何 `style` 属性
|
|
234
251
|
2. **页面标题位置**:页面标题(如 `##### 4.3.2.1`)必须放在表格外部
|
|
235
|
-
3.
|
|
236
|
-
4.
|
|
237
|
-
5.
|
|
238
|
-
6.
|
|
252
|
+
3. **多图处理**:同一说明对应多张图时,每张图独占一行,左列使用 `rowspan` 合并为单行并写在首行
|
|
253
|
+
4. **设计稿与线框稿顺序**:若同时存在设计稿和线框稿,先放设计稿,再放线框稿,且维持左列说明不变
|
|
254
|
+
5. **换行格式**:表格单元格内使用 `<br>` 标签换行
|
|
255
|
+
6. **图片引用**:使用 HTML `<img>` 标签,`src` 属性使用相对路径,`alt` 属性可添加描述文本
|
|
256
|
+
7. **表格对齐**:所有 `<td>` 使用 `valign="top"`,不要额外添加其他 `style`
|
|
239
257
|
|
|
240
258
|
## 检查清单
|
|
241
259
|
|
|
242
260
|
在创建或修改页面表格时,请检查:
|
|
243
261
|
|
|
244
|
-
- [ ] 使用 HTML `<table
|
|
262
|
+
- [ ] 使用 HTML `<table>`,不使用 Markdown 表格
|
|
245
263
|
- [ ] 页面标题在表格外部
|
|
246
264
|
- [ ] 表格只有两列(`<th>页面说明</th>` 和 `<th>设计图</th>`)
|
|
247
|
-
- [ ]
|
|
265
|
+
- [ ] 多张图时,每张图独占一行,左列使用 `rowspan` 合并为单行
|
|
266
|
+
- [ ] 同步展示设计稿与线框稿时,先放设计稿,再在下一行放线框稿
|
|
248
267
|
- [ ] 表格单元格内使用 `<br>` 进行换行
|
|
268
|
+
- [ ] `<td>` 使用 `valign="top"` 保证顶部对齐
|
|
249
269
|
- [ ] 图片使用 `<img>` 标签,`src` 路径正确且可访问
|
|
250
|
-
- [ ]
|
|
270
|
+
- [ ] 表格格式整洁,无额外 `style`
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# GURU AI Snapshot
|
|
2
2
|
|
|
3
|
-
Last refreshed: 2025-11-
|
|
3
|
+
Last refreshed: 2025-11-18T08:35:00.385Z
|
|
4
4
|
|
|
5
5
|
| File | Last Modified (UTC) |
|
|
6
6
|
| --- | --- |
|
|
7
7
|
| `scripts/check_agents.sh` | 2025-11-13T09:03:47.000Z |
|
|
8
8
|
| `skill.ini` | 2025-11-13T09:47:02.000Z |
|
|
9
9
|
| `SKILL.md` | 2025-11-17T13:24:45.000Z |
|
|
10
|
-
| `template/AGENTS_TEMPLATE.md` | 2025-11-
|
|
10
|
+
| `template/AGENTS_TEMPLATE.md` | 2025-11-18T08:35:00.224Z |
|
|
@@ -32,6 +32,7 @@ How to use skills:
|
|
|
32
32
|
Usage notes:
|
|
33
33
|
- Only use skills listed in <available_skills> below
|
|
34
34
|
- Do not invoke a skill that is already loaded in your context
|
|
35
|
+
- Before calling any skill, first print a highlighted line such as **I'm using skill "XXXX"** (replace XXXX with the skill name) so the active skill is explicit
|
|
35
36
|
</usage>
|
|
36
37
|
|
|
37
38
|
<available_skills>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# GURU AI Snapshot
|
|
2
2
|
|
|
3
|
-
Last refreshed: 2025-11-
|
|
3
|
+
Last refreshed: 2025-11-18T08:35:00.385Z
|
|
4
4
|
|
|
5
5
|
| File | Last Modified (UTC) |
|
|
6
6
|
| --- | --- |
|
|
@@ -9,12 +9,12 @@ Last refreshed: 2025-11-18T04:31:07.873Z
|
|
|
9
9
|
| `template/2_功能需求.md` | 2025-11-17T06:49:38.000Z |
|
|
10
10
|
| `template/3_商业化策略.md` | 2025-11-17T06:43:53.000Z |
|
|
11
11
|
| `template/4.1_用户体验流程与信息架构.md` | 2025-11-17T06:49:16.000Z |
|
|
12
|
-
| `template/4.2_关键界面.md` | 2025-11-
|
|
12
|
+
| `template/4.2_关键界面.md` | 2025-11-18T08:27:59.000Z |
|
|
13
13
|
| `template/4.3_交互与响应式设计.md` | 2025-11-17T06:43:51.000Z |
|
|
14
14
|
| `template/AI 应用类APP通用埋点文档.xlsx` | 2025-11-12T10:41:15.000Z |
|
|
15
15
|
| `template/Draft_产品需求草稿.md` | 2025-11-12T10:41:15.000Z |
|
|
16
16
|
| `template/Draft_用户旅程草稿.md` | 2025-11-12T10:41:15.000Z |
|
|
17
17
|
| `template/index.md` | 2025-11-17T06:43:52.000Z |
|
|
18
18
|
| `template/埋点规范文档.md` | 2025-11-12T10:41:15.000Z |
|
|
19
|
-
| `template/需求迭代模板.md` | 2025-11-
|
|
19
|
+
| `template/需求迭代模板.md` | 2025-11-18T08:29:26.000Z |
|
|
20
20
|
| `template/需求迭代索引.md` | 2025-11-12T10:41:15.000Z |
|
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
- **[分组2]**:[分组名称和包含的界面类型]
|
|
17
17
|
- **[分组3]**:[分组名称和包含的界面类型]
|
|
18
18
|
|
|
19
|
+
<!-- ⚠️ 表格排版规范:每张图片或线框稿必须独占一行,如果同一段说明对应多张图,请将左列说明使用 `rowspan="[图片行数]"` 合并为单行,右列按行依次放置图片或线框图;如同时存在高保真设计稿与线框稿,第一行放设计图,下一行放线框稿,并保持左右两列的对应关系不变。所有单元格使用 `<td valign="top">` 来保持顶部对齐,避免视觉错位且不要添加其他 style。 -->
|
|
20
|
+
|
|
19
21
|
#### 4.4.1 引导页设计组
|
|
20
22
|
|
|
21
23
|
**设计说明**:
|
|
@@ -29,8 +31,8 @@
|
|
|
29
31
|
<th>设计图</th>
|
|
30
32
|
</tr>
|
|
31
33
|
<tr>
|
|
32
|
-
<td><strong>描述</strong>:<br>新用户首次打开App时的起始引导页,包含隐私条款和服务说明<br><br><strong>关键元素</strong>:<br>- 主视觉图片<br>- 引导文案<br>- 隐私条款链接<br>- 服务条款链接<br>- 继续按钮<br><br><strong>交互流程</strong>:<br>用户首次启动 → 查看起始页 → 阅读条款 → 点击继续<br><br><strong>设计说明</strong>:<br>简洁优雅的设计风格,突出品牌形象,清晰展示法律条款<br><br><strong>主视觉内容</strong>:<br>[描述主视觉图片或动画的内容,如展示产品核心功能的场景]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 主标题:"[品牌名称或核心价值主张]"<br>- 引导文案:"[简短的功能描述]"<br>- 继续按钮:"[明确的行动指引]"<br>- 隐私政策链接:"Privacy Policy"<br>- 服务条款链接:"Terms of Service"</td>
|
|
33
|
-
<td>
|
|
34
|
+
<td valign="top"><strong>描述</strong>:<br>新用户首次打开App时的起始引导页,包含隐私条款和服务说明<br><br><strong>关键元素</strong>:<br>- 主视觉图片<br>- 引导文案<br>- 隐私条款链接<br>- 服务条款链接<br>- 继续按钮<br><br><strong>交互流程</strong>:<br>用户首次启动 → 查看起始页 → 阅读条款 → 点击继续<br><br><strong>设计说明</strong>:<br>简洁优雅的设计风格,突出品牌形象,清晰展示法律条款<br><br><strong>主视觉内容</strong>:<br>[描述主视觉图片或动画的内容,如展示产品核心功能的场景]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 主标题:"[品牌名称或核心价值主张]"<br>- 引导文案:"[简短的功能描述]"<br>- 继续按钮:"[明确的行动指引]"<br>- 隐私政策链接:"Privacy Policy"<br>- 服务条款链接:"Terms of Service"</td>
|
|
35
|
+
<td valign="top">
|
|
34
36
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
35
37
|
*待设计图完成后,使用以下格式:*
|
|
36
38
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
@@ -47,8 +49,8 @@
|
|
|
47
49
|
<th>设计图</th>
|
|
48
50
|
</tr>
|
|
49
51
|
<tr>
|
|
50
|
-
<td><strong>描述</strong>:<br>介绍App的核心功能<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"<br><br><strong>设计原则</strong>:<br>- 每页只传达一个核心信息<br>- 使用动词开头的简洁标题<br>- 控制在1-2行的说明文案<br>- 展示具体的使用场景或效果</td>
|
|
51
|
-
<td>
|
|
52
|
+
<td valign="top"><strong>描述</strong>:<br>介绍App的核心功能<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"<br><br><strong>设计原则</strong>:<br>- 每页只传达一个核心信息<br>- 使用动词开头的简洁标题<br>- 控制在1-2行的说明文案<br>- 展示具体的使用场景或效果</td>
|
|
53
|
+
<td valign="top">
|
|
52
54
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
53
55
|
*待设计图完成后,使用以下格式:*
|
|
54
56
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
@@ -65,8 +67,8 @@
|
|
|
65
67
|
<th>设计图</th>
|
|
66
68
|
</tr>
|
|
67
69
|
<tr>
|
|
68
|
-
<td><strong>描述</strong>:<br>介绍App的重要功能<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"</td>
|
|
69
|
-
<td>
|
|
70
|
+
<td valign="top"><strong>描述</strong>:<br>介绍App的重要功能<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"</td>
|
|
71
|
+
<td valign="top">
|
|
70
72
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
71
73
|
*待设计图完成后,使用以下格式:*
|
|
72
74
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
@@ -83,8 +85,8 @@
|
|
|
83
85
|
<th>设计图</th>
|
|
84
86
|
</tr>
|
|
85
87
|
<tr>
|
|
86
|
-
<td><strong>描述</strong>:<br>介绍App的特色功能<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"</td>
|
|
87
|
-
<td>
|
|
88
|
+
<td valign="top"><strong>描述</strong>:<br>介绍App的特色功能<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"</td>
|
|
89
|
+
<td valign="top">
|
|
88
90
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
89
91
|
*待设计图完成后,使用以下格式:*
|
|
90
92
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
@@ -101,8 +103,8 @@
|
|
|
101
103
|
<th>设计图</th>
|
|
102
104
|
</tr>
|
|
103
105
|
<tr>
|
|
104
|
-
<td><strong>描述</strong>:<br>介绍App的高级功能或未来展望<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"</td>
|
|
105
|
-
<td>
|
|
106
|
+
<td valign="top"><strong>描述</strong>:<br>介绍App的高级功能或未来展望<br><br><strong>关键元素</strong>:<br>- 功能演示图片/视频<br>- 标题文案<br>- 说明文案<br><br><strong>主视觉内容</strong>:<br>[描述功能演示的图片或视频内容]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 标题:"[功能名称或核心价值]"<br>- 说明:"[简短的功能描述,1-2行]"</td>
|
|
107
|
+
<td valign="top">
|
|
106
108
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
107
109
|
*待设计图完成后,使用以下格式:*
|
|
108
110
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
@@ -137,10 +139,18 @@
|
|
|
137
139
|
<th>设计图</th>
|
|
138
140
|
</tr>
|
|
139
141
|
<tr>
|
|
140
|
-
<td><strong>描述</strong>:<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>:<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>:<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- [元素名称]:"[文案内容]"<br>- [元素名称]:"[文案内容]"</td>
|
|
141
|
-
<td>
|
|
142
|
+
<td valign="top" rowspan="2"><strong>描述</strong>:<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>:<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>:<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- [元素名称]:"[文案内容]"<br>- [元素名称]:"[文案内容]"</td>
|
|
143
|
+
<td valign="top">
|
|
144
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
145
|
+
*优先放置设计图或高保真稿,格式如下:*
|
|
146
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
147
|
+
<img src="./assets/[界面名称].png" alt="[界面名称]">
|
|
148
|
+
</td>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr>
|
|
151
|
+
<td valign="top">
|
|
142
152
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
143
|
-
|
|
153
|
+
*若需补充线框图,请将线框图放在设计图下方的独立行,格式如下:*
|
|
144
154
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
145
155
|
<pre><code>
|
|
146
156
|
┌─────────────────────────────────────┐
|
|
@@ -159,10 +169,6 @@
|
|
|
159
169
|
│ └─────────────────────────────────┘ │
|
|
160
170
|
└─────────────────────────────────────┘
|
|
161
171
|
</code></pre>
|
|
162
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
163
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
164
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
165
|
-
<img src="./assets/[界面名称].png" alt="[界面名称]">
|
|
166
172
|
</td>
|
|
167
173
|
</tr>
|
|
168
174
|
</table>
|
|
@@ -178,10 +184,18 @@
|
|
|
178
184
|
<th>设计图</th>
|
|
179
185
|
</tr>
|
|
180
186
|
<tr>
|
|
181
|
-
<td><strong>描述</strong>:<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>:<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>:<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- [元素名称]:"[文案内容]"<br>- [元素名称]:"[文案内容]"</td>
|
|
182
|
-
<td>
|
|
187
|
+
<td valign="top" rowspan="2"><strong>描述</strong>:<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>:<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>:<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- [元素名称]:"[文案内容]"<br>- [元素名称]:"[文案内容]"</td>
|
|
188
|
+
<td valign="top">
|
|
189
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
190
|
+
*若有设计稿,请在本行放置设计图:*
|
|
191
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
192
|
+
<img src="./assets/[界面名称].png" alt="[界面名称]">
|
|
193
|
+
</td>
|
|
194
|
+
</tr>
|
|
195
|
+
<tr>
|
|
196
|
+
<td valign="top">
|
|
183
197
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
184
|
-
|
|
198
|
+
*如需展示线框稿,将线框图放置在设计图下方:*
|
|
185
199
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
186
200
|
<pre><code>
|
|
187
201
|
┌─────────────────────────────────────┐
|
|
@@ -193,10 +207,6 @@
|
|
|
193
207
|
│ [按钮1] [按钮2] │
|
|
194
208
|
└─────────────────────────────────────┘
|
|
195
209
|
</code></pre>
|
|
196
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
197
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
198
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
199
|
-
<img src="./assets/[界面名称].png" alt="[界面名称]">
|
|
200
210
|
</td>
|
|
201
211
|
</tr>
|
|
202
212
|
</table>
|
|
@@ -214,10 +224,18 @@
|
|
|
214
224
|
<th>设计图</th>
|
|
215
225
|
</tr>
|
|
216
226
|
<tr>
|
|
217
|
-
<td><strong>描述</strong>:<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>:<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>:<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- [元素名称]:"[文案内容]"<br>- [元素名称]:"[文案内容]"</td>
|
|
218
|
-
<td>
|
|
227
|
+
<td valign="top" rowspan="2"><strong>描述</strong>:<br>[描述界面的主要功能和用途]<br><br><strong>UI 元素说明</strong>:<br>- [列出界面的主要UI元素和布局]<br>- [描述关键元素的位置和样式]<br>- [说明视觉层级和信息架构]<br><br><strong>交互说明</strong>:<br>- [描述用户与界面的交互步骤]<br>- [说明手势操作和点击行为]<br>- [描述状态变化和反馈机制]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- [元素名称]:"[文案内容]"<br>- [元素名称]:"[文案内容]"</td>
|
|
228
|
+
<td valign="top">
|
|
229
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
230
|
+
*如果本界面有设计图,请在此处放置设计稿:*
|
|
231
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
232
|
+
<img src="./assets/[界面名称].png" alt="[界面名称]">
|
|
233
|
+
</td>
|
|
234
|
+
</tr>
|
|
235
|
+
<tr>
|
|
236
|
+
<td valign="top">
|
|
219
237
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
220
|
-
|
|
238
|
+
*若需要对比线框稿,请在设计图下方另起一行,放置如下线框图示例:*
|
|
221
239
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
222
240
|
<pre><code>
|
|
223
241
|
┌─────────────────────────────────────┐
|
|
@@ -229,10 +247,6 @@
|
|
|
229
247
|
│ [按钮1] [按钮2] │
|
|
230
248
|
└─────────────────────────────────────┘
|
|
231
249
|
</code></pre>
|
|
232
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
233
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
234
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
235
|
-
<img src="./assets/[界面名称].png" alt="[界面名称]">
|
|
236
250
|
</td>
|
|
237
251
|
</tr>
|
|
238
252
|
</table>
|
|
@@ -250,8 +264,8 @@ IAP付费页面是用户升级到高级功能的关键界面,通过精心设
|
|
|
250
264
|
<th>设计图</th>
|
|
251
265
|
</tr>
|
|
252
266
|
<tr>
|
|
253
|
-
<td><strong>描述</strong>:<br>展示产品高级功能的价值主张,引导用户升级到付费版本<br><br><strong>关键元素</strong>:<br>- 背景图片<br>- 主标题<br>- 功能列表<br>- 价格信息<br>- 订阅按钮<br>- 恢复购买选项<br><br><strong>设计风格</strong>:<br>与产品整体品牌保持一致,使用现代简洁的设计语言<br><br><strong>背景图片设计说明</strong>:<br>- 视觉主题:[描述背景图片的主题和概念,如展示产品核心功能的视觉化表现]<br>- 色调风格:[描述使用的色调和品牌色彩,营造的氛围感]<br>- 构图要求:背景图片不应干扰文字阅读,保持良好的对比度<br>- 元素建议:[列出可能包含的视觉元素,如图标、抽象图形等]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 主标题:"[突出价值的主标题]"<br>- 副标题:"[详细说明价值主张的副标题]"<br>- 功能亮点文案:<br> - "[高级功能1的用户价值描述]"<br> - "[高级功能2的用户价值描述]"<br> - "[高级功能3的用户价值描述]"<br> - "[高级功能4的用户价值描述]"<br>- 价格展示:"[价格信息,如$X.XX/month or $XX.XX/year]"<br>- 主要按钮:"[主要行动按钮文案]"<br>- 次要按钮:"Restore Purchases"<br>- 免费试用:"[免费试用信息,如X-day free trial included]"<br><br><strong>文案设计原则</strong>:<br>- 价值导向:突出用户能获得的具体价值和体验提升<br>- 品牌一致:延续产品核心主题和品牌调性<br>- 简洁明了:避免过多技术术语,专注于用户利益<br>- 紧迫感适度:通过免费试用等方式降低用户决策门槛</td>
|
|
254
|
-
<td>
|
|
267
|
+
<td valign="top"><strong>描述</strong>:<br>展示产品高级功能的价值主张,引导用户升级到付费版本<br><br><strong>关键元素</strong>:<br>- 背景图片<br>- 主标题<br>- 功能列表<br>- 价格信息<br>- 订阅按钮<br>- 恢复购买选项<br><br><strong>设计风格</strong>:<br>与产品整体品牌保持一致,使用现代简洁的设计语言<br><br><strong>背景图片设计说明</strong>:<br>- 视觉主题:[描述背景图片的主题和概念,如展示产品核心功能的视觉化表现]<br>- 色调风格:[描述使用的色调和品牌色彩,营造的氛围感]<br>- 构图要求:背景图片不应干扰文字阅读,保持良好的对比度<br>- 元素建议:[列出可能包含的视觉元素,如图标、抽象图形等]<br><br><strong>界面文案 (Interface Copy)</strong>:<br>- 主标题:"[突出价值的主标题]"<br>- 副标题:"[详细说明价值主张的副标题]"<br>- 功能亮点文案:<br> - "[高级功能1的用户价值描述]"<br> - "[高级功能2的用户价值描述]"<br> - "[高级功能3的用户价值描述]"<br> - "[高级功能4的用户价值描述]"<br>- 价格展示:"[价格信息,如$X.XX/month or $XX.XX/year]"<br>- 主要按钮:"[主要行动按钮文案]"<br>- 次要按钮:"Restore Purchases"<br>- 免费试用:"[免费试用信息,如X-day free trial included]"<br><br><strong>文案设计原则</strong>:<br>- 价值导向:突出用户能获得的具体价值和体验提升<br>- 品牌一致:延续产品核心主题和品牌调性<br>- 简洁明了:避免过多技术术语,专注于用户利益<br>- 紧迫感适度:通过免费试用等方式降低用户决策门槛</td>
|
|
268
|
+
<td valign="top">
|
|
255
269
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
256
270
|
*待设计图完成后,使用以下格式:*
|
|
257
271
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
@@ -131,16 +131,26 @@ graph TD
|
|
|
131
131
|
**重要说明**:页面标题必须放在表格外部,作为表格的标题。表格包含两列:左侧是页面说明,右侧是设计图。如果设计图是线框图,使用`<pre><code>`包裹;如果是设计图文件,使用`<img>`标签。参考格式规范:`skills/format-requirement-pages-with-design/requirement-page-table-format.md`
|
|
132
132
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
133
133
|
|
|
134
|
+
<!-- ⚠️ 表格排版规范:每张图片(含线框稿)必须单独占一行,如同一段说明对应多张图,请为左列说明设置 `rowspan="[图片行数]"` 合并为一行,右列按行依次放置图片;若设计稿与线框稿同时存在,先放设计稿,再在下一行放线框稿。所有单元格统一使用 `<td valign="top">` 顶部对齐,禁止额外添加 style。 -->
|
|
135
|
+
|
|
134
136
|
<table>
|
|
135
137
|
<tr>
|
|
136
138
|
<th>页面说明</th>
|
|
137
139
|
<th>设计图</th>
|
|
138
140
|
</tr>
|
|
139
141
|
<tr>
|
|
140
|
-
<td><strong>页面功能</strong>:<br>[页面功能描述]<br><br><strong>页面布局</strong>:<br>[页面整体布局描述]</td>
|
|
141
|
-
<td>
|
|
142
|
+
<td valign="top" rowspan="2"><strong>页面功能</strong>:<br>[页面功能描述]<br><br><strong>页面布局</strong>:<br>[页面整体布局描述]</td>
|
|
143
|
+
<td valign="top">
|
|
144
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
145
|
+
*先放置设计稿(如有),格式如下:*
|
|
146
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
147
|
+
<img src="./assets/[页面名称].png" alt="[页面名称]">
|
|
148
|
+
</td>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr>
|
|
151
|
+
<td valign="top">
|
|
142
152
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
143
|
-
|
|
153
|
+
*如需展示线框稿,将其放在设计图下方独立的一行:*
|
|
144
154
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
145
155
|
<pre><code>
|
|
146
156
|
┌─────────────────────────────────────┐
|
|
@@ -159,10 +169,6 @@ graph TD
|
|
|
159
169
|
│ └─────────────────────────────────┘ │
|
|
160
170
|
└─────────────────────────────────────┘
|
|
161
171
|
</code></pre>
|
|
162
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
163
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
164
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
165
|
-
<img src="./assets/[页面名称].png" alt="[页面名称]">
|
|
166
172
|
</td>
|
|
167
173
|
</tr>
|
|
168
174
|
</table>
|
|
@@ -177,10 +183,18 @@ graph TD
|
|
|
177
183
|
<th>设计图</th>
|
|
178
184
|
</tr>
|
|
179
185
|
<tr>
|
|
180
|
-
<td><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
181
|
-
<td>
|
|
186
|
+
<td valign="top" rowspan="2"><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
187
|
+
<td valign="top">
|
|
188
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
189
|
+
*将组件的高保真设计稿放在这一行:*
|
|
190
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
191
|
+
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
192
|
+
</td>
|
|
193
|
+
</tr>
|
|
194
|
+
<tr>
|
|
195
|
+
<td valign="top">
|
|
182
196
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
183
|
-
|
|
197
|
+
*如需展示线框稿,将线框放在设计稿下方:*
|
|
184
198
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
185
199
|
<pre><code>
|
|
186
200
|
┌─────────────────────────────────────┐
|
|
@@ -195,10 +209,6 @@ graph TD
|
|
|
195
209
|
│ [按钮1] [按钮2] [按钮3] │
|
|
196
210
|
└─────────────────────────────────────┘
|
|
197
211
|
</code></pre>
|
|
198
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
199
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
200
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
201
|
-
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
202
212
|
</td>
|
|
203
213
|
</tr>
|
|
204
214
|
</table>
|
|
@@ -211,10 +221,18 @@ graph TD
|
|
|
211
221
|
<th>设计图</th>
|
|
212
222
|
</tr>
|
|
213
223
|
<tr>
|
|
214
|
-
<td><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
215
|
-
<td>
|
|
224
|
+
<td valign="top" rowspan="2"><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
225
|
+
<td valign="top">
|
|
226
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
227
|
+
*优先在此处放置组件的设计稿:*
|
|
228
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
229
|
+
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
230
|
+
</td>
|
|
231
|
+
</tr>
|
|
232
|
+
<tr>
|
|
233
|
+
<td valign="top">
|
|
216
234
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
217
|
-
|
|
235
|
+
*如需展示线框图,请在设计稿下方补充以下格式:*
|
|
218
236
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
219
237
|
<pre><code>
|
|
220
238
|
┌─────────────────────────────────────┐
|
|
@@ -226,10 +244,6 @@ graph TD
|
|
|
226
244
|
│ [按钮1] [按钮2] │
|
|
227
245
|
└─────────────────────────────────────┘
|
|
228
246
|
</code></pre>
|
|
229
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
230
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
231
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
232
|
-
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
233
247
|
</td>
|
|
234
248
|
</tr>
|
|
235
249
|
</table>
|
|
@@ -242,18 +256,22 @@ graph TD
|
|
|
242
256
|
<th>设计图</th>
|
|
243
257
|
</tr>
|
|
244
258
|
<tr>
|
|
245
|
-
<td><strong>页面功能</strong>:<br>[页面功能描述]<br><br><strong>页面布局</strong>:<br>[页面整体布局描述]</td>
|
|
246
|
-
<td>
|
|
259
|
+
<td valign="top" rowspan="2"><strong>页面功能</strong>:<br>[页面功能描述]<br><br><strong>页面布局</strong>:<br>[页面整体布局描述]</td>
|
|
260
|
+
<td valign="top">
|
|
247
261
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
248
|
-
|
|
262
|
+
*优先放置页面设计稿:*
|
|
263
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
264
|
+
<img src="./assets/[页面名称].png" alt="[页面名称]">
|
|
265
|
+
</td>
|
|
266
|
+
</tr>
|
|
267
|
+
<tr>
|
|
268
|
+
<td valign="top">
|
|
269
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
270
|
+
*如需展示线框稿,将其放在设计稿下方:*
|
|
249
271
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
250
272
|
<pre><code>
|
|
251
273
|
[线框图内容]
|
|
252
274
|
</code></pre>
|
|
253
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
254
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
255
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
256
|
-
<img src="./assets/[页面名称].png" alt="[页面名称]">
|
|
257
275
|
</td>
|
|
258
276
|
</tr>
|
|
259
277
|
</table>
|
|
@@ -268,10 +286,18 @@ graph TD
|
|
|
268
286
|
<th>设计图</th>
|
|
269
287
|
</tr>
|
|
270
288
|
<tr>
|
|
271
|
-
<td><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
272
|
-
<td>
|
|
289
|
+
<td valign="top" rowspan="2"><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
290
|
+
<td valign="top">
|
|
273
291
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
274
|
-
|
|
292
|
+
*先放置组件设计稿:*
|
|
293
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
294
|
+
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
295
|
+
</td>
|
|
296
|
+
</tr>
|
|
297
|
+
<tr>
|
|
298
|
+
<td valign="top">
|
|
299
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
300
|
+
*需要线框稿时,在下方补充以下格式:*
|
|
275
301
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
276
302
|
<pre><code>
|
|
277
303
|
┌─────────────────────────────────────┐
|
|
@@ -283,10 +309,6 @@ graph TD
|
|
|
283
309
|
│ [按钮1] [按钮2] │
|
|
284
310
|
└─────────────────────────────────────┘
|
|
285
311
|
</code></pre>
|
|
286
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
287
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
288
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
289
|
-
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
290
312
|
</td>
|
|
291
313
|
</tr>
|
|
292
314
|
</table>
|
|
@@ -299,10 +321,18 @@ graph TD
|
|
|
299
321
|
<th>设计图</th>
|
|
300
322
|
</tr>
|
|
301
323
|
<tr>
|
|
302
|
-
<td><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
303
|
-
<td>
|
|
324
|
+
<td valign="top" rowspan="2"><strong>功能</strong>:<br>[组件功能描述]<br><br><strong>UI布局</strong>:<br>[组件UI布局描述]<br><br><strong>显示内容</strong>:<br>- [显示内容1]:[显示内容描述]<br>- [显示内容2]:[显示内容描述]<br>- [显示内容3]:[显示内容描述]<br><br><strong>交互逻辑</strong>:<br>- [交互逻辑1]:[交互逻辑描述]<br>- [交互逻辑2]:[交互逻辑描述]<br>- [交互逻辑3]:[交互逻辑描述]<br><br><strong>文案</strong>:<br>- [文案标签1]:[文案内容]<br>- [文案标签2]:[文案内容]<br>- [文案标签3]:[文案内容]</td>
|
|
325
|
+
<td valign="top">
|
|
304
326
|
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
305
|
-
|
|
327
|
+
*先放置组件设计稿:*
|
|
328
|
+
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
329
|
+
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
330
|
+
</td>
|
|
331
|
+
</tr>
|
|
332
|
+
<tr>
|
|
333
|
+
<td valign="top">
|
|
334
|
+
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
335
|
+
*如需展示线框图,请在此行补充:*
|
|
306
336
|
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
307
337
|
<pre><code>
|
|
308
338
|
┌─────────────────────────────────────┐
|
|
@@ -314,10 +344,6 @@ graph TD
|
|
|
314
344
|
│ [按钮1] [按钮2] │
|
|
315
345
|
└─────────────────────────────────────┘
|
|
316
346
|
</code></pre>
|
|
317
|
-
<!-- ⚠️ 以下为规范说明,请勿输出到最终文档 ⚠️ -->
|
|
318
|
-
*如果设计图是图片文件,使用以下格式:*
|
|
319
|
-
<!-- ⚠️ 规范说明结束 ⚠️ -->
|
|
320
|
-
<img src="./assets/[组件名称].png" alt="[组件名称]">
|
|
321
347
|
</td>
|
|
322
348
|
</tr>
|
|
323
349
|
</table>
|