refactor: v4.0.2 - Complete UI design workflow refactoring

BREAKING CHANGES:
- Command paths: /workflow:design:* → /workflow:ui-design:*
- Removed --tool parameter from all commands
- Pure Claude execution, zero external tool dependencies

Major Changes:
- style-extract: Single-pass Claude analysis (1 file vs 4+)
- style-consolidate: Claude synthesis (no gemini-wrapper/codex)
- ui-generate: Unified agent-only execution
- File renames: style-extract.md → extract.md, etc.

Improvements:
- Zero external dependencies (no CLI tools)
- Faster execution, reduced I/O
- Enhanced reproducibility
- Streamlined data flow

Updated:
- CHANGELOG.md: Detailed v4.0.2 release notes
- README.md: Updated all UI design examples
- Command files: Complete rewrite for Claude-native execution

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-09 09:36:30 +08:00
parent 81e1d3e940
commit 28c93a0001
13 changed files with 1845 additions and 1719 deletions

View File

@@ -254,12 +254,12 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
**阶段 2UI 设计精炼** *(UI 密集型项目可选)*
```bash
# 从参考图像中提取设计风格并生成原型
/workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --batch-plan
/workflow:ui-design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --batch-plan
# 或者运行单独的设计阶段
/workflow:design:style-extract --session WFS-auth --images "refs/*.png"
/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
/workflow:ui-design:style-extract --session WFS-auth --images "refs/*.png"
/workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register" --variants 2
# 预览生成的原型(新功能!)
# 选项1在浏览器中打开 .workflow/WFS-auth/.design/prototypes/index.html
@@ -267,7 +267,7 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
# 访问 http://localhost:8080 获取交互式预览和对比工具
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
/workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
```
**阶段 3行动规划**
@@ -361,11 +361,11 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
|---|---|
| `/workflow:session:*` | 管理开发会话(`start`, `pause`, `resume`, `list`, `switch`, `complete`)。 |
| `/workflow:brainstorm:*` | 使用基于角色的智能体进行多视角规划。 |
| `/workflow:design:auto` | **新增** 带交互式检查点的半自主 UI 设计工作流,用于风格和原型选择。 |
| `/workflow:design:style-extract` | **新增** 使用三重视觉分析Claude + Gemini + Codex从参考图像提取设计风格。 |
| `/workflow:design:style-consolidate` | **新增** 将选定的风格变体整合为经过验证的设计令牌和风格指南。 |
| `/workflow:design:ui-generate` | **新增** 生成基于令牌的 HTML/CSS 原型,支持可选的风格覆盖。 |
| `/workflow:design:design-update` | **新增** 将最终确定的设计系统集成到头脑风暴产物中。 |
| `/workflow:ui-design:auto` | **新增** 带交互式检查点的半自主 UI 设计工作流,用于风格和原型选择。 |
| `/workflow:ui-design:style-extract` | **新增** 使用三重视觉分析Claude + Gemini + Codex从参考图像提取设计风格。 |
| `/workflow:ui-design:style-consolidate` | **新增** 将选定的风格变体整合为经过验证的设计令牌和风格指南。 |
| `/workflow:ui-design:ui-generate` | **新增** 生成基于令牌的 HTML/CSS 原型,支持可选的风格覆盖。 |
| `/workflow:ui-design:design-update` | **新增** 将最终确定的设计系统集成到头脑风暴产物中。 |
| `/workflow:plan` | 从描述创建详细、可执行的计划。 |
| `/workflow:tdd-plan` | 创建 TDD 工作流6 阶段),包含测试覆盖分析和 Red-Green-Refactor 循环。 |
| `/workflow:execute` | 自主执行当前的工作流计划。 |
@@ -377,50 +377,50 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
| `/workflow:tools:test-concept-enhanced` | 使用 Gemini 生成测试策略和需求分析。 |
| `/workflow:tools:test-task-generate` | 生成测试任务 JSON包含 test-fix-cycle 规范。 |
### **UI 设计工作流命令 (`/workflow:design:*`)** *(v3.5.0+)*
### **UI 设计工作流命令 (`/workflow:ui-design:*`)** *(v3.5.0+)*
设计工作流系统提供从风格提取到原型生成的完整 UI 设计精炼,配备交互式预览工具。
#### 核心命令
**`/workflow:design:auto`** - 完整工作流编排器
**`/workflow:ui-design:auto`** - 完整工作流编排器
```bash
# 带用户检查点的半自主工作流
/workflow:design:auto --session WFS-auth --images "refs/*.png" --pages "login,register"
/workflow:design:auto --session WFS-dash --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
/workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --pages "login,register"
/workflow:ui-design:auto --session WFS-dash --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
```
- **检查点**: 用户选择风格变体阶段1和确认原型阶段3
- **可选**: `--batch-plan` 用于自动任务生成
**`/workflow:design:style-extract`** - 三重视觉风格分析
**`/workflow:ui-design:style-extract`** - 三重视觉风格分析
```bash
# 从参考图像提取设计
/workflow:design:style-extract --session WFS-auth --images "design-refs/*.png"
/workflow:ui-design:style-extract --session WFS-auth --images "design-refs/*.png"
```
- **视觉来源**: Claude Code + Gemini + Codex
- **输出**: 用于用户选择的风格变体卡片
**`/workflow:design:style-consolidate`** - 验证和合并令牌
**`/workflow:ui-design:style-consolidate`** - 验证和合并令牌
```bash
# 整合选定的风格变体
/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
/workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
```
- **功能**: WCAG AA 验证、OKLCH 颜色、W3C 令牌格式
- **输出**: `design-tokens.json``style-guide.md``tailwind.config.js`
**`/workflow:design:ui-generate`** - 生成 HTML/CSS 原型
**`/workflow:ui-design:ui-generate`** - 生成 HTML/CSS 原型
```bash
# 生成带预览工具的原型
/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
/workflow:design:ui-generate --session WFS-auth --pages "dashboard" --style-overrides "custom.json"
/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register" --variants 2
/workflow:ui-design:ui-generate --session WFS-auth --pages "dashboard" --style-overrides "custom.json"
```
- **🆕 预览文件**: `index.html`(导航)、`compare.html`(并排对比)、`PREVIEW.md`(说明)
- **功能**: 令牌驱动的 CSS、语义化 HTML5、ARIA 属性、响应式设计
**`/workflow:design:design-update`** - 集成设计系统
**`/workflow:ui-design:design-update`** - 集成设计系统
```bash
# 使用设计系统更新头脑风暴产物
/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
/workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
```
- **更新**: `synthesis-specification.md``ui-designer/style-guide.md`
- **使设计令牌可用于任务生成**