mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
docs: 完善 UI 设计工作流,添加设计更新步骤
### 主要改进 **UI 设计完整工作流** - 从探索到实现的完整流程: - **场景 2 更新**:ui-design → **update** → plan → execute(新增 update 步骤) - 明确说明需要使用 `/workflow:ui-design:update` 更新头脑风暴工件 - 确保实现遵循批准的设计原型 **新增步骤说明**: ```bash # 第 2 步:审查设计后更新概念设计 /workflow:ui-design:update --session <session-id> --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 <noreply@anthropic.com>
This commit is contained in:
@@ -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 <session-id> --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:
|
||||
|
||||
@@ -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 <session-id> --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 分析和修复工作流:
|
||||
|
||||
Reference in New Issue
Block a user