prd-workflow-cli 1.2.6 → 1.3.0
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/.agent/workflows/prd-a2ui-guide.md +242 -0
- package/.agent/workflows/prd-b1-planning-draft.md +1 -1
- package/.agent/workflows/prd-b2-planning-breakdown.md +1 -1
- package/.agent/workflows/prd-c1-requirement-list.md +3 -3
- package/.agent/workflows/prd-p0-project-info.md +1 -1
- package/.antigravity/rules.md +5 -5
- package/.cursorrules +5 -5
- package/a2ui-viewer/index.html +341 -372
- package/package.json +1 -1
- package/.agent/workflows/prd-c1-a2ui-guide.md +0 -245
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: A2UI 可视化指南 - 架构图与界面原型
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# A2UI 可视化指南
|
|
6
|
+
|
|
7
|
+
**本文档是所有阶段共享的 A2UI 组件库和规范。**
|
|
8
|
+
|
|
9
|
+
- **P0 阶段**：使用架构图组件生成项目架构图
|
|
10
|
+
- **B1/B2 阶段**：使用架构图组件生成模块架构图、需求结构图
|
|
11
|
+
- **C1 阶段**：使用界面原型组件生成交互界面
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 🚀 A2UI 工作流核心机制
|
|
16
|
+
|
|
17
|
+
1. **AI 生成数据**：根据 PM 描述生成标准 JSON 数据
|
|
18
|
+
2. **自动写入**：AI 将数据写入 `.a2ui/current.json` 文件
|
|
19
|
+
3. **实时预览**：PM 运行 `prd ui` 在浏览器中查看
|
|
20
|
+
4. **迭代修改**：PM 提出反馈，AI 修改 JSON，PM 刷新浏览器
|
|
21
|
+
5. **正式保存**：PM 确认后，AI 保存到正式目录
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 🏗️ 第一部分：架构图组件（P0/B1/B2 阶段）
|
|
26
|
+
|
|
27
|
+
### 适用场景
|
|
28
|
+
|
|
29
|
+
| 阶段 | 使用场景 |
|
|
30
|
+
|------|---------|
|
|
31
|
+
| **P0** | 项目整体架构、技术架构、干系人关系 |
|
|
32
|
+
| **B1** | 系统模块架构、功能结构 |
|
|
33
|
+
| **B2** | 需求结构图、依赖关系图、优先级矩阵 |
|
|
34
|
+
|
|
35
|
+
### 组件列表
|
|
36
|
+
|
|
37
|
+
| 组件 | 说明 | 属性 |
|
|
38
|
+
|------|------|------|
|
|
39
|
+
| **Diagram** | 架构图容器（紫色渐变背景） | `title`, `children` |
|
|
40
|
+
| **Layer** | 层级分区（水平排列子元素） | `title`, `children` |
|
|
41
|
+
| **DiagramGroup** | 虚线分组框 | `title`, `children` |
|
|
42
|
+
| **Box** | 模块方框 | `title`, `desc`, `color` |
|
|
43
|
+
| **Arrow** | 连接箭头 | `direction`, `label` |
|
|
44
|
+
|
|
45
|
+
### 基础 JSON 结构
|
|
46
|
+
|
|
47
|
+
```json
|
|
48
|
+
{
|
|
49
|
+
"type": "Page",
|
|
50
|
+
"title": "系统架构图",
|
|
51
|
+
"children": [
|
|
52
|
+
{
|
|
53
|
+
"type": "Diagram",
|
|
54
|
+
"title": "产品管理系统架构",
|
|
55
|
+
"children": [
|
|
56
|
+
{
|
|
57
|
+
"type": "Layer",
|
|
58
|
+
"title": "用户层",
|
|
59
|
+
"children": [
|
|
60
|
+
{ "type": "Box", "title": "产品经理", "desc": "需求规划", "color": "#3b82f6" },
|
|
61
|
+
{ "type": "Box", "title": "开发团队", "desc": "技术实现", "color": "#10b981" }
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{ "type": "Arrow", "direction": "down", "label": "需求流转" },
|
|
65
|
+
{
|
|
66
|
+
"type": "DiagramGroup",
|
|
67
|
+
"title": "核心模块",
|
|
68
|
+
"children": [
|
|
69
|
+
{ "type": "Box", "title": "需求管理", "color": "#8b5cf6" },
|
|
70
|
+
{ "type": "Box", "title": "版本规划", "color": "#8b5cf6" }
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 保存规则
|
|
80
|
+
|
|
81
|
+
| 阶段 | 保存位置 |
|
|
82
|
+
|------|---------|
|
|
83
|
+
| **P0** | `00_项目总览/P0_架构图/` |
|
|
84
|
+
| **B1** | `02_迭代记录/第XX轮迭代/B1_架构图/` |
|
|
85
|
+
| **B2** | `02_迭代记录/第XX轮迭代/B2_架构图/` |
|
|
86
|
+
|
|
87
|
+
**保存文件**：`.json` + `.html`
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## 🎨 第二部分：界面原型组件（C1 阶段）
|
|
92
|
+
|
|
93
|
+
### 适用场景
|
|
94
|
+
|
|
95
|
+
| 使用场景 |
|
|
96
|
+
|---------|
|
|
97
|
+
| 表单页面、列表页面、详情页面 |
|
|
98
|
+
| 按钮、输入框、文本展示 |
|
|
99
|
+
| 布局结构（水平/垂直） |
|
|
100
|
+
|
|
101
|
+
### 组件列表
|
|
102
|
+
|
|
103
|
+
#### 布局组件
|
|
104
|
+
|
|
105
|
+
| 组件 | 说明 | 属性 |
|
|
106
|
+
|------|------|------|
|
|
107
|
+
| **Page** | 根节点/页面 | `title`, `children` |
|
|
108
|
+
| **Panel** | 带边框面板 | `title`, `children` |
|
|
109
|
+
| **Row** | 水平布局 | `children` |
|
|
110
|
+
| **Col** | 垂直/列布局 | `children` |
|
|
111
|
+
| **Divider** | 分隔线 | - |
|
|
112
|
+
|
|
113
|
+
#### 表单组件
|
|
114
|
+
|
|
115
|
+
| 组件 | 说明 | 属性 |
|
|
116
|
+
|------|------|------|
|
|
117
|
+
| **Input** | 输入框 | `label`, `placeholder`, `type`, `required` |
|
|
118
|
+
| **Textarea** | 多行输入 | `label`, `placeholder`, `rows` |
|
|
119
|
+
| **Select** | 下拉选择 | `label`, `options` (数组) |
|
|
120
|
+
| **Button** | 按钮 | `text`, `variant` (primary/secondary/success/danger) |
|
|
121
|
+
|
|
122
|
+
#### 展示组件
|
|
123
|
+
|
|
124
|
+
| 组件 | 说明 | 属性 |
|
|
125
|
+
|------|------|------|
|
|
126
|
+
| **Text** | 纯文本 | `content` |
|
|
127
|
+
| **Badge** | 徽章标签 | `text`, `variant` (primary/success/warning/danger) |
|
|
128
|
+
| **Alert** | 提示信息框 | `content`, `variant` (info/success/warning/danger) |
|
|
129
|
+
|
|
130
|
+
#### 数据组件
|
|
131
|
+
|
|
132
|
+
| 组件 | 说明 | 属性 |
|
|
133
|
+
|------|------|------|
|
|
134
|
+
| **Table** | 表格 | `columns`, `data` |
|
|
135
|
+
| **Card** | 卡片列表项 | `title`, `desc`, `actions` |
|
|
136
|
+
| **Tabs** | 标签页导航 | `items` (字符串数组) |
|
|
137
|
+
| **Upload** | 文件上传区 | `text` |
|
|
138
|
+
|
|
139
|
+
### 基础 JSON 结构
|
|
140
|
+
|
|
141
|
+
```json
|
|
142
|
+
{
|
|
143
|
+
"type": "Page",
|
|
144
|
+
"title": "用户登录",
|
|
145
|
+
"children": [
|
|
146
|
+
{
|
|
147
|
+
"type": "Panel",
|
|
148
|
+
"title": "填写账户信息",
|
|
149
|
+
"children": [
|
|
150
|
+
{ "type": "Input", "label": "用户名", "placeholder": "请输入用户名" },
|
|
151
|
+
{ "type": "Input", "label": "密码", "placeholder": "请输入密码" },
|
|
152
|
+
{ "type": "Button", "text": "登录" }
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### 保存规则
|
|
160
|
+
|
|
161
|
+
**保存位置**：`02_迭代记录/第XX轮迭代/C1_UI原型/`
|
|
162
|
+
|
|
163
|
+
**保存文件**：
|
|
164
|
+
- `REQ-001-界面名称.json` - 数据结构
|
|
165
|
+
- `REQ-001-界面名称.html` - 独立预览文件（内嵌渲染器）
|
|
166
|
+
- `index.md` - 索引目录
|
|
167
|
+
|
|
168
|
+
### AI 保存流程
|
|
169
|
+
|
|
170
|
+
```
|
|
171
|
+
1. PM 确认："这个界面可以了"
|
|
172
|
+
↓
|
|
173
|
+
2. AI 询问：请告诉我需求编号（如 REQ-001）
|
|
174
|
+
↓
|
|
175
|
+
3. AI 生成 3 个文件：.json + .html + 更新 index.md
|
|
176
|
+
↓
|
|
177
|
+
4. AI 确认：
|
|
178
|
+
"✅ 界面原型已保存！
|
|
179
|
+
📁 位置：02_迭代记录/第01轮迭代/C1_UI原型/"
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### HTML 预览文件要求
|
|
183
|
+
|
|
184
|
+
1. 包含完整的 CSS 样式
|
|
185
|
+
2. 包含完整的渲染引擎 JS 代码
|
|
186
|
+
3. 内嵌 JSON 数据（不依赖外部文件）
|
|
187
|
+
4. 顶部显示需求编号、界面名称、确认时间
|
|
188
|
+
5. 可以脱离服务器，双击直接打开
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
## 📝 第三部分：通用规范
|
|
193
|
+
|
|
194
|
+
### AI 触发流程
|
|
195
|
+
|
|
196
|
+
```
|
|
197
|
+
1. PM 描述结构/界面
|
|
198
|
+
↓
|
|
199
|
+
2. AI 识别关键词（"系统模块"、"页面"、"表单"等）
|
|
200
|
+
↓
|
|
201
|
+
3. AI 主动提议："让我生成一个可视化的图..."
|
|
202
|
+
↓
|
|
203
|
+
4. AI 生成 JSON 并写入 `.a2ui/current.json`
|
|
204
|
+
↓
|
|
205
|
+
5. AI 提示：👉 请刷新浏览器 (http://localhost:3333) 查看
|
|
206
|
+
↓
|
|
207
|
+
6. PM 反馈 → AI 迭代修改 → PM 确认 → AI 正式保存
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### 在 Markdown 中嵌入预览
|
|
211
|
+
|
|
212
|
+
```markdown
|
|
213
|
+
## 系统架构图
|
|
214
|
+
|
|
215
|
+
> 查看 [系统架构图](./B1_架构图/架构图-系统架构.html)
|
|
216
|
+
|
|
217
|
+
<!-- 或使用 iframe（部分编辑器支持）-->
|
|
218
|
+
<iframe src="./B1_架构图/架构图-系统架构.html" width="100%" height="400"></iframe>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### index.md 索引文件格式
|
|
222
|
+
|
|
223
|
+
```markdown
|
|
224
|
+
# UI 原型索引
|
|
225
|
+
|
|
226
|
+
| 编号 | 名称 | 👁️ 预览 | 📄 数据 | 确认时间 |
|
|
227
|
+
|------|------|--------|--------|---------|
|
|
228
|
+
| REQ-001 | 登录页 | [.html](./REQ-001-登录页.html) | [.json](./REQ-001-登录页.json) | 2025-12-28 |
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
---
|
|
232
|
+
|
|
233
|
+
## 🚫 AI 避坑指南
|
|
234
|
+
|
|
235
|
+
1. **不要编造组件**：只能使用本文档定义的组件
|
|
236
|
+
2. **不要忘记写入**：必须调用 `write_to_file` 写入 `.a2ui/current.json`
|
|
237
|
+
3. **不要跳过保存**：PM 确认后必须正式保存
|
|
238
|
+
4. **不要混淆阶段**：架构图用于 P0/B1/B2，界面原型用于 C1
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
**本文档是所有阶段的 A2UI 统一规范，AI 在任何阶段使用 A2UI 时都应参考此文档。**
|
|
@@ -43,7 +43,7 @@ description: C1 版本需求清单填写工作流
|
|
|
43
43
|
| 3 | 业务规则 | ✅ 必填 | 业务逻辑和约束 |
|
|
44
44
|
| 4 | 验收标准 | ✅ 必填 | 可测试的完成标准 |
|
|
45
45
|
| 5 | 边界情况 | ✅ 必填 | 异常处理和特殊场景 |
|
|
46
|
-
| 6 | 界面示意 (A2UI) | 🚀 推荐 | 结构化 UI 描述，详见 prd-
|
|
46
|
+
| 6 | 界面示意 (A2UI) | 🚀 推荐 | 结构化 UI 描述，详见 prd-a2ui-guide.md |
|
|
47
47
|
| 7 | 非功能需求 | ⚠️ 视情况 | 性能、兼容性、安全等 |
|
|
48
48
|
| 8 | 特殊说明 | ⚠️ 视情况 | PM 强调和注意事项 |
|
|
49
49
|
| 9 | 附加信息 | ⚠️ 视情况 | 来源追溯、讨论记录 |
|
|
@@ -168,7 +168,7 @@ AI: "C1 只能包含 B3 首版范围内的需求项。
|
|
|
168
168
|
对每个需求，按顺序询问：
|
|
169
169
|
1. 需求背景 → 2. 需求描述 → 3. 界面示意 (A2UI) → 4. 业务规则 → 5. 验收标准 → 6. 边界情况 → 7. 非功能需求 → 8. 特殊说明 → 9. 附加信息
|
|
170
170
|
|
|
171
|
-
**界面示意 (A2UI)**：详见 `prd-
|
|
171
|
+
**界面示意 (A2UI)**：详见 `prd-a2ui-guide.md`
|
|
172
172
|
|
|
173
173
|
### Step 3: 完整性检查
|
|
174
174
|
|
|
@@ -215,7 +215,7 @@ AI: "C1_版本需求清单已完成。
|
|
|
215
215
|
|
|
216
216
|
## 相关文档
|
|
217
217
|
|
|
218
|
-
- **A2UI 专项指南**：`prd-
|
|
218
|
+
- **A2UI 专项指南**：`prd-a2ui-guide.md` - 界面示意的详细操作
|
|
219
219
|
- **对话归档模板**：`templates/dialog-template.md`
|
|
220
220
|
|
|
221
221
|
---
|
package/.antigravity/rules.md
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
**执行步骤**：
|
|
44
44
|
1. 识别结构描述 → 2. 主动提议生成图 → 3. 写入 `.a2ui/current.json` → 4. 提示刷新浏览器
|
|
45
45
|
|
|
46
|
-
详见 `.agent/workflows/prd-
|
|
46
|
+
详见 `.agent/workflows/prd-a2ui-guide.md`
|
|
47
47
|
|
|
48
48
|
---
|
|
49
49
|
|
|
@@ -143,7 +143,7 @@ AI 在 C0 写："本版本包含所有 B2 需求" ← 严重错误！
|
|
|
143
143
|
- **保存位置**：`02_迭代记录/第XX轮迭代/C1_UI原型/REQ-XXX-界面名称.json`
|
|
144
144
|
- **必须更新索引**：同时更新 `index.md` 文件，记录所有已确认的原型。
|
|
145
145
|
|
|
146
|
-
**详见**：`.agent/workflows/prd-
|
|
146
|
+
**详见**：`.agent/workflows/prd-a2ui-guide.md`
|
|
147
147
|
|
|
148
148
|
---
|
|
149
149
|
|
|
@@ -302,7 +302,7 @@ C 阶段（版本）
|
|
|
302
302
|
| P0 | `prd-p0-project-info.md` | - | 项目初始化时 |
|
|
303
303
|
| B1 | `prd-b1-planning-draft.md` | - | 填写规划草案时 |
|
|
304
304
|
| B2 | `prd-b2-planning-breakdown.md` | - | 规划拆解时 |
|
|
305
|
-
| C1 | `prd-c1-requirement-list.md` | `prd-
|
|
305
|
+
| C1 | `prd-c1-requirement-list.md` | `prd-a2ui-guide.md` | 填写需求清单时 |
|
|
306
306
|
| R0 | `prd-r0-baseline-review.md` | - | 基线审视时 |
|
|
307
307
|
| R1 | `prd-r1-review.md` | - | 规划审视时 |
|
|
308
308
|
| R2 | `prd-r2-review.md` | - | 版本审视时 |
|
|
@@ -312,11 +312,11 @@ C 阶段（版本）
|
|
|
312
312
|
| 场景 | 使用文件 |
|
|
313
313
|
|------|----------|
|
|
314
314
|
| C1 整体流程、红线、9 个维度 | `prd-c1-requirement-list.md` |
|
|
315
|
-
| 界面示意 (A2UI) 详细操作 | `prd-
|
|
315
|
+
| 界面示意 (A2UI) 详细操作 | `prd-a2ui-guide.md` |
|
|
316
316
|
|
|
317
317
|
**AI 行为**：
|
|
318
318
|
1. 进入 C1 阶段时，先读取 `prd-c1-requirement-list.md` 了解核心规则
|
|
319
|
-
2. 当需要生成界面示意时，参考 `prd-
|
|
319
|
+
2. 当需要生成界面示意时，参考 `prd-a2ui-guide.md` 的详细指导
|
|
320
320
|
3. A2UI 是 C1 的第 6 个维度（推荐），不是必须，但强烈建议执行
|
|
321
321
|
|
|
322
322
|
---
|
package/.cursorrules
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
- **架构图**：`Diagram`, `Layer`, `DiagramGroup`, `Box`, `Arrow`
|
|
58
58
|
- **界面原型**：`Page`, `Panel`, `Row`, `Col`, `Input`, `Button`, `Text`
|
|
59
59
|
|
|
60
|
-
详见 `.agent/workflows/prd-
|
|
60
|
+
详见 `.agent/workflows/prd-a2ui-guide.md`
|
|
61
61
|
|
|
62
62
|
---
|
|
63
63
|
|
|
@@ -198,7 +198,7 @@ AI: "✅ 第 1 批（v1.0）已完成 C3 冻结，可以交付开发。
|
|
|
198
198
|
- **保存位置**：`02_迭代记录/第XX轮迭代/C1_UI原型/REQ-XXX-界面名称.json`
|
|
199
199
|
- **必须更新索引**：同时更新 `index.md` 文件，记录所有已确认的原型。
|
|
200
200
|
|
|
201
|
-
**详见**：`.agent/workflows/prd-
|
|
201
|
+
**详见**：`.agent/workflows/prd-a2ui-guide.md`
|
|
202
202
|
|
|
203
203
|
---
|
|
204
204
|
|
|
@@ -424,7 +424,7 @@ C 阶段（版本）
|
|
|
424
424
|
| P0 | `prd-p0-project-info.md` | - | 项目初始化时 |
|
|
425
425
|
| B1 | `prd-b1-planning-draft.md` | - | 填写规划草案时 |
|
|
426
426
|
| B2 | `prd-b2-planning-breakdown.md` | - | 规划拆解时 |
|
|
427
|
-
| C1 | `prd-c1-requirement-list.md` | `prd-
|
|
427
|
+
| C1 | `prd-c1-requirement-list.md` | `prd-a2ui-guide.md` | 填写需求清单时 |
|
|
428
428
|
| R0 | `prd-r0-baseline-review.md` | - | 基线审视时 |
|
|
429
429
|
| R1 | `prd-r1-review.md` | - | 规划审视时 |
|
|
430
430
|
| R2 | `prd-r2-review.md` | - | 版本审视时 |
|
|
@@ -434,11 +434,11 @@ C 阶段（版本）
|
|
|
434
434
|
| 场景 | 使用文件 |
|
|
435
435
|
|------|----------|
|
|
436
436
|
| C1 整体流程、红线、9 个维度 | `prd-c1-requirement-list.md` |
|
|
437
|
-
| 界面示意 (A2UI) 详细操作 | `prd-
|
|
437
|
+
| 界面示意 (A2UI) 详细操作 | `prd-a2ui-guide.md` |
|
|
438
438
|
|
|
439
439
|
**AI 行为**：
|
|
440
440
|
1. 进入 C1 阶段时，先读取 `prd-c1-requirement-list.md` 了解核心规则
|
|
441
|
-
2. 当需要生成界面示意时，参考 `prd-
|
|
441
|
+
2. 当需要生成界面示意时，参考 `prd-a2ui-guide.md` 的详细指导
|
|
442
442
|
3. A2UI 是 C1 的第 6 个维度（推荐），不是必须，但强烈建议执行
|
|
443
443
|
|
|
444
444
|
---
|