在任何创造性工作之前必须使用的设计技能,通过自然的协作对话帮助将想法转化为完整的设计和规格说明。包含9步检查清单(探索上下文→视觉伴侣→澄清问题→方案权衡→展示设计→设计文档→规格自检→用户审查→调用计划技能)、DOT格式流程图、视觉伴侣工具。适用于产品功能设计、架构方案评审、界面设计等场景。
头脑风暴:将想法转化为设计的AI协作技能
【适用场景】
Step 1:产品功能设计
当你需要设计一个新功能时——无论是创建功能、构建组件、添加功能还是修改行为——在编写任何代码之前,先用头脑风暴技能与AI协作探索完整的设计方案。Step 2:架构方案评审
当团队需要对技术架构、模块拆分、数据流设计等重大决策进行评审时,头脑风暴技能帮助快速收敛到最优方案。Step 3:界面/视觉设计
当设计涉及原型、布局、图表等视觉内容时,技能提供独立的视觉伴侣工具,支持浏览器内实时展示和对比。Step 4:复杂项目分解
当项目规模过大时,帮助分解为多个可独立执行的子项目,每个子项目独立走「规格→计划→实现」周期。【操作步骤】
第一步:探索项目上下文 检查文件、文档、最近的commit,理解当前项目状态。
第二步:提供视觉伴侣(如有视觉相关问题) 独立消息询问用户是否需要浏览器内的视觉伴侣工具展示原型和图表。
第三步:逐一提问澄清 每次只提一个问题,了解目的、约束、成功标准。优先使用选择题。
第四步:提出2-3种方案 展示方案及其权衡分析,明确给出推荐。
第五步:分节展示设计 按复杂度分节展示,每节后获得用户批准。涵盖架构、组件、数据流、错误处理、测试。
第六步:编写设计文档 保存到 `docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md` 并commit。
第七步:规格自检 检查占位符(TODO/待定)、内部一致性、范围聚焦、模糊性。
第八步:用户审查书面规格 请用户在继续前审查规格文件,获得批准。
第九步:调用writing-plans技能 过渡到实现计划阶段。
【代码模板】
```dot digraph brainstorming { "探索项目上下文" -> "有视觉相关问题?" "有视觉相关问题?" -> "提供视觉伴侣" [label="是"] "有视觉相关问题?" -> "提出澄清问题" [label="否"] "提出澄清问题" -> "提出 2-3 种方案" "方案" -> "分节展示设计" "设计" -> "用户批准设计?" "用户批准设计?" -> "编写设计文档" [label="是"] "设计文档" -> "规格自检" "规格自检" -> "用户审查规格?" "用户审查规格?" -> "调用 writing-plans" [label="批准"] } ```
核心原则: - 每次一个问题,优先选择题 - 严格遵循YAGNI原则 - 探索替代方案,不匆忙定论 - 增量验证,获得批准后再继续
【复盘要点】
成功标志: - 用户书面批准设计文档 - 文档保存在正确路径并commit - 调用了writing-plans技能进入实现阶段
常见失败模式: - 跳过设计直接实现(违反HARD-GATE规则) - 多个问题同时抛出(应每次一个) - 未经用户批准直接写代码 - 设计文档未commit
注意事项: - 终止状态是调用writing-plans,不要调用frontend-design、mcp-builder等实现技能 - 简单项目设计可以很短(几句话),但必须展示并获得批准 - 规格自检发现问题直接内联修复,无需重新审查
来源:GitHub https://github.com/jnmetacode/superpowers-zh/blob/main/skills/brainstorming/SKILL.md