catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-30 20:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: integrate animation token system into UI workflow

Browse Source 
Fixes critical P0 issue where animation-tokens.json wasn't consumed by the
generate command, breaking the value chain. The animation extraction system
now properly flows through: animation-extract → tokens → generate → prototypes.

Changes:
- Added animation-extract command with hybrid CSS extraction + interactive
  fallback strategy
- Updated generate.md to load and inject animation tokens into prototypes
- Added CSS animation support (custom properties, keyframes, interactions,
  accessibility)
- Integrated animation extraction into explore-auto and imitate-auto workflows

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-17 11:01:22 +08:00
parent b08abf4f93
commit 80196cc0a0
5 changed files with 979 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
.claude/commands/workflow/ui-design/explore-auto.md
View File

@@ -20,10 +20,11 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
1. User triggers: `/workflow:ui-design:explore-auto [params]`
2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
4. Phase 2 (layout-extract) → **WAIT for completion** → Auto-continues
5. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
6. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
7. Phase 5 (batch-plan, optional) → Reports completion
4. Phase 2.3 (animation-extract, optional) → **WAIT for completion** → Auto-continues
5. Phase 2.5 (layout-extract) → **WAIT for completion** → Auto-continues
6. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
7. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
8. Phase 5 (batch-plan, optional) → Reports completion
**Phase Transition Mechanism**:
- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
@@ -276,10 +277,26 @@ SlashCommand(command)
# Output: {style_variants} style cards with design_attributes
# SlashCommand blocks until phase complete
# Upon completion, IMMEDIATELY execute Phase 2 (auto-continue)
# Upon completion, IMMEDIATELY execute Phase 2.3 (auto-continue)
```
### Phase 2: Layout Extraction
### Phase 2.3: Animation Extraction (Optional - Interactive Mode)
```bash
# Animation extraction for motion design patterns
REPORT: "🚀 Phase 2.3: Animation Extraction (interactive mode)"
REPORT: " → Mode: Interactive specification"
REPORT: " → Purpose: Define motion design patterns"
command = "/workflow:ui-design:animation-extract --base-path \"{base_path}\" --mode interactive"
SlashCommand(command)
# Output: animation-tokens.json + animation-guide.md
# SlashCommand blocks until phase complete
# Upon completion, IMMEDIATELY execute Phase 2.5 (auto-continue)
```
### Phase 2.5: Layout Extraction
```bash
targets_string = ",".join(inferred_target_list)
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +