sdd-full 5.0.4 → 5.0.6

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.
@@ -16,7 +16,7 @@
16
16
  - **内容**:动画效果、交互反馈、过渡效果
17
17
 
18
18
  ### Figma模式(模式1)
19
- - **产出**:Figma-Make提示词 → 截图+代码 → 反向UI SDD
19
+ - **产出**:Figma-Make提示词 → 代码压缩包+基准截图 → 反向UI SDD
20
20
  - **流程**:需求分析→骨架→UI描述→Figma提示词→回传→反向SDD
21
21
 
22
22
  ### SDD生成模式(模式2)
@@ -48,29 +48,33 @@
48
48
  └─ 动效体系描述(转场、点击反馈、加载、弹窗动效)
49
49
 
50
50
  步骤4: 输出Figma-Make提示词
51
- 按标准规范生成可执行的Figma-Make提示词
51
+ 按标准规范生成可执行的Figma-Make提示词(见Figma-Make提示词规范)
52
52
  提示词包含:项目信息、闪屏、图标、页面清单、组件清单、动效规范
53
53
  输出到: docs/ui/figma-prompts/ 目录
54
- 提示用户:将提示词复制到Figma Make中执行,获取截图和代码
54
+ 提示用户:将提示词复制到Figma Make中执行,获取代码压缩包
55
55
 
56
56
  步骤5: (外部执行)Figma Make
57
57
  用户将提示词粘贴到Figma Make插件
58
- Figma生成:高保真设计稿 + 代码片段
58
+ Figma生成:高保真设计稿 + 完整代码压缩包
59
59
 
60
- 步骤6: 获取截图+代码
60
+ 步骤6: 获取代码压缩包 + 基准截图
61
61
  用户将Figma产出回传给Agent:
