From 360a2b9edc6c40854da21ee31ae6f1fa3a5cdc50 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Mon, 20 Oct 2025 14:13:01 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=20UI=20=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E6=9B=B4=E6=96=B0=E6=AD=A5=E9=AA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 主要改进 **UI 设计完整工作流** - 从探索到实现的完整流程： - **场景 2 更新**：ui-design → **update** → plan → execute（新增 update 步骤） - 明确说明需要使用 `/workflow:ui-design:update` 更新头脑风暴工件 - 确保实现遵循批准的设计原型 **新增步骤说明**： ```bash # 第 2 步：审查设计后更新概念设计 /workflow:ui-design:update --session --selected-prototypes "login-v1,login-v2" ``` **工作流逻辑**： 1. **explore-auto**: 生成多个设计变体 2. **update**: 将选定的设计原型引用集成到头脑风暴工件 3. **plan**: 基于更新后的设计引用生成实现计划 4. **execute**: 执行实现 **为什么需要 update 步骤**： - 将 UI 设计决策正式纳入项目规格 - 确保实现代码参考正确的设计原型 - 保持设计和实现的一致性 - 为后续的代码生成提供设计上下文 **双语文档同步**： - 英文版：完整的 4 步工作流说明 - 中文版：相同流程的中文说明和提示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- GETTING_STARTED.md | 33 +++++++++++++++++++++------------ GETTING_STARTED_CN.md | 33 +++++++++++++++++++++------------ 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md index 570f8d12..e0feab40 100644 --- a/GETTING_STARTED.md +++ b/GETTING_STARTED.md @@ -96,7 +96,27 @@ For simple, well-defined features, use the direct "plan → execute" pattern: > **💡 Note**: `/workflow:plan` automatically creates a session. You can also manually start a session first with `/workflow:session:start "Feature Name"`. -### Scenario 2: Complex Feature with Multi-Agent Brainstorming +### Scenario 2: UI Design Exploration + +For UI-focused projects, start with design exploration before implementation: **ui-design → update → plan → execute** + +```bash +# Step 1: Generate UI design variations (auto-creates session) +/workflow:ui-design:explore-auto --prompt "A modern, clean admin dashboard login page" + +# Step 2: Review designs in compare.html, then update brainstorming artifacts +/workflow:ui-design:update --session --selected-prototypes "login-v1,login-v2" + +# Step 3: Generate implementation plan with design references +/workflow:plan + +# Step 4: Execute the implementation +/workflow:execute +``` + +> **💡 Tip**: The `update` command integrates selected design prototypes into brainstorming artifacts, ensuring implementation follows the approved designs. + +### Scenario 3: Complex Feature with Multi-Agent Brainstorming For complex features requiring thorough analysis, use the complete workflow: **brainstorm → plan → execute** @@ -124,17 +144,6 @@ For complex features requiring thorough analysis, use the complete workflow: **b - Architectural decisions with significant impact - When you need thorough requirements before implementation -### Scenario 3: UI Design - -CCW has powerful UI design capabilities for generating prototypes from text descriptions: - -```bash -# Generate UI design variations (auto-creates session) -/workflow:ui-design:explore-auto --prompt "A modern, clean admin dashboard login page" -``` - -After completion, open the generated `compare.html` file in your browser to preview designs. - ### Scenario 4: Bug Fixing Quick bug analysis and fix workflow: diff --git a/GETTING_STARTED_CN.md b/GETTING_STARTED_CN.md index d0784cd9..e0120e81 100644 --- a/GETTING_STARTED_CN.md +++ b/GETTING_STARTED_CN.md @@ -88,7 +88,27 @@ > **💡 提示**：`/workflow:plan` 会自动创建会话。您也可以先手动启动会话：`/workflow:session:start "功能名称"`。 -### 场景 2：复杂功能的多智能体头脑风暴 +### 场景 2：UI 设计探索 + +对于以 UI 为重点的项目，在实现前先进行设计探索：**ui-design → update → 规划 → 执行** + +```bash +# 第 1 步：生成 UI 设计变体（自动创建会话） +/workflow:ui-design:explore-auto --prompt "一个现代、简洁的管理后台登录页面" + +# 第 2 步：在 compare.html 中审查设计，然后更新头脑风暴工件 +/workflow:ui-design:update --session --selected-prototypes "login-v1,login-v2" + +# 第 3 步：使用设计引用生成实现计划 +/workflow:plan + +# 第 4 步：执行实现 +/workflow:execute +``` + +> **💡 提示**：`update` 命令将选定的设计原型集成到头脑风暴工件中，确保实现遵循批准的设计。 + +### 场景 3：复杂功能的多智能体头脑风暴 对于需要深入分析的复杂功能，使用完整工作流：**头脑风暴 → 规划 → 执行** @@ -116,17 +136,6 @@ - 具有重大影响的架构决策 - 实现前需要详尽需求分析 -### 场景 3：UI 设计 - -CCW 拥有强大的 UI 设计能力，可从文本描述生成原型： - -```bash -# 生成 UI 设计变体（自动创建会话） -/workflow:ui-design:explore-auto --prompt "一个现代、简洁的管理后台登录页面" -``` - -完成后，在浏览器中打开生成的 `compare.html` 文件预览设计。 - ### 场景 4：Bug 修复 快速 Bug 分析和修复工作流：