diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md index 3f9b924a..04cee016 100644 --- a/.claude/agents/ui-design-agent.md +++ b/.claude/agents/ui-design-agent.md @@ -10,8 +10,10 @@ description: | - Design system documentation and quality validation Primary task executors: - - consolidate.md: Design token consolidation with layout strategy planning - - generate.md: Token-driven prototype generation with research-informed templates + - consolidate.md → @ui-design-agent: Design token consolidation with layout strategy planning + - 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: - Exa MCP: Design trend research, modern UI patterns, component best practices @@ -26,11 +28,15 @@ capabilities: - accessibility_validation - mcp_research_integration - css_token_conversion + - adaptive_responsive_design + - runtime_style_switching quality_gates: a11y: "AA" token_coverage: 0.90 responsive_breakpoints: 3 css_token_usage: 1.00 + style_switchable: true + adaptive_devices: ["mobile", "tablet", "desktop"] providers: research: - exa_mcp @@ -189,11 +195,12 @@ DO NOT invent variable names like --color-background-base, --radius-md, etc. ``` **Template Quality Standards**: -- ✅ 100% CSS variable usage (no hardcoded values) -- ✅ Semantic HTML5 structure (header, nav, main, article) -- ✅ ARIA attributes for accessibility (roles, labels, aria-describedby) -- ✅ Mobile-first responsive design -- ✅ Style-agnostic (reusable across all style variants) +- ✅ **ADAPTIVE**: Multi-device responsive (mobile 375px, tablet 768px, desktop 1024px+) +- ✅ **STYLE-SWITCHABLE**: 100% CSS variable usage (no hardcoded values) +- ✅ **SEMANTIC**: HTML5 structure (header, nav, main, article) +- ✅ **ACCESSIBLE**: ARIA attributes for WCAG AA (roles, labels, aria-describedby) +- ✅ **MOBILE-FIRST**: Progressive enhancement from small to large screens +- ✅ **THEME-AGNOSTIC**: Reusable across all style variants via token swapping #### Phase 2b: Prototype Instantiation ```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") ``` -**Task**: Launch conceptual-planning-agent for template generation +**Task**: Launch ui-design-agent for template generation ```javascript -Task(conceptual-planning-agent): "[UI_LAYOUT_TEMPLATE_GENERATION] ..." +Task(ui-design-agent): "[UI_LAYOUT_TEMPLATE_GENERATION] ..." ``` ### 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 - **Script integration**: Leverage convert_tokens_to_css.sh, ui-instantiate-prototypes.sh - **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**: - **Read/Write**: File operations for tokens, reports, documentation diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index c3189c53..4fce3621 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.claude/commands/workflow/ui-design/explore-auto.md @@ -1,15 +1,16 @@ --- name: explore-auto -description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations for pages OR components (3×3 matrix exploration) -usage: /workflow:ui-design:explore-auto [--prompt ""] [--images ""] [--pages "" | --components ""] [--session ] [--style-variants ] [--layout-variants ] [--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]" +description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations (3×3 matrix exploration) +usage: /workflow:ui-design:explore-auto [--prompt ""] [--images ""] [--targets ""] [--target-type "page|component"] [--session ] [--style-variants ] [--layout-variants ] [--batch-plan] +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: - /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 --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 --components "navbar,hero" --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 "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2 + - /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) --- @@ -17,23 +18,24 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* ## 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**: -- **Page Mode** (default): Generates `style_variants × layout_variants × pages` full-page prototypes -- **Component Mode**: Generates `style_variants × layout_variants × components` isolated component prototypes +**Unified Target System**: Generates `style_variants × layout_variants × targets` prototypes, where targets can be: +- **Pages** (full-page layouts): home, dashboard, settings, etc. +- **Components** (isolated UI elements): navbar, card, hero, form, etc. +- **Mixed**: Can combine both in a single workflow **Autonomous Flow**: 1. User triggers: `/workflow:ui-design:explore-auto [params]` 2. Phase 1 (style-extract) → 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 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. -**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 @@ -46,28 +48,33 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* ## Parameter Requirements **Optional Parameters** (all have smart defaults): -- `--pages ""`: Pages to generate (inferred from prompt/session if omitted) - **Page Mode** -- `--components ""`: Components to generate (inferred from prompt if omitted) - **Component Mode** +- `--targets ""`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted) +- `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection) - `--session `: Workflow session ID (standalone mode if omitted) - `--images ""`: Reference image paths (default: `design-refs/*`) -- `--prompt ""`: Design style and pages/components description +- `--prompt ""`: Design style and target description - `--style-variants `: Style variants (default: inferred from prompt or 3, range: 1-5) - `--layout-variants `: Layout variants per style (default: inferred or 3, range: 1-5) - `--batch-plan`: Auto-generate implementation tasks after design-update -**Input Rules**: -- Must provide at least one: `--images` or `--prompt` -- Both can be combined for guided analysis -- `--pages` and `--components` are **mutually exclusive** -- Default mode: **Page Mode** if neither specified +**Legacy Parameters** (maintained for backward compatibility): +- `--pages ""`: Alias for `--targets` with `--target-type page` +- `--components ""`: Alias for `--targets` with `--target-type component` -**Supported Component Types**: -- **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 +**Input Rules**: +- Must provide at least one: `--images` or `--prompt` or `--targets` +- Multiple parameters can be combined for guided analysis +- If `--targets` not provided, intelligently inferred from prompt/session + +**Supported Target Types**: +- **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: - "Generate **3 style variants**" → `--style-variants 3` @@ -77,11 +84,14 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(* ## Execution Modes -**Matrix Mode** (default and only): -- Generates `style_variants × layout_variants × pages` prototypes +**Matrix Mode** (unified): +- Generates `style_variants × layout_variants × targets` prototypes - **Phase 1**: `style_variants` style options - **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**: - `--session` flag determines session integration or standalone execution @@ -138,261 +148,206 @@ Write({base_path}/.run-metadata.json): { STORE: run_id, base_path ``` -### Phase 0c: Enhanced Page Inference with Dynamic Analysis +### Phase 0c: Unified Target Inference with Intelligent Type Detection ```bash -page_list = [] -page_source = "none" +target_list = [] +target_type = "auto" # auto, page, component +target_source = "none" -# Priority 1: Explicit --pages parameter +# Step 1: Handle legacy parameters (backward compatibility) IF --pages provided: - raw_pages = {--pages value} - # Split by comma/semicolon/Chinese comma, clean and normalize - page_list = split_and_clean(raw_pages, delimiters=[",", ";", "、"]) - page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()] - page_source = "explicit" - REPORT: "📋 Using explicitly provided pages: {', '.join(page_list)}" + target_list = split_and_clean(--pages, delimiters=[",", ";", "、"]) + target_type = "page" + target_source = "explicit_legacy" + REPORT: "📋 Using explicitly provided pages (legacy): {', '.join(target_list)}" +ELSE IF --components provided: + 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: - REPORT: "🔍 Analyzing prompt to identify pages..." + REPORT: "🔍 Analyzing prompt to identify targets..." # Internal Claude analysis 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}" Output JSON: { - "pages": [{"name": "page-name", "purpose": "description", "priority": "high|medium|low"}], - "shared_components": ["header", "footer"], - "navigation_structure": {"primary": ["home"], "secondary": ["settings"]} + "targets": [ + {"name": "normalized-name", "type": "page|component", "purpose": "description", "priority": "high|medium|low"} + ], + "primary_type": "page|component|mixed", + "shared_elements": ["header", "footer"], + "context": "application context description" } Rules: - Normalize to URL-friendly (lowercase, hyphens, no spaces) - - Consolidate synonyms (homepage → home, user-profile → profile) - - Identify hierarchical relationships - - Prioritize by user intent - - Common patterns: home, dashboard, settings, profile, login, signup + - Detect type: page (full layouts like home, dashboard) vs component (UI elements like navbar, card) + - Consolidate synonyms (homepage → home, navigation → navbar) + - Common pages: 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) - page_list = extract_page_names_from_structure(page_structure) - page_source = "prompt_analysis" + target_structure = analyze_prompt_structure(analysis_prompt, prompt_text) + target_list = extract_target_names_from_structure(target_structure) + target_type = target_structure.primary_type OR detect_target_type(target_list) + target_source = "prompt_analysis" - IF page_list: - REPORT: "📋 Identified pages from prompt:" - FOR page IN page_structure.pages: - REPORT: " • {page.name}: {page.purpose} [{page.priority}]" - IF page_structure.shared_components: - REPORT: "🔧 Shared components: {', '.join(shared_components)}" + IF target_list: + REPORT: "🎯 Identified targets from prompt (type: {target_type}):" + FOR target IN target_structure.targets: + icon = "📄" IF target.type == "page" ELSE "🧩" + REPORT: " {icon} {target.name}: {target.purpose} [{target.priority}]" + 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): synthesis = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) - page_list = extract_pages_from_synthesis(synthesis) - page_source = "synthesis" - REPORT: "📋 Extracted from synthesis: {', '.join(page_list)}" + target_list = extract_targets_from_synthesis(synthesis) # Returns pages by default + target_type = "page" + target_source = "synthesis" + REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}" -# Priority 4: Fallback default -IF NOT page_list: - page_list = ["home"] - page_source = "default" - REPORT: "⚠️ No pages identified, using default: 'home'" +# Step 5: Fallback default +IF NOT target_list: + target_list = ["home"] + target_type = "page" + target_source = "default" + REPORT: "⚠️ No targets identified, using default: 'home' (page)" -# Validate page names -validated_pages = [] -invalid_pages = [] -FOR page IN page_list: - cleaned = page.strip().lower().replace(" ", "-") +# Validate and clean target names +validated_targets = [] +invalid_targets = [] +FOR target IN target_list: + cleaned = target.strip().lower().replace(" ", "-") IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"): - validated_pages.append(cleaned) + validated_targets.append(cleaned) ELSE: - invalid_pages.append(page) + invalid_targets.append(target) -IF invalid_pages: - REPORT: "⚠️ Skipped invalid: {', '.join(invalid_pages)}" +IF invalid_targets: + REPORT: "⚠️ Skipped invalid: {', '.join(invalid_targets)}" -IF NOT validated_pages: - validated_pages = ["home"] +IF NOT validated_targets: + validated_targets = ["home"] + target_type = "page" 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 +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: "📌 PAGE LIST CONFIRMATION" +REPORT: "{type_emoji} {type_label} CONFIRMATION" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" -REPORT: "Source: {page_source}" -REPORT: "Pages ({len(validated_pages)}): {', '.join(validated_pages)}" +REPORT: "Type: {target_type}" +REPORT: "Source: {target_source}" +REPORT: "Targets ({len(validated_targets)}): {', '.join(validated_targets)}" REPORT: "" REPORT: "Options:" REPORT: " • 'continue/yes' - proceed" -REPORT: " • 'pages: page1,page2' - replace list" -REPORT: " • 'skip: page-name' - remove pages" -REPORT: " • 'add: page-name' - add pages" +REPORT: " • 'targets: item1,item2' - replace list" +REPORT: " • 'skip: item-name' - remove targets" +REPORT: " • 'add: item-name' - add targets" +REPORT: " • 'type: page|component' - change type" REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" user_input = WAIT_FOR_USER_INPUT() # Process input IF user_input MATCHES r"^(continue|yes|ok|proceed)$": - REPORT: "✅ Proceeding with: {', '.join(validated_pages)}" -ELSE IF user_input MATCHES r"^pages:\s*(.+)$": - new_pages = split_and_clean(extract_after("pages:"), [",", ";"]) - validated_pages = [p.strip().lower().replace(" ", "-") for p in new_pages if p.strip()] - REPORT: "✅ Updated: {', '.join(validated_pages)}" + REPORT: "✅ Proceeding with {len(validated_targets)} {target_type}(s): {', '.join(validated_targets)}" +ELSE IF user_input MATCHES r"^targets:\s*(.+)$": + new_targets = split_and_clean(extract_after("targets:"), [",", ";"]) + validated_targets = [t.strip().lower().replace(" ", "-") for t in new_targets if t.strip()] + REPORT: "✅ Updated: {', '.join(validated_targets)}" ELSE IF user_input MATCHES r"^skip:\s*(.+)$": - to_skip = [p.strip().lower() for p in extract_after("skip:").split(",")] - validated_pages = [p for p in validated_pages if p not in to_skip] - REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_pages)}" + to_skip = [t.strip().lower() for t in extract_after("skip:").split(",")] + validated_targets = [t for t in validated_targets if t not in to_skip] + REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_targets)}" ELSE IF user_input MATCHES r"^add:\s*(.+)$": - to_add = [p.strip().lower().replace(" ", "-") for p in extract_after("add:").split(",") if p.strip()] - validated_pages.extend(to_add) - validated_pages = list(dict.fromkeys(validated_pages)) # Remove duplicates - REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_pages)}" + to_add = [t.strip().lower().replace(" ", "-") for t in extract_after("add:").split(",") if t.strip()] + validated_targets.extend(to_add) + validated_targets = list(dict.fromkeys(validated_targets)) # Remove duplicates + 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: - REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_pages)}" + REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_targets)}" -IF NOT validated_pages: - validated_pages = ["home"] +IF NOT validated_targets: + validated_targets = ["home"] + target_type = "page" -STORE: inferred_page_list = validated_pages -STORE: page_inference_source = page_source -STORE: page_structure_data = page_structure -STORE: exploration_mode = "page" +STORE: inferred_target_list = validated_targets +STORE: target_type = target_type +STORE: target_inference_source = target_source +STORE: target_structure_data = target_structure IF exists(target_structure) ELSE {} ``` -### Phase 0d: Component Inference (Component Mode Only) +**Helper Function: detect_target_type()** ```bash -component_list = [] -component_source = "none" -exploration_mode = "page" # Default +detect_target_type(target_list): + # Common page keywords + page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth", + "landing", "about", "contact", "pricing", "account", "admin"] -# Determine exploration mode -IF --components provided: - exploration_mode = "component" - raw_components = {--components value} - # 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)}" + # Common component keywords + component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form", + "modal", "alert", "toast", "menu", "sidebar", "breadcrumb", "tabs", + "table", "list", "grid", "carousel", "gallery", "search", "filter"] -# Component inference from prompt (if no --pages and no --components) -ELSE IF --prompt provided AND NOT --pages: - REPORT: "🔍 Analyzing prompt to identify components..." + page_matches = 0 + component_matches = 0 - # Internal Claude analysis for components - analysis_prompt = """ - Analyze the UI design request and identify component-level design elements. + FOR target IN target_list: + IF target IN page_keywords: + 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}" - - Output JSON: - { - "components": [ - {"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'" + # Decision logic + IF component_matches > page_matches: + RETURN "component" + ELSE IF page_matches > 0 OR len(target_list) == 0: + RETURN "page" ELSE: - # Interactive confirmation for components - REPORT: "" - 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" + # Ambiguous - default to page + RETURN "page" ``` ### Phase 1: Style Extraction @@ -427,49 +382,51 @@ SlashCommand(command) --- -### Phase 3: Matrix UI Generation (Mode-Aware) +### Phase 3: Matrix UI Generation (Unified) **Command**: ```bash run_base_flag = "--base-path \"{base_path}\"" -IF exploration_mode == "page": - # Page Mode: Generate full pages - pages_string = ",".join(inferred_page_list) - VERIFY: pages_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$" +# Build unified targets string +targets_string = ",".join(inferred_target_list) +VERIFY: targets_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$" - pages_flag = "--pages \"{pages_string}\"" - command = "/workflow:ui-design:generate {run_base_flag} {pages_flag} --style-variants {style_variants} --layout-variants {layout_variants}" +# Prepare command with unified parameters +targets_flag = "--targets \"{targets_string}\"" +type_flag = "--target-type \"{target_type}\"" - total_prototypes = style_variants * layout_variants * len(inferred_page_list) - 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" +command = "/workflow:ui-design:generate {run_base_flag} {targets_flag} {type_flag} --style-variants {style_variants} --layout-variants {layout_variants}" -ELSE IF exploration_mode == "component": - # Component Mode: Generate isolated components - components_string = ",".join(inferred_component_list) - VERIFY: components_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$" +total_prototypes = style_variants * layout_variants * len(inferred_target_list) - components_flag = "--components \"{components_string}\"" - command = "/workflow:ui-design:generate {run_base_flag} {components_flag} --style-variants {style_variants} --layout-variants {layout_variants}" +# Report based on type +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 (Component Mode)" - REPORT: " Components: {components_string}" - REPORT: " Matrix: {style_variants}×{layout_variants}" - REPORT: " Total: {total_prototypes} component prototypes" - REPORT: " Context: Components displayed in minimal page wrapper" +REPORT: "🚀 Phase 3: Matrix UI Generation" +REPORT: " {type_icon} {type_label}: {targets_string}" +REPORT: " Matrix: {style_variants}×{layout_variants}" +REPORT: " Total: {total_prototypes} prototypes" +REPORT: " Context: {context_note}" SlashCommand(command) ``` **Result**: -- **Page Mode**: `{page}-style-{s}-layout-{l}.html` -- **Component Mode**: `{component}-style-{s}-layout-{l}.html` -- Total: `style_variants × layout_variants × (pages|components)` +- File naming: `{target}-style-{s}-layout-{l}.html` +- Total: `style_variants × layout_variants × targets` - 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 @@ -493,8 +450,13 @@ SlashCommand(command) **Execution**: ```bash -FOR page IN inferred_page_list: - SlashCommand("/workflow:plan --agent \"Implement {page} page based on design system\"") +FOR target IN inferred_target_list: + 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 @@ -537,79 +499,95 @@ TodoWrite({todos: [ ```bash /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) -# Pages: home, article, author +# Targets: home, article, author # 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 /workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2 -# Mode: Page -# Executes with session integration +# Auto-detected from session synthesis # Total: 2×2×N prototypes (N from inference) ``` -### Example 3: Component Mode - Navbar Design Comparison +### Example 3: Unified - Navbar Design Comparison ```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 -# Components: navbar, hero +# Explicit type: component +# Targets: navbar, hero # Matrix: 3 styles × 2 layouts # Total: 12 component prototypes (3×2×2) # 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 -/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 -# Components: card, form, button +# Auto-detected type: component (based on keywords) +# Targets: card, form, button # Matrix: 2 styles × 3 layouts # Total: 18 component prototypes (2×3×3) # Context: Each component in minimal wrapper for isolated comparison ``` -### Example 5: Intelligent Parsing + Batch Planning (Page Mode) +### Example 5: Intelligent Parsing + Batch Planning ```bash /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 -# Pages: dashboard, settings +# Targets: dashboard, settings # 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 /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) -# Inferred components: pricing-table, testimonial-card +# Auto-detected type: component (keyword: "components") +# Inferred targets: pricing-table, testimonial-card # Matrix: 3 styles × 2 layouts # 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 -**Page Mode**: +**Unified Template**: ``` -✅ UI Design Explore-Auto Workflow Complete! (Page Mode) +✅ UI Design Explore-Auto Workflow Complete! Run ID: {run_id} 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) 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}×{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 {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 - {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 -📄 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: 📋 Implementation Tasks: .workflow/WFS-{session}/.task/ @@ -631,43 +612,15 @@ Next: /workflow:execute to begin implementation } {ELSE: Next Steps: -1. Open compare.html to preview all page variants -2. Select preferred style×layout combinations per page +1. Open compare.html to preview all variants +2. Select preferred style×layout combinations per target 3. Run /workflow:plan to create implementation tasks +{IF target_type == "component": "4. Integrate selected components into pages"} } ``` -**Component Mode**: -``` -✅ UI Design Explore-Auto Workflow Complete! (Component Mode) - -Run ID: {run_id} -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 -``` +**Dynamic Values**: +- `target_type_icon`: "📄" for page, "🧩" for component, "🎯" for mixed/auto +- `target_type_label`: "Pages" for page, "Components" for component, "Targets" for mixed/auto +- `target_count`: `len(inferred_target_list)` +- All other placeholders are resolved from stored phase data diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index 61bb1854..e5d099e3 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.claude/commands/workflow/ui-design/generate.md @@ -1,26 +1,34 @@ --- name: generate -description: Generate UI prototypes in matrix mode (style × layout combinations) -usage: /workflow:ui-design:generate [--pages ""] [--base-path ] [--session ] [--style-variants ] [--layout-variants ] -argument-hint: "[--pages \"dashboard,auth\"] [--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--style-variants 3] [--layout-variants 3]" +description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components +usage: /workflow:ui-design:generate [--targets ""] [--target-type "page|component"] [--base-path ] [--session ] [--style-variants ] [--layout-variants ] +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: - - /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 --session WFS-auth --pages "home,pricing" --style-variants 2 --layout-variants 2 + - /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 --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 -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) +**Executor**: → @ui-design-agent +**Parallel Generation**: Phase 2a → @ui-design-agent (L×T tasks) + ## 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 -- **Matrix-Only**: Single mode generating `style_variants × layout_variants × pages` prototypes -- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` for parallel generation +- **Unified Generation**: Single mode generating `style_variants × layout_variants × targets` prototypes +- **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 - **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design - **Template-Based**: Decouples HTML structure from CSS styling for optimal performance +- **Adaptive Wrapper**: Full-page structure for pages, minimal wrapper for components ## Execution Protocol @@ -74,38 +82,61 @@ VALIDATE: 1 <= style_variants <= 5 # Note: layout_variants is loaded from layout-strategies.json in Phase 0 -# 3. Enhanced page list parsing -page_list = [] +# 3. Enhanced target list parsing with type detection +target_list = [] +target_type = "page" # Default to page for backward compatibility -# Priority 1: Explicit --pages parameter -IF --pages provided: - raw_pages = {--pages value} +# Priority 1: Unified --targets parameter +IF --targets provided: + raw_targets = {--targets value} # 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 - page_list = [p.strip().lower().replace(" ", "-") for p in page_list if p.strip()] - REPORT: "📋 Using provided pages: {', '.join(page_list)}" + target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()] -# 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: synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md) - page_list = extract_pages_from_synthesis(synthesis_spec) - REPORT: "📋 Extracted pages from synthesis: {', '.join(page_list)}" + target_list = extract_targets_from_synthesis(synthesis_spec) + 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: - page_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"] - REPORT: "📋 Detected/default pages: {', '.join(page_list)}" + target_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"] + target_type = "page" + REPORT: "📋 Detected/default targets: {', '.join(target_list)}" -# 4. Validate page names -validated_pages = [p for p in page_list if regex_match(p, r"^[a-z0-9][a-z0-9_-]*$")] -invalid_pages = [p for p in page_list if p not in validated_pages] +# 4. Validate target names +validated_targets = [t for t in target_list if regex_match(t, r"^[a-z0-9][a-z0-9_-]*$")] +invalid_targets = [t for t in target_list if t not in validated_targets] -IF invalid_pages: - REPORT: "⚠️ Skipped invalid page names: {', '.join(invalid_pages)}" +IF invalid_targets: + REPORT: "⚠️ Skipped invalid target names: {', '.join(invalid_targets)}" -VALIDATE: validated_pages not empty, "No valid pages found" -page_list = validated_pages +VALIDATE: validated_targets not empty, "No valid targets found" +target_list = validated_targets + +# Store for later use +STORE: target_list = target_list +STORE: target_type = target_type # 5. Verify design systems exist 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) +**Parallel Executor**: → @ui-design-agent + Generate style-agnostic layout templates for each `{page} × {layout}` combination. 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/ -# Launch parallel template generation tasks +# Launch parallel template generation tasks → @ui-design-agent FOR layout_id IN range(1, layout_variants + 1): - FOR page IN page_list: - Task(conceptual-planning-agent): " + FOR target IN target_list: + Task(ui-design-agent): " [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 LAYOUT_ID: {layout_id} - PAGE: {page} + TARGET: {target} + TARGET_TYPE: {target_type} BASE_PATH: {base_path} {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 , , + - 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.,
) + - Content: Focus solely on the component design + } + ## Implementation Research (from web, 2024-2025) COMPONENT PATTERNS: @@ -276,22 +331,26 @@ FOR layout_id IN range(1, layout_variants + 1): ## Task Generate TWO files that work together as a reusable template, incorporating insights from the implementation research above: - **File 1**: `{page}-layout-{layout_id}.html` - - Semantic HTML5 structure WITHOUT any style-specific values - - Use placeholder links for stylesheets: + **File 1**: `{target}-layout-{layout_id}.html` + - 🏗️ **SEMANTIC STRUCTURE**: HTML5 structure WITHOUT any style-specific values + - {IF target_type == "page": "Complete HTML document with , , " ELSE: "Minimal wrapper with component container only"} + - 🔗 **DYNAMIC STYLING**: Use placeholder links for runtime style switching: ```html ``` - - Include all semantic elements, ARIA attributes, and responsive structure - - NO inline styles, NO hardcoded colors/fonts/spacing + - ♿ **ACCESSIBILITY**: All semantic elements, ARIA attributes, responsive structure + - 🚫 **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` - - Structural CSS rules using CSS variable references - - ALL values MUST use `var()` functions (e.g., `background-color: var(--color-surface-background);`) - - NO hardcoded values (e.g., #4F46E5, 16px, Arial) - - BEM or semantic class naming - - Mobile-first responsive design using token-based breakpoints + **File 2**: `{target}-layout-{layout_id}.css` + - 🎨 **TOKEN-DRIVEN STYLING**: ALL values use `var()` for dynamic theme switching + - 🔄 **RUNTIME SWITCHABLE**: `background-color: var(--color-surface-background);` + - 🚫 **ZERO LITERALS**: NO hardcoded values (#4F46E5, 16px, Arial) + - 📐 **SEMANTIC NAMING**: BEM or descriptive class naming + - 📱 **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 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 ## HTML Requirements (Apply Modern Best Practices from Research) - - Semantic HTML5 elements (
,