catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-12 02:37:45 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
6b360939bce7f898f6ee545657f347cc58d2db3d
Claude-Code-Workflow/.claude/commands/workflow/ui-design/generate.md
catlog22 7c8e75f363 Release v4.4.0: UI Design Workflow V3 - Layout/Style Separation Architecture 
## Breaking Changes

- **Command Renamed**: `extract` → `style-extract`
- **New Required Phase**: `layout-extract` now mandatory before `generate`
- **Workflow Changed**: Old flow (extract → consolidate → generate)
  → New flow (style-extract → consolidate → layout-extract → generate)

## Added

**New Command: layout-extract**
- Extract structural layout separate from visual style
- Agent-powered with ui-design-agent
- Dual-mode: imitate (high-fidelity) / explore (multiple variants)
- Device-aware: desktop, mobile, tablet, responsive
- MCP-integrated layout pattern research (explore mode)
- Output: layout-templates.json with DOM structure + CSS layout rules

**Enhanced Architecture**
- Layout/Style Separation: Clear responsibility boundaries
- Pure Assembler: generate command combines pre-extracted components
- Device-Aware Layouts: Optimized structures for different devices
- Token-Based CSS: var() placeholders for spacing/breakpoints

## Changed

**style-extract (Renamed from extract)**
- File renamed: extract.md → style-extract.md
- Scope clarified: Visual style only (colors, typography, spacing)
- No functionality change, all features preserved

**generate (Refactored to Pure Assembler)**
- Before: Agent designed layout + applied style
- After: Pure assembly - combines layout-templates.json + design-tokens.json
- No design logic: All decisions made in previous phases
- Simplified agent instructions: Focus on assembly only

**Workflow Commands Updated**
- imitate-auto: Added Phase 2.5 (layout extraction)
- explore-auto: Added Phase 2.5 (layout extraction)
- Both workflows now include layout-extract step

## Removed

- ❌ V2 Commands: generate-v2, explore-auto-v2 (merged into main commands)
- ❌ Old extract command (renamed to style-extract)
- ❌ ui-generate-preview-v2.sh (merged into ui-generate-preview.sh)

## Files Changed

- Renamed: extract.md → style-extract.md
- Added: layout-extract.md (370+ lines)
- Modified: generate.md, imitate-auto.md, explore-auto.md, consolidate.md
- Removed: 2 deprecated v2 command files
- Updated: CHANGELOG.md, README.md

## Benefits

- ✅ Single Responsibility: Each phase has one clear job
- ✅ Better Layout Variety: Explore mode generates structurally distinct layouts
- ✅ Reusability: Layout templates work with any style
- ✅ Clarity: All structural decisions visible in layout-templates.json
- ✅ Testability: Layout structure and visual style tested independently

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 16:21:28 +08:00

10 KiB
Raw Blame History

name, description, usage, examples, allowed-tools
name description usage examples allowed-tools
generate Assemble UI prototypes by combining layout templates with design tokens (pure assembler) /workflow:ui-design:generate [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
/workflow:ui-design:generate --session WFS-auth
/workflow:ui-design:generate --style-variants 2 --layout-variants 2
/workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022"
TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)

Generate UI Prototypes (/workflow:ui-design:generate)

Overview

Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (style × layout × targets). No layout design logic - purely combines existing components.

Strategy: Pure Assembly

  • Input: layout-templates.json + design-tokens.json
  • Process: Combine structure (DOM) with style (tokens)
  • Output: Complete HTML/CSS prototypes
  • No Design Logic: All layout and style decisions already made

Prerequisite Commands:

  • /workflow:ui-design:style-extract → Style tokens
  • /workflow:ui-design:consolidate → Final design tokens
  • /workflow:ui-design:layout-extract → Layout structure

Phase 1: Setup & Validation

Step 1: Resolve Base Path & Parse Configuration

# Determine working directory
bash(find .workflow -type d -name "design-*" | head -1)  # Auto-detect

# Get style count
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)

Step 2: Load Layout Templates

# Check layout templates exist
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")

# Load layout templates
Read({base_path}/layout-extraction/layout-templates.json)
# Extract: targets, layout_variants count, device_type, template structures

Output: base_path, style_variants, layout_templates[], targets[], device_type

Step 3: Validate Design Tokens

# Check design tokens exist for all styles
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")

# For each style variant: Load design tokens
Read({base_path}/style-consolidation/style-{id}/design-tokens.json)

Output: design_tokens[] for all style variants

Phase 2: Assembly (Agent)

Executor: Task(ui-design-agent) × T × S × L tasks (can be batched)

Step 1: Launch Assembly Tasks

bash(mkdir -p {base_path}/prototypes)

For each target × style_id × layout_id:

