mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-30 20:21:09 +08:00
Add interactive layer exploration workflow for UI design
- Implemented the `/workflow:ui-design:explore-layers` command for depth-controlled UI capture. - Defined depth levels from full-page screenshots to Shadow DOM exploration. - Included setup, validation, and navigation phases with error handling. - Captured screenshots at various depths and generated a comprehensive layer map. - Added examples and usage instructions for ease of use.
This commit is contained in:
catlog22
@@ -1,225 +1,197 @@
|
||||
---
|
||||
name: generate
|
||||
description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components
|
||||
usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
description: Generate UI prototypes using target-style-centric batch generation
|
||||
usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
examples:
|
||||
- /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "dashboard,settings"
|
||||
- /workflow:ui-design:generate --session WFS-auth --targets "home,pricing" --style-variants 2 --layout-variants 2
|
||||
- /workflow:ui-design:generate --targets "navbar,hero,card" --target-type "component"
|
||||
- /workflow:ui-design:generate --session WFS-auth --targets "dashboard,settings"
|
||||
- /workflow:ui-design:generate --targets "home,pricing" --style-variants 2 --layout-variants 2
|
||||
- /workflow:ui-design:generate --targets "app" --device-type mobile
|
||||
- /workflow:ui-design:generate --targets "dashboard" --device-type desktop
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
---
|
||||
|
||||
# Generate UI Prototypes (/workflow:ui-design:generate)
|
||||
|
||||
## Overview
|
||||
Generate matrix of UI prototypes (`style × layout × targets`) with production-ready HTML/CSS. Optimized template-based architecture: **`S` times faster** than direct generation.
|
||||
Generate matrix of UI prototypes (`style × layout × targets`) using **target-style-centric batch generation**. Each agent handles all layouts for one target × style combination.
|
||||
|
||||
**Strategy**: Two-layer generation
|
||||
- **Layer 1**: Generate `L × T` reusable templates (agent)
|
||||
- **Layer 2**: Instantiate `S × L × T` final prototypes (script)
|
||||
**Strategy**: Target-Style-Centric
|
||||
- **Agent scope**: Each of `T × S` agents generates `L` layouts
|
||||
- **Component isolation**: Complete task independence
|
||||
- **Style-aware**: HTML adapts to design_attributes
|
||||
- **Self-contained CSS**: Direct token values (no var() refs)
|
||||
|
||||
**Supports**: Pages (full layouts) and components (isolated elements)
|
||||
|
||||
## Phase 1: Setup & Validation
|
||||
|
||||
### Step 1: Resolve Base Path
|
||||
### Step 1: Resolve Base Path & Parse Configuration
|
||||
```bash
|
||||
# Determine working directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# OR use --base-path / --session parameters
|
||||
```
|
||||
|
||||
### Step 2: Parse Configuration
|
||||
```bash
|
||||
# Get style variant count (default: 3)
|
||||
# Get counts (defaults: style=auto, layout=3)
|
||||
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
||||
|
||||
# Get layout variant count (default: 3, configurable via --layout-variants)
|
||||
# Parse targets (Priority: --targets → --pages → synthesis-specification.md → default ["home"])
|
||||
# Target type: "page" (default) or "component"
|
||||
|
||||
# Parse targets (pages/components)
|
||||
# Priority: --targets → --pages (legacy) → synthesis-specification.md → default ["home"]
|
||||
# Parse device type
|
||||
device_type = --device-type OR "responsive" # Default: responsive
|
||||
|
||||
# Try to load from .run-metadata.json if exists
|
||||
IF exists({base_path}/.run-metadata.json):
|
||||
metadata = Read({base_path}/.run-metadata.json)
|
||||
IF metadata.parameters.device_type:
|
||||
device_type = metadata.parameters.device_type
|
||||
```
|
||||
|
||||
### Step 3: Validate Inputs
|
||||
### Step 2: Validate Inputs
|
||||
```bash
|
||||
# Check design systems exist
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
||||
|
||||
# Validate target names (lowercase, alphanumeric, hyphens only)
|
||||
# Target type: "page" (default) or "component"
|
||||
# Load design-space-analysis.json (optional, for style-aware generation)
|
||||
```
|
||||
|
||||
**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`
|
||||
**Output**: `base_path`, `style_variants`, `layout_variants`, `target_list[]`, `target_type`, `design_space_analysis` (optional), `device_type`
|
||||
|
||||
### Step 4: Check Existing Output
|
||||
### Step 3: Detect Token Sources
|
||||
```bash
|
||||
# Skip if already generated
|
||||
bash(test -f {base_path}/prototypes/compare.html && echo "exists")
|
||||
# Priority 1: consolidated tokens (production-ready from /workflow:ui-design:consolidate)
|
||||
# Priority 2: proposed tokens from style-cards.json (fast-track from /workflow:ui-design:extract)
|
||||
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
|
||||
# OR
|
||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
|
||||
|
||||
# If proposed: Create temp consolidation dir + write proposed tokens
|
||||
bash(mkdir -p {base_path}/style-consolidation/style-{id})
|
||||
Write({base_path}/style-consolidation/style-{id}/design-tokens.json, proposed_tokens)
|
||||
```
|
||||
|
||||
**If exists**: Skip to completion message
|
||||
**Output**: `token_sources{}`, `consolidated_count`, `proposed_count`
|
||||
|
||||
## Phase 2: Layout Planning
|
||||
|
||||
### Step 1: Research Layout Patterns (Agent)
|
||||
### Step 4: Gather Layout Inspiration
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/prototypes/_templates)
|
||||
bash(mkdir -p {base_path}/prototypes/_inspirations)
|
||||
|
||||
# For each target: Research via MCP
|
||||
# mcp__exa__web_search_exa(query="{target} {target_type} layout patterns", numResults=5)
|
||||
|
||||
# Write simple inspiration file
|
||||
Write({base_path}/prototypes/_inspirations/{target}-layout-ideas.txt, inspiration_content)
|
||||
```
|
||||
|
||||
For each `target × layout_id`:
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[TARGET_LAYOUT_PLANNING]
|
||||
TARGET: {target} | TYPE: {target_type} | LAYOUT: {layout_id}/{layout_variants}
|
||||
BASE_PATH: {base_path}
|
||||
${--session ? "REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md" : ""}
|
||||
**Output**: `L` inspiration text files
|
||||
|
||||
## 参考
|
||||
- Research via: mcp__exa__web_search_exa(query="{target} {target_type} layout patterns 2024", numResults=5)
|
||||
- Layout differentiation: Layout 1=common, Layout 2=alternative, Layout 3=innovative
|
||||
## Phase 2: Target-Style-Centric Generation (Agent)
|
||||
|
||||
## 生成
|
||||
Write("{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json")
|
||||
|
||||
JSON schema:
|
||||
{
|
||||
"id": "layout-{layout_id}",
|
||||
"target": "{target}",
|
||||
"target_type": "{target_type}",
|
||||
"name": "2-4 words",
|
||||
"description": "2-3 sentences",
|
||||
"structure": {
|
||||
// Page: type, regions, grid, sidebar, responsive{mobile/tablet/desktop}
|
||||
// Component: arrangement, alignment, spacing, element_order, variants
|
||||
},
|
||||
"semantic_hints": ["<nav>", "<main role='main'>", ...],
|
||||
"accessibility_features": ["skip-link", "landmarks", ...],
|
||||
"research_references": ["source URLs/insights"]
|
||||
}
|
||||
|
||||
## 注意
|
||||
- Layout #{layout_id} must be STRUCTURALLY DIFFERENT from other IDs
|
||||
- Structure section must match target_type (page vs component)
|
||||
- Write file directly, no text output
|
||||
`
|
||||
```
|
||||
|
||||
### Step 2: Verify Layout Plans
|
||||
```bash
|
||||
# Verify files created
|
||||
bash(ls {base_path}/prototypes/_templates/*.json | wc -l) # Should equal L×T
|
||||
|
||||
# Validate JSON structure
|
||||
Read({base_path}/prototypes/_templates/{target}-layout-{layout_id}.json)
|
||||
```
|
||||
|
||||
**Output**: `L × T` layout plan JSON files
|
||||
|
||||
## Phase 3: Token Conversion
|
||||
|
||||
### Step 1: Convert JSON to CSS Variables
|
||||
```bash
|
||||
# Check jq dependency
|
||||
bash(command -v jq >/dev/null 2>&1 || echo "ERROR: jq not found")
|
||||
|
||||
# Convert each style's design-tokens.json to tokens.css
|
||||
bash(cat {base_path}/style-consolidation/style-1/design-tokens.json | ~/.claude/scripts/convert_tokens_to_css.sh > tokens.css)
|
||||
```
|
||||
|
||||
### Step 2: Extract Variable Names
|
||||
```bash
|
||||
# Read generated tokens.css
|
||||
Read({base_path}/style-consolidation/style-1/tokens.css)
|
||||
|
||||
# Extract CSS variable names (pattern: --variable-name:)
|
||||
# Categorize: colors, typography, spacing, radius, shadows
|
||||
```
|
||||
|
||||
**Output**: `S × tokens.css` files + extracted variable list
|
||||
|
||||
## Phase 4: Template Generation (Agent)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` × `L × T` tasks in parallel
|
||||
**Executor**: `Task(ui-design-agent)` × `T × S` tasks in parallel
|
||||
|
||||
### Step 1: Launch Agent Tasks
|
||||
For each `layout_id × target`:
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
```
|
||||
|
||||
For each `target × style_id`:
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[UI_LAYOUT_TEMPLATE_GENERATION]
|
||||
🚨 ONE target only: '{target}' (standalone, reusable)
|
||||
[TARGET_STYLE_UI_GENERATION]
|
||||
🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
|
||||
Generate: {layout_variants} × 2 files (HTML + CSS per layout)
|
||||
|
||||
LAYOUT: {layout_id} | TARGET: {target} | TYPE: {target_type}
|
||||
TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
|
||||
BASE_PATH: {base_path}
|
||||
${--session ? "REQUIREMENTS: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md" : ""}
|
||||
DEVICE: {device_type}
|
||||
${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
|
||||
|
||||
## 参考
|
||||
- Layout plan: Read("{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json")
|
||||
- Design tokens: Read("{base_path}/style-consolidation/style-1/tokens.css")
|
||||
Extract variables: --color-*, --font-*, --spacing-*, --border-radius-*, --shadow-*
|
||||
## Reference
|
||||
- Layout inspiration: Read("{base_path}/prototypes/_inspirations/{target}-layout-ideas.txt")
|
||||
- Design tokens: Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
|
||||
Parse ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
|
||||
${design_attributes ? "- Adapt DOM structure to: density, visual_weight, formality, organic_vs_geometric" : ""}
|
||||
|
||||
## 生成
|
||||
1. HTML: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html
|
||||
- Complete HTML5 doc with <link href="{{STRUCTURAL_CSS}}"> and <link href="{{TOKEN_CSS}}">
|
||||
- Body: Full structure (page) OR isolated element (component)
|
||||
- Semantic: <header>, <nav>, <main>, <footer>, proper heading hierarchy
|
||||
- A11y: ARIA landmarks, skip-link, alt/labels, focus styles
|
||||
## Generation
|
||||
For EACH layout (1 to {layout_variants}):
|
||||
|
||||
2. CSS: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css
|
||||
- Structure: Flexbox/Grid, positioning, dimensions, responsive
|
||||
- Mobile-first: base → @media(768px) → @media(1024px)
|
||||
- Optional: {target}-layout-{layout_id}-tokens.css for --layout-* vars
|
||||
1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
|
||||
- Complete HTML5: <!DOCTYPE>, <head>, <body>
|
||||
- CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
|
||||
- Semantic: <header>, <nav>, <main>, <footer>
|
||||
- A11y: ARIA labels, landmarks, responsive meta
|
||||
- Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
${design_attributes ? `
|
||||
- DOM adaptation:
|
||||
* density='spacious' → flatter hierarchy
|
||||
* density='compact' → deeper nesting
|
||||
* visual_weight='heavy' → extra wrappers
|
||||
* visual_weight='minimal' → direct structure` : ""}
|
||||
- Device-specific structure:
|
||||
* mobile (375×812px): Single column, stacked sections, touch targets ≥44px
|
||||
* desktop (1920×1080px): Multi-column grids, hover states, larger hit areas
|
||||
* tablet (768×1024px): Hybrid layouts, flexible columns
|
||||
* responsive: Breakpoint-driven adaptive layouts (mobile-first)
|
||||
|
||||
## 注意
|
||||
- ✅ ONLY var(--token-name) from tokens.css
|
||||
- ❌ NO hardcoded: colors (#333, rgb), spacing (16px), fonts ("Arial")
|
||||
- ❌ NO invented variable names
|
||||
- Body content matches target_type (page=full, component=isolated)
|
||||
- Write files directly, no text output
|
||||
2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
|
||||
- Self-contained: Direct token VALUES (no var())
|
||||
- Use tokens: colors, fonts, spacing, borders, shadows
|
||||
- Device-optimized styles for {device_type}
|
||||
${device_type === 'responsive' ? '- Responsive: Mobile-first @media(breakpoints)' : '- Fixed device: Optimize for ' + device_type}
|
||||
${design_attributes ? `
|
||||
- Token selection:
|
||||
* density → spacing scale
|
||||
* visual_weight → shadow strength
|
||||
* organic_vs_geometric → border-radius` : ""}
|
||||
- Device-specific CSS:
|
||||
* mobile: Compact spacing, touch-friendly
|
||||
* desktop: Generous whitespace, hover effects
|
||||
* tablet: Medium spacing, flexible grids
|
||||
* responsive: Fluid typography, breakpoints
|
||||
|
||||
## Notes
|
||||
- ✅ Use token VALUES directly from design-tokens.json
|
||||
- ✅ Optimize for {device_type} device
|
||||
- ❌ NO var() references, NO external dependencies
|
||||
- Layouts structurally DISTINCT (different grids/regions)
|
||||
- Write files IMMEDIATELY (per layout, no accumulation)
|
||||
- CSS filename MUST match HTML <link href="...">
|
||||
- No text output, write to filesystem only
|
||||
- Device-first approach: Design specifically for {device_type} user experience
|
||||
`
|
||||
```
|
||||
|
||||
### Step 2: Verify Templates Created
|
||||
### Step 2: Verify Generated Files
|
||||
```bash
|
||||
# Check file count
|
||||
bash(ls {base_path}/prototypes/_templates/{target}-layout-*.html | wc -l)
|
||||
# Count expected vs found
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Validate structure
|
||||
Read({base_path}/prototypes/_templates/{target}-layout-{layout_id}.html)
|
||||
# Check: <!DOCTYPE html>, var(--, placeholders
|
||||
# Validate samples
|
||||
Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
|
||||
# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
|
||||
```
|
||||
|
||||
**Output**: `L × T` template pairs (HTML + CSS)
|
||||
**Output**: `S × L × T × 2` files verified
|
||||
|
||||
## Phase 5: Prototype Instantiation (Script)
|
||||
## Phase 3: Generate Preview Files
|
||||
|
||||
### Step 1: Execute Instantiation Script
|
||||
### Step 1: Run Preview Generation Script
|
||||
```bash
|
||||
# Verify tokens.css files exist
|
||||
bash(ls {base_path}/style-consolidation/style-*/tokens.css | wc -l)
|
||||
|
||||
# Run instantiation script
|
||||
bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --session-id "{session_id}" --mode "{target_type}")
|
||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
**Script generates**:
|
||||
- `S × L × T` HTML prototypes with CSS links
|
||||
- Implementation notes for each prototype
|
||||
- `compare.html` (interactive matrix)
|
||||
- `index.html` (navigation)
|
||||
- `PREVIEW.md` (documentation)
|
||||
- `PREVIEW.md` (instructions)
|
||||
|
||||
### Step 2: Verify Output Files
|
||||
### Step 2: Verify Preview Files
|
||||
```bash
|
||||
# Check preview files
|
||||
bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
|
||||
|
||||
# Count final prototypes
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
```
|
||||
|
||||
**Output**: `S × L × T` final prototypes + preview files
|
||||
|
||||
|
||||
**Output**: 3 preview files
|
||||
|
||||
## Completion
|
||||
|
||||
@@ -227,38 +199,46 @@ bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Layout planning (agent)", status: "completed", activeForm: "Planning layouts"},
|
||||
{content: "Token conversion", status: "completed", activeForm: "Converting tokens"},
|
||||
{content: "Template generation (agent)", status: "completed", activeForm: "Generating templates"},
|
||||
{content: "Prototype instantiation (script)", status: "completed", activeForm: "Running script"},
|
||||
{content: "Verify output", status: "completed", activeForm: "Verifying files"}
|
||||
{content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
|
||||
{content: "Target-style generation (agent)", status: "completed", activeForm: "Generating prototypes"},
|
||||
{content: "Verify files", status: "completed", activeForm: "Validating output"},
|
||||
{content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
|
||||
]});
|
||||
```
|
||||
|
||||
### Output Message
|
||||
```
|
||||
✅ Matrix UI generation complete!
|
||||
✅ Target-Style-Centric UI generation complete!
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants}
|
||||
- Layout Variants: {layout_variants} (inspiration-based)
|
||||
- Target Type: {target_type}
|
||||
- Device Type: {device_type}
|
||||
- Targets: {target_list}
|
||||
- Total Prototypes: {S × L × T}
|
||||
|
||||
Performance:
|
||||
- Templates: {L × T} (agent)
|
||||
- Prototypes: {S × L × T} (script)
|
||||
- Speed: {S}× faster
|
||||
- Script: ui-instantiate-prototypes.sh v3.0
|
||||
Agent Execution:
|
||||
- Target-style agents: T×S = {T}×{S} = {T×S} agents
|
||||
- Each agent scope: {L} layouts for one component
|
||||
- Component isolation: Complete task independence
|
||||
- Device-specific: All layouts optimized for {device_type}
|
||||
|
||||
Quality:
|
||||
- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
|
||||
- CSS: Self-contained (direct token values, no var())
|
||||
- Device-optimized: {device_type} layouts
|
||||
- Tokens: {consolidated_count} consolidated, {proposed_count} proposed
|
||||
{IF proposed_count > 0: ' 💡 For production: /workflow:ui-design:consolidate'}
|
||||
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── _templates/ ({T×L} JSON + HTML + CSS)
|
||||
├── _inspirations/ ({T} text files)
|
||||
├── {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 (documentation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
@@ -278,8 +258,9 @@ bash(find .workflow -type d -name "design-*" | head -1)
|
||||
# Count style variants
|
||||
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
|
||||
|
||||
# List targets from templates
|
||||
bash(ls {base_path}/prototypes/_templates/*-layout-1.json | sed 's/-layout-1.json//')
|
||||
# Check token sources
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "consolidated")
|
||||
bash(test -f {base_path}/style-extraction/style-cards.json && echo "proposed")
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
@@ -287,23 +268,20 @@ bash(ls {base_path}/prototypes/_templates/*-layout-1.json | sed 's/-layout-1.jso
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-consolidation/style-1/design-tokens.json && echo "valid")
|
||||
|
||||
# Count template files
|
||||
bash(ls {base_path}/prototypes/_templates/*.html | wc -l)
|
||||
# Count generated files
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Verify output complete
|
||||
# Verify preview
|
||||
bash(test -f {base_path}/prototypes/compare.html && echo "exists")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
```bash
|
||||
# Create directories
|
||||
bash(mkdir -p {base_path}/prototypes/_templates)
|
||||
bash(mkdir -p {base_path}/prototypes/_inspirations)
|
||||
|
||||
# Convert tokens to CSS
|
||||
bash(cat design-tokens.json | ~/.claude/scripts/convert_tokens_to_css.sh > tokens.css)
|
||||
|
||||
# Run instantiation script
|
||||
bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --mode "page")
|
||||
# Run preview script
|
||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
@@ -311,19 +289,16 @@ bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --m
|
||||
```
|
||||
{base_path}/
|
||||
├── prototypes/
|
||||
│ ├── _templates/
|
||||
│ │ ├── {target}-layout-{l}.json # Layout plans
|
||||
│ │ ├── {target}-layout-{l}.html # HTML templates
|
||||
│ │ └── {target}-layout-{l}.css # CSS templates
|
||||
│ ├── _inspirations/
|
||||
│ │ └── {target}-layout-ideas.txt # Layout inspiration
|
||||
│ ├── {target}-style-{s}-layout-{l}.html # Final prototypes
|
||||
│ ├── {target}-style-{s}-layout-{l}-notes.md
|
||||
│ ├── {target}-style-{s}-layout-{l}.css
|
||||
│ ├── compare.html
|
||||
│ ├── index.html
|
||||
│ └── PREVIEW.md
|
||||
└── style-consolidation/
|
||||
└── style-{s}/
|
||||
├── design-tokens.json
|
||||
├── tokens.css
|
||||
└── style-guide.md
|
||||
```
|
||||
|
||||
@@ -331,45 +306,45 @@ bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{base_path}/prototypes" --m
|
||||
|
||||
### Common Errors
|
||||
```
|
||||
ERROR: No design systems found
|
||||
→ Run /workflow:ui-design:consolidate first
|
||||
ERROR: No token sources found
|
||||
→ Run /workflow:ui-design:extract or /workflow:ui-design:consolidate
|
||||
|
||||
ERROR: jq not found
|
||||
→ Install jq: brew install jq
|
||||
ERROR: MCP search failed
|
||||
→ Check network, retry
|
||||
|
||||
ERROR: Agent task failed
|
||||
→ Check agent output, retry phase
|
||||
→ Check agent output, retry specific target×style
|
||||
|
||||
ERROR: Script permission denied
|
||||
→ chmod +x ~/.claude/scripts/ui-instantiate-prototypes.sh
|
||||
→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
|
||||
```
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial failure**: Check script logs for counts
|
||||
- **Missing templates**: Regenerate Phase 4
|
||||
- **Invalid tokens**: Validate design-tokens.json
|
||||
- **Partial success**: Keep successful target×style combinations
|
||||
- **Missing design_attributes**: Works without (less style-aware)
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
- [ ] CSS uses var(--token-name) only
|
||||
- [ ] No hardcoded colors/spacing
|
||||
- [ ] CSS uses direct token values (no var())
|
||||
- [ ] HTML structure adapts to design_attributes (if available)
|
||||
- [ ] Semantic HTML5 structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Mobile-first responsive
|
||||
- [ ] Naming: `{target}-style-{s}-layout-{l}`
|
||||
- [ ] Layouts structurally distinct
|
||||
- [ ] compare.html works
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Template-Based**: `S` times faster generation
|
||||
- **Target Types**: Pages and components
|
||||
- **Agent-Driven**: Parallel task execution
|
||||
- **Token-Driven**: No hardcoded values
|
||||
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
|
||||
- **Component Isolation**: Complete task independence
|
||||
- **Style-Aware**: HTML adapts to design_attributes
|
||||
- **Self-Contained CSS**: Direct token values (no var())
|
||||
- **Inspiration-Based**: Simple text research vs complex JSON
|
||||
- **Production-Ready**: Semantic, accessible, responsive
|
||||
- **Interactive Preview**: Matrix comparison view
|
||||
|
||||
## Integration
|
||||
|
||||
**Input**: design-tokens.json from `/workflow:ui-design:consolidate`
|
||||
**Output**: Prototypes for `/workflow:ui-design:update`
|
||||
**Input**: design-tokens.json, design-space-analysis.json (optional), targets
|
||||
**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
Block a user