# workflow: id: greenfield-ui name: 绿地 UI/前端开发 description: >- 用于从概念到开发构建前端应用程序的代理工作流程。 支持复杂 UI 的全面规划和简单界面的快速原型设计。 type: greenfield project_types: - spa - mobile-app - micro-frontend - static-site - ui-prototype - simple-interface sequence: - agent: analyst creates: project-brief.md optional_steps: - brainstorming_session - market_research_prompt notes: "可以先进行头脑风暴，然后在创建项目简报之前进行可选的深入研究。保存输出：将最终的 project-brief.md 复制到您项目的 docs/ 文件夹中。" - agent: pm creates: prd.md requires: project-brief.md notes: "根据项目简报使用 prd-tmpl 创建 PRD，专注于 UI/前端需求。保存输出：将最终的 prd.md 复制到您项目的 docs/ 文件夹中。" - agent: ux-expert creates: front-end-spec.md requires: prd.md optional_steps: - user_research_prompt notes: "使用 front-end-spec-tmpl 创建 UI/UX 规范。保存输出：将最终的 front-end-spec.md 复制到您项目的 docs/ 文件夹中。" - agent: ux-expert creates: v0_prompt (optional) requires: front-end-spec.md condition: user_wants_ai_generation notes: "可选但推荐：为 v0、Lovable 等工具生成 AI UI 提示。使用 generate-ai-frontend-prompt 任务。然后用户可以在外部工具中生成 UI 并下载项目结构。" - agent: architect creates: front-end-architecture.md requires: front-end-spec.md optional_steps: - technical_research_prompt - review_generated_ui_structure notes: "使用 front-end-architecture-tmpl 创建前端架构。如果用户使用 v0/Lovable 生成了 UI，则可以将项目结构整合到架构中。可能会建议更改 PRD 故事或添加新故事。保存输出：将最终的 front-end-architecture.md 复制到您项目的 docs/ 文件夹中。" - agent: pm updates: prd.md (if needed) requires: front-end-architecture.md condition: architecture_suggests_prd_changes notes: "如果架构师建议更改故事，请更新 PRD 并将完整的、未经删节的 prd.md 重新导出到 docs/ 文件夹。" - agent: po validates: all_artifacts uses: po-master-checklist notes: "验证所有文档的一致性和完整性。可能需要更新任何文档。" - agent: various updates: any_flagged_documents condition: po_checklist_issues notes: "如果 PO 发现问题，请返回相关代理进行修复，并将更新后的文档重新导出到 docs/ 文件夹。" - project_setup_guidance: action: guide_project_structure condition: user_has_generated_ui notes: "如果用户使用 v0/Lovable 生成了 UI：对于 polyrepo 设置，将下载的项目放在单独的前端仓库中。对于 monorepo，将其放在 apps/web 或 frontend/ 目录中。查看架构文档以获取具体指导。" - agent: po action: shard_documents creates: sharded_docs requires: all_artifacts_in_project notes: | 为 IDE 开发分片文档： - 选项 A：使用 PO 代理分片：@po 然后要求分片 docs/prd.md - 选项 B：手动：将 shard-doc 任务 + docs/prd.md 拖到聊天中 - 创建包含分片内容的 docs/prd/ 和 docs/architecture/ 文件夹 - agent: sm action: create_story creates: story.md requires: sharded_docs repeats: for_each_epic notes: | 故事创建周期： - SM 代理（新聊天）：@sm → *create - 从分片文档创建下一个故事 - 故事以“草稿”状态开始 - agent: analyst/pm action: review_draft_story updates: story.md requires: story.md optional: true condition: user_wants_story_review notes: | 可选：审查并批准故事草稿 - 注意：story-review 任务即将推出 - 审查故事的完整性和一致性 - 更新故事状态：草稿 → 已批准 - agent: dev action: implement_story creates: implementation_files requires: story.md notes: | 开发代理（新聊天）：@dev - 实施已批准的故事 - 使用所有更改更新文件列表 - 完成后将故事标记为“审查” - agent: qa action: review_implementation updates: implementation_files requires: implementation_files optional: true notes: | 可选：QA 代理（新聊天）：@qa → review-story - 具有重构能力的高级开发人员审查 - 直接修复小问题 - 为剩余项目留下清单 - 更新故事状态（审查 → 完成或保持审查） - agent: dev action: address_qa_feedback updates: implementation_files condition: qa_left_unchecked_items notes: | 如果 QA 留下未检查的项目： - 开发代理（新聊天）：处理剩余项目 - 返回 QA 进行最终批准 - repeat_development_cycle: action: continue_for_all_stories notes: | 对所有史诗故事重复故事周期（SM → 开发 → QA） 继续直到 PRD 中的所有故事都完成 - agent: po action: epic_retrospective creates: epic-retrospective.md condition: epic_complete optional: true notes: | 可选：史诗完成后 - 注意：epic-retrospective 任务即将推出 - 验证史诗是否正确完成 - 记录经验教训和改进 - workflow_end: action: project_complete notes: | 所有故事都已实施和审查！ 项目开发阶段完成。 参考：{root}/data/bmad-kb.md#IDE Development Workflow flow_diagram: | ```mermaid graph TD A[开始：UI 开发] --> B[分析师：project-brief.md] B --> C[项目经理：prd.md] C --> D[用户体验专家：front-end-spec.md] D --> D2{生成 v0 提示？} D2 -->|是| D3[用户体验专家：创建 v0 提示] D2 -->|否| E[架构师：front-end-architecture.md] D3 --> D4[用户：在 v0/Lovable 中生成 UI] D4 --> E E --> F{架构师建议更改 PRD？} F -->|是| G[项目经理：更新 prd.md] F -->|否| H[产品负责人：验证所有工件] G --> H H --> I{产品负责人发现问题？} I -->|是| J[返回相关代理进行修复] I -->|否| K[产品负责人：分片文档] J --> H K --> L[Scrum Master：创建故事] L --> M{审查故事草稿？} M -->|是| N[分析师/项目经理：审查并批准故事] M -->|否| O[开发人员：实施故事] N --> O O --> P{QA 审查？} P -->|是| Q[QA：审查实施] P -->|否| R{更多故事？} Q --> S{QA 发现问题？} S -->|是| T[开发人员：处理 QA 反馈] S -->|否| R T --> Q R -->|是| L R -->|否| U{史诗回顾？} U -->|是| V[产品负责人：史诗回顾] U -->|否| W[项目完成] V --> W B -.-> B1[可选：头脑风暴] B -.-> B2[可选：市场研究] D -.-> D1[可选：用户研究] E -.-> E1[可选：技术研究] style W fill:#90EE90 style K fill:#ADD8E6 style L fill:#ADD8E6 style O fill:#ADD8E6 style D3 fill:#E6E6FA style D4 fill:#E6E6FA style B fill:#FFE4B5 style C fill:#FFE4B5 style D fill:#FFE4B5 style E fill:#FFE4B5 style N fill:#F0E68C style Q fill:#F0E68C style V fill:#F0E68C ``` decision_guidance: when_to_use: - 构建生产前端应用程序 - 多个视图/页面具有复杂的交互 - 需要全面的 UI/UX 设计和测试 - 将有多个团队成员参与 - 预计需要长期维护 - 面向客户的应用程序 handoff_prompts: analyst_to_pm: "项目简报已完成。将其另存为您项目中的 docs/project-brief.md，然后创建 PRD。" pm_to_ux: "PRD 已准备就绪。将其另存为您项目中的 docs/prd.md，然后创建 UI/UX 规范。" ux_to_architect: "UI/UX 规范已完成。将其另存为 docs/front-end-spec.md，然后创建前端架构。" architect_review: "前端架构已完成。将其另存为 docs/front-end-architecture.md。您是否建议对 PRD 故事进行任何更改或需要添加新故事？" architect_to_pm: "请使用建议的故事更改更新 PRD，然后将完整的 prd.md 重新导出到 docs/。" updated_to_po: "所有文档都已在 docs/ 文件夹中准备就绪。请验证所有工件的一致性。" po_issues: "PO 发现 [文档] 有问题。请返回 [代理] 进行修复并重新保存更新后的文档。" complete: "所有规划工件都已验证并保存在 docs/ 文件夹中。移动到 IDE 环境以开始开发。"