Task(ui-design-agent): `
  [LAYOUT_STYLE_ASSEMBLY]
  🎯 Assembly task: {target} × Style-{style_id} × Layout-{layout_id}
  Combine: Pre-extracted layout structure + design tokens → Final HTML/CSS

  TARGET: {target} | STYLE: {style_id} | LAYOUT: {layout_id}
  BASE_PATH: {base_path}

  ## Inputs (READ ONLY - NO DESIGN DECISIONS)
  1. Layout Template:
     Read("{base_path}/layout-extraction/layout-templates.json")
     Find template where: target={target} AND variant_id="layout-{layout_id}"
     Extract: dom_structure, css_layout_rules, device_type

  2. Design Tokens:
     Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
     Extract: ALL token values (colors, typography, spacing, borders, shadows, breakpoints)

  ## Assembly Process
  1. Build HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html
     - Recursively build from template.dom_structure
     - Add: <!DOCTYPE html>, <head>, <meta viewport>
     - CSS link: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
     - Inject placeholder content (Lorem ipsum, sample data)
     - Preserve all attributes from dom_structure

  2. Build CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css
     - Start with template.css_layout_rules
     - Replace ALL var(--*) with actual token values from design-tokens.json
       Example: var(--spacing-4) → 1rem (from tokens.spacing.4)
       Example: var(--breakpoint-md) → 768px (from tokens.breakpoints.md)
     - Add visual styling using design tokens:
       * Colors: tokens.colors.*
       * Typography: tokens.typography.*
       * Shadows: tokens.shadows.*
       * Border radius: tokens.border_radius.*
     - Device-optimized for template.device_type

  ## Assembly Rules
  - ✅ Pure assembly: Combine existing structure + existing style
  - ❌ NO layout design decisions (structure pre-defined)
  - ❌ NO style design decisions (tokens pre-defined)
  - ✅ Replace var() with actual values
  - ✅ Add placeholder content only
  - Write files IMMEDIATELY
  - CSS filename MUST match HTML <link href="...">
`

Step 2: Verify Generated Files

# Count expected vs found
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)

# Validate samples
Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length

Output: S × L × T × 2 files verified

Phase 3: Generate Preview Files

Step 1: Run Preview Generation Script

bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")

Script generates:

  • compare.html (interactive matrix)
  • index.html (navigation)
  • PREVIEW.md (instructions)

Step 2: Verify Preview Files

bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)

Output: 3 preview files

Completion

Todo Update

TodoWrite({todos: [
  {content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
  {content: "Load layout templates", status: "completed", activeForm: "Reading layout templates"},
  {content: "Assembly (agent)", status: "completed", activeForm: "Assembling prototypes"},
  {content: "Verify files", status: "completed", activeForm: "Validating output"},
  {content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
]});

Output Message

✅ UI prototype assembly complete!

Configuration:
- Style Variants: {style_variants}
- Layout Variants: {layout_variants} (from layout-templates.json)
- Device Type: {device_type}
- Targets: {targets}
- Total Prototypes: {S × L × T}

Assembly Process:
- Pure assembly: Combined pre-extracted layouts + design tokens
- No design decisions: All structure and style pre-defined
- Assembly tasks: T×S×L = {T}×{S}×{L} = {T×S×L} combinations

Quality:
- Structure: From layout-extract (DOM, CSS layout rules)
- Style: From consolidate (design tokens)
- CSS: Token values directly applied (var() replaced)
- Device-optimized: Layouts match device_type from templates

Generated Files:
{base_path}/prototypes/
├── _templates/
│   └── layout-templates.json (input, pre-extracted)
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
├── {target}-style-{s}-layout-{l}.css
├── compare.html (interactive matrix)
├── index.html (navigation)
└── PREVIEW.md (instructions)

Preview:
1. Open compare.html (recommended)
2. Open index.html
3. Read PREVIEW.md

Next: /workflow:ui-design:update

Simple Bash Commands

Path Operations

# Find design directory
bash(find .workflow -type d -name "design-*" | head -1)

# Count style variants
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)

Validation Commands

# Check layout templates exist
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")

# Check design tokens exist
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")

# Count generated files
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)

# Verify preview
bash(test -f {base_path}/prototypes/compare.html && echo "exists")

File Operations

# Create directories
bash(mkdir -p {base_path}/prototypes)

# Run preview script
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")

Output Structure

{base_path}/
├── layout-extraction/
│   └── layout-templates.json      # Input (from layout-extract)
├── style-consolidation/
│   └── style-{s}/
│       ├── design-tokens.json     # Input (from consolidate)
│       └── style-guide.md
└── prototypes/
    ├── {target}-style-{s}-layout-{l}.html  # Assembled prototypes
    ├── {target}-style-{s}-layout-{l}.css
    ├── compare.html
    ├── index.html
    └── PREVIEW.md

Error Handling

Common Errors

ERROR: Layout templates not found
→ Run /workflow:ui-design:layout-extract first

ERROR: Design tokens not found
→ Run /workflow:ui-design:consolidate first

ERROR: Agent assembly failed
→ Check inputs exist, validate JSON structure

ERROR: Script permission denied
→ chmod +x ~/.claude/scripts/ui-generate-preview.sh

Recovery Strategies

  • Partial success: Keep successful assembly combinations
  • Invalid template structure: Validate layout-templates.json
  • Invalid tokens: Validate design-tokens.json structure

Quality Checklist

  • CSS uses direct token values (var() replaced)
  • HTML structure matches layout template exactly
  • Semantic HTML5 structure preserved
  • ARIA attributes from template present
  • Device-specific optimizations applied
  • All token references resolved
  • compare.html works

Key Features

  • Pure Assembly: No design decisions, only combination
  • Separation of Concerns: Layout (structure) + Style (tokens) kept separate until final assembly
  • Token Resolution: var() placeholders replaced with actual values
  • Pre-validated: Inputs already validated by extract/consolidate
  • Efficient: Simple assembly vs complex generation
  • Production-Ready: Semantic, accessible, token-driven

Integration

Prerequisites:

  • /workflow:ui-design:style-extract → style-cards.json
  • /workflow:ui-design:consolidate → design-tokens.json
  • /workflow:ui-design:layout-extract → layout-templates.json

Input: layout-templates.json + design-tokens.json Output: S×L×T prototypes for /workflow:ui-design:update Called by: /workflow:ui-design:explore-auto, /workflow:ui-design:imitate-auto

Reference in New Issue View Git Blame Copy Permalink