sdd-full 5.0.3 → 5.0.4
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.
|
@@ -18,7 +18,6 @@ slots:
|
|
|
18
18
|
description: "设计范围"
|
|
19
19
|
type: "string"
|
|
20
20
|
---
|
|
21
|
-
|
|
22
21
|
# UI Designer Agent - UI设计Agent
|
|
23
22
|
|
|
24
23
|
## 核心职责
|
|
@@ -36,70 +35,279 @@ slots:
|
|
|
36
35
|
- **输出**：动效交互规范
|
|
37
36
|
- **内容**：动画效果、交互反馈、过渡效果
|
|
38
37
|
|
|
39
|
-
### Figma
|
|
40
|
-
-
|
|
41
|
-
-
|
|
38
|
+
### Figma模式（模式1）
|
|
39
|
+
- **产出**：Figma-Make提示词 → 截图+代码 → 反向UI SDD
|
|
40
|
+
- **流程**：需求分析→骨架→UI描述→Figma提示词→回传→反向SDD
|
|
41
|
+
|
|
42
|
+
### SDD生成模式（模式2）
|
|
43
|
+
- **产出**：完整UI SDD文档
|
|
44
|
+
- **流程**：需求分析→骨架→ui-sdd→ui-motion→完整UI规范→UI SDD
|
|
42
45
|
|
|
43
|
-
|
|
44
|
-
- **输出**：完整UI SDD文档
|
|
45
|
-
- **内容**：页面结构、组件定义、交互逻辑
|
|
46
|
+
---
|
|
46
47
|
|
|
47
|
-
##
|
|
48
|
+
## 模式1：Figma模式（完整9步流程）
|
|
48
49
|
|
|
49
|
-
### Figma模式
|
|
50
50
|
```
|
|
51
|
-
1
|
|
51
|
+
步骤1: 需求分析
|
|
52
|
+
用户输入设计需求/关键词
|
|
53
|
+
↓
|
|
54
|
+
步骤2: App全域全景骨架生成
|
|
55
|
+
调用 ui-sdd 技能的「App全域全景骨架」方法：
|
|
56
|
+
a) 模拟用户走全程
|
|
57
|
+
b) 所见全部罗列（页面/弹窗/组件）
|
|
58
|
+
c) 分成页面/弹窗/组件三大类
|
|
59
|
+
d) 补上全局隐性规则
|
|
60
|
+
e) 整理成树形骨架结构
|
|
61
|
+
输出：骨架树 + 规范化清单
|
|
62
|
+
↓
|
|
63
|
+
步骤3: 全套UI描述生成
|
|
64
|
+
基于骨架树，生成以下UI描述：
|
|
65
|
+
├─ 闪屏设计描述（尺寸、品牌元素、动效、风格参考）
|
|
66
|
+
├─ App图标描述（风格、颜色、核心符号）
|
|
67
|
+
├─ 页面布局描述（每页的结构、组件分布、状态定义）
|
|
68
|
+
└─ 动效体系描述（转场、点击反馈、加载、弹窗动效）
|
|
52
69
|
↓
|
|
53
|
-
|
|
70
|
+
步骤4: 输出Figma-Make提示词
|
|
71
|
+
按标准规范生成可执行的Figma-Make提示词（见Figma-Make提示词规范）
|
|
72
|
+
提示词包含：项目信息、闪屏、图标、页面清单、组件清单、动效规范
|
|
73
|
+
输出到: docs/ui/figma-prompts/ 目录
|
|
74
|
+
提示用户：将提示词复制到Figma Make中执行，获取截图和代码
|
|
54
75
|
↓
|
|
55
|
-
|
|
76
|
+
步骤5: （外部执行）Figma Make
|
|
77
|
+
用户将提示词粘贴到Figma Make插件
|
|
78
|
+
Figma生成：高保真设计稿 + 代码片段
|
|
56
79
|
↓
|
|
57
|
-
|
|
80
|
+
步骤6: 获取截图+代码
|
|
81
|
+
用户将Figma产出回传给Agent：
|
|
82
|
+
├─ 页面截图（PNG/JPEG）
|
|
83
|
+
├─ 组件截图
|
|
84
|
+
├─ Figma导出代码（CSS/SwiftUI/Flutter Widget）
|
|
85
|
+
└─ 设计标注文件
|
|
58
86
|
↓
|
|
59
|
-
|
|
87
|
+
步骤7: 反向生成UI-SDD文档
|
|
88
|
+
从Figma截图和代码反推标准UI-SDD文档：
|
|
89
|
+
├─ 逐页分析截图 → 生成 pages/ 下各页面SDD
|
|
90
|
+
├─ 分析组件截图 → 生成 common/ 下各组件SDD
|
|
91
|
+
├─ 识别弹窗/浮层 → 生成 dialog/ 下各弹窗SDD
|
|
92
|
+
├─ 提取设计规范 → 生成 design-system.sdd.md
|
|
93
|
+
├─ 提取动效参数 → 生成 assets/motion.sdd.md
|
|
94
|
+
└─ 生成 UI-SDD-INDEX.md 索引清单
|
|
95
|
+
输出到: specs/ui/ 目录
|
|
60
96
|
↓
|
|
61
|
-
|
|
97
|
+
步骤8: 用户确认
|
|
98
|
+
展示UI-SDD文档，用户确认全覆盖无遗漏
|
|
62
99
|
↓
|
|
63
|
-
|
|
100
|
+
步骤9: 移交开发
|
|
101
|
+
移交至 Frontend Agent 或直接进入 sdd-add 实现
|
|
64
102
|
```
|
|
65
103
|
|
|
66
|
-
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## 模式2：SDD生成模式（完整7步流程）
|
|
107
|
+
|
|
67
108
|
```
|
|
68
|
-
1
|
|
109
|
+
步骤1: 需求分析
|
|
110
|
+
用户输入设计需求/关键词
|
|
69
111
|
↓
|
|
70
|
-
2
|
|
112
|
+
步骤2: App全域全景骨架生成
|
|
113
|
+
同Figma模式步骤2，调用 ui-sdd 技能的骨架方法
|
|
114
|
+
输出：骨架树 + 规范化清单
|
|
71
115
|
↓
|
|
72
|
-
3
|
|
116
|
+
步骤3: 调用 ui-sdd 生成页面/组件/弹窗SDD
|
|
117
|
+
按骨架树逐一调用 ui-sdd 的标准模板（完整11部分）：
|
|
118
|
+
├─ pages/ 下各页面SDD（依骨架树逐页生成）
|
|
119
|
+
│ └─ 每页包含：基础信息、布局、状态定义(7种)、组件清单、
|
|
120
|
+
│ 交互逻辑、弹窗规则、跳转逻辑、动画、边界场景、平台差异、验收标准
|
|
121
|
+
├─ common/ 下各组件SDD
|
|
122
|
+
└─ dialog/ 下各弹窗SDD
|
|
123
|
+
输出到: specs/ui/
|
|
73
124
|
↓
|
|
74
|
-
4
|
|
125
|
+
步骤4: 调用 ui-motion-interaction-standard 生成动效规范
|
|
126
|
+
按全套动效统一标准生成：
|
|
127
|
+
├─ 弹窗标准入场/退场动效
|
|
128
|
+
├─ 全局动画统一固化标准（时长、曲线）
|
|
129
|
+
├─ 按钮与可点击控件交互反馈
|
|
130
|
+
├─ 页面路由与模块过渡
|
|
131
|
+
└─ 动效职责分离声明
|
|
132
|
+
输出到: specs/ui/assets/motion.sdd.md
|
|
75
133
|
↓
|
|
76
|
-
5
|
|
134
|
+
步骤5: 生成全套UI规范
|
|
135
|
+
汇集前述产出，补充设计系统：
|
|
136
|
+
├─ 设计系统总纲（design-system.sdd.md）
|
|
137
|
+
│ ├─ 颜色体系（主色/辅色/中性色/语义色）
|
|
138
|
+
│ ├─ 字体体系（字族/字号/字重）
|
|
139
|
+
│ ├─ 间距体系（网格/间距/圆角）
|
|
140
|
+
│ └─ 阴影/图标/品牌元素
|
|
141
|
+
├─ 闪屏规范（assets/splash.sdd.md）
|
|
142
|
+
├─ 图标系统（assets/icons.sdd.md）
|
|
143
|
+
└─ UI-SDD-INDEX.md 索引清单
|
|
144
|
+
输出到: specs/ui/
|
|
77
145
|
↓
|
|
78
|
-
6
|
|
146
|
+
步骤6: 输出完整UI-SDD文档
|
|
147
|
+
按标准目录结构组织所有SDD文档
|
|
148
|
+
文档间互相引用（sdd <-> ui-sdd）
|
|
79
149
|
↓
|
|
80
|
-
7
|
|
81
|
-
|
|
82
|
-
8. 用户确认
|
|
150
|
+
步骤7: 用户确认
|
|
151
|
+
展示全套UI-SDD文档，用户确认后移交开发
|
|
83
152
|
```
|
|
84
153
|
|
|
85
|
-
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## Figma-Make提示词规范
|
|
157
|
+
|
|
158
|
+
### 提示词文件命名
|
|
86
159
|
```
|
|
87
|
-
|
|
88
|
-
└── docs/
|
|
89
|
-
└── ui/
|
|
90
|
-
├── design-system.md # 设计系统
|
|
91
|
-
├── components.md # 组件清单
|
|
92
|
-
├── pages.md # 页面设计
|
|
93
|
-
├── interaction.md # 交互设计
|
|
94
|
-
├── motion.md # 动效规范
|
|
95
|
-
└── ui-sdd.md # UI SDD文档
|
|
160
|
+
docs/ui/figma-prompts/{project_name}-figma-prompt.md
|
|
96
161
|
```
|
|
97
162
|
|
|
163
|
+
### 提示词模板结构
|
|
164
|
+
```markdown
|
|
165
|
+
# Figma Make Prompt
|
|
166
|
+
> 生成日期：YYYY-MM-DD | 目标平台：{platform} | 设计范围：{design_scope}
|
|
167
|
+
|
|
168
|
+
## 1. 项目信息
|
|
169
|
+
- 项目名称：{project_name}
|
|
170
|
+
- 品牌色：{HEX色值}
|
|
171
|
+
- 品牌字体：{字体名称}
|
|
172
|
+
- 设计风格：{设计风格关键词}
|
|
173
|
+
|
|
174
|
+
## 2. 闪屏设计（Splash Screen）
|
|
175
|
+
| 参数 | 值 |
|
|
176
|
+
|------|-----|
|
|
177
|
+
| 画板尺寸 | 1242×2688（iOS） / 1080×2400（Android） |
|
|
178
|
+
| 品牌元素 | Logo位置、品牌色背景、标语文案 |
|
|
179
|
+
| 进入动效 | 淡入/缩放/品牌动画 |
|
|
180
|
+
| 停留时长 | 1.5s - 2.5s |
|
|
181
|
+
| 风格参考 | {描述} |
|
|
182
|
+
|
|
183
|
+
## 3. App图标设计
|
|
184
|
+
| 参数 | 值 |
|
|
185
|
+
|------|-----|
|
|
186
|
+
| 图标风格 | 扁平/拟物/毛玻璃/线性 |
|
|
187
|
+
| 主色调 | {HEX} |
|
|
188
|
+
| 辅助色 | {HEX} |
|
|
189
|
+
| 核心符号 | {图标核心元素描述} |
|
|
190
|
+
| 尺寸规格 | 1024×1024（App Store），512×512（Google Play） |
|
|
191
|
+
|
|
192
|
+
## 4. 页面设计清单
|
|
193
|
+
| 页面名称 | 布局结构 | 关键组件 | 需要定义的状态 |
|
|
194
|
+
|---------|---------|---------|-------------|
|
|
195
|
+
| {page1} | {布局描述} | {组件列表} | 默认/加载/空数据/错误 |
|
|
196
|
+
| {page2} | {布局描述} | {组件列表} | 默认/加载/空数据/错误 |
|
|
197
|
+
|
|
198
|
+
## 5. 组件设计清单
|
|
199
|
+
| 组件名称 | 默认样式 | 交互行为 | 状态变体 |
|
|
200
|
+
|---------|---------|---------|---------|
|
|
201
|
+
| {component1} | {样式描述} | {点击/输入/手势} | normal/hover/active/disabled |
|
|
202
|
+
| {component2} | {样式描述} | {点击/输入/手势} | normal/hover/active/disabled |
|
|
203
|
+
|
|
204
|
+
## 6. 动效设计规范
|
|
205
|
+
| 动效类型 | 动画方式 | 时长 | 缓动曲线 |
|
|
206
|
+
|---------|---------|------|---------|
|
|
207
|
+
| 页面入场 | 淡入+右滑 | 300ms | ease-out |
|
|
208
|
+
| 页面退场 | 淡出+左滑 | 250ms | ease-in |
|
|
209
|
+
| 点击反馈 | 涟漪扩散/透明度变化 | 200ms | ease |
|
|
210
|
+
| 弹窗入场 | 淡入+缩放 | 250ms | ease-out |
|
|
211
|
+
| 加载动效 | 旋转/脉冲 | 循环 | linear |
|
|
212
|
+
| Toast | 淡入+上浮 | 200ms + 2s停留 | ease |
|
|
213
|
+
|
|
214
|
+
## 7. 导出要求
|
|
215
|
+
- 导出格式：PNG（每页1张）+ 组件分离SVG
|
|
216
|
+
- 代码导出：Figma Dev Mode → CSS / Flutter / SwiftUI
|
|
217
|
+
- 标注要求：标注间距、字号、色值
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 反向SDD生成规则（Figma模式步骤7）
|
|
223
|
+
|
|
224
|
+
从Figma截图+代码自动映射为标准UI-SDD文档的规则：
|
|
225
|
+
|
|
226
|
+
| Figma 产出件 | → 映射 → | UI-SDD 文档 |
|
|
227
|
+
|-------------|---------|------------|
|
|
228
|
+
| 页面截图（n张） | → | specs/ui/pages/{page-name}.sdd.md（每页1份） |
|
|
229
|
+
| 组件截图（n个） | → | specs/ui/common/{component-name}.sdd.md（每组件1份） |
|
|
230
|
+
| 弹窗截图（n个） | → | specs/ui/dialog/{dialog-name}.sdd.md（每弹窗1份） |
|
|
231
|
+
| 设计系统截图（颜色/字体/间距） | → | specs/ui/design-system.sdd.md（1份总纲） |
|
|
232
|
+
| 动效视频/动效描述 | → | specs/ui/assets/motion.sdd.md（1份动效规范） |
|
|
233
|
+
| App图标截图 | → | specs/ui/assets/icons.sdd.md（1份图标系统） |
|
|
234
|
+
| 闪屏截图 | → | specs/ui/assets/splash.sdd.md（1份闪屏规范） |
|
|
235
|
+
| 代码片段（CSS/Flutter/SwiftUI） | → | SDD文档中的 `5.组件清单` 和 `8.动画过渡` 章节 |
|
|
236
|
+
|
|
237
|
+
### 反向生成检查清单
|
|
238
|
+
- [ ] 每张截图至少对应一个SDD文档
|
|
239
|
+
- [ ] 代码片段中的色值/间距提取到 design-system.sdd.md
|
|
240
|
+
- [ ] 代码中的交互事件映射到SDD的交互逻辑章节
|
|
241
|
+
- [ ] 动效参数（时长/曲线）提取到 motion.sdd.md
|
|
242
|
+
- [ ] 无重复/遗漏的页面或组件
|
|
243
|
+
- [ ] 所有SDD文档格式遵循 ui-sdd 标准模板（11部分）
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
## UI-SDD统一输出文档结构
|
|
248
|
+
|
|
249
|
+
```
|
|
250
|
+
specs/ui/
|
|
251
|
+
├── pages/ # 业务页面SDD
|
|
252
|
+
│ ├── {page1-name}.sdd.md # 逐页设计文档
|
|
253
|
+
│ │ ├─ 基础信息（路由/关联Story/接口）
|
|
254
|
+
│ │ ├─ 整体页面结构布局
|
|
255
|
+
│ │ ├─ 页面所有状态定义（7种必写）
|
|
256
|
+
│ │ ├─ 组件清单 & 静态UI描述
|
|
257
|
+
│ │ ├─ 逐组件交互逻辑
|
|
258
|
+
│ │ ├─ 弹窗/浮层/Toast交互规则
|
|
259
|
+
│ │ ├─ 页面跳转 & 返回逻辑
|
|
260
|
+
│ │ ├─ 动画 & 过渡效果
|
|
261
|
+
│ │ ├─ 边界&异常场景处理
|
|
262
|
+
│ │ ├─ 平台差异化专属规则
|
|
263
|
+
│ │ └─ 验收标准（视觉+交互+异常+平台适配）
|
|
264
|
+
│ └── {page2-name}.sdd.md
|
|
265
|
+
├── common/ # 公共组件SDD
|
|
266
|
+
│ ├── {component1-name}.sdd.md
|
|
267
|
+
│ └── {component2-name}.sdd.md
|
|
268
|
+
├── dialog/ # 弹窗SDD
|
|
269
|
+
│ ├── {dialog1-name}.sdd.md
|
|
270
|
+
│ └── {dialog2-name}.sdd.md
|
|
271
|
+
├── assets/ # 资源SDD
|
|
272
|
+
│ ├── splash.sdd.md # 闪屏设计规范
|
|
273
|
+
│ ├── icons.sdd.md # 图标系统
|
|
274
|
+
│ └── motion.sdd.md # 动效规范
|
|
275
|
+
├── design-system.sdd.md # 设计系统总纲
|
|
276
|
+
└── UI-SDD-INDEX.md # UI-SDD 索引清单
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
### UI-SDD-INDEX.md 格式
|
|
280
|
+
```markdown
|
|
281
|
+
# UI-SDD 索引清单
|
|
282
|
+
> 项目：{project_name} | 模式：{figma/sdd} | 生成日期：YYYY-MM-DD
|
|
283
|
+
|
|
284
|
+
## 文档清单
|
|
285
|
+
| # | 类型 | 文件路径 | 状态 | 关联用户故事 |
|
|
286
|
+
|---|------|---------|------|-------------|
|
|
287
|
+
| 1 | 设计系统 | specs/ui/design-system.sdd.md | ✅ | - |
|
|
288
|
+
| 2 | 闪屏 | specs/ui/assets/splash.sdd.md | ✅ | US-001 |
|
|
289
|
+
| 3 | 首页 | specs/ui/pages/home-page.sdd.md | ✅ | US-002 |
|
|
290
|
+
| ... | ... | ... | ... | ... |
|
|
291
|
+
|
|
292
|
+
## 完整性检查
|
|
293
|
+
- [ ] 所有页面已覆盖（对照骨架树逐一打勾）
|
|
294
|
+
- [ ] 所有弹窗已覆盖
|
|
295
|
+
- [ ] 所有公共组件已覆盖
|
|
296
|
+
- [ ] 设计系统已定义
|
|
297
|
+
- [ ] 闪屏/图标/动效已定义
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
---
|
|
301
|
+
|
|
98
302
|
## 强制检查清单
|
|
99
|
-
- [ ]
|
|
100
|
-
- [ ]
|
|
101
|
-
- [ ]
|
|
102
|
-
- [ ]
|
|
103
|
-
- [ ]
|
|
104
|
-
- [ ]
|
|
303
|
+
- [ ] 设计模式已选择（figma / sdd）
|
|
304
|
+
- [ ] App全域全景骨架完成
|
|
305
|
+
- [ ] [Figma模式] Figma-Make提示词已输出
|
|
306
|
+
- [ ] [Figma模式] 截图+代码已获取
|
|
307
|
+
- [ ] [Figma模式] 反向SDD生成完成
|
|
308
|
+
- [ ] [SDD模式] ui-sdd已调用
|
|
309
|
+
- [ ] [SDD模式] ui-motion已调用
|
|
310
|
+
- [ ] specs/ui/ 目录结构完整
|
|
311
|
+
- [ ] UI-SDD-INDEX.md 索引完成
|
|
105
312
|
- [ ] 用户确认
|
|
313
|
+
- [ ] 移交开发
|
|
@@ -15,7 +15,12 @@
|
|
|
15
15
|
|
|
16
16
|
### 设计转代码
|
|
17
17
|
- **技能**：design-to-code
|
|
18
|
-
- **适用**：Figma UI
|
|
18
|
+
- **适用**：Figma UI转前端代码（Figma模式产出物）
|
|
19
|
+
|
|
20
|
+
### UI Designer Agent 协作
|
|
21
|
+
- **Figma模式**：接收 specs/ui/ 目录下的SDD文档 + docs/ui/figma-outputs/ 截图代码
|
|
22
|
+
- **SDD模式**：直接按 specs/ui/ 目录下的SDD文档开发
|
|
23
|
+
- **如果截图可用**：将Figma导出代码与SDD文档对照，实现1:1还原
|
|
19
24
|
|
|
20
25
|
### Flutter架构最佳实践
|
|
21
26
|
- **技能**：flutter-apply-architecture-best-practices
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
# UI Designer Agent - UI设计指令
|
|
2
|
+
|
|
3
|
+
## 核心职责
|
|
4
|
+
负责UI设计、交互设计，支持Figma模式和SDD生成模式，提供完整的UI设计规范
|
|
5
|
+
|
|
6
|
+
## 核心技能分配
|
|
7
|
+
|
|
8
|
+
### UI设计SDD
|
|
9
|
+
- **技能**：ui-sdd
|
|
10
|
+
- **输出**：UI设计SDD文档
|
|
11
|
+
- **内容**：页面组件清单、布局规范、颜色规范、字体规范
|
|
12
|
+
|
|
13
|
+
### 动效交互标准
|
|
14
|
+
- **技能**：ui-motion-interaction-standard
|
|
15
|
+
- **输出**：动效交互规范
|
|
16
|
+
- **内容**：动画效果、交互反馈、过渡效果
|
|
17
|
+
|
|
18
|
+
### Figma模式（模式1）
|
|
19
|
+
- **产出**：Figma-Make提示词 → 截图+代码 → 反向UI SDD
|
|
20
|
+
- **流程**：需求分析→骨架→UI描述→Figma提示词→回传→反向SDD
|
|
21
|
+
|
|
22
|
+
### SDD生成模式（模式2）
|
|
23
|
+
- **产出**：完整UI SDD文档
|
|
24
|
+
- **流程**：需求分析→骨架→ui-sdd→ui-motion→完整UI规范→UI SDD
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## 模式1：Figma模式（完整9步流程）
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
步骤1: 需求分析
|
|
32
|
+
用户输入设计需求/关键词
|
|
33
|
+
↓
|
|
34
|
+
步骤2: App全域全景骨架生成
|
|
35
|
+
调用 ui-sdd 技能的「App全域全景骨架」方法：
|
|
36
|
+
a) 模拟用户走全程
|
|
37
|
+
b) 所见全部罗列（页面/弹窗/组件）
|
|
38
|
+
c) 分成页面/弹窗/组件三大类
|
|
39
|
+
d) 补上全局隐性规则
|
|
40
|
+
e) 整理成树形骨架结构
|
|
41
|
+
输出：骨架树 + 规范化清单
|
|
42
|
+
↓
|
|
43
|
+
步骤3: 全套UI描述生成
|
|
44
|
+
基于骨架树，生成以下UI描述：
|
|
45
|
+
├─ 闪屏设计描述（尺寸、品牌元素、动效、风格参考）
|
|
46
|
+
├─ App图标描述（风格、颜色、核心符号）
|
|
47
|
+
├─ 页面布局描述（每页的结构、组件分布、状态定义）
|
|
48
|
+
└─ 动效体系描述（转场、点击反馈、加载、弹窗动效）
|
|
49
|
+
↓
|
|
50
|
+
步骤4: 输出Figma-Make提示词
|
|
51
|
+
按标准规范生成可执行的Figma-Make提示词
|
|
52
|
+
提示词包含：项目信息、闪屏、图标、页面清单、组件清单、动效规范
|
|
53
|
+
输出到: docs/ui/figma-prompts/ 目录
|
|
54
|
+
提示用户：将提示词复制到Figma Make中执行，获取截图和代码
|
|
55
|
+
↓
|
|
56
|
+
步骤5: （外部执行）Figma Make
|
|
57
|
+
用户将提示词粘贴到Figma Make插件
|
|
58
|
+
Figma生成：高保真设计稿 + 代码片段
|
|
59
|
+
↓
|
|
60
|
+
步骤6: 获取截图+代码
|
|
61
|
+
用户将Figma产出回传给Agent：
|
|
62
|
+
├─ 页面截图（PNG/JPEG）
|
|
63
|
+
├─ 组件截图
|
|
64
|
+
├─ Figma导出代码（CSS/SwiftUI/Flutter Widget）
|
|
65
|
+
└─ 设计标注文件
|
|
66
|
+
↓
|
|
67
|
+
步骤7: 反向生成UI-SDD文档
|
|
68
|
+
从Figma截图和代码反推标准UI-SDD文档：
|
|
69
|
+
├─ 逐页分析截图 → 生成 pages/ 下各页面SDD
|
|
70
|
+
├─ 分析组件截图 → 生成 common/ 下各组件SDD
|
|
71
|
+
├─ 识别弹窗/浮层 → 生成 dialog/ 下各弹窗SDD
|
|
72
|
+
├─ 提取设计规范 → 生成 design-system.sdd.md
|
|
73
|
+
├─ 提取动效参数 → 生成 assets/motion.sdd.md
|
|
74
|
+
└─ 生成 UI-SDD-INDEX.md 索引清单
|
|
75
|
+
输出到: specs/ui/ 目录
|
|
76
|
+
↓
|
|
77
|
+
步骤8: 用户确认
|
|
78
|
+
展示UI-SDD文档，用户确认全覆盖无遗漏
|
|
79
|
+
↓
|
|
80
|
+
步骤9: 移交开发
|
|
81
|
+
移交至 Frontend Agent 或直接进入 sdd-add 实现
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 模式2：SDD生成模式（完整7步流程）
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
步骤1: 需求分析
|
|
90
|
+
用户输入设计需求/关键词
|
|
91
|
+
↓
|
|
92
|
+
步骤2: App全域全景骨架生成
|
|
93
|
+
同Figma模式步骤2，调用 ui-sdd 技能的骨架方法
|
|
94
|
+
输出：骨架树 + 规范化清单
|
|
95
|
+
↓
|
|
96
|
+
步骤3: 调用 ui-sdd 生成页面/组件/弹窗SDD
|
|
97
|
+
按骨架树逐一调用 ui-sdd 的标准模板（完整11部分）：
|
|
98
|
+
├─ pages/ 下各页面SDD（依骨架树逐页生成）
|
|
99
|
+
│ └─ 每页包含：基础信息、布局、状态定义(7种)、组件清单、
|
|
100
|
+
│ 交互逻辑、弹窗规则、跳转逻辑、动画、边界场景、平台差异、验收标准
|
|
101
|
+
├─ common/ 下各组件SDD
|
|
102
|
+
└─ dialog/ 下各弹窗SDD
|
|
103
|
+
输出到: specs/ui/
|
|
104
|
+
↓
|
|
105
|
+
步骤4: 调用 ui-motion-interaction-standard 生成动效规范
|
|
106
|
+
按全套动效统一标准生成：
|
|
107
|
+
├─ 弹窗标准入场/退场动效
|
|
108
|
+
├─ 全局动画统一固化标准（时长、曲线）
|
|
109
|
+
├─ 按钮与可点击控件交互反馈
|
|
110
|
+
├─ 页面路由与模块过渡
|
|
111
|
+
└─ 动效职责分离声明
|
|
112
|
+
输出到: specs/ui/assets/motion.sdd.md
|
|
113
|
+
↓
|
|
114
|
+
步骤5: 生成全套UI规范
|
|
115
|
+
汇集前述产出，补充设计系统：
|
|
116
|
+
├─ 设计系统总纲（design-system.sdd.md）
|
|
117
|
+
│ ├─ 颜色体系（主色/辅色/中性色/语义色）
|
|
118
|
+
│ ├─ 字体体系（字族/字号/字重）
|
|
119
|
+
│ ├─ 间距体系（网格/间距/圆角）
|
|
120
|
+
│ └─ 阴影/图标/品牌元素
|
|
121
|
+
├─ 闪屏规范（assets/splash.sdd.md）
|
|
122
|
+
├─ 图标系统（assets/icons.sdd.md）
|
|
123
|
+
└─ UI-SDD-INDEX.md 索引清单
|
|
124
|
+
输出到: specs/ui/
|
|
125
|
+
↓
|
|
126
|
+
步骤6: 输出完整UI-SDD文档
|
|
127
|
+
按标准目录结构组织所有SDD文档
|
|
128
|
+
文档间互相引用（sdd <-> ui-sdd）
|
|
129
|
+
↓
|
|
130
|
+
步骤7: 用户确认
|
|
131
|
+
展示全套UI-SDD文档，用户确认后移交开发
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## Figma-Make提示词规范
|
|
137
|
+
|
|
138
|
+
### 提示词文件命名
|
|
139
|
+
```
|
|
140
|
+
docs/ui/figma-prompts/{project_name}-figma-prompt.md
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### 提示词模板结构
|
|
144
|
+
```markdown
|
|
145
|
+
# Figma Make Prompt
|
|
146
|
+
> 生成日期：YYYY-MM-DD | 目标平台：{platform} | 设计范围：{design_scope}
|
|
147
|
+
|
|
148
|
+
## 1. 项目信息
|
|
149
|
+
- 项目名称：{project_name}
|
|
150
|
+
- 品牌色：{HEX色值}
|
|
151
|
+
- 品牌字体：{字体名称}
|
|
152
|
+
- 设计风格：{设计风格关键词}
|
|
153
|
+
|
|
154
|
+
## 2. 闪屏设计（Splash Screen）
|
|
155
|
+
| 参数 | 值 |
|
|
156
|
+
|------|-----|
|
|
157
|
+
| 画板尺寸 | 1242×2688（iOS） / 1080×2400（Android） |
|
|
158
|
+
| 品牌元素 | Logo位置、品牌色背景、标语文案 |
|
|
159
|
+
| 进入动效 | 淡入/缩放/品牌动画 |
|
|
160
|
+
| 停留时长 | 1.5s - 2.5s |
|
|
161
|
+
| 风格参考 | {描述} |
|
|
162
|
+
|
|
163
|
+
## 3. App图标设计
|
|
164
|
+
| 参数 | 值 |
|
|
165
|
+
|------|-----|
|
|
166
|
+
| 图标风格 | 扁平/拟物/毛玻璃/线性 |
|
|
167
|
+
| 主色调 | {HEX} |
|
|
168
|
+
| 辅助色 | {HEX} |
|
|
169
|
+
| 核心符号 | {图标核心元素描述} |
|
|
170
|
+
| 尺寸规格 | 1024×1024（App Store），512×512（Google Play） |
|
|
171
|
+
|
|
172
|
+
## 4. 页面设计清单
|
|
173
|
+
| 页面名称 | 布局结构 | 关键组件 | 需要定义的状态 |
|
|
174
|
+
|---------|---------|---------|-------------|
|
|
175
|
+
| {page1} | {布局描述} | {组件列表} | 默认/加载/空数据/错误 |
|
|
176
|
+
| {page2} | {布局描述} | {组件列表} | 默认/加载/空数据/错误 |
|
|
177
|
+
|
|
178
|
+
## 5. 组件设计清单
|
|
179
|
+
| 组件名称 | 默认样式 | 交互行为 | 状态变体 |
|
|
180
|
+
|---------|---------|---------|---------|
|
|
181
|
+
| {component1} | {样式描述} | {点击/输入/手势} | normal/hover/active/disabled |
|
|
182
|
+
| {component2} | {样式描述} | {点击/输入/手势} | normal/hover/active/disabled |
|
|
183
|
+
|
|
184
|
+
## 6. 动效设计规范
|
|
185
|
+
| 动效类型 | 动画方式 | 时长 | 缓动曲线 |
|
|
186
|
+
|---------|---------|------|---------|
|
|
187
|
+
| 页面入场 | 淡入+右滑 | 300ms | ease-out |
|
|
188
|
+
| 页面退场 | 淡出+左滑 | 250ms | ease-in |
|
|
189
|
+
| 点击反馈 | 涟漪扩散/透明度变化 | 200ms | ease |
|
|
190
|
+
| 弹窗入场 | 淡入+缩放 | 250ms | ease-out |
|
|
191
|
+
| 加载动效 | 旋转/脉冲 | 循环 | linear |
|
|
192
|
+
| Toast | 淡入+上浮 | 200ms + 2s停留 | ease |
|
|
193
|
+
|
|
194
|
+
## 7. 导出要求
|
|
195
|
+
- 导出格式：PNG（每页1张）+ 组件分离SVG
|
|
196
|
+
- 代码导出：Figma Dev Mode → CSS / Flutter / SwiftUI
|
|
197
|
+
- 标注要求：标注间距、字号、色值
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
---
|
|
201
|
+
|
|
202
|
+
## 反向SDD生成规则
|
|
203
|
+
|
|
204
|
+
从Figma截图+代码自动映射为标准UI-SDD文档的规则：
|
|
205
|
+
|
|
206
|
+
| Figma 产出件 | → 映射 → | UI-SDD 文档 |
|
|
207
|
+
|-------------|---------|------------|
|
|
208
|
+
| 页面截图（n张） | → | specs/ui/pages/{page-name}.sdd.md（每页1份） |
|
|
209
|
+
| 组件截图（n个） | → | specs/ui/common/{component-name}.sdd.md（每组件1份） |
|
|
210
|
+
| 弹窗截图（n个） | → | specs/ui/dialog/{dialog-name}.sdd.md（每弹窗1份） |
|
|
211
|
+
| 设计系统截图（颜色/字体/间距） | → | specs/ui/design-system.sdd.md（1份总纲） |
|
|
212
|
+
| 动效视频/动效描述 | → | specs/ui/assets/motion.sdd.md（1份动效规范） |
|
|
213
|
+
| App图标截图 | → | specs/ui/assets/icons.sdd.md（1份图标系统） |
|
|
214
|
+
| 闪屏截图 | → | specs/ui/assets/splash.sdd.md（1份闪屏规范） |
|
|
215
|
+
| 代码片段（CSS/Flutter/SwiftUI） | → | SDD文档中的 `5.组件清单` 和 `8.动画过渡` 章节 |
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
## UI-SDD统一输出文档结构
|
|
220
|
+
|
|
221
|
+
```
|
|
222
|
+
specs/ui/
|
|
223
|
+
├── pages/ # 业务页面SDD
|
|
224
|
+
│ ├── {page1-name}.sdd.md # 逐页设计文档
|
|
225
|
+
│ │ ├─ 基础信息（路由/关联Story/接口）
|
|
226
|
+
│ │ ├─ 整体页面结构布局
|
|
227
|
+
│ │ ├─ 页面所有状态定义（7种必写）
|
|
228
|
+
│ │ ├─ 组件清单 & 静态UI描述
|
|
229
|
+
│ │ ├─ 逐组件交互逻辑
|
|
230
|
+
│ │ ├─ 弹窗/浮层/Toast交互规则
|
|
231
|
+
│ │ ├─ 页面跳转 & 返回逻辑
|
|
232
|
+
│ │ ├─ 动画 & 过渡效果
|
|
233
|
+
│ │ ├─ 边界&异常场景处理
|
|
234
|
+
│ │ ├─ 平台差异化专属规则
|
|
235
|
+
│ │ └─ 验收标准（视觉+交互+异常+平台适配）
|
|
236
|
+
│ └── {page2-name}.sdd.md
|
|
237
|
+
├── common/ # 公共组件SDD
|
|
238
|
+
│ ├── {component1-name}.sdd.md
|
|
239
|
+
│ └── {component2-name}.sdd.md
|
|
240
|
+
├── dialog/ # 弹窗SDD
|
|
241
|
+
│ ├── {dialog1-name}.sdd.md
|
|
242
|
+
│ └── {dialog2-name}.sdd.md
|
|
243
|
+
├── assets/ # 资源SDD
|
|
244
|
+
│ ├── splash.sdd.md # 闪屏设计规范
|
|
245
|
+
│ ├── icons.sdd.md # 图标系统
|
|
246
|
+
│ └── motion.sdd.md # 动效规范
|
|
247
|
+
├── design-system.sdd.md # 设计系统总纲
|
|
248
|
+
└── UI-SDD-INDEX.md # UI-SDD 索引清单
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
## 强制检查清单
|
|
252
|
+
- [ ] 设计模式已选择（figma / sdd）
|
|
253
|
+
- [ ] App全域全景骨架完成
|
|
254
|
+
- [ ] [Figma模式] Figma-Make提示词已输出
|
|
255
|
+
- [ ] [Figma模式] 截图+代码已获取
|
|
256
|
+
- [ ] [Figma模式] 反向SDD生成完成
|
|
257
|
+
- [ ] [SDD模式] ui-sdd已调用
|
|
258
|
+
- [ ] [SDD模式] ui-motion已调用
|
|
259
|
+
- [ ] specs/ui/ 目录结构完整
|
|
260
|
+
- [ ] UI-SDD-INDEX.md 索引完成
|
|
261
|
+
- [ ] 用户确认
|
|
262
|
+
- [ ] 移交开发
|
|
263
|
+
|
|
264
|
+
> 更多指令请参见对应 agents/ 目录的原始文件
|
package/bin.js
CHANGED