mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
feat: refactor UI design workflow for agent-driven execution and default separate mode
## Core Changes ### 1. Fix Token Application Issues (v4.2.1-fix) - Add convert_tokens_to_css.sh script for design-tokens.json → tokens.css conversion - Auto-generate Google Fonts @import for web fonts - Auto-generate global font application rules (body, headings) - Add Phase 1.8 to generate.md: Token Variable Name Extraction - Update generate.md Phase 2a: Inject exact variable names into agent prompt - Fix CSS variable naming mismatches (20+ variables) ### 2. Refactor consolidate.md - Default to Separate Mode - Remove --keep-separate parameter (now default behavior) - Remove Unified Mode (Phase 4A) entirely - Use ui-design-agent for multi-file generation (Phase 4) - Generate N independent design systems by default - Update documentation and completion messages - Add Task(*) to allowed-tools ### 3. Update explore-auto.md Integration - Remove --keep-separate from Phase 2 consolidate command - Update comments to reflect default separate mode behavior ### 4. Refactor ui-design-agent.md (v2.0 → v3.0) - Remove slash command execution logic - Focus on consolidate.md and generate.md task execution - Remove workflow orchestration content - Add MCP integration strategies (Exa + Code Index) - Integrate v4.2.1-fix changes ## Impact - All workflows now default to separate design systems (matrix-ready) - Agent handles multi-file generation efficiently - Token application issues resolved - Simplified user experience (fewer parameters) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
File diff suppressed because it is too large
Load Diff
@@ -1,36 +1,33 @@
|
||||
---
|
||||
name: consolidate
|
||||
description: Consolidate style variants into unified or separate design systems and plan layout strategies
|
||||
usage: /workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--keep-separate] [--layout-variants <count>]
|
||||
argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--variants 3] [--keep-separate] [--layout-variants 3]"
|
||||
description: Consolidate style variants into independent design systems and plan layout strategies
|
||||
usage: /workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--layout-variants <count>]
|
||||
argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--variants 3] [--layout-variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3 --keep-separate --layout-variants 3
|
||||
- /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3 --layout-variants 3
|
||||
- /workflow:ui-design:consolidate --session WFS-auth --variants 2 --layout-variants 2
|
||||
- /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533" --layout-variants 3
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
|
||||
---
|
||||
|
||||
# Design System Consolidation & Layout Planning Command
|
||||
|
||||
## Overview
|
||||
Consolidate user-selected style variants into unified or separate production-ready design systems AND plan layout strategies for UI generation. This command serves as the **Design Planning Phase**, producing all strategic decisions needed for the subsequent generation phase.
|
||||
Consolidate user-selected style variants into **independent production-ready design systems** AND plan layout strategies for UI generation. This command serves as the **Design Planning Phase**, producing all strategic decisions needed for the subsequent generation phase.
|
||||
|
||||
## Core Philosophy
|
||||
- **Design Planning Hub**: Centralizes both style consolidation and layout strategy planning
|
||||
- **Claude-Native**: 100% Claude-driven consolidation, no external tools
|
||||
- **Token Merging**: Combines `proposed_tokens` from selected variants
|
||||
- **Agent-Driven**: Uses ui-design-agent for multi-file generation efficiency
|
||||
- **Separate Design Systems**: Generates N independent design systems (one per variant)
|
||||
- **Token Refinement**: Refines `proposed_tokens` from each variant into complete systems
|
||||
- **Layout Strategy Definition**: Plans and documents layout variants for generation
|
||||
- **Intelligent Synthesis**: Resolves conflicts, ensures consistency
|
||||
- **Intelligent Synthesis**: Ensures completeness and consistency
|
||||
- **Production-Ready**: Complete design system(s) with documentation
|
||||
- **Dual Mode**: Unified (1 merged system) or Separate (N independent systems)
|
||||
- **Matrix-Ready**: Supports style × layout matrix exploration in generate phase
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### 🔄 Common Phases (All Modes)
|
||||
|
||||
These phases are executed identically regardless of consolidation mode.
|
||||
|
||||
#### Phase 1: Path Resolution & Variant Loading
|
||||
### Phase 1: Path Resolution & Variant Loading
|
||||
|
||||
```bash
|
||||
# Determine base path
|
||||
@@ -51,7 +48,7 @@ style_cards = Read(style_cards_path)
|
||||
total_variants = len(style_cards.style_cards)
|
||||
```
|
||||
|
||||
#### Phase 2: Variant Selection & Mode Determination
|
||||
### Phase 2: Variant Selection
|
||||
|
||||
```bash
|
||||
# Determine how many variants to consolidate
|
||||
@@ -65,16 +62,10 @@ ELSE:
|
||||
selected_variants = style_cards.style_cards[0:variants_count]
|
||||
VERIFY: selected_variants.length > 0
|
||||
|
||||
# Determine consolidation mode
|
||||
IF --keep-separate provided:
|
||||
consolidation_mode = "separate" # Generate N independent design systems
|
||||
REPORT: "Mode: Separate - generating {variants_count} independent design systems"
|
||||
ELSE:
|
||||
consolidation_mode = "unified" # Merge into 1 design system
|
||||
REPORT: "Mode: Unified - merging {variants_count} variants into one design system"
|
||||
REPORT: "📦 Generating {variants_count} independent design systems"
|
||||
```
|
||||
|
||||
#### Phase 2.5: Layout Strategy Planning (Dynamic Generation)
|
||||
### Phase 2.5: Layout Strategy Planning (Dynamic Generation)
|
||||
|
||||
```bash
|
||||
# Determine layout variants count
|
||||
@@ -172,7 +163,7 @@ Write({base_path}/style-consolidation/layout-strategies.json, JSON.stringify(lay
|
||||
REPORT: "✅ Layout strategies defined: {[s.name for s in layout_strategies.strategies]}"
|
||||
```
|
||||
|
||||
#### Phase 3: Load Design Context (Optional)
|
||||
### Phase 3: Load Design Context (Optional)
|
||||
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
@@ -183,24 +174,19 @@ ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
|
||||
design_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
|
||||
```
|
||||
|
||||
---
|
||||
### Phase 4: Design System Synthesis (Agent Execution)
|
||||
|
||||
### 🔀 Mode-Specific Phases
|
||||
```bash
|
||||
REPORT: "🤖 Using agent for separate design system generation..."
|
||||
|
||||
**Execution branches based on `consolidation_mode`:**
|
||||
|
||||
#### Branch A: Unified Mode
|
||||
|
||||
**When**: `consolidation_mode == "unified"` (default)
|
||||
|
||||
**Goal**: Merge all selected variants into a single, cohesive design system.
|
||||
|
||||
**Phase 4A: Unified Design System Synthesis**
|
||||
```
|
||||
Create a unified, production-ready design system by consolidating the following style variants.
|
||||
# Prepare agent task prompt
|
||||
agent_task_prompt = """
|
||||
Generate {variants_count} independent production-ready design systems, one for each style variant.
|
||||
|
||||
SESSION: {session_id}
|
||||
SELECTED VARIANTS: {variant_ids}
|
||||
MODE: Separate design system generation
|
||||
|
||||
VARIANTS TO PROCESS: {variants_count}
|
||||
|
||||
VARIANT DATA:
|
||||
{FOR each variant IN selected_variants:
|
||||
@@ -220,20 +206,20 @@ DESIGN CONTEXT (from brainstorming):
|
||||
{design_context}
|
||||
}
|
||||
|
||||
TASK: Consolidate these {selected_variants.length} style variant(s) into a single, cohesive design system.
|
||||
TASK: For EACH variant, generate a complete, production-ready design system.
|
||||
|
||||
CONSOLIDATION RULES:
|
||||
1. **Merge Token Proposals**: Combine all `proposed_tokens` into one unified system
|
||||
2. **Resolve Conflicts**: When variants disagree, choose the most appropriate value or create a balanced compromise
|
||||
3. **Maintain Completeness**: Ensure all token categories are present (colors, typography, spacing, etc.)
|
||||
REFINEMENT RULES (apply to each variant):
|
||||
1. **Complete Token Coverage**: Ensure all categories are present (colors, typography, spacing, etc.)
|
||||
2. **Fill Gaps**: If any tokens are missing, generate appropriate values based on the variant's philosophy
|
||||
3. **Maintain Style Identity**: Preserve the unique characteristics of this variant
|
||||
4. **Semantic Naming**: Use clear, semantic names (e.g., "brand-primary" not "color-1")
|
||||
5. **Accessibility**: Validate WCAG AA contrast ratios (4.5:1 text, 3:1 UI)
|
||||
6. **OKLCH Format**: All colors must use oklch(L C H / A) format
|
||||
7. **Design Philosophy**: Synthesize a unified philosophy statement from variant descriptions
|
||||
7. **Design Philosophy**: Expand and articulate the variant's design philosophy
|
||||
|
||||
OUTPUT: Generate the following files:
|
||||
OUTPUT STRUCTURE: For each variant {variant_id} (1 to {variants_count}), generate 2 files:
|
||||
|
||||
FILE 1: design-tokens.json
|
||||
FILE 1: style-{variant_id}/design-tokens.json
|
||||
{
|
||||
"colors": {
|
||||
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" },
|
||||
@@ -255,19 +241,14 @@ FILE 1: design-tokens.json
|
||||
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
|
||||
}
|
||||
|
||||
FILE 2: style-guide.md
|
||||
# Design System Style Guide
|
||||
FILE 2: style-{variant_id}/style-guide.md
|
||||
# Design System Style Guide - {variant.name}
|
||||
|
||||
## Design Philosophy
|
||||
{Synthesized philosophy from all variants}
|
||||
{Expanded variant philosophy}
|
||||
|
||||
## Color System
|
||||
### Brand Colors
|
||||
- **Primary**: {value} - {usage description}
|
||||
- **Secondary**: {value} - {usage description}
|
||||
- **Accent**: {value} - {usage description}
|
||||
|
||||
### Surface Colors, Semantic Colors, Text Colors, Border Colors
|
||||
### Brand Colors, Surface Colors, Semantic Colors, Text Colors, Border Colors
|
||||
{List all with usage and accessibility notes}
|
||||
|
||||
## Typography
|
||||
@@ -282,128 +263,61 @@ FILE 2: style-guide.md
|
||||
- UI components meet WCAG AA (3:1 minimum)
|
||||
- Focus indicators are clearly visible
|
||||
|
||||
FILE 3: consolidation-report.json
|
||||
{
|
||||
"session_id": "{session_id}",
|
||||
"consolidation_mode": "unified",
|
||||
"timestamp": "{ISO timestamp}",
|
||||
"style_systems": {
|
||||
"consolidated_variants": {variant_ids},
|
||||
"variant_count": {selected_variants.length},
|
||||
"validation_results": {
|
||||
"colors": { "total": {count}, "wcag_aa_compliant": {count}, "warnings": [{issues}] },
|
||||
"typography": { "font_families": {count}, "scale_sizes": {count} },
|
||||
"spacing": { "scale_values": {count} },
|
||||
"accessibility": { "status": "pass|warnings", "issues": [{list}] },
|
||||
"completeness": {
|
||||
"required_categories": ["colors", "typography", "spacing", "border_radius", "shadows", "breakpoints"],
|
||||
"present_categories": [{list}],
|
||||
"missing_categories": [{list if any}]
|
||||
}
|
||||
}
|
||||
},
|
||||
"layout_strategies": {
|
||||
"count": {layout_variants},
|
||||
"strategies": {READ from layout-strategies.json}
|
||||
}
|
||||
}
|
||||
|
||||
RESPONSE FORMAT:
|
||||
Provide each file's content in clearly labeled sections:
|
||||
For each variant, provide clearly labeled sections:
|
||||
|
||||
===== design-tokens.json =====
|
||||
===== style-1/design-tokens.json =====
|
||||
{JSON content}
|
||||
|
||||
===== style-guide.md =====
|
||||
===== style-1/style-guide.md =====
|
||||
{Markdown content}
|
||||
|
||||
===== consolidation-report.json =====
|
||||
{JSON content}
|
||||
```
|
||||
|
||||
**Phase 5A: Unified Output**
|
||||
|
||||
```bash
|
||||
# Parse Claude's response
|
||||
CREATE: {base_path}/style-consolidation/
|
||||
parsed_output = parse_claude_response(claude_response)
|
||||
|
||||
Write({base_path}/style-consolidation/design-tokens.json, parsed_output.design_tokens)
|
||||
Write({base_path}/style-consolidation/style-guide.md, parsed_output.style_guide)
|
||||
Write({base_path}/style-consolidation/consolidation-report.json, parsed_output.consolidation_report)
|
||||
```
|
||||
|
||||
**Output Structure**:
|
||||
```
|
||||
{base_path}/style-consolidation/
|
||||
├── design-tokens.json # Merged token definitions
|
||||
├── style-guide.md # Comprehensive design documentation
|
||||
├── layout-strategies.json # Layout variant definitions
|
||||
└── consolidation-report.json # Unified validation & planning report
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Branch B: Separate Mode
|
||||
|
||||
**When**: `consolidation_mode == "separate"` (--keep-separate flag)
|
||||
|
||||
**Goal**: Generate N independent design systems, each refining one style variant.
|
||||
|
||||
**Phase 4B: Separate Design System Synthesis**
|
||||
|
||||
For each variant, use this synthesis prompt:
|
||||
```
|
||||
Create a production-ready design system for the following style variant.
|
||||
|
||||
SESSION: {session_id}
|
||||
VARIANT: {variant.id}
|
||||
|
||||
VARIANT DATA:
|
||||
Name: {variant.name}
|
||||
Description: {variant.description}
|
||||
Design Philosophy: {variant.design_philosophy}
|
||||
|
||||
Proposed Tokens:
|
||||
{JSON.stringify(variant.proposed_tokens, null, 2)}
|
||||
|
||||
{IF design_context:
|
||||
DESIGN CONTEXT (from brainstorming):
|
||||
{design_context}
|
||||
}
|
||||
|
||||
TASK: Refine this style variant into a complete, production-ready design system.
|
||||
|
||||
REFINEMENT RULES:
|
||||
1. **Complete Token Coverage**: Ensure all categories are present (colors, typography, spacing, etc.)
|
||||
2. **Fill Gaps**: If any tokens are missing, generate appropriate values based on the variant's philosophy
|
||||
3. **Maintain Style Identity**: Preserve the unique characteristics of this variant
|
||||
4. **Semantic Naming**: Use clear, semantic names (e.g., "brand-primary" not "color-1")
|
||||
5. **Accessibility**: Validate WCAG AA contrast ratios (4.5:1 text, 3:1 UI)
|
||||
6. **OKLCH Format**: All colors must use oklch(L C H / A) format
|
||||
7. **Design Philosophy**: Expand and articulate the variant's design philosophy
|
||||
|
||||
OUTPUT: Generate 2 files (design-tokens.json, style-guide.md) - validation will be aggregated later
|
||||
|
||||
RESPONSE FORMAT:
|
||||
Provide each file's content in clearly labeled sections:
|
||||
|
||||
===== design-tokens.json =====
|
||||
===== style-2/design-tokens.json =====
|
||||
{JSON content}
|
||||
|
||||
===== style-guide.md =====
|
||||
===== style-2/style-guide.md =====
|
||||
{Markdown content}
|
||||
|
||||
... (repeat for all {variants_count} variants)
|
||||
|
||||
IMPORTANT:
|
||||
- Generate files for ALL {variants_count} variants
|
||||
- Use sequential IDs: style-1, style-2, ..., style-{variants_count}
|
||||
- Each variant must be complete and independent
|
||||
- Maintain consistent structure across all variants
|
||||
"""
|
||||
|
||||
# Execute agent task
|
||||
Task(
|
||||
subagent_type="ui-design-agent",
|
||||
description="Generate {variants_count} separate design systems",
|
||||
prompt=agent_task_prompt
|
||||
)
|
||||
|
||||
REPORT: "✅ Agent task dispatched for {variants_count} design systems"
|
||||
```
|
||||
|
||||
**Phase 5B: Separate Output**
|
||||
### Phase 5: Process Agent Results and Generate Report
|
||||
```bash
|
||||
# Parse each variant's response
|
||||
REPORT: "📝 Processing agent output for {variants_count} design systems..."
|
||||
|
||||
# Parse agent's response - agent returns all files in labeled sections
|
||||
agent_output = get_agent_response()
|
||||
|
||||
# Extract and write files for each variant
|
||||
FOR variant_id IN range(1, variants_count + 1):
|
||||
CREATE: {base_path}/style-consolidation/style-{variant_id}/
|
||||
parsed_output = parse_claude_response(claude_responses[variant_id - 1])
|
||||
|
||||
Write({base_path}/style-consolidation/style-{variant_id}/design-tokens.json, parsed_output.design_tokens)
|
||||
Write({base_path}/style-consolidation/style-{variant_id}/style-guide.md, parsed_output.style_guide)
|
||||
# Extract design tokens
|
||||
design_tokens_section = extract_section(agent_output, f"===== style-{variant_id}/design-tokens.json =====")
|
||||
design_tokens = parse_json(design_tokens_section)
|
||||
Write({base_path}/style-consolidation/style-{variant_id}/design-tokens.json, JSON.stringify(design_tokens, null, 2))
|
||||
|
||||
# Extract style guide
|
||||
style_guide_section = extract_section(agent_output, f"===== style-{variant_id}/style-guide.md =====")
|
||||
Write({base_path}/style-consolidation/style-{variant_id}/style-guide.md, style_guide_section)
|
||||
|
||||
REPORT: " ✅ style-{variant_id}/ written"
|
||||
|
||||
# Generate unified consolidation report for all variants
|
||||
consolidation_report = {
|
||||
@@ -443,22 +357,18 @@ Write({base_path}/style-consolidation/consolidation-report.json, JSON.stringify(
|
||||
└── consolidation-report.json # Unified validation for all styles + layout plan
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🎯 Common Completion Phase
|
||||
|
||||
**Phase 6: Completion & Reporting** (executed after mode-specific phases)
|
||||
### Phase 6: Completion & Reporting
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
|
||||
{content: "Select variants and determine mode", status: "completed", activeForm: "Selecting variants"},
|
||||
{content: "Select variants for consolidation", status: "completed", activeForm: "Selecting variants"},
|
||||
{content: "Plan layout strategies", status: "completed", activeForm: "Planning layout strategies"},
|
||||
{content: "Load design context from brainstorming", status: "completed", activeForm: "Loading context"},
|
||||
{content: "Synthesize design system(s) with Claude", status: "completed", activeForm: "Synthesizing design system"},
|
||||
{content: "Write consolidated design system files", status: "completed", activeForm: "Writing output files"},
|
||||
{content: "Generate unified consolidation report", status: "completed", activeForm: "Generating report"}
|
||||
{content: "Generate design systems via agent", status: "completed", activeForm: "Generating design systems"},
|
||||
{content: "Process agent results and write files", status: "completed", activeForm: "Writing output files"},
|
||||
{content: "Generate consolidation report", status: "completed", activeForm: "Generating report"}
|
||||
]
|
||||
});
|
||||
```
|
||||
@@ -467,42 +377,23 @@ TodoWrite({
|
||||
```
|
||||
✅ Design consolidation & layout planning complete for session: {session_id}
|
||||
|
||||
Mode: {consolidation_mode}
|
||||
Consolidated {selected_variants.length} style variant(s):
|
||||
Generated {variants_count} independent design systems:
|
||||
{FOR each variant: - {variant.name} ({variant.id})}
|
||||
|
||||
Layout Strategies Planned: {layout_variants}
|
||||
{FOR each strategy: - Layout {strategy.id}: {strategy.name}}
|
||||
|
||||
{IF unified mode:
|
||||
Validation Summary:
|
||||
- Colors: {total_colors} (WCAG AA: {compliant_count}/{total_colors})
|
||||
- Typography: {scale_count} sizes
|
||||
- Spacing: {scale_count} values
|
||||
- Accessibility: {status}
|
||||
|
||||
📂 Output: {base_path}/style-consolidation/
|
||||
├── design-tokens.json
|
||||
├── style-guide.md
|
||||
├── layout-strategies.json [NEW]
|
||||
└── consolidation-report.json [NEW - replaces validation-report.json]
|
||||
}
|
||||
|
||||
{IF separate mode:
|
||||
Generated {variants_count} independent design systems:
|
||||
|
||||
📂 Output: {base_path}/style-consolidation/
|
||||
├── style-1/ (design-tokens.json, style-guide.md)
|
||||
├── style-2/ (same structure)
|
||||
├── style-{variants_count}/ (same structure)
|
||||
├── layout-strategies.json [NEW]
|
||||
└── consolidation-report.json [NEW - unified report for all variants]
|
||||
}
|
||||
├── layout-strategies.json
|
||||
└── consolidation-report.json
|
||||
|
||||
Next: /workflow:ui-design:generate --session {session_id} {IF separate: --style-variants {variants_count} --layout-variants {layout_variants}} --pages "dashboard,auth"
|
||||
Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --layout-variants {layout_variants} --pages "dashboard,auth"
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, UI generation is triggered automatically.
|
||||
The generate command will now read layout strategies from layout-strategies.json.
|
||||
The generate command will read layout strategies from layout-strategies.json.
|
||||
```
|
||||
|
||||
## design-tokens.json Format
|
||||
@@ -622,13 +513,15 @@ Complete token structure with OKLCH colors and semantic naming:
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **Zero External Dependencies for Style Consolidation**
|
||||
- No `gemini-wrapper`, no `codex` for style synthesis - pure Claude
|
||||
- Single-pass comprehensive prompt generates all outputs
|
||||
1. **Agent-Driven Architecture**
|
||||
- Uses ui-design-agent for multi-file generation efficiency
|
||||
- Parallel generation of N independent design systems
|
||||
- Structured output parsing with labeled sections
|
||||
|
||||
2. **Dual Consolidation Modes**
|
||||
- Unified: Merge N variants → 1 design system (default)
|
||||
- Separate: Refine N variants → N independent systems (--keep-separate)
|
||||
2. **Separate Design Systems (Matrix-Ready)**
|
||||
- Generates N independent design systems (one per variant)
|
||||
- Each variant maintains unique style identity
|
||||
- Enables style × layout matrix exploration in generate phase
|
||||
|
||||
3. **Dynamic Layout Strategy Generation** 🆕
|
||||
- Uses Exa MCP to research current UI/UX layout trends (2024-2025)
|
||||
@@ -636,15 +529,16 @@ Complete token structure with OKLCH colors and semantic naming:
|
||||
- Adapts to project type (dashboard, marketing, SaaS, etc.)
|
||||
- Balances innovation with usability
|
||||
|
||||
4. **Direct Token Merging**
|
||||
4. **Token Refinement**
|
||||
- Reads `proposed_tokens` from style cards directly
|
||||
- Intelligent conflict resolution with clear rules
|
||||
- Agent refines each variant into complete design system
|
||||
- Fills gaps while maintaining style identity
|
||||
|
||||
5. **Complete Design System Output**
|
||||
- design-tokens.json (CSS tokens)
|
||||
- style-guide.md (documentation)
|
||||
- design-tokens.json (CSS tokens per variant)
|
||||
- style-guide.md (documentation per variant)
|
||||
- layout-strategies.json (dynamic layout plans)
|
||||
- consolidation-report.json (quality audit & planning)
|
||||
- consolidation-report.json (unified validation & planning)
|
||||
|
||||
6. **Production-Ready Quality**
|
||||
- WCAG AA accessibility validation
|
||||
@@ -653,8 +547,8 @@ Complete token structure with OKLCH colors and semantic naming:
|
||||
- Complete token coverage
|
||||
|
||||
7. **Streamlined Workflow**
|
||||
- Common phases (setup, context, completion) shared across modes
|
||||
- Mode-specific synthesis clearly separated
|
||||
- Sequential phases with clear responsibilities
|
||||
- Agent handles complex multi-file generation
|
||||
- Reproducible with deterministic structure
|
||||
- Context-aware (integrates brainstorming artifacts)
|
||||
|
||||
@@ -662,13 +556,12 @@ Complete token structure with OKLCH colors and semantic naming:
|
||||
|
||||
- **Input**:
|
||||
- `style-cards.json` from `/workflow:ui-design:extract` (with `proposed_tokens`)
|
||||
- `--variants` parameter (default: all variants)
|
||||
- `--layout-variants` parameter (default: 3)
|
||||
- **Output**:
|
||||
- Style Systems:
|
||||
- Unified: `style-consolidation/design-tokens.json` for `/workflow:ui-design:generate`
|
||||
- Separate: `style-consolidation/style-{n}/design-tokens.json` for matrix mode generation
|
||||
- Style Systems: `style-consolidation/style-{n}/design-tokens.json` for matrix mode generation
|
||||
- Layout Planning: `layout-strategies.json` consumed by `/workflow:ui-design:generate`
|
||||
- Unified Reporting: `consolidation-report.json` for audit and validation
|
||||
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md`
|
||||
- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
|
||||
- **Next Command**: `/workflow:ui-design:generate` reads both design tokens and layout strategies
|
||||
- **Next Command**: `/workflow:ui-design:generate --style-variants N --layout-variants M` reads design tokens and layout strategies
|
||||
|
||||
@@ -409,14 +409,14 @@ SlashCommand(command)
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Style Consolidation with Separation
|
||||
### Phase 2: Style Consolidation (Separate Design Systems)
|
||||
**Command**:
|
||||
```bash
|
||||
run_base_flag = "--base-path \"{base_path}\""
|
||||
|
||||
# Use count-based parameter with --keep-separate for matrix mode
|
||||
# Consolidate generates independent design systems by default
|
||||
# IMPORTANT: Pass --layout-variants to ensure correct number of layout strategies are generated
|
||||
command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --layout-variants {layout_variants} --keep-separate"
|
||||
command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --layout-variants {layout_variants}"
|
||||
SlashCommand(command)
|
||||
```
|
||||
**Result**: Generates `style_variants` independent design systems:
|
||||
|
||||
@@ -165,6 +165,66 @@ REPORT: " - Semantic HTML structures"
|
||||
REPORT: " - CSS architecture patterns"
|
||||
```
|
||||
|
||||
### Phase 1.8: Token Variable Name Extraction
|
||||
|
||||
```bash
|
||||
# Load design-tokens.json from style-1 to extract exact variable names
|
||||
# This ensures template generation uses correct token names
|
||||
REPORT: "📋 Extracting design token variable names..."
|
||||
|
||||
tokens_json_path = "{base_path}/style-consolidation/style-1/design-tokens.json"
|
||||
VERIFY: exists(tokens_json_path), "Design tokens not found. Run /workflow:ui-design:consolidate first."
|
||||
|
||||
design_tokens = Read(tokens_json_path)
|
||||
|
||||
# Extract all available token categories and variable names
|
||||
token_reference = {
|
||||
"colors": {
|
||||
"brand": list(design_tokens.colors.brand.keys()), # e.g., ["primary", "secondary", "accent"]
|
||||
"surface": list(design_tokens.colors.surface.keys()), # e.g., ["background", "elevated", "overlay"]
|
||||
"semantic": list(design_tokens.colors.semantic.keys()), # e.g., ["success", "warning", "error", "info"]
|
||||
"text": list(design_tokens.colors.text.keys()), # e.g., ["primary", "secondary", "tertiary", "inverse"]
|
||||
"border": list(design_tokens.colors.border.keys()) # e.g., ["default", "strong", "subtle"]
|
||||
},
|
||||
"typography": {
|
||||
"font_family": list(design_tokens.typography.font_family.keys()), # e.g., ["heading", "body", "mono"]
|
||||
"font_size": list(design_tokens.typography.font_size.keys()), # e.g., ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl"]
|
||||
"font_weight": list(design_tokens.typography.font_weight.keys()), # e.g., ["normal", "medium", "semibold", "bold"]
|
||||
"line_height": list(design_tokens.typography.line_height.keys()), # e.g., ["tight", "normal", "relaxed"]
|
||||
"letter_spacing": list(design_tokens.typography.letter_spacing.keys()) # e.g., ["tight", "normal", "wide"]
|
||||
},
|
||||
"spacing": list(design_tokens.spacing.keys()), # e.g., ["0", "1", "2", ..., "24"]
|
||||
"border_radius": list(design_tokens.border_radius.keys()), # e.g., ["none", "sm", "md", "lg", "xl", "full"]
|
||||
"shadows": list(design_tokens.shadows.keys()), # e.g., ["sm", "md", "lg", "xl"]
|
||||
"breakpoints": list(design_tokens.breakpoints.keys()) # e.g., ["sm", "md", "lg", "xl", "2xl"]
|
||||
}
|
||||
|
||||
# Generate complete variable name lists for Agent prompt
|
||||
color_vars = []
|
||||
FOR category IN ["brand", "surface", "semantic", "text", "border"]:
|
||||
FOR key IN token_reference.colors[category]:
|
||||
color_vars.append(f"--color-{category}-{key}")
|
||||
|
||||
typography_vars = []
|
||||
FOR category IN ["font_family", "font_size", "font_weight", "line_height", "letter_spacing"]:
|
||||
prefix = "--" + category.replace("_", "-")
|
||||
FOR key IN token_reference.typography[category]:
|
||||
typography_vars.append(f"{prefix}-{key}")
|
||||
|
||||
spacing_vars = [f"--spacing-{key}" for key in token_reference.spacing]
|
||||
radius_vars = [f"--border-radius-{key}" for key in token_reference.border_radius]
|
||||
shadow_vars = [f"--shadow-{key}" for key in token_reference.shadows]
|
||||
breakpoint_vars = [f"--breakpoint-{key}" for key in token_reference.breakpoints]
|
||||
|
||||
all_token_vars = color_vars + typography_vars + spacing_vars + radius_vars + shadow_vars + breakpoint_vars
|
||||
|
||||
REPORT: f"✅ Extracted {len(all_token_vars)} design token variables from design-tokens.json"
|
||||
REPORT: f" - Color variables: {len(color_vars)}"
|
||||
REPORT: f" - Typography variables: {len(typography_vars)}"
|
||||
REPORT: f" - Spacing variables: {len(spacing_vars)}"
|
||||
REPORT: f" - Other variables: {len(radius_vars) + len(shadow_vars) + len(breakpoint_vars)}"
|
||||
```
|
||||
|
||||
### Phase 2: Optimized Matrix UI Generation
|
||||
|
||||
**Strategy**: Two-layer generation reduces complexity from `O(S×L×P)` to `O(L×P)`, achieving **`S` times faster** performance.
|
||||
@@ -242,11 +302,49 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
|
||||
Apply this strategy CONSISTENTLY to all styles.
|
||||
|
||||
## Token Usage Requirements (STRICT)
|
||||
- All colors: var(--color-brand-primary), var(--color-surface-background), etc.
|
||||
- All spacing: var(--spacing-4), var(--spacing-6), etc.
|
||||
- All typography: var(--font-family-heading), var(--font-size-lg), etc.
|
||||
- NO hardcoded values allowed
|
||||
## Token Usage Requirements (STRICT - USE EXACT NAMES)
|
||||
|
||||
**CRITICAL**: You MUST use ONLY the variable names listed below. These are extracted from design-tokens.json.
|
||||
DO NOT invent variable names like --color-background-base, --radius-md, --transition-base, etc.
|
||||
|
||||
**Available Color Variables** ({len(color_vars)} total):
|
||||
{', '.join(color_vars[:10])}... ({len(color_vars) - 10} more)
|
||||
|
||||
**Key Color Variables**:
|
||||
- Brand: --color-brand-primary, --color-brand-secondary, --color-brand-accent
|
||||
- Surface: --color-surface-background, --color-surface-elevated, --color-surface-overlay
|
||||
- Text: --color-text-primary, --color-text-secondary, --color-text-tertiary, --color-text-inverse
|
||||
- Border: --color-border-default, --color-border-strong, --color-border-subtle
|
||||
- Semantic: --color-semantic-success, --color-semantic-warning, --color-semantic-error, --color-semantic-info
|
||||
|
||||
**Available Typography Variables** ({len(typography_vars)} total):
|
||||
{', '.join(typography_vars[:10])}... ({len(typography_vars) - 10} more)
|
||||
|
||||
**Key Typography Variables**:
|
||||
- Families: --font-family-heading, --font-family-body, --font-family-mono
|
||||
- Sizes: --font-size-xs, --font-size-sm, --font-size-base, --font-size-lg, --font-size-xl, --font-size-2xl, --font-size-3xl, --font-size-4xl
|
||||
- Weights: --font-weight-normal, --font-weight-medium, --font-weight-semibold, --font-weight-bold
|
||||
- Line heights: --line-height-tight, --line-height-normal, --line-height-relaxed
|
||||
- Letter spacing: --letter-spacing-tight, --letter-spacing-normal, --letter-spacing-wide
|
||||
|
||||
**Available Spacing Variables** ({len(spacing_vars)} total):
|
||||
{', '.join(spacing_vars)}
|
||||
|
||||
**Available Border Radius Variables** ({len(radius_vars)} total):
|
||||
{', '.join(radius_vars)}
|
||||
|
||||
**Available Shadow Variables** ({len(shadow_vars)} total):
|
||||
{', '.join(shadow_vars)}
|
||||
|
||||
**Available Breakpoint Variables** ({len(breakpoint_vars)} total):
|
||||
{', '.join(breakpoint_vars)}
|
||||
|
||||
**STRICT RULES**:
|
||||
1. Use ONLY the variables listed above - NO custom variable names
|
||||
2. If you need a value not in the list, use the closest semantic match
|
||||
3. For missing tokens (like transitions), use literal CSS values: `transition: all 0.2s ease;`
|
||||
4. NO hardcoded colors, fonts, or spacing (e.g., #4F46E5, 16px, Arial)
|
||||
5. All `var()` references must match exact variable names above
|
||||
|
||||
## HTML Requirements (Apply Modern Best Practices from Research)
|
||||
- Semantic HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
||||
@@ -292,11 +390,39 @@ REPORT: "🚀 Phase 2b: Instantiating prototypes from templates..."
|
||||
|
||||
# Step 1: Convert design tokens to CSS for each style
|
||||
REPORT: " Converting design tokens to CSS variables..."
|
||||
|
||||
# Check for jq dependency (required by convert_tokens_to_css.sh)
|
||||
IF NOT command_exists("jq"):
|
||||
ERROR: "jq is not installed or not in PATH. The conversion script requires jq."
|
||||
REPORT: "Please install jq:"
|
||||
REPORT: " - macOS: brew install jq"
|
||||
REPORT: " - Linux: apt-get install jq or yum install jq"
|
||||
REPORT: " - Windows: Download from https://stedolan.github.io/jq/download/"
|
||||
EXIT 1
|
||||
|
||||
# Convert design tokens to CSS for each style variant
|
||||
FOR style_id IN range(1, style_variants + 1):
|
||||
tokens_json = Read({base_path}/style-consolidation/style-{style_id}/design-tokens.json)
|
||||
tokens_css = convert_json_to_css_variables(tokens_json)
|
||||
Write({base_path}/style-consolidation/style-{style_id}/tokens.css, tokens_css)
|
||||
REPORT: " ✓ Generated tokens.css for style-{style_id}"
|
||||
tokens_json_path = "{base_path}/style-consolidation/style-${style_id}/design-tokens.json"
|
||||
tokens_css_path = "{base_path}/style-consolidation/style-${style_id}/tokens.css"
|
||||
script_path = "~/.claude/scripts/convert_tokens_to_css.sh"
|
||||
|
||||
# Verify input file exists
|
||||
IF NOT exists(tokens_json_path):
|
||||
REPORT: " ✗ ERROR: Input file not found for style-${style_id}: ${tokens_json_path}"
|
||||
CONTINUE # Skip this iteration, continue with next style
|
||||
|
||||
# Execute conversion: cat input.json | script.sh > output.css
|
||||
Bash(cat "${tokens_json_path}" | "${script_path}" > "${tokens_css_path}")
|
||||
|
||||
# Verify output was generated
|
||||
IF exit_code == 0 AND exists(tokens_css_path):
|
||||
REPORT: " ✓ Generated tokens.css for style-${style_id}"
|
||||
ELSE:
|
||||
REPORT: " ✗ ERROR: Failed to generate tokens.css for style-${style_id}"
|
||||
IF exit_code != 0:
|
||||
REPORT: " Script exit code: ${exit_code}"
|
||||
IF NOT exists(tokens_css_path):
|
||||
REPORT: " Output file not created at: ${tokens_css_path}"
|
||||
|
||||
# Step 2: Use ui-instantiate-prototypes.sh script for instantiation
|
||||
# The script handles:
|
||||
|
||||
225
.claude/scripts/convert_tokens_to_css.sh
Normal file
225
.claude/scripts/convert_tokens_to_css.sh
Normal file
@@ -0,0 +1,225 @@
|
||||
#!/bin/bash
|
||||
# Convert design-tokens.json to tokens.css with Google Fonts import and global font rules
|
||||
# Usage: cat design-tokens.json | ./convert_tokens_to_css.sh > tokens.css
|
||||
# Or: ./convert_tokens_to_css.sh < design-tokens.json > tokens.css
|
||||
|
||||
# Read JSON from stdin
|
||||
json_input=$(cat)
|
||||
|
||||
# Extract metadata for header comment
|
||||
style_name=$(echo "$json_input" | jq -r '.meta.name // "Unknown Style"' 2>/dev/null || echo "Design Tokens")
|
||||
|
||||
# Generate header
|
||||
cat <<EOF
|
||||
/* ========================================
|
||||
Design Tokens: ${style_name}
|
||||
Auto-generated from design-tokens.json
|
||||
======================================== */
|
||||
|
||||
EOF
|
||||
|
||||
# ========================================
|
||||
# Google Fonts Import Generation
|
||||
# ========================================
|
||||
# Extract font families and generate Google Fonts import URL
|
||||
fonts=$(echo "$json_input" | jq -r '
|
||||
.typography.font_family | to_entries[] | .value
|
||||
' 2>/dev/null | sed "s/'//g" | cut -d',' -f1 | sort -u)
|
||||
|
||||
# Build Google Fonts URL
|
||||
google_fonts_url="https://fonts.googleapis.com/css2?"
|
||||
font_params=""
|
||||
|
||||
while IFS= read -r font; do
|
||||
# Skip system fonts and empty lines
|
||||
if [[ -z "$font" ]] || [[ "$font" =~ ^(system-ui|sans-serif|serif|monospace|cursive|fantasy)$ ]]; then
|
||||
continue
|
||||
fi
|
||||
|
||||
# Special handling for common web fonts with weights
|
||||
case "$font" in
|
||||
"Comic Neue")
|
||||
font_params+="family=Comic+Neue:wght@300;400;700&"
|
||||
;;
|
||||
"Patrick Hand"|"Caveat"|"Dancing Script"|"Architects Daughter"|"Indie Flower"|"Shadows Into Light"|"Permanent Marker")
|
||||
# URL-encode font name and add common weights
|
||||
encoded_font=$(echo "$font" | sed 's/ /+/g')
|
||||
font_params+="family=${encoded_font}:wght@400;700&"
|
||||
;;
|
||||
"Segoe Print"|"Bradley Hand"|"Chilanka")
|
||||
# These are system fonts, skip
|
||||
;;
|
||||
*)
|
||||
# Generic font: add with default weights
|
||||
encoded_font=$(echo "$font" | sed 's/ /+/g')
|
||||
font_params+="family=${encoded_font}:wght@400;500;600;700&"
|
||||
;;
|
||||
esac
|
||||
done <<< "$fonts"
|
||||
|
||||
# Generate @import if we have fonts
|
||||
if [[ -n "$font_params" ]]; then
|
||||
# Remove trailing &
|
||||
font_params="${font_params%&}"
|
||||
echo "/* Import Web Fonts */"
|
||||
echo "@import url('${google_fonts_url}${font_params}&display=swap');"
|
||||
echo ""
|
||||
fi
|
||||
|
||||
# ========================================
|
||||
# CSS Custom Properties Generation
|
||||
# ========================================
|
||||
echo ":root {"
|
||||
|
||||
# Colors - Brand
|
||||
echo " /* Colors - Brand */"
|
||||
echo "$json_input" | jq -r '
|
||||
.colors.brand | to_entries[] |
|
||||
" --color-brand-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Colors - Surface
|
||||
echo " /* Colors - Surface */"
|
||||
echo "$json_input" | jq -r '
|
||||
.colors.surface | to_entries[] |
|
||||
" --color-surface-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Colors - Semantic
|
||||
echo " /* Colors - Semantic */"
|
||||
echo "$json_input" | jq -r '
|
||||
.colors.semantic | to_entries[] |
|
||||
" --color-semantic-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Colors - Text
|
||||
echo " /* Colors - Text */"
|
||||
echo "$json_input" | jq -r '
|
||||
.colors.text | to_entries[] |
|
||||
" --color-text-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Colors - Border
|
||||
echo " /* Colors - Border */"
|
||||
echo "$json_input" | jq -r '
|
||||
.colors.border | to_entries[] |
|
||||
" --color-border-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Typography - Font Family
|
||||
echo " /* Typography - Font Family */"
|
||||
echo "$json_input" | jq -r '
|
||||
.typography.font_family | to_entries[] |
|
||||
" --font-family-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Typography - Font Size
|
||||
echo " /* Typography - Font Size */"
|
||||
echo "$json_input" | jq -r '
|
||||
.typography.font_size | to_entries[] |
|
||||
" --font-size-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Typography - Font Weight
|
||||
echo " /* Typography - Font Weight */"
|
||||
echo "$json_input" | jq -r '
|
||||
.typography.font_weight | to_entries[] |
|
||||
" --font-weight-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Typography - Line Height
|
||||
echo " /* Typography - Line Height */"
|
||||
echo "$json_input" | jq -r '
|
||||
.typography.line_height | to_entries[] |
|
||||
" --line-height-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Typography - Letter Spacing
|
||||
echo " /* Typography - Letter Spacing */"
|
||||
echo "$json_input" | jq -r '
|
||||
.typography.letter_spacing | to_entries[] |
|
||||
" --letter-spacing-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Spacing
|
||||
echo " /* Spacing */"
|
||||
echo "$json_input" | jq -r '
|
||||
.spacing | to_entries[] |
|
||||
" --spacing-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Border Radius
|
||||
echo " /* Border Radius */"
|
||||
echo "$json_input" | jq -r '
|
||||
.border_radius | to_entries[] |
|
||||
" --border-radius-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Shadows
|
||||
echo " /* Shadows */"
|
||||
echo "$json_input" | jq -r '
|
||||
.shadows | to_entries[] |
|
||||
" --shadow-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo ""
|
||||
|
||||
# Breakpoints
|
||||
echo " /* Breakpoints */"
|
||||
echo "$json_input" | jq -r '
|
||||
.breakpoints | to_entries[] |
|
||||
" --breakpoint-\(.key): \(.value);"
|
||||
' 2>/dev/null
|
||||
|
||||
echo "}"
|
||||
echo ""
|
||||
|
||||
# ========================================
|
||||
# Global Font Application
|
||||
# ========================================
|
||||
echo "/* ========================================"
|
||||
echo " Global Font Application"
|
||||
echo " ======================================== */"
|
||||
echo ""
|
||||
echo "body {"
|
||||
echo " font-family: var(--font-family-body);"
|
||||
echo " font-size: var(--font-size-base);"
|
||||
echo " line-height: var(--line-height-normal);"
|
||||
echo " color: var(--color-text-primary);"
|
||||
echo " background-color: var(--color-surface-background);"
|
||||
echo "}"
|
||||
echo ""
|
||||
echo "h1, h2, h3, h4, h5, h6, legend {"
|
||||
echo " font-family: var(--font-family-heading);"
|
||||
echo "}"
|
||||
echo ""
|
||||
echo "/* Reset default margins for better control */"
|
||||
echo "* {"
|
||||
echo " margin: 0;"
|
||||
echo " padding: 0;"
|
||||
echo " box-sizing: border-box;"
|
||||
echo "}"
|
||||
Reference in New Issue
Block a user