mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
refactor: unify UI design workflow target parameters for pages and components
Consolidate separate page/component modes into a unified target system to reduce code duplication and simplify the workflow parameter model. Changes: - Merge --pages and --components into unified --targets parameter - Add --target-type (auto|page|component) with intelligent detection - Remove Phase 0d from explore-auto.md (131 lines of duplicate logic) - Implement detect_target_type() helper for automatic classification - Update generate.md to support adaptive wrapper generation - Full HTML structure for pages - Minimal wrapper for isolated components - Update imitate-auto.md and update.md for parameter consistency - Enhance ui-design-agent.md with adaptive design capabilities - Maintain full backward compatibility with legacy syntax Benefits: - Code reduction: -35% in target inference logic (255 → 165 lines) - Maintenance: Single unified logic path vs dual implementations - Extensibility: Foundation for future mixed-mode support - UX: Simpler parameter model with automatic type detection Technical Details: - explore-auto.md: 605 lines changed (unified Phase 0c) - generate.md: 353 lines changed (targets + adaptive wrapper) - Net change: +685 insertions, -504 deletions across 5 files All existing workflows remain compatible via legacy parameter support. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -10,8 +10,10 @@ description: |
|
|||||||
- Design system documentation and quality validation
|
- Design system documentation and quality validation
|
||||||
|
|
||||||
Primary task executors:
|
Primary task executors:
|
||||||
- consolidate.md: Design token consolidation with layout strategy planning
|
- consolidate.md → @ui-design-agent: Design token consolidation with layout strategy planning
|
||||||
- generate.md: Token-driven prototype generation with research-informed templates
|
- generate.md → @ui-design-agent: Token-driven prototype generation with research-informed templates
|
||||||
|
- Phase 2a → @ui-design-agent: Parallel layout template generation (L×T tasks)
|
||||||
|
- Phase 3.5 → @ui-design-agent: Cross-target consistency validation
|
||||||
|
|
||||||
MCP Integrations:
|
MCP Integrations:
|
||||||
- Exa MCP: Design trend research, modern UI patterns, component best practices
|
- Exa MCP: Design trend research, modern UI patterns, component best practices
|
||||||
@@ -26,11 +28,15 @@ capabilities:
|
|||||||
- accessibility_validation
|
- accessibility_validation
|
||||||
- mcp_research_integration
|
- mcp_research_integration
|
||||||
- css_token_conversion
|
- css_token_conversion
|
||||||
|
- adaptive_responsive_design
|
||||||
|
- runtime_style_switching
|
||||||
quality_gates:
|
quality_gates:
|
||||||
a11y: "AA"
|
a11y: "AA"
|
||||||
token_coverage: 0.90
|
token_coverage: 0.90
|
||||||
responsive_breakpoints: 3
|
responsive_breakpoints: 3
|
||||||
css_token_usage: 1.00
|
css_token_usage: 1.00
|
||||||
|
style_switchable: true
|
||||||
|
adaptive_devices: ["mobile", "tablet", "desktop"]
|
||||||
providers:
|
providers:
|
||||||
research:
|
research:
|
||||||
- exa_mcp
|
- exa_mcp
|
||||||
@@ -189,11 +195,12 @@ DO NOT invent variable names like --color-background-base, --radius-md, etc.
|
|||||||
```
|
```
|
||||||
|
|
||||||
**Template Quality Standards**:
|
**Template Quality Standards**:
|
||||||
- ✅ 100% CSS variable usage (no hardcoded values)
|
- ✅ **ADAPTIVE**: Multi-device responsive (mobile 375px, tablet 768px, desktop 1024px+)
|
||||||
- ✅ Semantic HTML5 structure (header, nav, main, article)
|
- ✅ **STYLE-SWITCHABLE**: 100% CSS variable usage (no hardcoded values)
|
||||||
- ✅ ARIA attributes for accessibility (roles, labels, aria-describedby)
|
- ✅ **SEMANTIC**: HTML5 structure (header, nav, main, article)
|
||||||
- ✅ Mobile-first responsive design
|
- ✅ **ACCESSIBLE**: ARIA attributes for WCAG AA (roles, labels, aria-describedby)
|
||||||
- ✅ Style-agnostic (reusable across all style variants)
|
- ✅ **MOBILE-FIRST**: Progressive enhancement from small to large screens
|
||||||
|
- ✅ **THEME-AGNOSTIC**: Reusable across all style variants via token swapping
|
||||||
|
|
||||||
#### Phase 2b: Prototype Instantiation
|
#### Phase 2b: Prototype Instantiation
|
||||||
```bash
|
```bash
|
||||||
@@ -534,9 +541,9 @@ Bash("cat design-tokens.json | ~/.claude/scripts/convert_tokens_to_css.sh > toke
|
|||||||
Bash("~/.claude/scripts/ui-instantiate-prototypes.sh {prototypes_dir} --session-id {id} --mode page")
|
Bash("~/.claude/scripts/ui-instantiate-prototypes.sh {prototypes_dir} --session-id {id} --mode page")
|
||||||
```
|
```
|
||||||
|
|
||||||
**Task**: Launch conceptual-planning-agent for template generation
|
**Task**: Launch ui-design-agent for template generation
|
||||||
```javascript
|
```javascript
|
||||||
Task(conceptual-planning-agent): "[UI_LAYOUT_TEMPLATE_GENERATION] ..."
|
Task(ui-design-agent): "[UI_LAYOUT_TEMPLATE_GENERATION] ..."
|
||||||
```
|
```
|
||||||
|
|
||||||
### MCP Tools
|
### MCP Tools
|
||||||
@@ -640,6 +647,8 @@ Your role is to **execute design tasks** (not orchestrate workflows). You:
|
|||||||
- **Quality gates**: Enforce accessibility, semantic standards, token usage
|
- **Quality gates**: Enforce accessibility, semantic standards, token usage
|
||||||
- **Script integration**: Leverage convert_tokens_to_css.sh, ui-instantiate-prototypes.sh
|
- **Script integration**: Leverage convert_tokens_to_css.sh, ui-instantiate-prototypes.sh
|
||||||
- **MCP enhancement**: Use Code Index for pattern discovery, Exa for trend research
|
- **MCP enhancement**: Use Code Index for pattern discovery, Exa for trend research
|
||||||
|
- 🎯 **ADAPTIVE-FIRST**: Every template must work on mobile, tablet, desktop
|
||||||
|
- 🔄 **STYLE-SWITCHABLE**: All prototypes support runtime theme switching via token swapping
|
||||||
|
|
||||||
**Tool Strategy**:
|
**Tool Strategy**:
|
||||||
- **Read/Write**: File operations for tokens, reports, documentation
|
- **Read/Write**: File operations for tokens, reports, documentation
|
||||||
|
|||||||
@@ -1,15 +1,16 @@
|
|||||||
---
|
---
|
||||||
name: explore-auto
|
name: explore-auto
|
||||||
description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations for pages OR components (3×3 matrix exploration)
|
description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations (3×3 matrix exploration)
|
||||||
usage: /workflow:ui-design:explore-auto [--prompt "<desc>"] [--images "<glob>"] [--pages "<list>" | --components "<list>"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
|
usage: /workflow:ui-design:explore-auto [--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
|
||||||
argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\" | --components \"navbar,hero,card\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]"
|
argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--targets \"dashboard,auth,navbar,hero\"] [--target-type \"auto\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]"
|
||||||
examples:
|
examples:
|
||||||
- /workflow:ui-design:explore-auto --prompt "Generate 3 style variants for modern blog: home, article, author"
|
- /workflow:ui-design:explore-auto --prompt "Generate 3 style variants for modern blog: home, article, author"
|
||||||
- /workflow:ui-design:explore-auto --prompt "SaaS dashboard and settings with 2 layout options"
|
- /workflow:ui-design:explore-auto --prompt "SaaS dashboard and settings with 2 layout options"
|
||||||
- /workflow:ui-design:explore-auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
|
- /workflow:ui-design:explore-auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
|
||||||
- /workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png"
|
- /workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png"
|
||||||
- /workflow:ui-design:explore-auto --components "navbar,hero" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2
|
- /workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2
|
||||||
- /workflow:ui-design:explore-auto --components "card,form" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
- /workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||||
|
- /workflow:ui-design:explore-auto --targets "home,dashboard" --target-type "page"
|
||||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -17,23 +18,24 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
|||||||
|
|
||||||
## Overview & Execution Model
|
## Overview & Execution Model
|
||||||
|
|
||||||
**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning. Supports two exploration modes:
|
**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning.
|
||||||
|
|
||||||
**Exploration Modes**:
|
**Unified Target System**: Generates `style_variants × layout_variants × targets` prototypes, where targets can be:
|
||||||
- **Page Mode** (default): Generates `style_variants × layout_variants × pages` full-page prototypes
|
- **Pages** (full-page layouts): home, dashboard, settings, etc.
|
||||||
- **Component Mode**: Generates `style_variants × layout_variants × components` isolated component prototypes
|
- **Components** (isolated UI elements): navbar, card, hero, form, etc.
|
||||||
|
- **Mixed**: Can combine both in a single workflow
|
||||||
|
|
||||||
**Autonomous Flow**:
|
**Autonomous Flow**:
|
||||||
1. User triggers: `/workflow:ui-design:explore-auto [params]`
|
1. User triggers: `/workflow:ui-design:explore-auto [params]`
|
||||||
2. Phase 1 (style-extract) → Auto-continues
|
2. Phase 1 (style-extract) → Auto-continues
|
||||||
3. Phase 2 (style-consolidate) → Auto-continues
|
3. Phase 2 (style-consolidate) → Auto-continues
|
||||||
4. Phase 3 (ui-generate) → Auto-continues with appropriate mode
|
4. Phase 3 (ui-generate) → Auto-continues with unified target list
|
||||||
5. Phase 4 (design-update) → Auto-continues
|
5. Phase 4 (design-update) → Auto-continues
|
||||||
6. Phase 5 (batch-plan, optional) → Reports completion
|
6. Phase 5 (batch-plan, optional) → Reports completion
|
||||||
|
|
||||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon completion, coordinator constructs next command and executes immediately. No user intervention required.
|
**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon completion, coordinator constructs next command and executes immediately. No user intervention required.
|
||||||
|
|
||||||
**Mode Selection**: Determined by `--pages` vs `--components` parameter (mutually exclusive).
|
**Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`.
|
||||||
|
|
||||||
## Core Rules
|
## Core Rules
|
||||||
|
|
||||||
@@ -46,28 +48,33 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
|||||||
## Parameter Requirements
|
## Parameter Requirements
|
||||||
|
|
||||||
**Optional Parameters** (all have smart defaults):
|
**Optional Parameters** (all have smart defaults):
|
||||||
- `--pages "<list>"`: Pages to generate (inferred from prompt/session if omitted) - **Page Mode**
|
- `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted)
|
||||||
- `--components "<list>"`: Components to generate (inferred from prompt if omitted) - **Component Mode**
|
- `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection)
|
||||||
- `--session <id>`: Workflow session ID (standalone mode if omitted)
|
- `--session <id>`: Workflow session ID (standalone mode if omitted)
|
||||||
- `--images "<glob>"`: Reference image paths (default: `design-refs/*`)
|
- `--images "<glob>"`: Reference image paths (default: `design-refs/*`)
|
||||||
- `--prompt "<description>"`: Design style and pages/components description
|
- `--prompt "<description>"`: Design style and target description
|
||||||
- `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
|
- `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
|
||||||
- `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
|
- `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
|
||||||
- `--batch-plan`: Auto-generate implementation tasks after design-update
|
- `--batch-plan`: Auto-generate implementation tasks after design-update
|
||||||
|
|
||||||
**Input Rules**:
|
**Legacy Parameters** (maintained for backward compatibility):
|
||||||
- Must provide at least one: `--images` or `--prompt`
|
- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
|
||||||
- Both can be combined for guided analysis
|
- `--components "<list>"`: Alias for `--targets` with `--target-type component`
|
||||||
- `--pages` and `--components` are **mutually exclusive**
|
|
||||||
- Default mode: **Page Mode** if neither specified
|
|
||||||
|
|
||||||
**Supported Component Types**:
|
**Input Rules**:
|
||||||
- **Navigation**: navbar, header, menu, breadcrumb, tabs, sidebar
|
- Must provide at least one: `--images` or `--prompt` or `--targets`
|
||||||
- **Content**: hero, card, list, table, grid, timeline
|
- Multiple parameters can be combined for guided analysis
|
||||||
- **Input**: form, search, filter, input-group
|
- If `--targets` not provided, intelligently inferred from prompt/session
|
||||||
- **Feedback**: modal, alert, toast, badge, progress
|
|
||||||
- **Media**: gallery, carousel, video-player, image-card
|
**Supported Target Types**:
|
||||||
- **Other**: footer, pagination, dropdown, tooltip, avatar
|
- **Pages** (full layouts): home, dashboard, settings, profile, login, etc.
|
||||||
|
- **Components** (UI elements):
|
||||||
|
- Navigation: navbar, header, menu, breadcrumb, tabs, sidebar
|
||||||
|
- Content: hero, card, list, table, grid, timeline
|
||||||
|
- Input: form, search, filter, input-group
|
||||||
|
- Feedback: modal, alert, toast, badge, progress
|
||||||
|
- Media: gallery, carousel, video-player, image-card
|
||||||
|
- Other: footer, pagination, dropdown, tooltip, avatar
|
||||||
|
|
||||||
**Intelligent Prompt Parsing**: Extracts variant counts from natural language:
|
**Intelligent Prompt Parsing**: Extracts variant counts from natural language:
|
||||||
- "Generate **3 style variants**" → `--style-variants 3`
|
- "Generate **3 style variants**" → `--style-variants 3`
|
||||||
@@ -77,11 +84,14 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
|||||||
|
|
||||||
## Execution Modes
|
## Execution Modes
|
||||||
|
|
||||||
**Matrix Mode** (default and only):
|
**Matrix Mode** (unified):
|
||||||
- Generates `style_variants × layout_variants × pages` prototypes
|
- Generates `style_variants × layout_variants × targets` prototypes
|
||||||
- **Phase 1**: `style_variants` style options
|
- **Phase 1**: `style_variants` style options
|
||||||
- **Phase 2**: `style_variants` independent design systems
|
- **Phase 2**: `style_variants` independent design systems
|
||||||
- **Phase 3**: `style_variants × layout_variants` prototypes per page
|
- **Phase 3**: `style_variants × layout_variants × targets` prototypes
|
||||||
|
- Pages: Full-page layouts with complete structure
|
||||||
|
- Components: Isolated elements with minimal wrapper
|
||||||
|
- Mixed: Combination based on intelligent detection
|
||||||
|
|
||||||
**Integrated vs. Standalone**:
|
**Integrated vs. Standalone**:
|
||||||
- `--session` flag determines session integration or standalone execution
|
- `--session` flag determines session integration or standalone execution
|
||||||
@@ -138,261 +148,206 @@ Write({base_path}/.run-metadata.json): {
|
|||||||
STORE: run_id, base_path
|
STORE: run_id, base_path
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 0c: Enhanced Page Inference with Dynamic Analysis
|
### Phase 0c: Unified Target Inference with Intelligent Type Detection
|
||||||
```bash
|
```bash
|
||||||
page_list = []
|
target_list = []
|
||||||
page_source = "none"
|
target_type = "auto" # auto, page, component
|
||||||
|
target_source = "none"
|
||||||
|
|
||||||
# Priority 1: Explicit --pages parameter
|
# Step 1: Handle legacy parameters (backward compatibility)
|
||||||
IF --pages provided:
|
IF --pages provided:
|
||||||
raw_pages = {--pages value}
|
target_list = split_and_clean(--pages, delimiters=[",", ";", "、"])
|
||||||
# Split by comma/semicolon/Chinese comma, clean and normalize
|
target_type = "page"
|
||||||
page_list = split_and_clean(raw_pages, delimiters=[",", ";", "、"])
|
target_source = "explicit_legacy"
|
||||||
page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()]
|
REPORT: "📋 Using explicitly provided pages (legacy): {', '.join(target_list)}"
|
||||||
page_source = "explicit"
|
ELSE IF --components provided:
|
||||||
REPORT: "📋 Using explicitly provided pages: {', '.join(page_list)}"
|
target_list = split_and_clean(--components, delimiters=[",", ";", "、"])
|
||||||
|
target_type = "component"
|
||||||
|
target_source = "explicit_legacy"
|
||||||
|
REPORT: "🧩 Using explicitly provided components (legacy): {', '.join(target_list)}"
|
||||||
|
|
||||||
# Priority 2: Dynamic prompt decomposition (Claude analysis)
|
# Step 2: Handle unified --targets parameter
|
||||||
|
ELSE IF --targets provided:
|
||||||
|
target_list = split_and_clean(--targets, delimiters=[",", ";", "、"])
|
||||||
|
target_source = "explicit"
|
||||||
|
|
||||||
|
# Override type if explicitly set
|
||||||
|
IF --target-type provided AND --target-type != "auto":
|
||||||
|
target_type = --target-type
|
||||||
|
REPORT: "🎯 Using explicitly provided targets with type '{target_type}': {', '.join(target_list)}"
|
||||||
|
ELSE:
|
||||||
|
# Intelligent type detection
|
||||||
|
target_type = detect_target_type(target_list)
|
||||||
|
REPORT: "🎯 Using explicitly provided targets (detected type: {target_type}): {', '.join(target_list)}"
|
||||||
|
|
||||||
|
# Step 3: Dynamic prompt analysis
|
||||||
ELSE IF --prompt provided:
|
ELSE IF --prompt provided:
|
||||||
REPORT: "🔍 Analyzing prompt to identify pages..."
|
REPORT: "🔍 Analyzing prompt to identify targets..."
|
||||||
|
|
||||||
# Internal Claude analysis
|
# Internal Claude analysis
|
||||||
analysis_prompt = """
|
analysis_prompt = """
|
||||||
Analyze the UI design request and identify all distinct pages/screens.
|
Analyze the UI design request and identify targets (pages or components) with their types.
|
||||||
|
|
||||||
Request: "{prompt_text}"
|
Request: "{prompt_text}"
|
||||||
|
|
||||||
Output JSON:
|
Output JSON:
|
||||||
{
|
{
|
||||||
"pages": [{"name": "page-name", "purpose": "description", "priority": "high|medium|low"}],
|
"targets": [
|
||||||
"shared_components": ["header", "footer"],
|
{"name": "normalized-name", "type": "page|component", "purpose": "description", "priority": "high|medium|low"}
|
||||||
"navigation_structure": {"primary": ["home"], "secondary": ["settings"]}
|
],
|
||||||
|
"primary_type": "page|component|mixed",
|
||||||
|
"shared_elements": ["header", "footer"],
|
||||||
|
"context": "application context description"
|
||||||
}
|
}
|
||||||
|
|
||||||
Rules:
|
Rules:
|
||||||
- Normalize to URL-friendly (lowercase, hyphens, no spaces)
|
- Normalize to URL-friendly (lowercase, hyphens, no spaces)
|
||||||
- Consolidate synonyms (homepage → home, user-profile → profile)
|
- Detect type: page (full layouts like home, dashboard) vs component (UI elements like navbar, card)
|
||||||
- Identify hierarchical relationships
|
- Consolidate synonyms (homepage → home, navigation → navbar)
|
||||||
- Prioritize by user intent
|
- Common pages: home, dashboard, settings, profile, login, signup
|
||||||
- Common patterns: home, dashboard, settings, profile, login, signup
|
- Common components: navbar, header, hero, card, form, button, modal, footer
|
||||||
|
- If prompt mentions "page", "screen", "view" → type: page
|
||||||
|
- If prompt mentions "component", "element", "widget" → type: component
|
||||||
"""
|
"""
|
||||||
|
|
||||||
page_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
|
target_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
|
||||||
page_list = extract_page_names_from_structure(page_structure)
|
target_list = extract_target_names_from_structure(target_structure)
|
||||||
page_source = "prompt_analysis"
|
target_type = target_structure.primary_type OR detect_target_type(target_list)
|
||||||
|
target_source = "prompt_analysis"
|
||||||
|
|
||||||
IF page_list:
|
IF target_list:
|
||||||
REPORT: "📋 Identified pages from prompt:"
|
REPORT: "🎯 Identified targets from prompt (type: {target_type}):"
|
||||||
FOR page IN page_structure.pages:
|
FOR target IN target_structure.targets:
|
||||||
REPORT: " • {page.name}: {page.purpose} [{page.priority}]"
|
icon = "📄" IF target.type == "page" ELSE "🧩"
|
||||||
IF page_structure.shared_components:
|
REPORT: " {icon} {target.name}: {target.purpose} [{target.priority}]"
|
||||||
REPORT: "🔧 Shared components: {', '.join(shared_components)}"
|
IF target_structure.shared_elements:
|
||||||
|
REPORT: "🔧 Shared elements: {', '.join(shared_elements)}"
|
||||||
|
|
||||||
# Priority 3: Extract from synthesis-specification.md
|
# Step 4: Extract from synthesis-specification.md (for session mode)
|
||||||
ELSE IF --session AND exists(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md):
|
ELSE IF --session AND exists(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md):
|
||||||
synthesis = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
synthesis = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||||
page_list = extract_pages_from_synthesis(synthesis)
|
target_list = extract_targets_from_synthesis(synthesis) # Returns pages by default
|
||||||
page_source = "synthesis"
|
target_type = "page"
|
||||||
REPORT: "📋 Extracted from synthesis: {', '.join(page_list)}"
|
target_source = "synthesis"
|
||||||
|
REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}"
|
||||||
|
|
||||||
# Priority 4: Fallback default
|
# Step 5: Fallback default
|
||||||
IF NOT page_list:
|
IF NOT target_list:
|
||||||
page_list = ["home"]
|
target_list = ["home"]
|
||||||
page_source = "default"
|
target_type = "page"
|
||||||
REPORT: "⚠️ No pages identified, using default: 'home'"
|
target_source = "default"
|
||||||
|
REPORT: "⚠️ No targets identified, using default: 'home' (page)"
|
||||||
|
|
||||||
# Validate page names
|
# Validate and clean target names
|
||||||
validated_pages = []
|
validated_targets = []
|
||||||
invalid_pages = []
|
invalid_targets = []
|
||||||
FOR page IN page_list:
|
FOR target IN target_list:
|
||||||
cleaned = page.strip().lower().replace(" ", "-")
|
cleaned = target.strip().lower().replace(" ", "-")
|
||||||
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
||||||
validated_pages.append(cleaned)
|
validated_targets.append(cleaned)
|
||||||
ELSE:
|
ELSE:
|
||||||
invalid_pages.append(page)
|
invalid_targets.append(target)
|
||||||
|
|
||||||
IF invalid_pages:
|
IF invalid_targets:
|
||||||
REPORT: "⚠️ Skipped invalid: {', '.join(invalid_pages)}"
|
REPORT: "⚠️ Skipped invalid: {', '.join(invalid_targets)}"
|
||||||
|
|
||||||
IF NOT validated_pages:
|
IF NOT validated_targets:
|
||||||
validated_pages = ["home"]
|
validated_targets = ["home"]
|
||||||
|
target_type = "page"
|
||||||
REPORT: "⚠️ All invalid, using default: 'home'"
|
REPORT: "⚠️ All invalid, using default: 'home'"
|
||||||
|
|
||||||
|
# Override target type if explicitly set
|
||||||
|
IF --target-type provided AND --target-type != "auto":
|
||||||
|
target_type = --target-type
|
||||||
|
REPORT: "🔧 Target type overridden to: {target_type}"
|
||||||
|
|
||||||
# Interactive confirmation
|
# Interactive confirmation
|
||||||
|
type_emoji = "📄" IF target_type == "page" ELSE ("🧩" IF target_type == "component" ELSE "🎯")
|
||||||
|
type_label = "PAGES" IF target_type == "page" ELSE ("COMPONENTS" IF target_type == "component" ELSE "TARGETS")
|
||||||
|
|
||||||
REPORT: ""
|
REPORT: ""
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
REPORT: "📌 PAGE LIST CONFIRMATION"
|
REPORT: "{type_emoji} {type_label} CONFIRMATION"
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
REPORT: "Source: {page_source}"
|
REPORT: "Type: {target_type}"
|
||||||
REPORT: "Pages ({len(validated_pages)}): {', '.join(validated_pages)}"
|
REPORT: "Source: {target_source}"
|
||||||
|
REPORT: "Targets ({len(validated_targets)}): {', '.join(validated_targets)}"
|
||||||
REPORT: ""
|
REPORT: ""
|
||||||
REPORT: "Options:"
|
REPORT: "Options:"
|
||||||
REPORT: " • 'continue/yes' - proceed"
|
REPORT: " • 'continue/yes' - proceed"
|
||||||
REPORT: " • 'pages: page1,page2' - replace list"
|
REPORT: " • 'targets: item1,item2' - replace list"
|
||||||
REPORT: " • 'skip: page-name' - remove pages"
|
REPORT: " • 'skip: item-name' - remove targets"
|
||||||
REPORT: " • 'add: page-name' - add pages"
|
REPORT: " • 'add: item-name' - add targets"
|
||||||
|
REPORT: " • 'type: page|component' - change type"
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||||
|
|
||||||
user_input = WAIT_FOR_USER_INPUT()
|
user_input = WAIT_FOR_USER_INPUT()
|
||||||
|
|
||||||
# Process input
|
# Process input
|
||||||
IF user_input MATCHES r"^(continue|yes|ok|proceed)$":
|
IF user_input MATCHES r"^(continue|yes|ok|proceed)$":
|
||||||
REPORT: "✅ Proceeding with: {', '.join(validated_pages)}"
|
REPORT: "✅ Proceeding with {len(validated_targets)} {target_type}(s): {', '.join(validated_targets)}"
|
||||||
ELSE IF user_input MATCHES r"^pages:\s*(.+)$":
|
ELSE IF user_input MATCHES r"^targets:\s*(.+)$":
|
||||||
new_pages = split_and_clean(extract_after("pages:"), [",", ";"])
|
new_targets = split_and_clean(extract_after("targets:"), [",", ";"])
|
||||||
validated_pages = [p.strip().lower().replace(" ", "-") for p in new_pages if p.strip()]
|
validated_targets = [t.strip().lower().replace(" ", "-") for t in new_targets if t.strip()]
|
||||||
REPORT: "✅ Updated: {', '.join(validated_pages)}"
|
REPORT: "✅ Updated: {', '.join(validated_targets)}"
|
||||||
ELSE IF user_input MATCHES r"^skip:\s*(.+)$":
|
ELSE IF user_input MATCHES r"^skip:\s*(.+)$":
|
||||||
to_skip = [p.strip().lower() for p in extract_after("skip:").split(",")]
|
to_skip = [t.strip().lower() for t in extract_after("skip:").split(",")]
|
||||||
validated_pages = [p for p in validated_pages if p not in to_skip]
|
validated_targets = [t for t in validated_targets if t not in to_skip]
|
||||||
REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_pages)}"
|
REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_targets)}"
|
||||||
ELSE IF user_input MATCHES r"^add:\s*(.+)$":
|
ELSE IF user_input MATCHES r"^add:\s*(.+)$":
|
||||||
to_add = [p.strip().lower().replace(" ", "-") for p in extract_after("add:").split(",") if p.strip()]
|
to_add = [t.strip().lower().replace(" ", "-") for t in extract_after("add:").split(",") if t.strip()]
|
||||||
validated_pages.extend(to_add)
|
validated_targets.extend(to_add)
|
||||||
validated_pages = list(dict.fromkeys(validated_pages)) # Remove duplicates
|
validated_targets = list(dict.fromkeys(validated_targets)) # Remove duplicates
|
||||||
REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_pages)}"
|
REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_targets)}"
|
||||||
|
ELSE IF user_input MATCHES r"^type:\s*(page|component)$":
|
||||||
|
target_type = extract_after("type:").strip()
|
||||||
|
REPORT: "✅ Type changed to: {target_type}"
|
||||||
ELSE:
|
ELSE:
|
||||||
REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_pages)}"
|
REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_targets)}"
|
||||||
|
|
||||||
IF NOT validated_pages:
|
IF NOT validated_targets:
|
||||||
validated_pages = ["home"]
|
validated_targets = ["home"]
|
||||||
|
target_type = "page"
|
||||||
|
|
||||||
STORE: inferred_page_list = validated_pages
|
STORE: inferred_target_list = validated_targets
|
||||||
STORE: page_inference_source = page_source
|
STORE: target_type = target_type
|
||||||
STORE: page_structure_data = page_structure
|
STORE: target_inference_source = target_source
|
||||||
STORE: exploration_mode = "page"
|
STORE: target_structure_data = target_structure IF exists(target_structure) ELSE {}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 0d: Component Inference (Component Mode Only)
|
**Helper Function: detect_target_type()**
|
||||||
```bash
|
```bash
|
||||||
component_list = []
|
detect_target_type(target_list):
|
||||||
component_source = "none"
|
# Common page keywords
|
||||||
exploration_mode = "page" # Default
|
page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth",
|
||||||
|
"landing", "about", "contact", "pricing", "account", "admin"]
|
||||||
|
|
||||||
# Determine exploration mode
|
# Common component keywords
|
||||||
IF --components provided:
|
component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form",
|
||||||
exploration_mode = "component"
|
"modal", "alert", "toast", "menu", "sidebar", "breadcrumb", "tabs",
|
||||||
raw_components = {--components value}
|
"table", "list", "grid", "carousel", "gallery", "search", "filter"]
|
||||||
# Split and clean
|
|
||||||
component_list = split_and_clean(raw_components, delimiters=[",", ";", "、"])
|
|
||||||
component_list = [c.strip().lower().replace(" ", "-") for c in component_list if c.strip()]
|
|
||||||
component_source = "explicit"
|
|
||||||
REPORT: "🧩 Using explicitly provided components: {', '.join(component_list)}"
|
|
||||||
|
|
||||||
# Component inference from prompt (if no --pages and no --components)
|
page_matches = 0
|
||||||
ELSE IF --prompt provided AND NOT --pages:
|
component_matches = 0
|
||||||
REPORT: "🔍 Analyzing prompt to identify components..."
|
|
||||||
|
|
||||||
# Internal Claude analysis for components
|
FOR target IN target_list:
|
||||||
analysis_prompt = """
|
IF target IN page_keywords:
|
||||||
Analyze the UI design request and identify component-level design elements.
|
page_matches += 1
|
||||||
|
ELSE IF target IN component_keywords:
|
||||||
|
component_matches += 1
|
||||||
|
ELSE IF contains_keyword(target, ["page", "screen", "view"]):
|
||||||
|
page_matches += 1
|
||||||
|
ELSE IF contains_keyword(target, ["component", "widget", "element"]):
|
||||||
|
component_matches += 1
|
||||||
|
|
||||||
Request: "{prompt_text}"
|
# Decision logic
|
||||||
|
IF component_matches > page_matches:
|
||||||
Output JSON:
|
RETURN "component"
|
||||||
{
|
ELSE IF page_matches > 0 OR len(target_list) == 0:
|
||||||
"components": [
|
RETURN "page"
|
||||||
{"name": "component-type", "purpose": "description", "variants": ["variant1", "variant2"]}
|
|
||||||
],
|
|
||||||
"component_context": "page or section where components appear",
|
|
||||||
"interaction_patterns": ["hover", "click", "scroll"]
|
|
||||||
}
|
|
||||||
|
|
||||||
Component Categories:
|
|
||||||
- Navigation: navbar, header, menu, breadcrumb, tabs, sidebar
|
|
||||||
- Content: hero, card, list, table, grid, timeline
|
|
||||||
- Input: form, search, filter, input-group
|
|
||||||
- Feedback: modal, alert, toast, badge, progress
|
|
||||||
- Media: gallery, carousel, video-player, image-card
|
|
||||||
- Other: footer, pagination, dropdown, tooltip, avatar
|
|
||||||
|
|
||||||
Rules:
|
|
||||||
- Normalize to lowercase with hyphens
|
|
||||||
- Be specific (e.g., "navbar" not "navigation")
|
|
||||||
- Include interaction context
|
|
||||||
"""
|
|
||||||
|
|
||||||
component_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
|
|
||||||
|
|
||||||
# Check if prompt is component-focused
|
|
||||||
IF component_structure.components AND len(component_structure.components) > 0:
|
|
||||||
component_list = extract_component_names_from_structure(component_structure)
|
|
||||||
component_source = "prompt_analysis"
|
|
||||||
exploration_mode = "component"
|
|
||||||
|
|
||||||
REPORT: "🧩 Identified components from prompt:"
|
|
||||||
FOR comp IN component_structure.components:
|
|
||||||
REPORT: " • {comp.name}: {comp.purpose}"
|
|
||||||
IF component_structure.interaction_patterns:
|
|
||||||
REPORT: "🎯 Interaction patterns: {', '.join(interaction_patterns)}"
|
|
||||||
|
|
||||||
# Validate component names
|
|
||||||
IF exploration_mode == "component":
|
|
||||||
validated_components = []
|
|
||||||
invalid_components = []
|
|
||||||
FOR comp IN component_list:
|
|
||||||
cleaned = comp.strip().lower().replace(" ", "-")
|
|
||||||
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
|
||||||
validated_components.append(cleaned)
|
|
||||||
ELSE:
|
|
||||||
invalid_components.append(comp)
|
|
||||||
|
|
||||||
IF invalid_components:
|
|
||||||
REPORT: "⚠️ Skipped invalid: {', '.join(invalid_components)}"
|
|
||||||
|
|
||||||
IF NOT validated_components:
|
|
||||||
# Fallback to page mode with default page
|
|
||||||
exploration_mode = "page"
|
|
||||||
inferred_page_list = ["home"]
|
|
||||||
REPORT: "⚠️ No valid components, switching to page mode: 'home'"
|
|
||||||
ELSE:
|
ELSE:
|
||||||
# Interactive confirmation for components
|
# Ambiguous - default to page
|
||||||
REPORT: ""
|
RETURN "page"
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
||||||
REPORT: "🧩 COMPONENT LIST CONFIRMATION"
|
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
||||||
REPORT: "Mode: Component Exploration"
|
|
||||||
REPORT: "Source: {component_source}"
|
|
||||||
REPORT: "Components ({len(validated_components)}): {', '.join(validated_components)}"
|
|
||||||
REPORT: ""
|
|
||||||
REPORT: "Options:"
|
|
||||||
REPORT: " • 'continue/yes' - proceed"
|
|
||||||
REPORT: " • 'components: comp1,comp2' - replace list"
|
|
||||||
REPORT: " • 'skip: comp-name' - remove components"
|
|
||||||
REPORT: " • 'add: comp-name' - add components"
|
|
||||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
||||||
|
|
||||||
user_input = WAIT_FOR_USER_INPUT()
|
|
||||||
|
|
||||||
# Process input
|
|
||||||
IF user_input MATCHES r"^(continue|yes|ok|proceed)$":
|
|
||||||
REPORT: "✅ Proceeding with: {', '.join(validated_components)}"
|
|
||||||
ELSE IF user_input MATCHES r"^components:\s*(.+)$":
|
|
||||||
new_comps = split_and_clean(extract_after("components:"), [",", ";"])
|
|
||||||
validated_components = [c.strip().lower().replace(" ", "-") for c in new_comps if c.strip()]
|
|
||||||
REPORT: "✅ Updated: {', '.join(validated_components)}"
|
|
||||||
ELSE IF user_input MATCHES r"^skip:\s*(.+)$":
|
|
||||||
to_skip = [c.strip().lower() for c in extract_after("skip:").split(",")]
|
|
||||||
validated_components = [c for c in validated_components if c not in to_skip]
|
|
||||||
REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_components)}"
|
|
||||||
ELSE IF user_input MATCHES r"^add:\s*(.+)$":
|
|
||||||
to_add = [c.strip().lower().replace(" ", "-") for c in extract_after("add:").split(",") if c.strip()]
|
|
||||||
validated_components.extend(to_add)
|
|
||||||
validated_components = list(dict.fromkeys(validated_components)) # Remove duplicates
|
|
||||||
REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_components)}"
|
|
||||||
ELSE:
|
|
||||||
REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_components)}"
|
|
||||||
|
|
||||||
IF NOT validated_components:
|
|
||||||
# Fallback to page mode
|
|
||||||
exploration_mode = "page"
|
|
||||||
inferred_page_list = ["home"]
|
|
||||||
REPORT: "⚠️ No components, switching to page mode: 'home'"
|
|
||||||
|
|
||||||
STORE: inferred_component_list = validated_components IF exploration_mode == "component" ELSE []
|
|
||||||
STORE: component_inference_source = component_source
|
|
||||||
STORE: component_structure_data = component_structure IF exploration_mode == "component" ELSE {}
|
|
||||||
STORE: exploration_mode = exploration_mode # "page" or "component"
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 1: Style Extraction
|
### Phase 1: Style Extraction
|
||||||
@@ -427,49 +382,51 @@ SlashCommand(command)
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Phase 3: Matrix UI Generation (Mode-Aware)
|
### Phase 3: Matrix UI Generation (Unified)
|
||||||
**Command**:
|
**Command**:
|
||||||
```bash
|
```bash
|
||||||
run_base_flag = "--base-path \"{base_path}\""
|
run_base_flag = "--base-path \"{base_path}\""
|
||||||
|
|
||||||
IF exploration_mode == "page":
|
# Build unified targets string
|
||||||
# Page Mode: Generate full pages
|
targets_string = ",".join(inferred_target_list)
|
||||||
pages_string = ",".join(inferred_page_list)
|
VERIFY: targets_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
|
||||||
VERIFY: pages_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
|
|
||||||
|
|
||||||
pages_flag = "--pages \"{pages_string}\""
|
# Prepare command with unified parameters
|
||||||
command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
targets_flag = "--targets \"{targets_string}\""
|
||||||
|
type_flag = "--target-type \"{target_type}\""
|
||||||
|
|
||||||
total_prototypes = style_variants * layout_variants * len(inferred_page_list)
|
command = "/workflow:ui-design:generate {run_base_flag} {targets_flag} {type_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
||||||
REPORT: "🚀 Phase 3: Matrix UI Generation (Page Mode)"
|
|
||||||
REPORT: " Pages: {pages_string}"
|
|
||||||
REPORT: " Matrix: {style_variants}×{layout_variants}"
|
|
||||||
REPORT: " Total: {total_prototypes} full-page prototypes"
|
|
||||||
|
|
||||||
ELSE IF exploration_mode == "component":
|
total_prototypes = style_variants * layout_variants * len(inferred_target_list)
|
||||||
# Component Mode: Generate isolated components
|
|
||||||
components_string = ",".join(inferred_component_list)
|
|
||||||
VERIFY: components_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
|
|
||||||
|
|
||||||
components_flag = "--components \"{components_string}\""
|
# Report based on type
|
||||||
command = "/workflow:ui-design:generate {run_base_flag} {components_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
|
IF target_type == "page":
|
||||||
|
type_icon = "📄"
|
||||||
|
type_label = "Pages"
|
||||||
|
context_note = "Full-page layouts"
|
||||||
|
ELSE IF target_type == "component":
|
||||||
|
type_icon = "🧩"
|
||||||
|
type_label = "Components"
|
||||||
|
context_note = "Isolated elements with minimal wrapper"
|
||||||
|
ELSE:
|
||||||
|
type_icon = "🎯"
|
||||||
|
type_label = "Targets"
|
||||||
|
context_note = "Mixed pages and components"
|
||||||
|
|
||||||
total_prototypes = style_variants * layout_variants * len(inferred_component_list)
|
REPORT: "🚀 Phase 3: Matrix UI Generation"
|
||||||
REPORT: "🚀 Phase 3: Matrix UI Generation (Component Mode)"
|
REPORT: " {type_icon} {type_label}: {targets_string}"
|
||||||
REPORT: " Components: {components_string}"
|
REPORT: " Matrix: {style_variants}×{layout_variants}"
|
||||||
REPORT: " Matrix: {style_variants}×{layout_variants}"
|
REPORT: " Total: {total_prototypes} prototypes"
|
||||||
REPORT: " Total: {total_prototypes} component prototypes"
|
REPORT: " Context: {context_note}"
|
||||||
REPORT: " Context: Components displayed in minimal page wrapper"
|
|
||||||
|
|
||||||
SlashCommand(command)
|
SlashCommand(command)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Result**:
|
**Result**:
|
||||||
- **Page Mode**: `{page}-style-{s}-layout-{l}.html`
|
- File naming: `{target}-style-{s}-layout-{l}.html`
|
||||||
- **Component Mode**: `{component}-style-{s}-layout-{l}.html`
|
- Total: `style_variants × layout_variants × targets`
|
||||||
- Total: `style_variants × layout_variants × (pages|components)`
|
|
||||||
- Matrix view: `compare.html` with interactive grid
|
- Matrix view: `compare.html` with interactive grid
|
||||||
- Component isolation: Minimal wrapper for focus on component design
|
- Rendering: Full-page for pages, minimal wrapper for components
|
||||||
|
|
||||||
**Auto-Continue**: On completion → Phase 4
|
**Auto-Continue**: On completion → Phase 4
|
||||||
|
|
||||||
@@ -493,8 +450,13 @@ SlashCommand(command)
|
|||||||
|
|
||||||
**Execution**:
|
**Execution**:
|
||||||
```bash
|
```bash
|
||||||
FOR page IN inferred_page_list:
|
FOR target IN inferred_target_list:
|
||||||
SlashCommand("/workflow:plan --agent \"Implement {page} page based on design system\"")
|
IF target_type == "page":
|
||||||
|
SlashCommand("/workflow:plan --agent \"Implement {target} page based on design system\"")
|
||||||
|
ELSE IF target_type == "component":
|
||||||
|
SlashCommand("/workflow:plan --agent \"Implement {target} component based on design system\"")
|
||||||
|
ELSE:
|
||||||
|
SlashCommand("/workflow:plan --agent \"Implement {target} based on design system\"")
|
||||||
```
|
```
|
||||||
**Completion**: Workflow complete
|
**Completion**: Workflow complete
|
||||||
|
|
||||||
@@ -537,79 +499,95 @@ TodoWrite({todos: [
|
|||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:explore-auto --prompt "Modern minimalist blog with home, article, and author pages"
|
/workflow:ui-design:explore-auto --prompt "Modern minimalist blog with home, article, and author pages"
|
||||||
|
|
||||||
# Mode: Page
|
# Auto-detected type: page
|
||||||
# Inferred: 3 style variants, 3 layout variants (default)
|
# Inferred: 3 style variants, 3 layout variants (default)
|
||||||
# Pages: home, article, author
|
# Targets: home, article, author
|
||||||
# Total: 27 full-page prototypes (3×3×3)
|
# Total: 27 full-page prototypes (3×3×3)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 2: Custom 2×2 Matrix with Session (Page Mode)
|
### Example 2: Custom 2×2 Matrix with Session
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
|
/workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
|
||||||
|
|
||||||
# Mode: Page
|
# Auto-detected from session synthesis
|
||||||
# Executes with session integration
|
|
||||||
# Total: 2×2×N prototypes (N from inference)
|
# Total: 2×2×N prototypes (N from inference)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 3: Component Mode - Navbar Design Comparison
|
### Example 3: Unified - Navbar Design Comparison
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:explore-auto --components "navbar,hero" --prompt "Compare 3 navigation bar designs for SaaS product" --style-variants 3 --layout-variants 2
|
/workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs for SaaS product" --style-variants 3 --layout-variants 2
|
||||||
|
|
||||||
# Mode: Component
|
# Explicit type: component
|
||||||
# Components: navbar, hero
|
# Targets: navbar, hero
|
||||||
# Matrix: 3 styles × 2 layouts
|
# Matrix: 3 styles × 2 layouts
|
||||||
# Total: 12 component prototypes (3×2×2)
|
# Total: 12 component prototypes (3×2×2)
|
||||||
# Output: navbar-style-1-layout-1.html, navbar-style-1-layout-2.html, ...
|
# Output: navbar-style-1-layout-1.html, navbar-style-1-layout-2.html, ...
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 4: Component Mode - Card & Form Exploration
|
### Example 4: Unified - Card & Form Exploration
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:explore-auto --components "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
/workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
|
||||||
|
|
||||||
# Mode: Component
|
# Auto-detected type: component (based on keywords)
|
||||||
# Components: card, form, button
|
# Targets: card, form, button
|
||||||
# Matrix: 2 styles × 3 layouts
|
# Matrix: 2 styles × 3 layouts
|
||||||
# Total: 18 component prototypes (2×3×3)
|
# Total: 18 component prototypes (2×3×3)
|
||||||
# Context: Each component in minimal wrapper for isolated comparison
|
# Context: Each component in minimal wrapper for isolated comparison
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 5: Intelligent Parsing + Batch Planning (Page Mode)
|
### Example 5: Intelligent Parsing + Batch Planning
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:explore-auto --session WFS-saas --prompt "Create 4 styles with 2 layouts for SaaS dashboard and settings" --batch-plan
|
/workflow:ui-design:explore-auto --session WFS-saas --prompt "Create 4 styles with 2 layouts for SaaS dashboard and settings" --batch-plan
|
||||||
|
|
||||||
# Mode: Page
|
# Auto-detected type: page
|
||||||
# Parsed: 4 styles, 2 layouts
|
# Parsed: 4 styles, 2 layouts
|
||||||
# Pages: dashboard, settings
|
# Targets: dashboard, settings
|
||||||
# Total: 16 full-page prototypes (4×2×2)
|
# Total: 16 full-page prototypes (4×2×2)
|
||||||
# Auto-generates implementation tasks for each page
|
# Auto-generates implementation tasks for each target
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 6: Component Mode - Prompt-Inferred Components
|
### Example 6: Auto-Detected Components from Prompt
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:explore-auto --prompt "Design exploration for pricing table and testimonial card components" --style-variants 3 --layout-variants 2
|
/workflow:ui-design:explore-auto --prompt "Design exploration for pricing table and testimonial card components" --style-variants 3 --layout-variants 2
|
||||||
|
|
||||||
# Mode: Component (auto-detected from prompt)
|
# Auto-detected type: component (keyword: "components")
|
||||||
# Inferred components: pricing-table, testimonial-card
|
# Inferred targets: pricing-table, testimonial-card
|
||||||
# Matrix: 3 styles × 2 layouts
|
# Matrix: 3 styles × 2 layouts
|
||||||
# Total: 12 component prototypes (3×2×2)
|
# Total: 12 component prototypes (3×2×2)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Example 7: Legacy Parameter Support
|
||||||
|
```bash
|
||||||
|
# Using legacy --pages parameter (backward compatible)
|
||||||
|
/workflow:ui-design:explore-auto --pages "home,dashboard,settings"
|
||||||
|
|
||||||
|
# Equivalent to: --targets "home,dashboard,settings" --target-type "page"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 8: Mixed Mode (Future Enhancement)
|
||||||
|
```bash
|
||||||
|
/workflow:ui-design:explore-auto --targets "home,dashboard,navbar,hero,card" --target-type "auto"
|
||||||
|
|
||||||
|
# Auto-detection: home, dashboard → page; navbar, hero, card → component
|
||||||
|
# Generates appropriate wrapper for each target type
|
||||||
|
# Future: Support per-target type specification
|
||||||
|
```
|
||||||
|
|
||||||
## Final Completion Message
|
## Final Completion Message
|
||||||
|
|
||||||
**Page Mode**:
|
**Unified Template**:
|
||||||
```
|
```
|
||||||
✅ UI Design Explore-Auto Workflow Complete! (Page Mode)
|
✅ UI Design Explore-Auto Workflow Complete!
|
||||||
|
|
||||||
Run ID: {run_id}
|
Run ID: {run_id}
|
||||||
Session: {session_id or "standalone"}
|
Session: {session_id or "standalone"}
|
||||||
Mode: Full-Page Exploration
|
Type: {target_type_icon} {target_type_label}
|
||||||
Matrix: {style_variants}×{layout_variants} ({total_prototypes} total prototypes)
|
Matrix: {style_variants}×{layout_variants} ({total_prototypes} total prototypes)
|
||||||
Input: {images and/or prompt summary}
|
Input: {images and/or prompt summary}
|
||||||
|
|
||||||
Phase 1 - Style Extraction: {style_variants} style variants
|
Phase 1 - Style Extraction: {style_variants} style variants
|
||||||
Phase 2 - Style Consolidation: {style_variants} independent design systems
|
Phase 2 - Style Consolidation: {style_variants} independent design systems
|
||||||
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{pages_count} = {total_prototypes} page prototypes
|
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{target_count} = {total_prototypes} prototypes
|
||||||
Phase 4 - Design Update: Brainstorming artifacts updated
|
Phase 4 - Design Update: Brainstorming artifacts updated
|
||||||
{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
|
{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
|
||||||
|
|
||||||
@@ -620,10 +598,13 @@ Phase 4 - Design Update: Brainstorming artifacts updated
|
|||||||
|
|
||||||
🌐 Interactive Preview: {base_path}/prototypes/compare.html
|
🌐 Interactive Preview: {base_path}/prototypes/compare.html
|
||||||
- {style_variants}×{layout_variants} matrix view with synchronized scrolling
|
- {style_variants}×{layout_variants} matrix view with synchronized scrolling
|
||||||
- Zoom controls and fullscreen mode
|
- {IF target_type == "component": "Isolated rendering with minimal wrapper" ELSE: "Full-page layouts"}
|
||||||
|
- Side-by-side comparison for design decisions
|
||||||
- Selection export for implementation
|
- Selection export for implementation
|
||||||
|
|
||||||
📄 Pages Explored: {', '.join(inferred_page_list)}
|
{target_type_icon} Targets Explored: {', '.join(inferred_target_list)}
|
||||||
|
Type: {target_type}
|
||||||
|
Context: {IF target_type == "page": "Full-page layouts" ELSE IF target_type == "component": "Isolated UI elements" ELSE: "Mixed targets"}
|
||||||
|
|
||||||
{IF batch-plan:
|
{IF batch-plan:
|
||||||
📋 Implementation Tasks: .workflow/WFS-{session}/.task/
|
📋 Implementation Tasks: .workflow/WFS-{session}/.task/
|
||||||
@@ -631,43 +612,15 @@ Next: /workflow:execute to begin implementation
|
|||||||
}
|
}
|
||||||
{ELSE:
|
{ELSE:
|
||||||
Next Steps:
|
Next Steps:
|
||||||
1. Open compare.html to preview all page variants
|
1. Open compare.html to preview all variants
|
||||||
2. Select preferred style×layout combinations per page
|
2. Select preferred style×layout combinations per target
|
||||||
3. Run /workflow:plan to create implementation tasks
|
3. Run /workflow:plan to create implementation tasks
|
||||||
|
{IF target_type == "component": "4. Integrate selected components into pages"}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**Component Mode**:
|
**Dynamic Values**:
|
||||||
```
|
- `target_type_icon`: "📄" for page, "🧩" for component, "🎯" for mixed/auto
|
||||||
✅ UI Design Explore-Auto Workflow Complete! (Component Mode)
|
- `target_type_label`: "Pages" for page, "Components" for component, "Targets" for mixed/auto
|
||||||
|
- `target_count`: `len(inferred_target_list)`
|
||||||
Run ID: {run_id}
|
- All other placeholders are resolved from stored phase data
|
||||||
Session: {session_id or "standalone"}
|
|
||||||
Mode: Component Exploration
|
|
||||||
Matrix: {style_variants}×{layout_variants} ({total_prototypes} total component prototypes)
|
|
||||||
Input: {images and/or prompt summary}
|
|
||||||
|
|
||||||
Phase 1 - Style Extraction: {style_variants} style variants
|
|
||||||
Phase 2 - Style Consolidation: {style_variants} independent design systems
|
|
||||||
Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{component_count} = {total_prototypes} component prototypes
|
|
||||||
Phase 4 - Design Update: Brainstorming artifacts updated
|
|
||||||
|
|
||||||
📂 Run Output: {base_path}/
|
|
||||||
├── style-consolidation/ ({style_variants} design systems)
|
|
||||||
├── prototypes/ ({total_prototypes} component HTML/CSS files)
|
|
||||||
└── .run-metadata.json (run configuration)
|
|
||||||
|
|
||||||
🌐 Interactive Preview: {base_path}/prototypes/compare.html
|
|
||||||
- {style_variants}×{layout_variants} component matrix view
|
|
||||||
- Isolated component rendering (minimal wrapper)
|
|
||||||
- Side-by-side comparison for design decisions
|
|
||||||
- Selection export for implementation
|
|
||||||
|
|
||||||
🧩 Components Explored: {', '.join(inferred_component_list)}
|
|
||||||
|
|
||||||
Next Steps:
|
|
||||||
1. Open compare.html to preview all component variants
|
|
||||||
2. Select preferred style×layout combinations per component
|
|
||||||
3. Extract selected components for integration into pages
|
|
||||||
4. Run /workflow:plan with component integration context
|
|
||||||
```
|
|
||||||
|
|||||||
@@ -1,26 +1,34 @@
|
|||||||
---
|
---
|
||||||
name: generate
|
name: generate
|
||||||
description: Generate UI prototypes in matrix mode (style × layout combinations)
|
description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components
|
||||||
usage: /workflow:ui-design:generate [--pages "<list>"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||||
argument-hint: "[--pages \"dashboard,auth\"] [--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--style-variants 3] [--layout-variants 3]"
|
argument-hint: "[--targets \"dashboard,auth,navbar,hero\"] [--target-type \"page\"] [--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--style-variants 3] [--layout-variants 3]"
|
||||||
examples:
|
examples:
|
||||||
- /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --pages "dashboard,settings" --style-variants 3 --layout-variants 3
|
- /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "dashboard,settings" --target-type "page" --style-variants 3 --layout-variants 3
|
||||||
- /workflow:ui-design:generate --session WFS-auth --pages "home,pricing" --style-variants 2 --layout-variants 2
|
- /workflow:ui-design:generate --session WFS-auth --targets "home,pricing" --target-type "page" --style-variants 2 --layout-variants 2
|
||||||
|
- /workflow:ui-design:generate --targets "navbar,hero,card" --target-type "component" --style-variants 3 --layout-variants 2
|
||||||
- /workflow:ui-design:generate --base-path "./.workflow/.design/run-20250109-150533" --style-variants 3 --layout-variants 3
|
- /workflow:ui-design:generate --base-path "./.workflow/.design/run-20250109-150533" --style-variants 3 --layout-variants 3
|
||||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(conceptual-planning-agent), Bash(*)
|
- /workflow:ui-design:generate --pages "home,dashboard" --style-variants 2 --layout-variants 2 # Legacy syntax
|
||||||
|
executor: → @ui-design-agent
|
||||||
|
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||||
---
|
---
|
||||||
|
|
||||||
# UI Generation Command (Matrix Mode)
|
# UI Generation Command (Matrix Mode)
|
||||||
|
|
||||||
|
**Executor**: → @ui-design-agent
|
||||||
|
**Parallel Generation**: Phase 2a → @ui-design-agent (L×T tasks)
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Generate production-ready UI prototypes (HTML/CSS) in `style × layout` matrix mode, strictly adhering to consolidated design tokens from separate style design systems.
|
Generate production-ready UI prototypes (HTML/CSS) in `style × layout` matrix mode, strictly adhering to consolidated design tokens from separate style design systems. Supports both full-page layouts and isolated component generation.
|
||||||
|
|
||||||
## Core Philosophy
|
## Core Philosophy
|
||||||
- **Matrix-Only**: Single mode generating `style_variants × layout_variants × pages` prototypes
|
- **Unified Generation**: Single mode generating `style_variants × layout_variants × targets` prototypes
|
||||||
- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` for parallel generation
|
- **Target Types**: Supports pages (full layouts) and components (isolated UI elements)
|
||||||
|
- **Agent-Driven**: Uses `Task(ui-design-agent)` for parallel generation
|
||||||
- **Token-Driven**: All styles reference per-style design-tokens.json; no hardcoded values
|
- **Token-Driven**: All styles reference per-style design-tokens.json; no hardcoded values
|
||||||
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
|
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
|
||||||
- **Template-Based**: Decouples HTML structure from CSS styling for optimal performance
|
- **Template-Based**: Decouples HTML structure from CSS styling for optimal performance
|
||||||
|
- **Adaptive Wrapper**: Full-page structure for pages, minimal wrapper for components
|
||||||
|
|
||||||
## Execution Protocol
|
## Execution Protocol
|
||||||
|
|
||||||
@@ -74,38 +82,61 @@ VALIDATE: 1 <= style_variants <= 5
|
|||||||
|
|
||||||
# Note: layout_variants is loaded from layout-strategies.json in Phase 0
|
# Note: layout_variants is loaded from layout-strategies.json in Phase 0
|
||||||
|
|
||||||
# 3. Enhanced page list parsing
|
# 3. Enhanced target list parsing with type detection
|
||||||
page_list = []
|
target_list = []
|
||||||
|
target_type = "page" # Default to page for backward compatibility
|
||||||
|
|
||||||
# Priority 1: Explicit --pages parameter
|
# Priority 1: Unified --targets parameter
|
||||||
IF --pages provided:
|
IF --targets provided:
|
||||||
raw_pages = {--pages value}
|
raw_targets = {--targets value}
|
||||||
# Split by comma, semicolon, or Chinese comma
|
# Split by comma, semicolon, or Chinese comma
|
||||||
page_list = split_and_clean(raw_pages, delimiters=[",", ";", "、"])
|
target_list = split_and_clean(raw_targets, delimiters=[",", ";", "、"])
|
||||||
# Clean: strip whitespace, lowercase, replace spaces with hyphens
|
# Clean: strip whitespace, lowercase, replace spaces with hyphens
|
||||||
page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()]
|
target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()]
|
||||||
REPORT: "📋 Using provided pages: {', '.join(page_list)}"
|
|
||||||
|
|
||||||
# Priority 2: Extract from synthesis-specification.md
|
# Get target type
|
||||||
|
IF --target-type provided:
|
||||||
|
target_type = {--target-type value}
|
||||||
|
ELSE:
|
||||||
|
# Auto-detect from target names (use same logic as explore-auto)
|
||||||
|
target_type = detect_target_type(target_list)
|
||||||
|
|
||||||
|
REPORT: "🎯 Using provided targets ({target_type}): {', '.join(target_list)}"
|
||||||
|
|
||||||
|
# Priority 2: Legacy --pages parameter (backward compatibility)
|
||||||
|
ELSE IF --pages provided:
|
||||||
|
raw_targets = {--pages value}
|
||||||
|
target_list = split_and_clean(raw_targets, delimiters=[",", ";", "、"])
|
||||||
|
target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()]
|
||||||
|
target_type = "page"
|
||||||
|
REPORT: "📋 Using provided pages (legacy): {', '.join(target_list)}"
|
||||||
|
|
||||||
|
# Priority 3: Extract from synthesis-specification.md
|
||||||
ELSE IF --session:
|
ELSE IF --session:
|
||||||
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||||
page_list = extract_pages_from_synthesis(synthesis_spec)
|
target_list = extract_targets_from_synthesis(synthesis_spec)
|
||||||
REPORT: "📋 Extracted pages from synthesis: {', '.join(page_list)}"
|
target_type = "page" # Synthesis typically defines pages
|
||||||
|
REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}"
|
||||||
|
|
||||||
# Priority 3: Detect from existing prototypes or default
|
# Priority 4: Detect from existing prototypes or default
|
||||||
ELSE:
|
ELSE:
|
||||||
page_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"]
|
target_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"]
|
||||||
REPORT: "📋 Detected/default pages: {', '.join(page_list)}"
|
target_type = "page"
|
||||||
|
REPORT: "📋 Detected/default targets: {', '.join(target_list)}"
|
||||||
|
|
||||||
# 4. Validate page names
|
# 4. Validate target names
|
||||||
validated_pages = [p for p in page_list if regex_match(p, r"^[a-z0-9][a-z0-9_-]*$")]
|
validated_targets = [t for t in target_list if regex_match(t, r"^[a-z0-9][a-z0-9_-]*$")]
|
||||||
invalid_pages = [p for p in page_list if p not in validated_pages]
|
invalid_targets = [t for t in target_list if t not in validated_targets]
|
||||||
|
|
||||||
IF invalid_pages:
|
IF invalid_targets:
|
||||||
REPORT: "⚠️ Skipped invalid page names: {', '.join(invalid_pages)}"
|
REPORT: "⚠️ Skipped invalid target names: {', '.join(invalid_targets)}"
|
||||||
|
|
||||||
VALIDATE: validated_pages not empty, "No valid pages found"
|
VALIDATE: validated_targets not empty, "No valid targets found"
|
||||||
page_list = validated_pages
|
target_list = validated_targets
|
||||||
|
|
||||||
|
# Store for later use
|
||||||
|
STORE: target_list = target_list
|
||||||
|
STORE: target_type = target_type
|
||||||
|
|
||||||
# 5. Verify design systems exist
|
# 5. Verify design systems exist
|
||||||
FOR style_id IN range(1, style_variants + 1):
|
FOR style_id IN range(1, style_variants + 1):
|
||||||
@@ -234,6 +265,8 @@ REPORT: f" - Other variables: {len(radius_vars) + len(shadow_vars) + len(break
|
|||||||
|
|
||||||
#### Phase 2a: Layout Template Generation (Research-Informed)
|
#### Phase 2a: Layout Template Generation (Research-Informed)
|
||||||
|
|
||||||
|
**Parallel Executor**: → @ui-design-agent
|
||||||
|
|
||||||
Generate style-agnostic layout templates for each `{page} × {layout}` combination.
|
Generate style-agnostic layout templates for each `{page} × {layout}` combination.
|
||||||
Total agent tasks: `layout_variants × len(page_list)`
|
Total agent tasks: `layout_variants × len(page_list)`
|
||||||
|
|
||||||
@@ -242,20 +275,42 @@ Total agent tasks: `layout_variants × len(page_list)`
|
|||||||
CREATE: {base_path}/prototypes/_templates/
|
CREATE: {base_path}/prototypes/_templates/
|
||||||
CREATE: {base_path}/prototypes/
|
CREATE: {base_path}/prototypes/
|
||||||
|
|
||||||
# Launch parallel template generation tasks
|
# Launch parallel template generation tasks → @ui-design-agent
|
||||||
FOR layout_id IN range(1, layout_variants + 1):
|
FOR layout_id IN range(1, layout_variants + 1):
|
||||||
FOR page IN page_list:
|
FOR target IN target_list:
|
||||||
Task(conceptual-planning-agent): "
|
Task(ui-design-agent): "
|
||||||
[UI_LAYOUT_TEMPLATE_GENERATION]
|
[UI_LAYOUT_TEMPLATE_GENERATION]
|
||||||
|
|
||||||
Generate a **style-agnostic** layout template for a specific page and layout strategy, informed by modern web development best practices.
|
Generate a **style-agnostic** layout template for a specific {target_type} and layout strategy, informed by modern web development best practices.
|
||||||
|
|
||||||
|
🎯 **CRITICAL REQUIREMENTS**:
|
||||||
|
✅ **ADAPTIVE**: Multi-device responsive design (mobile, tablet, desktop)
|
||||||
|
✅ **STYLE-SWITCHABLE**: Support runtime theme/style switching via CSS variables
|
||||||
|
✅ **TOKEN-DRIVEN**: 100% CSS variable usage, zero hardcoded values
|
||||||
|
|
||||||
## Context
|
## Context
|
||||||
LAYOUT_ID: {layout_id}
|
LAYOUT_ID: {layout_id}
|
||||||
PAGE: {page}
|
TARGET: {target}
|
||||||
|
TARGET_TYPE: {target_type}
|
||||||
BASE_PATH: {base_path}
|
BASE_PATH: {base_path}
|
||||||
{IF --session: - Requirements: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
|
{IF --session: - Requirements: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
|
||||||
|
|
||||||
|
**Target Type Details**:
|
||||||
|
{IF target_type == "page":
|
||||||
|
- Type: Full-page layout
|
||||||
|
- Wrapper: Complete HTML document structure with <html>, <head>, <body>
|
||||||
|
- Navigation: Include header/navigation elements
|
||||||
|
- Footer: Include page footer
|
||||||
|
- Content: Complete page content structure
|
||||||
|
}
|
||||||
|
{ELSE IF target_type == "component":
|
||||||
|
- Type: Isolated UI component
|
||||||
|
- Wrapper: Minimal container for component demonstration
|
||||||
|
- Navigation: Exclude header/footer (component-only)
|
||||||
|
- Container: Simple wrapper (e.g., <div class="component-container">)
|
||||||
|
- Content: Focus solely on the component design
|
||||||
|
}
|
||||||
|
|
||||||
## Implementation Research (from web, 2024-2025)
|
## Implementation Research (from web, 2024-2025)
|
||||||
|
|
||||||
COMPONENT PATTERNS:
|
COMPONENT PATTERNS:
|
||||||
@@ -276,22 +331,26 @@ FOR layout_id IN range(1, layout_variants + 1):
|
|||||||
## Task
|
## Task
|
||||||
Generate TWO files that work together as a reusable template, incorporating insights from the implementation research above:
|
Generate TWO files that work together as a reusable template, incorporating insights from the implementation research above:
|
||||||
|
|
||||||
**File 1**: `{page}-layout-{layout_id}.html`
|
**File 1**: `{target}-layout-{layout_id}.html`
|
||||||
- Semantic HTML5 structure WITHOUT any style-specific values
|
- 🏗️ **SEMANTIC STRUCTURE**: HTML5 structure WITHOUT any style-specific values
|
||||||
- Use placeholder links for stylesheets:
|
- {IF target_type == "page": "Complete HTML document with <html>, <head>, <body>" ELSE: "Minimal wrapper with component container only"}
|
||||||
|
- 🔗 **DYNAMIC STYLING**: Use placeholder links for runtime style switching:
|
||||||
```html
|
```html
|
||||||
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
|
<link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
|
||||||
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
|
<link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
|
||||||
```
|
```
|
||||||
- Include all semantic elements, ARIA attributes, and responsive structure
|
- ♿ **ACCESSIBILITY**: All semantic elements, ARIA attributes, responsive structure
|
||||||
- NO inline styles, NO hardcoded colors/fonts/spacing
|
- 🚫 **ZERO HARDCODING**: NO inline styles, NO hardcoded colors/fonts/spacing
|
||||||
|
- 🎨 **STYLE-AGNOSTIC**: HTML structure must work with ANY design token set
|
||||||
|
|
||||||
**File 2**: `{page}-layout-{layout_id}.css`
|
**File 2**: `{target}-layout-{layout_id}.css`
|
||||||
- Structural CSS rules using CSS variable references
|
- 🎨 **TOKEN-DRIVEN STYLING**: ALL values use `var()` for dynamic theme switching
|
||||||
- ALL values MUST use `var()` functions (e.g., `background-color: var(--color-surface-background);`)
|
- 🔄 **RUNTIME SWITCHABLE**: `background-color: var(--color-surface-background);`
|
||||||
- NO hardcoded values (e.g., #4F46E5, 16px, Arial)
|
- 🚫 **ZERO LITERALS**: NO hardcoded values (#4F46E5, 16px, Arial)
|
||||||
- BEM or semantic class naming
|
- 📐 **SEMANTIC NAMING**: BEM or descriptive class naming
|
||||||
- Mobile-first responsive design using token-based breakpoints
|
- 📱 **MOBILE-FIRST**: Responsive design using token-based breakpoints
|
||||||
|
- 💡 **VARIABLE REFERENCES**: Every visual property must use var(--token-name)
|
||||||
|
- {IF target_type == "component": "Focus styles on component only, minimal global styles"}
|
||||||
|
|
||||||
## Layout Diversity Strategy
|
## Layout Diversity Strategy
|
||||||
Apply the following strategy from the planned layout strategies (loaded from layout-strategies.json):
|
Apply the following strategy from the planned layout strategies (loaded from layout-strategies.json):
|
||||||
@@ -347,18 +406,21 @@ FOR layout_id IN range(1, layout_variants + 1):
|
|||||||
5. All `var()` references must match exact variable names above
|
5. All `var()` references must match exact variable names above
|
||||||
|
|
||||||
## HTML Requirements (Apply Modern Best Practices from Research)
|
## HTML Requirements (Apply Modern Best Practices from Research)
|
||||||
- Semantic HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
- 🏗️ **SEMANTIC STRUCTURE**: HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
||||||
- ARIA attributes for accessibility following WCAG 2.2 guidelines from research
|
- ♿ **ACCESSIBILITY**: ARIA attributes following WCAG 2.2 guidelines from research
|
||||||
- Proper heading hierarchy (h1 → h2 → h3) as recommended in HTML semantics research
|
- 📋 **HEADING HIERARCHY**: Proper h1 → h2 → h3 structure
|
||||||
- Mobile-first responsive design using patterns from responsive design research
|
- 📱 **RESPONSIVE MARKUP**: Mobile-first structure with adaptive containers
|
||||||
- Component structure following modern patterns from component research
|
- 🧩 **COMPONENT MODULARITY**: Reusable component structure from modern patterns
|
||||||
|
- 🎨 **STYLE-AGNOSTIC**: NO hardcoded colors/fonts/spacing in HTML
|
||||||
|
|
||||||
## CSS Requirements (Apply Architecture Patterns from Research)
|
## CSS Requirements (Apply Architecture Patterns from Research)
|
||||||
- Use CSS custom properties from design-tokens.json
|
- 🎨 **DYNAMIC THEMING**: 100% CSS custom properties (var()) for style switching
|
||||||
- Mobile-first media queries using token breakpoints
|
- 📱 **ADAPTIVE LAYOUT**: Mobile-first media queries using token breakpoints
|
||||||
- No inline styles
|
- 🔄 **RUNTIME SWITCHABLE**: All visual styles via CSS variables only
|
||||||
- BEM or semantic class naming following CSS architecture research
|
- 🚫 **NO HARDCODED VALUES**: Zero literal colors/fonts/spacing
|
||||||
- Apply modern responsive patterns (grid, flexbox, container queries if applicable)
|
- 📐 **SEMANTIC CLASSES**: BEM or descriptive naming following CSS architecture
|
||||||
|
- 🏛️ **MODERN PATTERNS**: Grid, flexbox, container queries for responsiveness
|
||||||
|
- 💡 **TOKEN REFERENCES**: Every style property uses var(--token-name)
|
||||||
|
|
||||||
## Responsive Design
|
## Responsive Design
|
||||||
- Mobile: 375px+ (single column, stacked)
|
- Mobile: 375px+ (single column, stacked)
|
||||||
@@ -369,15 +431,46 @@ FOR layout_id IN range(1, layout_variants + 1):
|
|||||||
{base_path}/prototypes/_templates/
|
{base_path}/prototypes/_templates/
|
||||||
|
|
||||||
## Deliverables
|
## Deliverables
|
||||||
TWO template files for the '{page}-layout-{layout_id}' combination:
|
TWO template files for the '{target}-layout-{layout_id}' combination:
|
||||||
1. `{page}-layout-{layout_id}.html` - Reusable HTML structure with CSS placeholders
|
1. `{target}-layout-{layout_id}.html` - Reusable HTML structure with CSS placeholders
|
||||||
2. `{page}-layout-{layout_id}.css` - Structural CSS using var() for all values
|
2. `{target}-layout-{layout_id}.css` - Structural CSS using var() for all values
|
||||||
|
|
||||||
|
🎯 **CRITICAL QUALITY GATES**:
|
||||||
|
✅ **ADAPTIVE**: Works on mobile (375px), tablet (768px), desktop (1024px+)
|
||||||
|
✅ **STYLE-SWITCHABLE**: Change {{TOKEN_CSS}} link → instant theme switching
|
||||||
|
✅ **TOKEN-ONLY**: 100% var() usage, inspectable with "Search for: #|px|rem" → 0 matches in values
|
||||||
|
✅ **REUSABLE**: Same HTML/CSS structure works for ALL style variants
|
||||||
|
|
||||||
IMPORTANT: These templates will be reused across ALL styles, so they must be
|
IMPORTANT: These templates will be reused across ALL styles, so they must be
|
||||||
completely style-agnostic (no hardcoded colors, fonts, or spacing).
|
completely style-agnostic (no hardcoded colors, fonts, or spacing).
|
||||||
|
|
||||||
|
**Wrapper Strategy**:
|
||||||
|
{IF target_type == "page":
|
||||||
|
Use complete HTML document structure with navigation and footer.
|
||||||
|
}
|
||||||
|
{ELSE IF target_type == "component":
|
||||||
|
Use minimal wrapper:
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset=\"UTF-8\">
|
||||||
|
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
|
||||||
|
<title>{target} Component</title>
|
||||||
|
{{STRUCTURAL_CSS}}
|
||||||
|
{{TOKEN_CSS}}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class=\"component-demo-container\">
|
||||||
|
<!-- Component content here -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
}
|
||||||
"
|
"
|
||||||
|
|
||||||
REPORT: "✅ Phase 2a complete: Generated {layout_variants * len(page_list)} layout templates"
|
REPORT: "✅ Phase 2a complete: Generated {layout_variants * len(target_list)} layout templates ({target_type} mode)"
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Phase 2b: Prototype Instantiation
|
#### Phase 2b: Prototype Instantiation
|
||||||
@@ -433,7 +526,7 @@ FOR style_id IN range(1, style_variants + 1):
|
|||||||
|
|
||||||
# Prepare script parameters
|
# Prepare script parameters
|
||||||
prototypes_dir = "{base_path}/prototypes"
|
prototypes_dir = "{base_path}/prototypes"
|
||||||
pages_csv = ','.join(page_list)
|
targets_csv = ','.join(target_list)
|
||||||
|
|
||||||
# Determine session ID
|
# Determine session ID
|
||||||
IF --session provided:
|
IF --session provided:
|
||||||
@@ -441,40 +534,43 @@ IF --session provided:
|
|||||||
ELSE:
|
ELSE:
|
||||||
session_id = "standalone"
|
session_id = "standalone"
|
||||||
|
|
||||||
# Execute instantiation script
|
# Execute instantiation script with target type
|
||||||
Bash(
|
Bash(
|
||||||
~/.claude/scripts/ui-instantiate-prototypes.sh \
|
~/.claude/scripts/ui-instantiate-prototypes.sh \
|
||||||
"{prototypes_dir}" \
|
"{prototypes_dir}" \
|
||||||
--session-id "{session_id}" \
|
--session-id "{session_id}" \
|
||||||
--mode "page"
|
--mode "{target_type}"
|
||||||
)
|
)
|
||||||
|
|
||||||
# The script auto-detects:
|
# The script auto-detects:
|
||||||
# - Pages from _templates/*.html files
|
# - Targets from _templates/*.html files
|
||||||
# - Style variants from ../style-consolidation/style-* directories
|
# - Style variants from ../style-consolidation/style-* directories
|
||||||
# - Layout variants from _templates/*-layout-*.html pattern
|
# - Layout variants from _templates/*-layout-*.html pattern
|
||||||
|
|
||||||
# Script generates:
|
# Script generates:
|
||||||
# 1. S × L × P HTML prototypes with CSS links
|
# 1. S × L × T HTML prototypes with CSS links (T = targets)
|
||||||
# 2. Implementation notes for each prototype
|
# 2. Implementation notes for each prototype
|
||||||
# 3. compare.html (interactive matrix)
|
# 3. compare.html (interactive matrix)
|
||||||
# 4. index.html (navigation page)
|
# 4. index.html (navigation page)
|
||||||
# 5. PREVIEW.md (documentation)
|
# 5. PREVIEW.md (documentation)
|
||||||
|
|
||||||
REPORT: "✅ Phase 2b complete: Instantiated {style_variants * layout_variants * len(page_list)} final prototypes"
|
REPORT: "✅ Phase 2b complete: Instantiated {style_variants * layout_variants * len(target_list)} final prototypes"
|
||||||
|
REPORT: " Mode: {target_type}"
|
||||||
REPORT: " Performance: {style_variants}× faster than original approach"
|
REPORT: " Performance: {style_variants}× faster than original approach"
|
||||||
REPORT: " Preview files generated: compare.html, index.html, PREVIEW.md"
|
REPORT: " Preview files generated: compare.html, index.html, PREVIEW.md"
|
||||||
```
|
```
|
||||||
|
|
||||||
**Performance Comparison**:
|
**Performance Comparison**:
|
||||||
|
|
||||||
| Metric | Before (S×L×P Agent calls) | After (L×P Agent calls + File Ops) |
|
| Metric | Before (S×L×T Agent calls) | After (L×T Agent calls + File Ops) |
|
||||||
|--------|----------------------------|-----------------------------------|
|
|--------|----------------------------|-----------------------------------|
|
||||||
| Agent Tasks | `S × L × P` | `L × P` |
|
| Agent Tasks | `S × L × T` | `L × T` |
|
||||||
| Example (3×3×3) | 27 Agent calls | 9 Agent calls |
|
| Example (3×3×3) | 27 Agent calls | 9 Agent calls |
|
||||||
| Speed Improvement | Baseline | **3× faster** (S times) |
|
| Speed Improvement | Baseline | **3× faster** (S times) |
|
||||||
| Resource Usage | High (creative generation for each combo) | Optimized (creative only for templates) |
|
| Resource Usage | High (creative generation for each combo) | Optimized (creative only for templates) |
|
||||||
|
|
||||||
|
*T = targets (pages or components)*
|
||||||
|
|
||||||
### Phase 3: Verify Preview Files
|
### Phase 3: Verify Preview Files
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@@ -519,33 +615,40 @@ IF NOT exists(fallback_css_path):
|
|||||||
REPORT: " ✓ Generated fallback design-tokens.css"
|
REPORT: " ✓ Generated fallback design-tokens.css"
|
||||||
```
|
```
|
||||||
|
|
||||||
### Phase 3.5: Cross-Page Consistency Validation
|
### Phase 3.5: Cross-Target Consistency Validation
|
||||||
|
|
||||||
**Condition**: Only executes if `len(page_list) > 1`
|
**Condition**: Only executes if `len(target_list) > 1 AND target_type == "page"`
|
||||||
|
**Parallel Executor**: → @ui-design-agent
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Skip if only one page
|
# Skip if single target or component mode
|
||||||
IF len(page_list) <= 1:
|
IF len(target_list) <= 1 OR target_type == "component":
|
||||||
SKIP to Phase 4
|
SKIP to Phase 4
|
||||||
|
|
||||||
# For multi-page workflows, validate cross-page consistency
|
# For multi-page workflows, validate cross-page consistency → @ui-design-agent
|
||||||
FOR style_id IN range(1, style_variants + 1):
|
FOR style_id IN range(1, style_variants + 1):
|
||||||
FOR layout_id IN range(1, layout_variants + 1):
|
FOR layout_id IN range(1, layout_variants + 1):
|
||||||
Task(conceptual-planning-agent): "
|
Task(ui-design-agent): "
|
||||||
[CROSS_PAGE_CONSISTENCY_VALIDATION]
|
[CROSS_PAGE_CONSISTENCY_VALIDATION]
|
||||||
|
|
||||||
Validate design consistency across multiple pages for Style-{style_id} Layout-{layout_id}
|
Validate design consistency across multiple {target_type}s for Style-{style_id} Layout-{layout_id}
|
||||||
|
|
||||||
|
🎯 **VALIDATION FOCUS**:
|
||||||
|
✅ **ADAPTIVE CONSISTENCY**: Same responsive behavior across all pages
|
||||||
|
✅ **STYLE-SWITCHING**: Verify token references enable uniform theme switching
|
||||||
|
✅ **CROSS-PAGE HARMONY**: Shared components use identical CSS variables
|
||||||
|
|
||||||
## Context
|
## Context
|
||||||
STYLE_ID: {style_id}
|
STYLE_ID: {style_id}
|
||||||
LAYOUT_ID: {layout_id}
|
LAYOUT_ID: {layout_id}
|
||||||
PAGES: {page_list}
|
TARGETS: {target_list}
|
||||||
|
TARGET_TYPE: {target_type}
|
||||||
BASE_PATH: {base_path}
|
BASE_PATH: {base_path}
|
||||||
|
|
||||||
## Input Files
|
## Input Files
|
||||||
FOR each page IN {page_list}:
|
FOR each target IN {target_list}:
|
||||||
- {base_path}/prototypes/{page}-style-{style_id}-layout-{layout_id}.html
|
- {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html
|
||||||
- {base_path}/prototypes/{page}-style-{style_id}-layout-{layout_id}.css
|
- {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css
|
||||||
|
|
||||||
## Validation Tasks
|
## Validation Tasks
|
||||||
1. **Shared Component Consistency**:
|
1. **Shared Component Consistency**:
|
||||||
@@ -572,8 +675,8 @@ FOR style_id IN range(1, style_variants + 1):
|
|||||||
Generate a consistency report: {base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md
|
Generate a consistency report: {base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
# Cross-Page Consistency Report
|
# Cross-{target_type.capitalize()} Consistency Report
|
||||||
**Style**: {style_id} | **Layout**: {layout_id} | **Pages**: {', '.join(page_list)}
|
**Style**: {style_id} | **Layout**: {layout_id} | **Targets**: {', '.join(target_list)}
|
||||||
|
|
||||||
## ✅ Passed Checks
|
## ✅ Passed Checks
|
||||||
- [List consistency checks that passed]
|
- [List consistency checks that passed]
|
||||||
@@ -598,9 +701,9 @@ FOR style_id IN range(1, style_variants + 1):
|
|||||||
|
|
||||||
# Aggregate consistency reports
|
# Aggregate consistency reports
|
||||||
Write({base_path}/prototypes/CONSISTENCY_SUMMARY.md):
|
Write({base_path}/prototypes/CONSISTENCY_SUMMARY.md):
|
||||||
# Multi-Page Consistency Summary
|
# Multi-{target_type.capitalize()} Consistency Summary
|
||||||
|
|
||||||
This report summarizes consistency validation across all {len(page_list)} pages.
|
This report summarizes consistency validation across all {len(target_list)} {target_type}s.
|
||||||
|
|
||||||
## Validated Combinations
|
## Validated Combinations
|
||||||
- **Style Variants**: {style_variants}
|
- **Style Variants**: {style_variants}
|
||||||
@@ -630,9 +733,9 @@ TodoWrite({
|
|||||||
{content: "Load layout strategies from consolidation", status: "completed", activeForm: "Loading layout strategies"},
|
{content: "Load layout strategies from consolidation", status: "completed", activeForm: "Loading layout strategies"},
|
||||||
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
|
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
|
||||||
{content: "Research modern UI implementation patterns with Exa MCP", status: "completed", activeForm: "Researching implementation patterns"},
|
{content: "Research modern UI implementation patterns with Exa MCP", status: "completed", activeForm: "Researching implementation patterns"},
|
||||||
{content: `Generate ${layout_variants}×${page_list.length} layout templates using planned strategies`, status: "completed", activeForm: "Generating layout templates"},
|
{content: `Generate ${layout_variants}×${target_list.length} layout templates using planned strategies`, status: "completed", activeForm: "Generating layout templates"},
|
||||||
{content: "Convert design tokens to CSS variables", status: "completed", activeForm: "Converting tokens"},
|
{content: "Convert design tokens to CSS variables", status: "completed", activeForm: "Converting tokens"},
|
||||||
{content: `Instantiate ${style_variants}×${layout_variants}×${page_list.length} prototypes using script`, status: "completed", activeForm: "Running instantiation script"},
|
{content: `Instantiate ${style_variants}×${layout_variants}×${target_list.length} prototypes using script`, status: "completed", activeForm: "Running instantiation script"},
|
||||||
{content: "Verify preview files generation", status: "completed", activeForm: "Verifying preview files"}
|
{content: "Verify preview files generation", status: "completed", activeForm: "Verifying preview files"}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
@@ -646,12 +749,13 @@ Configuration:
|
|||||||
- Style Variants: {style_variants}
|
- Style Variants: {style_variants}
|
||||||
- Layout Variants: {layout_variants} (from layout-strategies.json)
|
- Layout Variants: {layout_variants} (from layout-strategies.json)
|
||||||
- Layout Strategies: {[s.name for s in layout_strategies.strategies]}
|
- Layout Strategies: {[s.name for s in layout_strategies.strategies]}
|
||||||
- Pages: {page_list}
|
- Target Type: {target_type_icon} {target_type}
|
||||||
- Total Prototypes: {style_variants * layout_variants * len(page_list)}
|
- Targets: {target_list}
|
||||||
|
- Total Prototypes: {style_variants * layout_variants * len(target_list)}
|
||||||
|
|
||||||
Performance Metrics:
|
Performance Metrics:
|
||||||
- Layout Templates Generated: {layout_variants * len(page_list)} (Agent tasks)
|
- Layout Templates Generated: {layout_variants * len(target_list)} (Agent tasks)
|
||||||
- Prototypes Instantiated: {style_variants * layout_variants * len(page_list)} (script-based)
|
- Prototypes Instantiated: {style_variants * layout_variants * len(target_list)} (script-based)
|
||||||
- Preview Files: compare.html, index.html, PREVIEW.md (auto-generated)
|
- Preview Files: compare.html, index.html, PREVIEW.md (auto-generated)
|
||||||
- Speed Improvement: {style_variants}× faster than previous approach
|
- Speed Improvement: {style_variants}× faster than previous approach
|
||||||
- Resource Efficiency: {100 * (1 - 1/style_variants)}% reduction in Agent calls
|
- Resource Efficiency: {100 * (1 - 1/style_variants)}% reduction in Agent calls
|
||||||
@@ -660,10 +764,10 @@ Performance Metrics:
|
|||||||
Generated Structure:
|
Generated Structure:
|
||||||
📂 {base_path}/prototypes/
|
📂 {base_path}/prototypes/
|
||||||
├── _templates/
|
├── _templates/
|
||||||
│ ├── {page}-layout-{1..L}.html ({layout_variants * len(page_list)} templates)
|
│ ├── {target}-layout-{1..L}.html ({layout_variants * len(target_list)} templates)
|
||||||
│ └── {page}-layout-{1..L}.css ({layout_variants * len(page_list)} structural CSS)
|
│ └── {target}-layout-{1..L}.css ({layout_variants * len(target_list)} structural CSS)
|
||||||
├── {page}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(page_list)} final prototypes)
|
├── {target}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(target_list)} final prototypes)
|
||||||
├── {page}-style-{s}-layout-{l}-notes.md
|
├── {target}-style-{s}-layout-{l}-notes.md
|
||||||
├── compare.html (interactive matrix visualization)
|
├── compare.html (interactive matrix visualization)
|
||||||
└── index.html (quick navigation)
|
└── index.html (quick navigation)
|
||||||
|
|
||||||
@@ -672,9 +776,16 @@ Generated Structure:
|
|||||||
2. Quick Index: Open index.html
|
2. Quick Index: Open index.html
|
||||||
3. Instructions: See PREVIEW.md
|
3. Instructions: See PREVIEW.md
|
||||||
|
|
||||||
|
{IF target_type == "component":
|
||||||
|
Note: Components are rendered with minimal wrapper for isolated comparison.
|
||||||
|
}
|
||||||
|
|
||||||
Next: /workflow:ui-design:update {--session flag if applicable}
|
Next: /workflow:ui-design:update {--session flag if applicable}
|
||||||
|
|
||||||
Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
|
Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
|
||||||
|
|
||||||
|
**Dynamic Values**:
|
||||||
|
- target_type_icon: "📄" for page, "🧩" for component
|
||||||
```
|
```
|
||||||
|
|
||||||
## Output Structure
|
## Output Structure
|
||||||
@@ -682,18 +793,18 @@ Note: When called from /workflow:ui-design:auto, design-update is triggered auto
|
|||||||
```
|
```
|
||||||
{base_path}/prototypes/
|
{base_path}/prototypes/
|
||||||
├── _templates/ # Reusable layout templates
|
├── _templates/ # Reusable layout templates
|
||||||
│ ├── {page}-layout-1.html # Style-agnostic HTML structure
|
│ ├── {target}-layout-1.html # Style-agnostic HTML structure
|
||||||
│ ├── {page}-layout-1.css # Structural CSS with var() references
|
│ ├── {target}-layout-1.css # Structural CSS with var() references
|
||||||
│ ├── {page}-layout-2.html
|
│ ├── {target}-layout-2.html
|
||||||
│ ├── {page}-layout-2.css
|
│ ├── {target}-layout-2.css
|
||||||
│ └── ... (L × P templates total)
|
│ └── ... (L × T templates total, T=targets)
|
||||||
├── compare.html # Interactive matrix visualization
|
├── compare.html # Interactive matrix visualization
|
||||||
├── index.html # Simple navigation page
|
├── index.html # Simple navigation page
|
||||||
├── PREVIEW.md # Preview instructions
|
├── PREVIEW.md # Preview instructions
|
||||||
├── design-tokens.css # CSS custom properties fallback
|
├── design-tokens.css # CSS custom properties fallback
|
||||||
├── {page}-style-{s}-layout-{l}.html # Final prototypes (copied from templates)
|
├── {target}-style-{s}-layout-{l}.html # Final prototypes (copied from templates)
|
||||||
├── {page}-style-{s}-layout-{l}-notes.md # Implementation notes
|
├── {target}-style-{s}-layout-{l}-notes.md # Implementation notes
|
||||||
└── ... (S × L × P total final files)
|
└── ... (S × L × T total final files)
|
||||||
|
|
||||||
{base_path}/style-consolidation/
|
{base_path}/style-consolidation/
|
||||||
├── style-1/
|
├── style-1/
|
||||||
@@ -712,8 +823,9 @@ Note: When called from /workflow:ui-design:auto, design-update is triggered auto
|
|||||||
### Pre-execution Checks
|
### Pre-execution Checks
|
||||||
- **Missing layout-strategies.json**: Error - Run `/workflow:ui-design:consolidate` first
|
- **Missing layout-strategies.json**: Error - Run `/workflow:ui-design:consolidate` first
|
||||||
- **No design systems found**: Error - Run `/workflow:ui-design:consolidate --keep-separate` first
|
- **No design systems found**: Error - Run `/workflow:ui-design:consolidate --keep-separate` first
|
||||||
- **Invalid page names**: Extract from synthesis-specification.md or error with validation message
|
- **Invalid target names**: Extract from synthesis-specification.md or error with validation message
|
||||||
- **Missing templates directory**: Verify Phase 2a completed successfully
|
- **Missing templates directory**: Verify Phase 2a completed successfully
|
||||||
|
- **Unsupported target type**: Error if target_type not in ["page", "component"]
|
||||||
|
|
||||||
### Phase-Specific Errors
|
### Phase-Specific Errors
|
||||||
- **Agent execution errors (Phase 2a)**: Report details, suggest retry with specific phase
|
- **Agent execution errors (Phase 2a)**: Report details, suggest retry with specific phase
|
||||||
@@ -743,9 +855,10 @@ After generation, ensure:
|
|||||||
- [ ] Semantic HTML structure with proper element hierarchy
|
- [ ] Semantic HTML structure with proper element hierarchy
|
||||||
- [ ] ARIA attributes present for accessibility
|
- [ ] ARIA attributes present for accessibility
|
||||||
- [ ] Responsive design implemented with mobile-first approach
|
- [ ] Responsive design implemented with mobile-first approach
|
||||||
- [ ] File naming follows `{page}-style-{s}-layout-{l}` convention
|
- [ ] File naming follows `{target}-style-{s}-layout-{l}` convention
|
||||||
- [ ] compare.html loads correctly with all prototypes
|
- [ ] compare.html loads correctly with all prototypes
|
||||||
- [ ] Template files are reusable and style-agnostic
|
- [ ] Template files are reusable and style-agnostic
|
||||||
|
- [ ] Appropriate wrapper used (full-page for pages, minimal for components)
|
||||||
|
|
||||||
## Key Features
|
## Key Features
|
||||||
|
|
||||||
@@ -756,48 +869,54 @@ After generation, ensure:
|
|||||||
- Context-aware: extracts tech stack hints from project brainstorming artifacts
|
- Context-aware: extracts tech stack hints from project brainstorming artifacts
|
||||||
- Multi-dimensional research: component, responsive, accessibility, semantic HTML, CSS patterns
|
- Multi-dimensional research: component, responsive, accessibility, semantic HTML, CSS patterns
|
||||||
|
|
||||||
2. **Optimized Template-Based Architecture**
|
2. **Unified Target Generation**
|
||||||
|
- Supports both pages (full layouts) and components (isolated elements)
|
||||||
|
- Intelligent wrapper selection based on target type
|
||||||
|
- Backward compatible with legacy `--pages` parameter
|
||||||
|
|
||||||
|
3. **Optimized Template-Based Architecture**
|
||||||
- Decouples HTML structure from CSS styling
|
- Decouples HTML structure from CSS styling
|
||||||
- Generates `L × P` reusable templates instead of `S × L × P` unique files
|
- Generates `L × T` reusable templates instead of `S × L × T` unique files (T=targets)
|
||||||
- **`S` times faster** than previous approach (typically 3× faster for S=3)
|
- **`S` times faster** than previous approach (typically 3× faster for S=3)
|
||||||
|
|
||||||
3. **Two-Layer Generation Strategy**
|
4. **Two-Layer Generation Strategy**
|
||||||
- Layer 1: Agent-driven creative generation of layout templates (informed by research)
|
- Layer 1: Agent-driven creative generation of layout templates (informed by research)
|
||||||
- Layer 2: Fast file operations for prototype instantiation (script-based)
|
- Layer 2: Fast file operations for prototype instantiation (script-based)
|
||||||
- Reduces expensive Agent calls by ~67% (for S=3)
|
- Reduces expensive Agent calls by ~67% (for S=3)
|
||||||
|
|
||||||
4. **Script-Based Instantiation (v3.0)**
|
5. **Script-Based Instantiation (v3.0)**
|
||||||
- Uses `ui-instantiate-prototypes.sh` for efficient file operations
|
- Uses `ui-instantiate-prototypes.sh` for efficient file operations
|
||||||
- Auto-detection of configuration from directory structure
|
- Auto-detection of configuration from directory structure
|
||||||
- Robust error handling with detailed reporting
|
- Robust error handling with detailed reporting
|
||||||
- Generates implementation notes for each prototype
|
- Generates implementation notes for each prototype
|
||||||
- Integrated preview file generation
|
- Integrated preview file generation
|
||||||
|
- Supports both page and component modes
|
||||||
|
|
||||||
5. **Modern Best Practices Integration**
|
6. **Modern Best Practices Integration**
|
||||||
- Component patterns from latest UI libraries and frameworks
|
- Component patterns from latest UI libraries and frameworks
|
||||||
- WCAG 2.2 accessibility implementation
|
- WCAG 2.2 accessibility implementation
|
||||||
- Modern responsive design (grid, flexbox, container queries)
|
- Modern responsive design (grid, flexbox, container queries)
|
||||||
- Semantic HTML5 structure following current standards
|
- Semantic HTML5 structure following current standards
|
||||||
- CSS architecture patterns (BEM, design tokens, custom properties)
|
- CSS architecture patterns (BEM, design tokens, custom properties)
|
||||||
|
|
||||||
6. **Consistent Cross-Style Layouts**
|
7. **Consistent Cross-Style Layouts**
|
||||||
- Same layout structure applied uniformly across all style variants
|
- Same layout structure applied uniformly across all style variants
|
||||||
- Easier to compare styles directly (HTML structure is identical)
|
- Easier to compare styles directly (HTML structure is identical)
|
||||||
- Simplified maintenance (edit template once, affects all styles)
|
- Simplified maintenance (edit template once, affects all styles)
|
||||||
|
|
||||||
7. **Dynamic Style Injection**
|
8. **Dynamic Style Injection**
|
||||||
- CSS custom properties enable runtime style switching
|
- CSS custom properties enable runtime style switching
|
||||||
- Each style variant has its own `tokens.css` file
|
- Each style variant has its own `tokens.css` file
|
||||||
- Clean separation of structure and aesthetics
|
- Clean separation of structure and aesthetics
|
||||||
|
|
||||||
8. **Interactive Visualization**
|
9. **Interactive Visualization**
|
||||||
- Full-featured compare.html from template
|
- Full-featured compare.html from template
|
||||||
- Matrix grid view with synchronized scrolling
|
- Matrix grid view with synchronized scrolling
|
||||||
- Enhanced index.html with statistics
|
- Enhanced index.html with statistics
|
||||||
- Comprehensive PREVIEW.md documentation
|
- Comprehensive PREVIEW.md documentation
|
||||||
- Per-style design system references
|
- Per-style design system references
|
||||||
|
|
||||||
9. **Production-Ready Output**
|
10. **Production-Ready Output**
|
||||||
- Semantic HTML5 and ARIA attributes (following latest guidelines)
|
- Semantic HTML5 and ARIA attributes (following latest guidelines)
|
||||||
- Mobile-first responsive design (modern patterns)
|
- Mobile-first responsive design (modern patterns)
|
||||||
- Token-driven styling (no hardcoded values)
|
- Token-driven styling (no hardcoded values)
|
||||||
@@ -808,8 +927,10 @@ After generation, ensure:
|
|||||||
- **Input**:
|
- **Input**:
|
||||||
- Per-style `design-tokens.json` from `/workflow:ui-design:consolidate --keep-separate`
|
- Per-style `design-tokens.json` from `/workflow:ui-design:consolidate --keep-separate`
|
||||||
- **`layout-strategies.json`** from `/workflow:ui-design:consolidate` (defines layout variants)
|
- **`layout-strategies.json`** from `/workflow:ui-design:consolidate` (defines layout variants)
|
||||||
- Optional: `synthesis-specification.md` for page requirements
|
- Optional: `synthesis-specification.md` for target requirements
|
||||||
|
- Target type specification (page or component)
|
||||||
- **Output**: Matrix HTML/CSS prototypes for `/workflow:ui-design:update`
|
- **Output**: Matrix HTML/CSS prototypes for `/workflow:ui-design:update`
|
||||||
- **Template**: `~/.claude/workflows/_template-compare-matrix.html` (global)
|
- **Template**: `~/.claude/workflows/_template-compare-matrix.html` (global)
|
||||||
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
|
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` or `/workflow:ui-design:explore-auto` workflows
|
||||||
- **Key Change**: Layout strategies are now externalized and planned by consolidate command
|
- **Key Change**: Unified target system supports both pages and components with appropriate wrapper selection
|
||||||
|
- **Backward Compatibility**: Legacy `--pages` parameter continues to work
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
---
|
---
|
||||||
name: imitate-auto
|
name: imitate-auto
|
||||||
description: Imitation-focused UI design workflow - Rapidly replicate a single design style from URL or images (skip exploration, direct to implementation)
|
description: Imitation-focused UI design workflow - Rapidly replicate a single design style from URL or images (skip exploration, direct to implementation)
|
||||||
usage: /workflow:ui-design:imitate-auto [--url "<url>"] [--images "<glob>"] [--prompt "<desc>"] [--pages "<list>"] [--session <id>]
|
usage: /workflow:ui-design:imitate-auto [--url "<url>"] [--images "<glob>"] [--prompt "<desc>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>]
|
||||||
argument-hint: "[--url \"https://example.com\"] [--images \"refs/*.png\"] [--prompt \"Imitate dark mode style\"] [--pages \"dashboard,settings\"]"
|
argument-hint: "[--url \"https://example.com\"] [--images \"refs/*.png\"] [--prompt \"Imitate dark mode style\"] [--targets \"dashboard,settings\"] [--target-type \"page\"]"
|
||||||
examples:
|
examples:
|
||||||
- /workflow:ui-design:imitate-auto --url "https://linear.app" --pages "home,features,pricing"
|
- /workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing"
|
||||||
- /workflow:ui-design:imitate-auto --images "refs/design.png" --prompt "Imitate this minimalist design for dashboard and settings"
|
- /workflow:ui-design:imitate-auto --images "refs/design.png" --prompt "Imitate this minimalist design for dashboard and settings"
|
||||||
- /workflow:ui-design:imitate-auto --url "https://stripe.com" --session WFS-payment
|
- /workflow:ui-design:imitate-auto --url "https://stripe.com" --session WFS-payment
|
||||||
- /workflow:ui-design:imitate-auto --images "refs/*.png" --pages "home"
|
- /workflow:ui-design:imitate-auto --images "refs/*.png" --targets "home"
|
||||||
|
- /workflow:ui-design:imitate-auto --url "https://example.com" --targets "navbar,hero" --target-type "component"
|
||||||
|
- /workflow:ui-design:imitate-auto --images "refs/*.png" --pages "home" # Legacy syntax
|
||||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*)
|
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*)
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -47,10 +49,14 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
|||||||
- `--images "<glob>"`: Local reference images (e.g., "refs/*.png")
|
- `--images "<glob>"`: Local reference images (e.g., "refs/*.png")
|
||||||
|
|
||||||
**Optional**:
|
**Optional**:
|
||||||
- `--pages "<list>"`: Pages to generate (default: "home")
|
- `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt if omitted)
|
||||||
|
- `--target-type "page|component"`: Explicitly set target type (default: intelligent detection)
|
||||||
- `--session <id>"`: Workflow session ID (standalone if omitted)
|
- `--session <id>"`: Workflow session ID (standalone if omitted)
|
||||||
- `--prompt "<desc>"`: Additional design guidance (e.g., "Focus on dark mode")
|
- `--prompt "<desc>"`: Additional design guidance (e.g., "Focus on dark mode")
|
||||||
|
|
||||||
|
**Legacy Parameters** (maintained for backward compatibility):
|
||||||
|
- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
|
||||||
|
|
||||||
**Not Supported**:
|
**Not Supported**:
|
||||||
- `--style-variants`: Always 1 (single style)
|
- `--style-variants`: Always 1 (single style)
|
||||||
- `--layout-variants`: Always 1 (single layout)
|
- `--layout-variants`: Always 1 (single layout)
|
||||||
@@ -87,36 +93,72 @@ Write({base_path}/.run-metadata.json): {
|
|||||||
"status": "in_progress"
|
"status": "in_progress"
|
||||||
}
|
}
|
||||||
|
|
||||||
# Page inference (simplified, no interactive confirmation)
|
# Unified target inference (simplified for imitate mode, no interactive confirmation)
|
||||||
|
target_list = []
|
||||||
|
target_type = "page" # Default to page for imitate mode
|
||||||
|
target_source = "none"
|
||||||
|
|
||||||
|
# Step 1: Handle legacy --pages parameter (backward compatibility)
|
||||||
IF --pages provided:
|
IF --pages provided:
|
||||||
page_list = split_and_clean({--pages value}, [",", ";", "、"])
|
target_list = split_and_clean({--pages value}, [",", ";", "、"])
|
||||||
page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()]
|
target_type = "page"
|
||||||
page_source = "explicit"
|
target_source = "explicit_legacy"
|
||||||
|
REPORT: "📋 Using explicitly provided pages (legacy): {', '.join(target_list)}"
|
||||||
|
|
||||||
|
# Step 2: Handle unified --targets parameter
|
||||||
|
ELSE IF --targets provided:
|
||||||
|
target_list = split_and_clean({--targets value}, [",", ";", "、"])
|
||||||
|
target_source = "explicit"
|
||||||
|
|
||||||
|
# Override type if explicitly set
|
||||||
|
IF --target-type provided:
|
||||||
|
target_type = --target-type
|
||||||
|
REPORT: "🎯 Using explicitly provided targets with type '{target_type}': {', '.join(target_list)}"
|
||||||
|
ELSE:
|
||||||
|
# Intelligent type detection (same logic as explore-auto)
|
||||||
|
target_type = detect_target_type(target_list)
|
||||||
|
REPORT: "🎯 Using explicitly provided targets (detected type: {target_type}): {', '.join(target_list)}"
|
||||||
|
|
||||||
|
# Step 3: Extract from prompt
|
||||||
ELSE IF --prompt provided:
|
ELSE IF --prompt provided:
|
||||||
# Extract from prompt: "for dashboard and settings" or "pages: home, about"
|
# Extract from prompt: "for dashboard and settings" or "pages: home, about"
|
||||||
page_list = extract_pages_from_prompt(prompt_text)
|
target_list = extract_targets_from_prompt(prompt_text)
|
||||||
page_source = "prompt_inferred"
|
target_source = "prompt_inferred"
|
||||||
IF NOT page_list:
|
IF NOT target_list:
|
||||||
page_list = ["home"]
|
target_list = ["home"]
|
||||||
|
|
||||||
|
# Detect type from prompt or targets
|
||||||
|
IF --target-type provided:
|
||||||
|
target_type = --target-type
|
||||||
|
ELSE:
|
||||||
|
target_type = detect_target_type(target_list)
|
||||||
|
|
||||||
|
# Step 4: Fallback default
|
||||||
ELSE:
|
ELSE:
|
||||||
page_list = ["home"]
|
target_list = ["home"]
|
||||||
page_source = "default"
|
target_type = "page"
|
||||||
|
target_source = "default"
|
||||||
|
|
||||||
# Validate page names
|
# Validate and clean target names
|
||||||
validated_pages = []
|
validated_targets = []
|
||||||
FOR page IN page_list:
|
FOR target IN target_list:
|
||||||
cleaned = page.strip().lower().replace(" ", "-")
|
cleaned = target.strip().lower().replace(" ", "-")
|
||||||
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
|
||||||
validated_pages.append(cleaned)
|
validated_targets.append(cleaned)
|
||||||
|
|
||||||
IF NOT validated_pages:
|
IF NOT validated_targets:
|
||||||
validated_pages = ["home"]
|
validated_targets = ["home"]
|
||||||
|
target_type = "page"
|
||||||
|
|
||||||
REPORT: "📋 Imitate mode: {len(validated_pages)} pages with single style"
|
type_emoji = "📄" IF target_type == "page" ELSE "🧩"
|
||||||
REPORT: " Pages: {', '.join(validated_pages)}"
|
type_label = "pages" IF target_type == "page" ELSE "components"
|
||||||
|
|
||||||
|
REPORT: "📋 Imitate mode: {len(validated_targets)} {type_label} with single style"
|
||||||
|
REPORT: " {type_emoji} Targets: {', '.join(validated_targets)}"
|
||||||
|
REPORT: " Type: {target_type}"
|
||||||
REPORT: " Reference: {url_value OR images_pattern}"
|
REPORT: " Reference: {url_value OR images_pattern}"
|
||||||
|
|
||||||
STORE: run_id, base_path, inferred_page_list = validated_pages
|
STORE: run_id, base_path, inferred_target_list = validated_targets, target_type = target_type
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -305,21 +347,27 @@ REPORT: " Bypassed consolidate for {performance_gain}× speed"
|
|||||||
**Command**:
|
**Command**:
|
||||||
```bash
|
```bash
|
||||||
run_base_flag = "--base-path \"{base_path}\""
|
run_base_flag = "--base-path \"{base_path}\""
|
||||||
pages_string = ",".join(inferred_page_list)
|
targets_string = ",".join(inferred_target_list)
|
||||||
pages_flag = "--pages \"{pages_string}\""
|
targets_flag = "--targets \"{targets_string}\""
|
||||||
|
type_flag = "--target-type \"{target_type}\""
|
||||||
|
|
||||||
# Force 1×1 mode
|
# Force 1×1 mode
|
||||||
command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants 1 --layout-variants 1"
|
command = "/workflow:ui-design:generate {run_base_flag} {targets_flag} {type_flag} --style-variants 1 --layout-variants 1"
|
||||||
|
|
||||||
REPORT: "🚀 Phase 3: Generating {len(inferred_page_list)} prototype(s)"
|
type_emoji = "📄" IF target_type == "page" ELSE "🧩"
|
||||||
|
type_label = "page(s)" IF target_type == "page" ELSE "component(s)"
|
||||||
|
|
||||||
|
REPORT: "🚀 Phase 3: Generating {len(inferred_target_list)} {type_label}"
|
||||||
|
REPORT: " {type_emoji} Targets: {targets_string}"
|
||||||
REPORT: " Mode: 1×1 (imitation-optimized)"
|
REPORT: " Mode: 1×1 (imitation-optimized)"
|
||||||
|
|
||||||
SlashCommand(command)
|
SlashCommand(command)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Result**:
|
**Result**:
|
||||||
- Prototypes: `{page}-style-1-layout-1.html`
|
- Prototypes: `{target}-style-1-layout-1.html`
|
||||||
- Total: `len(inferred_page_list)`
|
- Total: `len(inferred_target_list)`
|
||||||
|
- Type: {target_type} (full-page for pages, minimal wrapper for components)
|
||||||
|
|
||||||
**Auto-Continue**: On completion → Phase 4
|
**Auto-Continue**: On completion → Phase 4
|
||||||
|
|
||||||
@@ -345,7 +393,7 @@ ELSE:
|
|||||||
```javascript
|
```javascript
|
||||||
// Initialize
|
// Initialize
|
||||||
TodoWrite({todos: [
|
TodoWrite({todos: [
|
||||||
{"content": "Initialize run directory and infer pages", "status": "in_progress", "activeForm": "Initializing"},
|
{"content": "Initialize run directory and infer targets", "status": "in_progress", "activeForm": "Initializing"},
|
||||||
{"content": "Capture screenshots from URL (if provided)", "status": "pending", "activeForm": "Capturing screenshots"},
|
{"content": "Capture screenshots from URL (if provided)", "status": "pending", "activeForm": "Capturing screenshots"},
|
||||||
{"content": "Extract single design style from reference", "status": "pending", "activeForm": "Extracting style"},
|
{"content": "Extract single design style from reference", "status": "pending", "activeForm": "Extracting style"},
|
||||||
{"content": "Adapt tokens (bypass consolidate)", "status": "pending", "activeForm": "Adapting tokens"},
|
{"content": "Adapt tokens (bypass consolidate)", "status": "pending", "activeForm": "Adapting tokens"},
|
||||||
@@ -386,31 +434,41 @@ TodoWrite({todos: [
|
|||||||
|
|
||||||
## Example Execution Flows
|
## Example Execution Flows
|
||||||
|
|
||||||
### Example 1: URL with Auto-Screenshot
|
### Example 1: URL with Auto-Screenshot (Pages)
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:imitate-auto --url "https://linear.app" --pages "home,features,pricing"
|
/workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing"
|
||||||
|
|
||||||
# Flow:
|
# Flow:
|
||||||
# 0. Init: 3 pages identified
|
# 0. Init: 3 pages identified
|
||||||
# 0.5. Screenshot: Playwright captures linear.app
|
# 0.5. Screenshot: Playwright captures linear.app
|
||||||
# 1. Extract: Single style from screenshot
|
# 1. Extract: Single style from screenshot
|
||||||
# 2. Adapt: Direct tokens (~2s vs consolidate's ~45s)
|
# 2. Adapt: Direct tokens (~2s vs consolidate's ~45s)
|
||||||
# 3. Generate: 3 prototypes
|
# 3. Generate: 3 page prototypes
|
||||||
# 4. Complete
|
# 4. Complete
|
||||||
# Time: ~2-3 min (vs 5-7 min with explore-auto)
|
# Time: ~2-3 min (vs 5-7 min with explore-auto)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 2: Images with Guidance
|
### Example 2: Images with Guidance (Page Mode)
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:imitate-auto --images "refs/dark-theme.png" --prompt "Focus on dark mode" --pages "dashboard"
|
/workflow:ui-design:imitate-auto --images "refs/dark-theme.png" --prompt "Focus on dark mode" --targets "dashboard"
|
||||||
|
|
||||||
# Flow: 0 → 0.5 (skip) → 1 → 2 → 3 → 4
|
# Flow: 0 → 0.5 (skip) → 1 → 2 → 3 → 4
|
||||||
# Output: dashboard-style-1-layout-1.html
|
# Output: dashboard-style-1-layout-1.html
|
||||||
|
# Type: page (full-page layout)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example 3: URL with Manual Screenshot
|
### Example 3: Component Mode
|
||||||
```bash
|
```bash
|
||||||
/workflow:ui-design:imitate-auto --url "https://stripe.com/pricing" --pages "pricing"
|
/workflow:ui-design:imitate-auto --url "https://example.com" --targets "navbar,hero,card" --target-type "component"
|
||||||
|
|
||||||
|
# Flow: 0 → 0.5 → 1 → 2 → 3 → 4
|
||||||
|
# Output: navbar-style-1-layout-1.html, hero-style-1-layout-1.html, card-style-1-layout-1.html
|
||||||
|
# Type: component (minimal wrapper for isolated comparison)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 4: URL with Manual Screenshot
|
||||||
|
```bash
|
||||||
|
/workflow:ui-design:imitate-auto --url "https://stripe.com/pricing" --targets "pricing"
|
||||||
|
|
||||||
# 0.5. Screenshot:
|
# 0.5. Screenshot:
|
||||||
# ⚠️ Playwright failed → Chrome failed
|
# ⚠️ Playwright failed → Chrome failed
|
||||||
@@ -420,6 +478,14 @@ TodoWrite({todos: [
|
|||||||
# Continues: 1 → 2 → 3 → 4
|
# Continues: 1 → 2 → 3 → 4
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Example 5: Legacy Parameter Support
|
||||||
|
```bash
|
||||||
|
# Using legacy --pages parameter (backward compatible)
|
||||||
|
/workflow:ui-design:imitate-auto --url "https://example.com" --pages "home,dashboard"
|
||||||
|
|
||||||
|
# Equivalent to: --targets "home,dashboard" --target-type "page"
|
||||||
|
```
|
||||||
|
|
||||||
## Final Completion Message
|
## Final Completion Message
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -429,23 +495,28 @@ Mode: Single Style Replication
|
|||||||
Run ID: {run_id}
|
Run ID: {run_id}
|
||||||
Session: {session_id or "standalone"}
|
Session: {session_id or "standalone"}
|
||||||
Reference: {url OR images}
|
Reference: {url OR images}
|
||||||
|
Type: {target_type_icon} {target_type_label}
|
||||||
|
|
||||||
Phase 0 - Initialization: {page_count} pages prepared
|
Phase 0 - Initialization: {target_count} {target_type}(s) prepared
|
||||||
Phase 0.5 - Screenshot Capture: {screenshot_status}
|
Phase 0.5 - Screenshot Capture: {screenshot_status}
|
||||||
{IF success: ✅ Captured via {method}}
|
{IF success: ✅ Captured via {method}}
|
||||||
{ELSE: ⚠️ URL analysis only}
|
{ELSE: ⚠️ URL analysis only}
|
||||||
Phase 1 - Style Extraction: Single style extracted
|
Phase 1 - Style Extraction: Single style extracted
|
||||||
Phase 2 - Token Adaptation: Bypassed consolidate (⚡ {time_saved}s saved)
|
Phase 2 - Token Adaptation: Bypassed consolidate (⚡ {time_saved}s saved)
|
||||||
Phase 3 - Prototype Generation: {page_count} prototypes created
|
Phase 3 - Prototype Generation: {target_count} {target_type} prototypes created
|
||||||
Phase 4 - Design Integration: {integrated OR "Standalone mode"}
|
Phase 4 - Design Integration: {integrated OR "Standalone mode"}
|
||||||
|
|
||||||
📂 Output: {base_path}/
|
📂 Output: {base_path}/
|
||||||
├── style-extraction/style-cards.json (1 style card)
|
├── style-extraction/style-cards.json (1 style card)
|
||||||
├── style-consolidation/style-1/ (design tokens)
|
├── style-consolidation/style-1/ (design tokens)
|
||||||
└── prototypes/ ({page_count} HTML/CSS files)
|
└── prototypes/ ({target_count} HTML/CSS files)
|
||||||
|
|
||||||
🌐 Preview: {base_path}/prototypes/index.html
|
🌐 Preview: {base_path}/prototypes/index.html
|
||||||
|
|
||||||
|
{target_type_icon} Targets: {', '.join(inferred_target_list)}
|
||||||
|
Type: {target_type}
|
||||||
|
Context: {IF target_type == "page": "Full-page layouts" ELSE: "Isolated components with minimal wrapper"}
|
||||||
|
|
||||||
Performance:
|
Performance:
|
||||||
- Design system: ~{time}s (vs ~{consolidate_time}s with consolidate)
|
- Design system: ~{time}s (vs ~{consolidate_time}s with consolidate)
|
||||||
- Total workflow: ~{total_time}s
|
- Total workflow: ~{total_time}s
|
||||||
@@ -458,3 +529,9 @@ Next: /workflow:plan to create implementation tasks
|
|||||||
Prototypes ready: {base_path}/prototypes/
|
Prototypes ready: {base_path}/prototypes/
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**Dynamic Values**:
|
||||||
|
- `target_type_icon`: "📄" for page, "🧩" for component
|
||||||
|
- `target_type_label`: "Pages" for page, "Components" for component
|
||||||
|
- `target_count`: `len(inferred_target_list)`
|
||||||
|
```
|
||||||
|
|||||||
@@ -32,11 +32,29 @@ VALIDATE: session_id matches active session
|
|||||||
|
|
||||||
# Verify required design artifacts exist in latest design run
|
# Verify required design artifacts exist in latest design run
|
||||||
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
|
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
|
||||||
|
|
||||||
|
# Detect design system structure (unified vs separate)
|
||||||
|
IF exists({latest_design}/style-consolidation/design-tokens.json):
|
||||||
|
# Unified mode (single design system)
|
||||||
|
design_system_mode = "unified"
|
||||||
|
design_tokens_path = "style-consolidation/design-tokens.json"
|
||||||
|
style_guide_path = "style-consolidation/style-guide.md"
|
||||||
|
ELSE IF exists({latest_design}/style-consolidation/style-1/design-tokens.json):
|
||||||
|
# Separate mode (per-style design systems)
|
||||||
|
design_system_mode = "separate"
|
||||||
|
design_tokens_path = "style-consolidation/style-1/design-tokens.json"
|
||||||
|
style_guide_path = "style-consolidation/style-1/style-guide.md"
|
||||||
|
ELSE:
|
||||||
|
ERROR: "No design tokens found. Run /workflow:ui-design:consolidate first"
|
||||||
|
|
||||||
VERIFY:
|
VERIFY:
|
||||||
- {latest_design}/style-consolidation/design-tokens.json
|
- {latest_design}/{design_tokens_path}
|
||||||
- {latest_design}/style-consolidation/style-guide.md
|
- {latest_design}/{style_guide_path}
|
||||||
- {latest_design}/prototypes/*.html (at least one prototype)
|
- {latest_design}/prototypes/*.html (at least one prototype)
|
||||||
|
|
||||||
|
REPORT: "📋 Design system mode: {design_system_mode}"
|
||||||
|
REPORT: " Tokens: {design_tokens_path}"
|
||||||
|
|
||||||
# Prototype selection
|
# Prototype selection
|
||||||
IF --selected-prototypes provided:
|
IF --selected-prototypes provided:
|
||||||
VALIDATE: Specified prototypes exist
|
VALIDATE: Specified prototypes exist
|
||||||
@@ -76,8 +94,9 @@ Update `.brainstorming/synthesis-specification.md` with design system references
|
|||||||
## UI/UX Guidelines
|
## UI/UX Guidelines
|
||||||
|
|
||||||
### Design System Reference
|
### Design System Reference
|
||||||
**Finalized Design Tokens**: @../design-{run_id}/style-consolidation/design-tokens.json
|
**Finalized Design Tokens**: @../design-{run_id}/{design_tokens_path}
|
||||||
**Style Guide**: @../design-{run_id}/style-consolidation/style-guide.md
|
**Style Guide**: @../design-{run_id}/{style_guide_path}
|
||||||
|
**Design System Mode**: {design_system_mode}
|
||||||
|
|
||||||
### Implementation Requirements
|
### Implementation Requirements
|
||||||
**Token Adherence**: All UI implementations MUST use design token CSS custom properties
|
**Token Adherence**: All UI implementations MUST use design token CSS custom properties
|
||||||
@@ -94,8 +113,9 @@ Update `.brainstorming/synthesis-specification.md` with design system references
|
|||||||
### Design System Assets
|
### Design System Assets
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"design_tokens": "design-{run_id}/style-consolidation/design-tokens.json",
|
"design_tokens": "design-{run_id}/{design_tokens_path}",
|
||||||
"style_guide": "design-{run_id}/style-consolidation/style-guide.md",
|
"style_guide": "design-{run_id}/{style_guide_path}",
|
||||||
|
"design_system_mode": "{design_system_mode}",
|
||||||
"prototypes": [
|
"prototypes": [
|
||||||
{FOR each: "design-{run_id}/prototypes/{prototype}.html"}
|
{FOR each: "design-{run_id}/prototypes/{prototype}.html"}
|
||||||
]
|
]
|
||||||
@@ -131,8 +151,9 @@ Create or update `.brainstorming/ui-designer/style-guide.md`:
|
|||||||
## Design System Integration
|
## Design System Integration
|
||||||
This style guide references the finalized design system from the design refinement phase.
|
This style guide references the finalized design system from the design refinement phase.
|
||||||
|
|
||||||
**Design Tokens**: @../../design-{run_id}/style-consolidation/design-tokens.json
|
**Design Tokens**: @../../design-{run_id}/{design_tokens_path}
|
||||||
**Style Guide**: @../../design-{run_id}/style-consolidation/style-guide.md
|
**Style Guide**: @../../design-{run_id}/{style_guide_path}
|
||||||
|
**Design System Mode**: {design_system_mode}
|
||||||
|
|
||||||
## Implementation Guidelines
|
## Implementation Guidelines
|
||||||
1. **Use CSS Custom Properties**: All styles reference design tokens
|
1. **Use CSS Custom Properties**: All styles reference design tokens
|
||||||
@@ -147,8 +168,8 @@ This style guide references the finalized design system from the design refineme
|
|||||||
|
|
||||||
## Token System
|
## Token System
|
||||||
For complete token definitions and usage examples, see:
|
For complete token definitions and usage examples, see:
|
||||||
- Design Tokens: @../../design-{run_id}/style-consolidation/design-tokens.json
|
- Design Tokens: @../../design-{run_id}/{design_tokens_path}
|
||||||
- Style Guide: @../../design-{run_id}/style-consolidation/style-guide.md
|
- Style Guide: @../../design-{run_id}/{style_guide_path}
|
||||||
|
|
||||||
---
|
---
|
||||||
*Auto-generated by /workflow:ui-design:update*
|
*Auto-generated by /workflow:ui-design:update*
|
||||||
|
|||||||
Reference in New Issue
Block a user