62
- ├─ 页面截图(PNG/JPEG
63
- ├─ 组件截图
64
- ├─ Figma导出代码(CSS/SwiftUI/Flutter Widget)
65
- └─ 设计标注文件
62
+ ├─ Figma Make 生成的完整代码压缩包(ZIP/RAR
63
+ │ └─ 包含:页面代码、组件代码、样式文件、资源文件
64
+ ├─ 基准截图(PNG/JPEG,仅用于验证,不作为主要信息源)
65
+ └─ 包含:闪屏、首页、关键页面
66
+ └─ (可选)设计标注文件
66
67
 
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
68
+ 步骤7: 从代码压缩包反向生成UI-SDD文档
69
+ 解析代码压缩包为标准UI-SDD文档(截图仅作基准验证):
70
+ ├─ 解析压缩包结构识别页面/组件/资源组织
71
+ ├─ 分析页面代码 → 生成 pages/ 下各页面SDD
72
+ ├─ 分析组件代码 → 生成 common/ 下各组件SDD
73
+ ├─ 识别弹窗/浮层代码 → 生成 dialog/ 下各弹窗SDD
74
+ ├─ 提取样式规范(色值/间距/字体) → 生成 design-system.sdd.md
75
+ ├─ 提取动效代码(动画/过渡/交互) → 生成 assets/motion.sdd.md
76
+ ├─ 识别闪屏/图标资源 → 生成 assets/splash.sdd.md + assets/icons.sdd.md
77
+ ├─ 使用基准截图验证生成的SDD准确性
74
78
  └─ 生成 UI-SDD-INDEX.md 索引清单
75
79
  输出到: specs/ui/ 目录
76
80
 
@@ -193,26 +197,61 @@ docs/ui/figma-prompts/{project_name}-figma-prompt.md
193
197
 
194
198
  ## 7. 导出要求
195
199
  - 导出格式:PNG(每页1张)+ 组件分离SVG
196
- - 代码导出:Figma Dev Mode CSS / Flutter / SwiftUI
200
+ - 代码导出:Figma Make完整代码压缩包(ZIP)
197
201
  - 标注要求:标注间距、字号、色值
198
202
  ```
199
203
 
200
204
  ---
201
205
 
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.md1份总纲) |
212
- | 动效视频/动效描述 | → | specs/ui/assets/motion.sdd.md1份动效规范) |
213
- | App图标截图 | → | specs/ui/assets/icons.sdd.md(1份图标系统) |
214
- | 闪屏截图 | → | specs/ui/assets/splash.sdd.md(1份闪屏规范) |
215
- | 代码片段(CSS/Flutter/SwiftUI) | → | SDD文档中的 `5.组件清单` 和 `8.动画过渡` 章节 |
206
+ ## 反向SDD生成规则(Figma模式步骤7)
207
+
208
+ 从Figma代码压缩包解析为标准UI-SDD文档的规则(截图仅作基准验证):
209
+
210
+ ### 代码压缩包解析规范
211
+
212
+ | 压缩包内容 | → 解析 → | UI-SDD 文档 |
213
+ |-----------|---------|------------|
214
+ | 页面代码文件(.dart/.html/.swift) | → | specs/ui/pages/{page-name}.sdd.md(每页1份) |
215
+ | 组件代码文件(.dart/.css/.swift) | → | specs/ui/common/{component-name}.sdd.md(每组件1份) |
216
+ | 弹窗/浮层代码 | → | specs/ui/dialog/{dialog-name}.sdd.md(每弹窗1份) |
217
+ | 样式文件(.css/.scss/Theme定义) | → | specs/ui/design-system.sdd.md(1份总纲) |
218
+ | 动画/过渡代码(Controller/AnimatedBuilder) | → | specs/ui/assets/motion.sdd.md(1份动效规范) |
219
+ | 图标资源文件(.png/.svg) | → | specs/ui/assets/icons.sdd.md(1份图标系统) |
220
+ | 闪屏/启动页代码 | → | specs/ui/assets/splash.sdd.md(1份闪屏规范) |
221
+ | 基准截图 | → | 仅用于验证SDD准确性,不作主要信息源 |
222
+
223
+ ### 代码解析规则
224
+
225
+ | 代码类型 | 提取内容 | 映射到SDD章节 |
226
+ |---------|---------|-------------|
227
+ | 页面Widget/Component | 布局结构、组件树、状态管理 | 2.整体页面结构布局 |
228
+ | 状态变量(loading/error/empty) | 所有状态变体定义 | 3.页面所有状态定义(7种必写) |
229
+ | 组件调用列表 | 组件清单、属性配置 | 4.组件清单 & 静态UI描述 |
230
+ | 事件处理(onPressed/onTap) | 交互逻辑、事件流程 | 5.逐组件交互逻辑 |
231
+ | 路由跳转(Navigator.push) | 跳转规则、参数传递 | 7.页面跳转 & 返回逻辑 |
232
+ | 动画代码(AnimatedContainer) | 动画参数、时长曲线 | 8.动画 & 过渡效果 |
233
+ | 条件渲染(if/else) | 边界场景、异常处理 | 9.边界&异常场景处理 |
234
+ | 平台判断(Platform.isIOS) | 平台差异化处理 | 10.平台差异化专属规则 |
235
+ | 样式常量(颜色/间距/字体) | 设计系统规范 | design-system.sdd.md |
236
+
237
+ ### 基准截图验证规则
238
+
239
+ | 截图类型 | 验证内容 |
240
+ |---------|---------|
241
+ | 闪屏截图 | 验证闪屏SDD中的品牌元素、颜色、尺寸 |
242
+ | 首页截图 | 验证首页布局结构、组件位置、视觉风格 |
243
+ | 关键页面截图 | 验证关键页面的核心组件、状态展示 |
244
+
245
+ ### 反向生成检查清单
246
+ - [ ] 代码压缩包已成功解压并解析目录结构
247
+ - [ ] 所有页面代码文件已识别并生成对应SDD
248
+ - [ ] 所有组件代码文件已识别并生成对应SDD
249
+ - [ ] 所有弹窗/浮层代码已识别并生成对应SDD
250
+ - [ ] 样式文件中的色值/间距/字体已提取到 design-system.sdd.md
251
+ - [ ] 动画代码中的参数(时长/曲线)已提取到 motion.sdd.md
252
+ - [ ] 基准截图已用于验证SDD准确性
253
+ - [ ] 无重复/遗漏的页面或组件
254
+ - [ ] 所有SDD文档格式遵循 ui-sdd 标准模板(11部分)
216
255
 
217
256
  ---
218
257
 
@@ -248,12 +287,38 @@ specs/ui/
248
287
  └── UI-SDD-INDEX.md # UI-SDD 索引清单
249
288
  ```
250
289
 
290
+ ### UI-SDD-INDEX.md 格式
291
+ ```markdown
292
+ # UI-SDD 索引清单
293
+ > 项目:{project_name} | 模式:{figma/sdd} | 生成日期:YYYY-MM-DD
294
+
295
+ ## 文档清单
296
+ | # | 类型 | 文件路径 | 状态 | 关联用户故事 |
297
+ |---|------|---------|------|-------------|
298
+ | 1 | 设计系统 | specs/ui/design-system.sdd.md | ✅ | - |
299
+ | 2 | 闪屏 | specs/ui/assets/splash.sdd.md | ✅ | US-001 |
300
+ | 3 | 首页 | specs/ui/pages/home-page.sdd.md | ✅ | US-002 |
301
+ | ... | ... | ... | ... | ... |
302
+
303
+ ## 完整性检查
304
+ - [ ] 所有页面已覆盖(对照骨架树逐一打勾)
305
+ - [ ] 所有弹窗已覆盖
306
+ - [ ] 所有公共组件已覆盖
307
+ - [ ] 设计系统已定义
308
+ - [ ] 闪屏/图标/动效已定义
309
+ ```
310
+
311
+ ---
312
+
251
313
  ## 强制检查清单
252
314
  - [ ] 设计模式已选择(figma / sdd)
253
315
  - [ ] App全域全景骨架完成
254
316
  - [ ] [Figma模式] Figma-Make提示词已输出
255
- - [ ] [Figma模式] 截图+代码已获取
256
- - [ ] [Figma模式] 反向SDD生成完成
317
+ - [ ] [Figma模式] 代码压缩包已获取
318
+ - [ ] [Figma模式] 基准截图已获取(用于验证)
319
+ - [ ] [Figma模式] 代码压缩包已成功解压并解析
320
+ - [ ] [Figma模式] 从代码反向SDD生成完成
321
+ - [ ] [Figma模式] 基准截图已验证SDD准确性
257
322
  - [ ] [SDD模式] ui-sdd已调用
258
323
  - [ ] [SDD模式] ui-motion已调用
259
324
  - [ ] specs/ui/ 目录结构完整
@@ -0,0 +1,150 @@
1
+ ---
2
+ name: architecture-refactor
3
+ description: 架构重构执行技能 - 提供系统性架构重构的方法论和执行流程
4
+ ---
5
+
6
+ # architecture-refactor - 架构重构执行技能
7
+
8
+ ## 概述
9
+
10
+ 提供架构重构的方法论和执行流程,帮助安全、渐进地完成架构演进。
11
+
12
+ **核心原则:小步迭代、测试保障、持续验证**
13
+
14
+ ---
15
+
16
+ ## 1. 重构时机判断
17
+
18
+ ### 1.1 重构触发信号
19
+
20
+ - **代码层面**:修改一处需要改多处、bug反复出现、新人理解困难
21
+ - **性能层面**:性能不达标、扩展性差
22
+ - **团队层面**:开发效率下降、维护成本高
23
+ - **业务层面**:新需求实现困难、技术债堆积
24
+
25
+ ### 1.2 何时不要重构
26
+
27
+ - 项目即将上线/关键时期
28
+ - 没有测试覆盖
29
+ - 没有明确的重构目标
30
+ - 时间/资源不足
31
+
32
+ ---
33
+
34
+ ## 2. 重构准备阶段
35
+
36
+ ### 2.1 现状分析
37
+
38
+ ```
39
+ 1. 架构现状文档:绘制当前架构图
40
+ 2. 痛点清单:列出所有问题点
41
+ 3. 依赖分析:识别模块依赖关系
42
+ 4. 代码健康度:圈复杂度、重复率等
43
+ ```
44
+
45
+ ### 2.2 目标架构设计
46
+
47
+ ```
48
+ 1. 目标架构图:明确未来架构
49
+ 2. 演进路线:分解为多个阶段
50
+ 3. 风险评估:识别潜在风险
51
+ 4. 回滚方案:准备回滚计划
52
+ ```
53
+
54
+ ---
55
+
56
+ ## 3. 常见架构重构模式
57
+
58
+ ### 3.1 模块化重构(单体 → 模块化)
59
+
60
+ ```
61
+ 阶段1:识别模块边界 → 按业务域划分
62
+ 阶段2:提取公共代码 → 建立共享库
63
+ 阶段3:松耦合化 → 减少跨模块依赖
64
+ 阶段4:独立部署 → 各模块可独立发布
65
+ ```
66
+
67
+ ### 3.2 分层架构重构
68
+
69
+ ```
70
+ 原有:业务逻辑混杂
71
+ 目标:Controller → Service → Repository → Data
72
+ 步骤:
73
+ 1. 定义清晰的分层边界
74
+ 2. 逐步迁移代码到对应层
75
+ 3. 建立层间通信规范
76
+ 4. 严格依赖检查
77
+ ```
78
+
79
+ ### 3.3 遗留代码重构
80
+
81
+ ```
82
+ 1. 为遗留代码加测试( characterization tests )
83
+ 2. 建立安全围栏(防回归)
84
+ 3. 小步重构代码
85
+ 4. 每步都运行测试
86
+ ```
87
+
88
+ ---
89
+
90
+ ## 4. 重构执行流程
91
+
92
+ ### 4.1 小步迭代法
93
+
94
+ ```
95
+ ┌─────────────────────────────────────┐
96
+ │ 1. 识别重构点 │
97
+ │ 2. 编写测试(如果没有) │
98
+ │ 3. 执行小范围重构 │
99
+ │ 4. 运行测试 → 通过?→ 是 → 提交 │
100
+ │ ↓ 否 │
101
+ │ 回滚修复 │
102
+ └─────────────────────────────────────┘
103
+ ```
104
+
105
+ ### 4.2 绞杀者模式(Strangler Fig)
106
+
107
+ ```
108
+ 逐步用新代码替换旧系统:
109
+ 1. 建立代理层,路由请求
110
+ 2. 逐个功能迁移到新系统
111
+ 3. 旧功能逐渐退役
112
+ 4. 最终完全替换
113
+ ```
114
+
115
+ ---
116
+
117
+ ## 5. 重构技术实践
118
+
119
+ ### 5.1 代码重构技术
120
+
121
+ | 技术 | 适用场景 |
122
+ |-----|---------|
123
+ | 提取函数 | 长函数拆分 |
124
+ | 提取类/组件 | 大文件拆分 |
125
+ | 重命名 | 命名不清晰 |
126
+ | 移动代码 | 位置不当 |
127
+ | 替换条件为多态 | 复杂条件分支 |
128
+
129
+ ### 5.2 架构重构技术
130
+
131
+ - **防腐层(ACL)**:隔离新旧系统
132
+ - **事件驱动**:解耦模块通信
133
+ - **依赖倒置**:高层不依赖低层
134
+
135
+ ---
136
+
137
+ ## 6. 重构检查清单
138
+
139
+ - [ ] 有明确的重构目标和成功标准
140
+ - [ ] 有充分的测试覆盖
141
+ - [ ] 分阶段、小步迭代
142
+ - [ ] 每步后都有测试验证
143
+ - [ ] 有回滚方案
144
+ - [ ] 保持功能不变
145
+ - [ ] 更新相关文档
146
+
147
+ ## 与其他技能的衔接
148
+
149
+ - **配合**:code-split-spec、test-driven-development
150
+ - **参考**:sdd-code
@@ -0,0 +1,169 @@
1
+ ---
2
+ name: code-review-standard
3
+ description: 代码审查标准技能 - 具体的代码审查检查清单和审查流程规范
4
+ ---
5
+
6
+ # code-review-standard - 代码审查标准技能
7
+
8
+ ## 概述
9
+
10
+ 提供具体的代码审查检查清单和审查流程规范,确保代码质量。
11
+
12
+ **核心原则:客观、具体、建设性**
13
+
14
+ ---
15
+
16
+ ## 1. 代码审查流程
17
+
18
+ ### 1.1 审查前准备
19
+
20
+ ```
21
+ 1. 变更范围:PR 不超过 400 行(建议)
22
+ 2. 描述清晰:说明变更目的、影响范围
23
+ 3. 自测通过:提交前已验证功能
24
+ 4. 检查清单:作者先自查
25
+ ```
26
+
27
+ ### 1.2 审查中
28
+
29
+ ```
30
+ 1. 理解意图:先理解代码做什么
31
+ 2. 逐项检查:对照清单检查
32
+ 3. 具体反馈:指明问题位置和原因
33
+ 4. 建议优先:用建议代替命令
34
+ ```
35
+
36
+ ### 1.3 审查后
37
+
38
+ ```
39
+ 1. 讨论分歧:有不同意见时及时沟通
40
+ 2. 确认修复:确保所有问题都处理
41
+ 3. 记录学习:记录有价值的审查点
42
+ ```
43
+
44
+ ---
45
+
46
+ ## 2. 代码审查检查清单
47
+
48
+ ### 2.1 功能性检查
49
+
50
+ - [ ] 功能实现正确,符合需求
51
+ - [ ] 边界条件处理(空值、最大值等)
52
+ - [ ] 错误处理完整
53
+ - [ ] 没有明显的 bug
54
+
55
+ ### 2.2 代码质量检查
56
+
57
+ - [ ] 命名清晰、有意义
58
+ - [ ] 函数/类单一职责
59
+ - [ ] 没有重复代码
60
+ - [ ] 注释适量,不冗余
61
+ - [ ] 遵循项目代码规范
62
+
63
+ ### 2.3 架构/设计检查
64
+
65
+ - [ ] 模块划分合理
66
+ - [ ] 依赖关系清晰
67
+ - [ ] 没有引入不必要的依赖
68
+ - [ ] 考虑可扩展性
69
+
70
+ ### 2.4 性能检查
71
+
72
+ - [ ] 没有明显的性能问题
73
+ - [ ] 避免不必要的计算
74
+ - [ ] 合理使用缓存
75
+
76
+ ### 2.5 安全检查
77
+
78
+ - [ ] 输入验证/ sanitization
79
+ - [ ] 没有安全漏洞(SQL注入、XSS等)
80
+ - [ ] 敏感数据处理得当
81
+
82
+ ### 2.6 测试检查
83
+
84
+ - [ ] 有对应的单元测试
85
+ - [ ] 测试覆盖核心场景
86
+ - [ ] 测试清晰、可维护
87
+
88
+ ---
89
+
90
+ ## 3. 审查反馈的写法
91
+
92
+ ### 3.1 好的反馈 vs 坏的反馈
93
+
94
+ ```
95
+ 坏的反馈:
96
+ "这代码写得不好"
97
+ "你应该用另一种方法"
98
+
99
+ 好的反馈:
100
+ "这里可以考虑用 xxx 方法,原因是..."
101
+ "这个变量命名可以更清晰一点,建议叫 xxx"
102
+ "这部分逻辑有点复杂,能否加个注释?"
103
+ ```
104
+
105
+ ### 3.2 反馈分类
106
+
107
+ - **必须修改**:功能问题、安全问题
108
+ - **建议修改**:可改进点
109
+ - **可选**:风格问题
110
+
111
+ ---
112
+
113
+ ## 4. 常见问题处理
114
+
115
+ ### 4.1 意见分歧
116
+
117
+ ```
118
+ 1. 理解对方观点
119
+ 2. 提供客观理由
120
+ 3. 必要时寻求第三方意见
121
+ 4. 以目标为导向,而非个人
122
+ ```
123
+
124
+ ### 4.2 大 PR 处理
125
+
126
+ ```
127
+ 建议拆分:
128
+ 1. 按功能模块拆分
129
+ 2. 按重构 vs 新功能拆分
130
+ 3. 分阶段提交审查
131
+ ```
132
+
133
+ ---
134
+
135
+ ## 5. Flutter/前端/后端 专项检查
136
+
137
+ ### 5.1 Flutter 专项
138
+
139
+ - [ ] Widget 拆分合理
140
+ - [ ] 状态管理恰当
141
+ - [ ] 性能优化考虑(const、key等)
142
+
143
+ ### 5.2 前端专项
144
+
145
+ - [ ] 组件复用合理
146
+ - [ ] 状态管理恰当
147
+ - [ ] 响应式/适配考虑
148
+
149
+ ### 5.3 后端专项
150
+
151
+ - [ ] API 设计合理
152
+ - [ ] 数据库查询优化
153
+ - [ ] 事务处理正确
154
+
155
+ ---
156
+
157
+ ## 6. 审查文化
158
+
159
+ ```
160
+ - 对事不对人
161
+ - 互相学习
162
+ - 感谢审查者的时间
163
+ - 快速响应反馈
164
+ ```
165
+
166
+ ## 与其他技能的衔接
167
+
168
+ - **配合**:code-split-spec、test-driven-development
169
+ - **参考**:sdd-code、quality-gate