mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-15 02:42:45 +08:00
feat(skills): add CCW orchestrator and refactor command-guide to ccw-help
CCW Skill (new): - Stateless workflow orchestrator with intent classification - 6 workflow combinations: rapid, full, coupled, bugfix, issue, ui - External configuration: intent-rules.json, workflow-chains.json - Implicit CLI tool injection (Gemini/Qwen/Codex) - TODO tracking integration for workflow progress CCW-Help Skill (refactored from command-guide): - Renamed command-guide → ccw-help - Removed reference folder duplication - Source paths now relative from index/ (../../../commands/...) - Added all-agents.json index - Simplified SKILL.md following CCW pattern
This commit is contained in:
79
.claude/skills/ccw/phases/actions/ui.md
Normal file
79
.claude/skills/ccw/phases/actions/ui.md
Normal file
@@ -0,0 +1,79 @@
|
||||
# UI Design Workflow Action
|
||||
|
||||
## Pattern
|
||||
```
|
||||
ui-design:[explore|imitate]-auto → design-sync → plan → execute
|
||||
```
|
||||
|
||||
## Trigger Conditions
|
||||
|
||||
- 关键词: "ui", "界面", "design", "组件", "样式", "布局", "前端"
|
||||
- 变体触发:
|
||||
- `imitate`: "参考", "模仿", "像", "类似"
|
||||
- `explore`: 无特定参考时默认
|
||||
|
||||
## Variants
|
||||
|
||||
### Explore (探索式设计)
|
||||
```mermaid
|
||||
graph TD
|
||||
A[User Input] --> B[ui-design:explore-auto]
|
||||
B --> C[设计系统分析]
|
||||
C --> D[组件结构规划]
|
||||
D --> E[design-sync]
|
||||
E --> F[plan]
|
||||
F --> G[execute]
|
||||
```
|
||||
|
||||
### Imitate (参考式设计)
|
||||
```mermaid
|
||||
graph TD
|
||||
A[User Input + Reference] --> B[ui-design:imitate-auto]
|
||||
B --> C[参考分析]
|
||||
C --> D[风格提取]
|
||||
D --> E[design-sync]
|
||||
E --> F[plan]
|
||||
F --> G[execute]
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
| 参数 | 默认值 | 说明 |
|
||||
|------|--------|------|
|
||||
| design_system | auto | 设计系统(auto/tailwind/mui/custom) |
|
||||
| responsive | true | 响应式设计 |
|
||||
| accessibility | true | 无障碍支持 |
|
||||
|
||||
## CLI Integration
|
||||
|
||||
| 阶段 | CLI Hint | 用途 |
|
||||
|------|----------|------|
|
||||
| explore/imitate | `gemini --mode analysis` | 设计分析、风格提取 |
|
||||
| design-sync | - | 设计决策与代码库同步 |
|
||||
| plan | - | 内置规划 |
|
||||
| execute | `codex --mode write` | 组件实现 |
|
||||
|
||||
## Slash Commands
|
||||
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto # 探索式UI设计
|
||||
/workflow:ui-design:imitate-auto # 参考式UI设计
|
||||
/workflow:ui-design:design-sync # 设计与代码同步(关键步骤)
|
||||
/workflow:ui-design:style-extract # 提取现有样式
|
||||
/workflow:ui-design:codify-style # 样式代码化
|
||||
```
|
||||
|
||||
## When to Use
|
||||
|
||||
- 新页面/组件开发
|
||||
- UI重构或现代化
|
||||
- 设计系统建立
|
||||
- 参考其他产品设计
|
||||
|
||||
## Risk Assessment
|
||||
|
||||
| 风险 | 缓解措施 |
|
||||
|------|----------|
|
||||
| 设计不一致 | style-extract确保复用 |
|
||||
| 响应式问题 | 多断点验证 |
|
||||
| 可访问性缺失 | a11y检查集成 |
|
||||
Reference in New Issue
Block a user