mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-12 02:37:45 +08:00
354 lines
9.4 KiB
Markdown
354 lines
9.4 KiB
Markdown
# UI Design Workflow v4.2.0 - Multi-Page Support Enhancement
|
||
|
||
## 📋 发布日期
|
||
2025-10-09
|
||
|
||
## 🎯 核心增强
|
||
|
||
### 多页面支持优化（基于 Gemini 分析）
|
||
|
||
本版本专注于改进多页面工作流的用户体验，基于 Gemini 对现有工作流的深入分析，实施了四项关键优化：
|
||
|
||
1. **改进 Prompt 解析可靠性** ✅
|
||
2. **增强跨页面对比可视化** ✅
|
||
3. **添加跨页面一致性验证** ✅
|
||
4. **改进原型选择粒度** ✅
|
||
|
||
---
|
||
|
||
## 📝 详细变更
|
||
|
||
### 1. 改进 Prompt 解析可靠性（auto.md）
|
||
|
||
#### 问题
|
||
- 基于自然语言的页面提取不可靠
|
||
- 没有用户确认机制
|
||
- 缺少页面名称验证
|
||
|
||
#### 解决方案
|
||
**增强的页面推断逻辑**（Phase 0c）：
|
||
|
||
```bash
|
||
# 多种解析模式
|
||
page_patterns = [
|
||
r"pages?:\s*([a-zA-Z,\s]+)", # "pages: home, about"
|
||
r"build:\s*([a-zA-Z,\s]+)", # "build: home, product"
|
||
r"create\s+([a-zA-Z,\s]+?)\s+pages?", # "create home and settings pages"
|
||
r"for\s+([a-zA-Z,\s]+?)\s+pages?", # "for dashboard and auth pages"
|
||
r":\s*([a-zA-Z,\s]+)$" # "Modern blog: home, article, author"
|
||
]
|
||
|
||
# 用户确认
|
||
REPORT: "📋 Extracted pages from prompt: {', '.join(page_list)}"
|
||
|
||
# 页面名称验证
|
||
IF regex_match(page, r"^[a-zA-Z0-9_-]+$"):
|
||
validated_pages.append(page)
|
||
ELSE:
|
||
REPORT: "⚠️ Skipping invalid page name: '{page}'"
|
||
```
|
||
|
||
**改进**：
|
||
- ✅ 5种不同的解析模式
|
||
- ✅ 实时用户确认（REPORT输出）
|
||
- ✅ 页面名称验证（仅允许字母、数字、连字符、下划线）
|
||
- ✅ 追踪页面来源（explicit/prompt_parsed/synthesis/default）
|
||
|
||
---
|
||
|
||
### 2. 增强跨页面对比可视化（compare.html）
|
||
|
||
#### 问题
|
||
- 只能查看单页面矩阵
|
||
- 无法并排对比不同页面
|
||
- 难以评估跨页面一致性
|
||
|
||
#### 解决方案
|
||
**新增 "Side-by-Side" 标签页**：
|
||
|
||
**功能特性**：
|
||
- 📊 独立选择器（页面、Style、Layout）
|
||
- 🔍 并排对比任意两个原型
|
||
- 📋 智能一致性提示
|
||
- ✅ 支持跨页面对比
|
||
|
||
**一致性提示示例**：
|
||
```javascript
|
||
if (pageA !== pageB && styleA === styleB) {
|
||
notes.push('✅ Same Style: Both prototypes use the same design system');
|
||
notes.push('📋 Shared Components: Verify header, navigation, footer consistency');
|
||
notes.push('🔗 User Journey: Assess transition flow between pages');
|
||
}
|
||
```
|
||
|
||
**用户体验**：
|
||
1. 选择 Prototype A（如：dashboard-s1-l2）
|
||
2. 选择 Prototype B（如：settings-s1-l2）
|
||
3. 点击 "🔍 Compare Selected Prototypes"
|
||
4. 并排查看 + 一致性建议
|
||
|
||
---
|
||
|
||
### 3. 添加跨页面一致性验证（generate.md）
|
||
|
||
#### 问题
|
||
- 并行生成各页面，无一致性保证
|
||
- 共享组件可能不一致
|
||
- 缺少验证机制
|
||
|
||
#### 解决方案
|
||
**新增 Phase 3.5: Cross-Page Consistency Validation**
|
||
|
||
**条件**: 仅在 `len(page_list) > 1` 时执行
|
||
|
||
**验证内容**：
|
||
1. **共享组件一致性**
|
||
- Header/Navigation 结构
|
||
- Footer 内容和样式
|
||
- 通用 UI 元素（buttons, forms, cards）
|
||
|
||
2. **Token 使用一致性**
|
||
- Design tokens 文件引用
|
||
- CSS 变量使用
|
||
- 间距、排版、颜色应用
|
||
|
||
3. **无障碍一致性**
|
||
- ARIA 属性
|
||
- Heading 层级（h1 unique, h2-h6 consistent）
|
||
- Landmark roles
|
||
|
||
4. **Layout 策略遵循**
|
||
- 跨页面 layout 一致性
|
||
- 响应式断点
|
||
- Grid/Flex 系统
|
||
|
||
**输出文件**：
|
||
```
|
||
.design/prototypes/
|
||
├── consistency-report-s1-l1.md # Style 1 Layout 1 跨页面报告
|
||
├── consistency-report-s1-l2.md
|
||
├── ...
|
||
└── CONSISTENCY_SUMMARY.md # 汇总报告
|
||
```
|
||
|
||
**报告格式**：
|
||
```markdown
|
||
# Cross-Page Consistency Report
|
||
**Style**: 1 | **Layout**: 2 | **Pages**: dashboard, settings, profile
|
||
|
||
## ✅ Passed Checks
|
||
- Header structure identical across all pages
|
||
- Footer styling matches
|
||
- Same design-tokens.json referenced
|
||
|
||
## ⚠️ Warnings
|
||
- Minor spacing variation in navigation (dashboard: 2rem, settings: 1.5rem)
|
||
|
||
## ❌ Issues
|
||
- Button classes inconsistent (dashboard: .btn-primary, settings: .button-primary)
|
||
|
||
## Recommendations
|
||
- Standardize button class names
|
||
- Create shared header/footer components
|
||
```
|
||
|
||
---
|
||
|
||
### 4. 改进原型选择粒度（compare.html）
|
||
|
||
#### 问题
|
||
- 只能逐个选择原型
|
||
- 无法批量选择某个 style/layout
|
||
- 选择大量原型效率低
|
||
|
||
#### 解决方案
|
||
**新增快速选择功能**：
|
||
|
||
**按钮**：
|
||
- 🎨 **By Style**: 选择某个 style 的所有 layouts
|
||
- 📐 **By Layout**: 选择某个 layout 的所有 styles
|
||
- 🗑️ **Clear All**: 清除所有选择
|
||
|
||
**交互流程**：
|
||
```javascript
|
||
// 按 Style 选择
|
||
User clicks "By Style" → Prompt: "Select style (1-3)?" → Input: 2
|
||
→ Selects: dashboard-s2-l1, dashboard-s2-l2, dashboard-s2-l3
|
||
|
||
// 按 Layout 选择
|
||
User clicks "By Layout" → Prompt: "Select layout (1-3)?" → Input: 1
|
||
→ Selects: dashboard-s1-l1, dashboard-s2-l1, dashboard-s3-l1
|
||
```
|
||
|
||
**导出增强**：
|
||
```json
|
||
{
|
||
"runId": "run-20251009-143000",
|
||
"sessionId": "design-session-xxx",
|
||
"timestamp": "2025-10-09T14:30:00Z",
|
||
"selections": [
|
||
{"id": "dashboard-s2-l1", "file": "dashboard-style-2-layout-1.html"},
|
||
{"id": "dashboard-s2-l2", "file": "dashboard-style-2-layout-2.html"},
|
||
{"id": "settings-s1-l3", "file": "settings-style-1-layout-3.html"}
|
||
]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 文件修改清单
|
||
|
||
| 文件 | 主要变更 | 状态 |
|
||
|------|---------|------|
|
||
| **auto.md** | Phase 0c 页面推断逻辑增强 | ✅ 已完成 |
|
||
| **generate.md** | 新增 Phase 3.5 跨页面一致性验证 | ✅ 已完成 |
|
||
| **_template-compare-matrix.html** | 跨页面对比 + 快速选择 | ✅ 已完成 |
|
||
|
||
---
|
||
|
||
## 🚀 工作流对比
|
||
|
||
### v4.1.x（旧版）
|
||
```bash
|
||
/workflow:ui-design:auto --prompt "Modern blog with home, article, author"
|
||
|
||
问题:
|
||
- Prompt 解析可能失败
|
||
- 只能逐页查看矩阵
|
||
- 无一致性验证
|
||
- 逐个选择原型
|
||
```
|
||
|
||
### v4.2.0（新版）
|
||
```bash
|
||
/workflow:ui-design:auto --prompt "Modern blog: home, article, author"
|
||
|
||
# Phase 0c - 智能解析 + 确认
|
||
📋 Extracted pages from prompt: home, article, author
|
||
|
||
# Phase 3.5 - 一致性验证（自动）
|
||
生成: consistency-report-s1-l1.md, consistency-report-s1-l2.md, ...
|
||
CONSISTENCY_SUMMARY.md
|
||
|
||
# compare.html - 增强功能
|
||
✅ 并排对比: home-s1-l2 vs article-s1-l2
|
||
✅ 快速选择: "By Style 1" → 选择所有 Style 1 原型
|
||
✅ 导出: selection-run-xxx.json
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ 破坏性变更
|
||
|
||
**无破坏性变更** - 完全向后兼容 v4.1.1
|
||
|
||
所有新功能都是**增强**而非替换：
|
||
- Phase 0c 保留原有逻辑，仅增强解析
|
||
- Phase 3.5 为可选步骤（仅多页面时执行）
|
||
- compare.html 保留原有 Matrix View，增加新标签页
|
||
|
||
---
|
||
|
||
## 🧪 测试建议
|
||
|
||
### 1. Prompt 解析测试
|
||
```bash
|
||
# 测试各种 prompt 格式
|
||
/workflow:ui-design:auto --prompt "pages: home, about, contact"
|
||
/workflow:ui-design:auto --prompt "build: dashboard, settings, profile"
|
||
/workflow:ui-design:auto --prompt "create home and pricing pages"
|
||
/workflow:ui-design:auto --prompt "Modern SaaS: dashboard, analytics"
|
||
|
||
# 验证
|
||
- 检查提取的页面是否正确
|
||
- 查看确认消息
|
||
- 验证无效页面名是否被过滤
|
||
```
|
||
|
||
### 2. 跨页面对比测试
|
||
```bash
|
||
# 生成多页面原型
|
||
/workflow:ui-design:auto --pages "home,about,contact" --style-variants 2 --layout-variants 2
|
||
|
||
# 测试对比功能
|
||
1. 打开 compare.html
|
||
2. 切换到 "Side-by-Side" 标签
|
||
3. 选择: Prototype A = home-s1-l1, Prototype B = about-s1-l1
|
||
4. 查看一致性提示
|
||
```
|
||
|
||
### 3. 一致性验证测试
|
||
```bash
|
||
# 多页面工作流
|
||
/workflow:ui-design:auto --pages "dashboard,settings" --style-variants 2 --layout-variants 2
|
||
|
||
# 验证
|
||
- 检查是否生成 consistency-report-*.md
|
||
- 检查 CONSISTENCY_SUMMARY.md
|
||
- 验证报告内容准确性
|
||
```
|
||
|
||
### 4. 快速选择测试
|
||
```bash
|
||
1. 打开 compare.html
|
||
2. 点击 "By Style" → 输入 "1"
|
||
3. 验证是否选择了所有 Style 1 的原型
|
||
4. 点击 "By Layout" → 输入 "2"
|
||
5. 验证是否选择了所有 Layout 2 的原型
|
||
6. 点击 "Clear All" → 验证是否清除所有选择
|
||
7. 导出选择 → 验证 JSON 格式正确
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 相关文档
|
||
|
||
- **Gemini 分析报告**: 识别了 4 个关键问题
|
||
- **workflow-architecture.md**: Workflow 系统架构标准
|
||
- **CHANGELOG-v4.1.1.md**: Agent 优化和符号链接修复
|
||
- **auto.md**: Phase 0c 页面推断逻辑
|
||
- **generate.md**: Phase 3.5 跨页面一致性验证
|
||
- **_template-compare-matrix.html**: 跨页面对比 UI
|
||
|
||
---
|
||
|
||
## 🔮 未来增强
|
||
|
||
### 计划中
|
||
- [ ] 页面模板系统（预定义页面类型：home, dashboard, auth, etc.）
|
||
- [ ] 跨 runs 对比功能（对比不同运行的同一原型）
|
||
- [ ] AI 驱动的一致性自动修复
|
||
|
||
### 待讨论
|
||
- [ ] 是否需要页面依赖关系定义（如：dashboard 依赖 auth）
|
||
- [ ] 是否需要页面分组功能（如：public pages vs. admin pages）
|
||
|
||
---
|
||
|
||
## 📝 总结
|
||
|
||
**v4.2.0 核心价值**:
|
||
1. **智能解析**: 多模式 prompt 解析 + 实时确认
|
||
2. **可视化增强**: 跨页面并排对比 + 一致性提示
|
||
3. **质量保证**: 自动一致性验证报告
|
||
4. **效率提升**: 批量选择 + 快速导出
|
||
|
||
**升级理由**:
|
||
- ✅ 解决 Gemini 分析识别的 4 个关键问题
|
||
- ✅ 大幅改善多页面工作流用户体验
|
||
- ✅ 提供一致性保证机制
|
||
- ✅ 零破坏性，完全向后兼容
|
||
|
||
**适用场景**:
|
||
- 多页面应用设计（SaaS, 电商, 博客等）
|
||
- 需要跨页面一致性验证的项目
|
||
- 大量原型快速筛选和对比
|
||
|
||
---
|
||
|
||
**发布者**: Claude Code
|
||
**版本**: v4.2.0
|
||
**类型**: Feature Enhancement (Multi-Page Support)
|
||
**日期**: 2025-10-09
|
||
**基于**: Gemini 深度分析报告
|