mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-30 20:21:09 +08:00
refactor: v4.0.2 - Complete UI design workflow refactoring
BREAKING CHANGES: - Command paths: /workflow:design:* → /workflow:ui-design:* - Removed --tool parameter from all commands - Pure Claude execution, zero external tool dependencies Major Changes: - style-extract: Single-pass Claude analysis (1 file vs 4+) - style-consolidate: Claude synthesis (no gemini-wrapper/codex) - ui-generate: Unified agent-only execution - File renames: style-extract.md → extract.md, etc. Improvements: - Zero external dependencies (no CLI tools) - Faster execution, reduced I/O - Enhanced reproducibility - Streamlined data flow Updated: - CHANGELOG.md: Detailed v4.0.2 release notes - README.md: Updated all UI design examples - Command files: Complete rewrite for Claude-native execution 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
289
.claude/commands/workflow/ui-design/auto.md
Normal file
289
.claude/commands/workflow/ui-design/auto.md
Normal file
@@ -0,0 +1,289 @@
|
||||
---
|
||||
name: auto
|
||||
description: Fully autonomous UI design workflow with style extraction, consolidation, prototype generation, and design system integration
|
||||
usage: /workflow:ui-design:auto [--prompt "<desc>"] [--images "<glob>"] [--pages "<list>"] [--session <id>] [--variants <count>] [--creative-variants <count>] [--batch-plan]
|
||||
argument-hint: "[--prompt \"Modern SaaS\"] [--images \"refs/*.png\"] [--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--creative-variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:auto --prompt "Modern blog with home, article and author pages, dark theme"
|
||||
- /workflow:ui-design:auto --prompt "SaaS dashboard and settings" --variants 3 --creative-variants 3
|
||||
- /workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce site: home, product, cart"
|
||||
- /workflow:ui-design:auto --session WFS-auth --images "refs/*.png" --variants 2
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
|
||||
# UI Design Auto Workflow Command
|
||||
|
||||
## Overview
|
||||
Fully autonomous UI design workflow: style extraction → consolidation → UI generation → design update → optional batch planning. This command orchestrates the entire design process without user intervention.
|
||||
|
||||
## Coordinator Role
|
||||
**Fully autonomous orchestrator**: Executes all phases sequentially, parsing outputs from one phase to construct the inputs for the next. Supports both standard sequential mode and parallel creative mode for generating diverse design variants.
|
||||
|
||||
## Execution Model - Autonomous Workflow
|
||||
|
||||
This workflow runs **fully autonomously** from start to finish:
|
||||
|
||||
1. **User triggers**: `/workflow:ui-design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth" [--batch-plan]`
|
||||
2. **Phase 1 executes** (style-extract) → Auto-continues
|
||||
3. **Phase 2 executes** (style-consolidate) → Auto-continues
|
||||
4. **Phase 3 executes** (ui-generate) → Auto-continues
|
||||
5. **Phase 4 executes** (design-update) → Auto-continues
|
||||
6. **Phase 5 executes** (batch-plan, optional) → Reports task files
|
||||
|
||||
**Auto-Continue Mechanism**:
|
||||
- The workflow uses `TodoWrite` to track the state of each phase
|
||||
- Upon successful completion of a phase, the coordinator immediately constructs and executes the command for the next phase
|
||||
- This pattern ensures a seamless flow
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: First action is `TodoWrite` initialization, second action is Phase 1 command execution
|
||||
2. **No Preliminary Analysis**: Do not read files or validate before Phase 1 (sub-commands handle their own validation)
|
||||
3. **Parse Every Output**: Extract required data from each command's output for the next phase
|
||||
4. **Auto-Continue**: After each phase, automatically proceed to the next without pausing
|
||||
5. **Track Progress**: Update `TodoWrite` after every phase completion
|
||||
6. **Default to All**: When selecting variants or prototypes for the next phase, the autonomous workflow defaults to using **all** generated items
|
||||
|
||||
## Parameter Requirements
|
||||
|
||||
**Optional Parameters** (all have smart defaults):
|
||||
- `--pages "<page_list>"`: Pages to generate (if omitted, inferred from prompt/session)
|
||||
- `--session <session_id>`: Workflow session ID (if omitted, runs in standalone mode)
|
||||
- `--images "<glob_pattern>"`: Reference image paths (default: `design-refs/*`)
|
||||
- `--prompt "<description>"`: Text description of design style and pages
|
||||
- `--variants <count>`: Number of style variants (Phase 1) or UI variants (Phase 3, standard mode) to generate (default: 1, range: 1-5)
|
||||
- `--creative-variants <count>`: Number of **parallel agents** to launch for creative UI generation (Phase 3 only). This enables Creative Mode for layout exploration
|
||||
- `--batch-plan`: Auto-generate implementation tasks after design-update (integrated mode only)
|
||||
|
||||
**Input Source Rules**:
|
||||
- Must provide at least one of: `--images` or `--prompt`
|
||||
- Both can be combined for guided style analysis
|
||||
|
||||
## Execution Modes
|
||||
|
||||
### Standard Mode (Default)
|
||||
- Executes all phases sequentially
|
||||
- **Phase 1 (Style Extraction)**: Generates multiple style options using the `--variants` parameter in a single execution
|
||||
- **Phase 3 (UI Generation)**: Generates multiple UI prototypes using the `--variants` parameter in a single execution
|
||||
|
||||
### Creative Mode (with `--creative-variants`)
|
||||
- Triggered by the `--creative-variants` parameter for **Phase 3 (UI Generation) only**
|
||||
- Launches multiple, parallel `Task(conceptual-planning-agent)` instances to explore diverse UI layouts
|
||||
- Each agent generates a single prototype for a single page, resulting in `N pages * M creative-variants` total prototypes
|
||||
- This mode is ideal for initial UI exploration where a wide range of layout ideas is desired
|
||||
|
||||
### Integrated vs. Standalone Mode
|
||||
- `--session` flag determines if the workflow is integrated with a larger session or runs standalone
|
||||
|
||||
## 5-Phase Execution
|
||||
|
||||
### Phase 0: Page Inference
|
||||
```bash
|
||||
# Infer page list if not explicitly provided
|
||||
IF --pages provided:
|
||||
page_list = parse_csv({--pages value})
|
||||
ELSE IF --prompt provided:
|
||||
# Extract page names from prompt (e.g., "blog with home, article, author pages")
|
||||
page_list = extract_pages_from_prompt({--prompt value})
|
||||
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)
|
||||
ELSE:
|
||||
page_list = ["home"] # Default fallback
|
||||
|
||||
STORE: inferred_page_list = page_list # For Phase 3
|
||||
```
|
||||
|
||||
### Phase 1: Style Extraction
|
||||
**Command Construction**:
|
||||
```bash
|
||||
images_flag = --images present ? "--images \"{image_glob}\"" : ""
|
||||
prompt_flag = --prompt present ? "--prompt \"{prompt_text}\"" : ""
|
||||
session_flag = --session present ? "--session {session_id}" : ""
|
||||
|
||||
# Phase 1 always runs sequentially, using --variants to generate multiple style options
|
||||
# --creative-variants does not apply to this phase
|
||||
variants_flag = --variants present ? "--variants {variants_count}" : "--variants 1"
|
||||
command = "/workflow:ui-design:extract {session_flag} {images_flag} {prompt_flag} {variants_flag}"
|
||||
SlashCommand(command=command)
|
||||
```
|
||||
**Auto-Continue**: On completion, proceeds to Phase 2
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Style Consolidation (Auto-Triggered)
|
||||
**Action**: Consolidates all style variants generated in Phase 1
|
||||
|
||||
**Command Construction**:
|
||||
```bash
|
||||
session_flag = --session present ? "--session {session_id}" : ""
|
||||
# The --variants flag will list ALL variants from Phase 1 (auto-select all)
|
||||
variants_list = get_all_variant_ids_from_phase_1_output()
|
||||
|
||||
command = "/workflow:ui-design:consolidate {session_flag} --variants \"{variants_list}\""
|
||||
```
|
||||
**Command**: `SlashCommand(command=command)`
|
||||
**Note**: In auto mode, ALL style variants are consolidated automatically without user selection
|
||||
**Auto-Continue**: On completion, proceeds to Phase 3
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: UI Generation (Auto-Triggered)
|
||||
**Action**: Generates UI prototypes based on the consolidated design system
|
||||
|
||||
**Command Construction**:
|
||||
```bash
|
||||
session_flag = --session present ? "--session {session_id}" : ""
|
||||
pages_flag = "--pages \"{inferred_page_list}\" "
|
||||
|
||||
IF --creative-variants provided:
|
||||
# Creative Mode: Launch N agents × M pages in parallel for diverse layouts
|
||||
command = "/workflow:ui-design:generate {session_flag} {pages_flag}--creative-variants {creative_variants_count}"
|
||||
ELSE:
|
||||
# Standard Mode: Single execution generating N variants for all pages
|
||||
variants_flag = --variants present ? "--variants {variants_count}" : "--variants 1"
|
||||
command = "/workflow:ui-design:generate {session_flag} {pages_flag}{variants_flag}"
|
||||
```
|
||||
**Command**: `SlashCommand(command=command)`
|
||||
**Auto-Continue**: On completion, proceeds to Phase 4
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Design System Integration (Auto-Triggered)
|
||||
**Action**: Integrates all generated prototypes and the design system into the brainstorming artifacts
|
||||
|
||||
**Command Construction**:
|
||||
```bash
|
||||
session_flag = --session present ? "--session {session_id}" : ""
|
||||
# --selected-prototypes is omitted to default to ALL generated prototypes
|
||||
command = "/workflow:ui-design:update {session_flag}"
|
||||
```
|
||||
**Command**: `SlashCommand(command=command)`
|
||||
**Auto-Continue**: If `--batch-plan` is present, proceeds to Phase 5. Otherwise, the workflow completes
|
||||
|
||||
---
|
||||
|
||||
### Phase 5: Batch Task Generation (Optional, Auto-Triggered)
|
||||
**Condition**: Only executes if `--batch-plan` flag is present
|
||||
|
||||
**Execution**:
|
||||
```bash
|
||||
FOR each page IN inferred_page_list:
|
||||
SlashCommand(command="/workflow:plan --agent \"Implement {page} page based on design system\"")
|
||||
```
|
||||
**Completion**: The workflow is now complete
|
||||
|
||||
## TodoWrite Pattern (Autonomous)
|
||||
|
||||
```javascript
|
||||
// Initialize (before Phase 1)
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing style consolidation"},
|
||||
{"content": "Execute UI prototype generation", "status": "pending", "activeForm": "Executing UI generation"},
|
||||
{"content": "Execute design system integration", "status": "pending", "activeForm": "Executing design system integration"}
|
||||
]})
|
||||
|
||||
// After Phase 1 completes, before Phase 2 starts
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute style consolidation", "status": "in_progress", "activeForm": "Executing style consolidation"},
|
||||
// ... rest are pending
|
||||
]})
|
||||
|
||||
// After Phase 2 completes, before Phase 3 starts
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed"},
|
||||
{"content": "Execute style consolidation", "status": "completed", "activeForm": "Executing style consolidation"},
|
||||
{"content": "Execute UI prototype generation", "status": "in_progress", "activeForm": "Executing UI generation"},
|
||||
// ... rest are pending
|
||||
]})
|
||||
|
||||
// This pattern continues until all phases are complete
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
- **Phase Execution Failures**: The workflow will halt, keeping the failed phase `in_progress`. It will report the error and provide recovery instructions, suggesting a manual command execution with corrected parameters
|
||||
- **Default Behavior**: In case of ambiguity (e.g., which variants to select), the system defaults to selecting ALL available items to ensure the workflow can proceed autonomously
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Zero External Dependencies**: Pure Claude + agents, no CLI tools
|
||||
2. **Streamlined Commands**: Removed `--tool` parameter and all CLI tool flags
|
||||
3. **Consistent Execution**: All sub-commands use unified patterns
|
||||
4. **Reproducible**: Deterministic flow with clear phase dependencies
|
||||
5. **Simpler**: Fewer moving parts, easier to understand and debug
|
||||
|
||||
## Workflow Position
|
||||
|
||||
The workflow acts as the bridge between brainstorming (`synthesis-specification.md`) and planning (`/workflow:plan`), providing this connection in a fully automated fashion with options for deep creative exploration through parallel agents.
|
||||
|
||||
## Example Execution Flows
|
||||
|
||||
### Example 1: Text Prompt Only (Standalone)
|
||||
```bash
|
||||
/workflow:ui-design:auto --prompt "Modern minimalist blog with home, article, and author pages"
|
||||
|
||||
# Executes:
|
||||
# 1. /workflow:ui-design:extract --prompt "..." --variants 1
|
||||
# 2. /workflow:ui-design:consolidate --variants "variant-1"
|
||||
# 3. /workflow:ui-design:generate --pages "home,article,author" --variants 1
|
||||
# 4. /workflow:ui-design:update
|
||||
```
|
||||
|
||||
### Example 2: Images + Prompt + Session (Integrated)
|
||||
```bash
|
||||
/workflow:ui-design:auto --session WFS-ecommerce --images "refs/*.png" --prompt "E-commerce with minimalist aesthetic" --variants 3
|
||||
|
||||
# Executes:
|
||||
# 1. /workflow:ui-design:extract --session WFS-ecommerce --images "refs/*.png" --prompt "..." --variants 3
|
||||
# 2. /workflow:ui-design:consolidate --session WFS-ecommerce --variants "variant-1,variant-2,variant-3"
|
||||
# 3. /workflow:ui-design:generate --session WFS-ecommerce --pages "{inferred_from_synthesis}" --variants 1
|
||||
# 4. /workflow:ui-design:update --session WFS-ecommerce
|
||||
```
|
||||
|
||||
### Example 3: Creative Mode with Batch Planning
|
||||
```bash
|
||||
/workflow:ui-design:auto --session WFS-saas --prompt "SaaS dashboard and settings" --variants 2 --creative-variants 4 --batch-plan
|
||||
|
||||
# Executes:
|
||||
# 1. /workflow:ui-design:extract --session WFS-saas --prompt "..." --variants 2
|
||||
# 2. /workflow:ui-design:consolidate --session WFS-saas --variants "variant-1,variant-2"
|
||||
# 3. /workflow:ui-design:generate --session WFS-saas --pages "dashboard,settings" --creative-variants 4
|
||||
# (launches 8 parallel agents: 2 pages × 4 creative variants)
|
||||
# 4. /workflow:ui-design:update --session WFS-saas
|
||||
# 5. /workflow:plan --agent "Implement dashboard page..."
|
||||
# /workflow:plan --agent "Implement settings page..."
|
||||
```
|
||||
|
||||
## Final Completion Message
|
||||
|
||||
```
|
||||
✅ UI Design Auto Workflow Complete!
|
||||
|
||||
Session: {session_id or "standalone"}
|
||||
Mode: {standard|creative}
|
||||
Input: {images and/or prompt summary}
|
||||
|
||||
Phase 1 - Style Extraction: {variants_count} style variants
|
||||
Phase 2 - Style Consolidation: Unified design system
|
||||
Phase 3 - UI Generation: {total_prototypes} prototypes ({mode} mode)
|
||||
Phase 4 - Design Update: Brainstorming artifacts updated
|
||||
{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
|
||||
|
||||
📂 Design System: {base_path}/.design/
|
||||
📂 Prototypes: {base_path}/.design/prototypes/
|
||||
🌐 Preview: Open {base_path}/.design/prototypes/index.html
|
||||
|
||||
{IF batch-plan:
|
||||
📋 Implementation Tasks: .workflow/WFS-{session}/.task/
|
||||
Next: /workflow:execute to begin implementation
|
||||
}
|
||||
{ELSE:
|
||||
Next Steps:
|
||||
1. Preview prototypes in browser
|
||||
2. Select preferred designs
|
||||
3. Run /workflow:plan to create implementation tasks
|
||||
}
|
||||
```
|
||||
489
.claude/commands/workflow/ui-design/consolidate.md
Normal file
489
.claude/commands/workflow/ui-design/consolidate.md
Normal file
@@ -0,0 +1,489 @@
|
||||
---
|
||||
name: consolidate
|
||||
description: Consolidate style variants into unified design system using Claude's synthesis
|
||||
usage: /workflow:ui-design:consolidate --session <session_id> [--variants "<ids>"]
|
||||
argument-hint: "--session WFS-session-id [--variants \"variant-1,variant-3\"]"
|
||||
examples:
|
||||
- /workflow:ui-design:consolidate --session WFS-auth --variants "variant-1,variant-2,variant-3"
|
||||
- /workflow:ui-design:consolidate --session WFS-dashboard --variants "variant-1,variant-3"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*)
|
||||
---
|
||||
|
||||
# Style Consolidation Command
|
||||
|
||||
## Overview
|
||||
Consolidate user-selected style variants into a unified, production-ready design system using Claude's native synthesis capabilities. Merges token proposals from multiple style cards into a cohesive design language.
|
||||
|
||||
## Core Philosophy
|
||||
- **Claude-Native**: 100% Claude-driven consolidation, no external tools
|
||||
- **Token Merging**: Combines `proposed_tokens` from selected variants
|
||||
- **Intelligent Synthesis**: Resolves conflicts, ensures consistency
|
||||
- **Production-Ready**: Complete design system with documentation
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Session & Variant Loading
|
||||
```bash
|
||||
# Validate session and load style cards
|
||||
IF --session:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/"
|
||||
ELSE:
|
||||
ERROR: "Must provide --session parameter"
|
||||
|
||||
# Verify extraction output exists
|
||||
VERIFY: {base_path}/.design/style-extraction/style-cards.json exists
|
||||
|
||||
# Load style cards
|
||||
style_cards = Read({base_path}/.design/style-extraction/style-cards.json)
|
||||
```
|
||||
|
||||
### Phase 2: Variant Selection
|
||||
```bash
|
||||
# Parse variant selection
|
||||
IF --variants provided:
|
||||
variant_ids = parse_csv({--variants value})
|
||||
VALIDATE: All variant_ids exist in style_cards.style_cards[]
|
||||
ELSE:
|
||||
# Auto-select all variants when called from /workflow:ui-design:auto
|
||||
variant_ids = extract_all_ids(style_cards.style_cards)
|
||||
|
||||
# Extract selected variants
|
||||
selected_variants = []
|
||||
FOR each id IN variant_ids:
|
||||
variant = find_variant_by_id(style_cards, id)
|
||||
selected_variants.push(variant)
|
||||
|
||||
VERIFY: selected_variants.length > 0
|
||||
```
|
||||
|
||||
### Phase 3: Load Design Context (Optional)
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
design_context = ""
|
||||
IF exists({base_path}/.brainstorming/synthesis-specification.md):
|
||||
design_context = Read({base_path}/.brainstorming/synthesis-specification.md)
|
||||
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
|
||||
design_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
|
||||
```
|
||||
|
||||
### Phase 4: Unified Design System Synthesis (Claude)
|
||||
This is a single-pass synthesis that replaces all external tool calls.
|
||||
|
||||
**Synthesis Prompt Template**:
|
||||
```
|
||||
Create a unified, production-ready design system by consolidating the following style variants.
|
||||
|
||||
SESSION: {session_id}
|
||||
SELECTED VARIANTS: {variant_ids}
|
||||
|
||||
VARIANT DATA:
|
||||
{FOR each variant IN selected_variants:
|
||||
---
|
||||
Variant ID: {variant.id}
|
||||
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: Consolidate these {selected_variants.length} style variant(s) into a single, cohesive design system.
|
||||
|
||||
CONSOLIDATION RULES:
|
||||
1. **Merge Token Proposals**: Combine all `proposed_tokens` into one unified system
|
||||
2. **Resolve Conflicts**: When variants disagree (e.g., different primary colors), choose the most appropriate value or create a balanced compromise
|
||||
3. **Maintain Completeness**: Ensure all token categories are present (colors, typography, spacing, etc.)
|
||||
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
|
||||
|
||||
OUTPUT: Generate the following files as JSON/Markdown:
|
||||
|
||||
FILE 1: design-tokens.json
|
||||
{
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(...)",
|
||||
"secondary": "oklch(...)",
|
||||
"accent": "oklch(...)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(...)",
|
||||
"elevated": "oklch(...)",
|
||||
"overlay": "oklch(...)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(...)",
|
||||
"warning": "oklch(...)",
|
||||
"error": "oklch(...)",
|
||||
"info": "oklch(...)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(...)",
|
||||
"secondary": "oklch(...)",
|
||||
"tertiary": "oklch(...)",
|
||||
"inverse": "oklch(...)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(...)",
|
||||
"strong": "oklch(...)",
|
||||
"subtle": "oklch(...)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": { "heading": "...", "body": "...", "mono": "..." },
|
||||
"font_size": { "xs": "...", ..., "4xl": "..." },
|
||||
"font_weight": { "normal": "...", "medium": "...", "semibold": "...", "bold": "..." },
|
||||
"line_height": { "tight": "...", "normal": "...", "relaxed": "..." },
|
||||
"letter_spacing": { "tight": "...", "normal": "...", "wide": "..." }
|
||||
},
|
||||
"spacing": { "0": "0", "1": "0.25rem", ..., "24": "6rem" },
|
||||
"border_radius": { "none": "0", "sm": "0.25rem", ..., "full": "9999px" },
|
||||
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
|
||||
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
|
||||
}
|
||||
|
||||
FILE 2: style-guide.md
|
||||
# Design System Style Guide
|
||||
|
||||
## Design Philosophy
|
||||
{Synthesized philosophy from all variants}
|
||||
|
||||
## Color System
|
||||
### Brand Colors
|
||||
- **Primary**: {value} - {usage description}
|
||||
- **Secondary**: {value} - {usage description}
|
||||
- **Accent**: {value} - {usage description}
|
||||
|
||||
### Surface Colors
|
||||
{List all surface colors with usage}
|
||||
|
||||
### Semantic Colors
|
||||
{List semantic colors with accessibility notes}
|
||||
|
||||
### Text Colors
|
||||
{List text colors with contrast ratios}
|
||||
|
||||
## Typography
|
||||
### Font Families
|
||||
{List font families with fallbacks}
|
||||
|
||||
### Type Scale
|
||||
{Show scale with examples}
|
||||
|
||||
### Usage Examples
|
||||
```css
|
||||
.heading-primary {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
```
|
||||
|
||||
## Spacing System
|
||||
{Describe spacing scale and usage patterns}
|
||||
|
||||
## Component Guidelines
|
||||
### Buttons
|
||||
{Token-based button styling examples}
|
||||
|
||||
### Cards
|
||||
{Token-based card styling examples}
|
||||
|
||||
### Forms
|
||||
{Token-based form styling examples}
|
||||
|
||||
## Accessibility
|
||||
- All text meets WCAG AA (4.5:1 minimum)
|
||||
- UI components meet WCAG AA (3:1 minimum)
|
||||
- Focus indicators are clearly visible
|
||||
|
||||
FILE 3: tailwind.config.js
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
primary: '{value}',
|
||||
secondary: '{value}',
|
||||
accent: '{value}'
|
||||
},
|
||||
// ... all color tokens
|
||||
},
|
||||
fontFamily: {
|
||||
heading: [{fonts}],
|
||||
body: [{fonts}],
|
||||
mono: [{fonts}]
|
||||
},
|
||||
fontSize: {
|
||||
// ... all size tokens
|
||||
},
|
||||
spacing: {
|
||||
// ... all spacing tokens
|
||||
},
|
||||
borderRadius: {
|
||||
// ... all radius tokens
|
||||
},
|
||||
boxShadow: {
|
||||
// ... all shadow tokens
|
||||
},
|
||||
screens: {
|
||||
// ... all breakpoint tokens
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FILE 4: validation-report.json
|
||||
{
|
||||
"session_id": "{session_id}",
|
||||
"consolidated_variants": {variant_ids},
|
||||
"timestamp": "{ISO timestamp}",
|
||||
"validation_results": {
|
||||
"colors": {
|
||||
"total": {count},
|
||||
"wcag_aa_compliant": {count},
|
||||
"warnings": [{any contrast issues}]
|
||||
},
|
||||
"typography": {
|
||||
"font_families": {count},
|
||||
"scale_sizes": {count}
|
||||
},
|
||||
"spacing": {
|
||||
"scale_values": {count}
|
||||
},
|
||||
"accessibility": {
|
||||
"status": "pass|warnings",
|
||||
"issues": [{list any issues}]
|
||||
},
|
||||
"completeness": {
|
||||
"required_categories": ["colors", "typography", "spacing", "border_radius", "shadows", "breakpoints"],
|
||||
"present_categories": [{list}],
|
||||
"missing_categories": [{list if any}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RESPONSE FORMAT:
|
||||
Provide each file's content in clearly labeled sections:
|
||||
|
||||
===== design-tokens.json =====
|
||||
{JSON content}
|
||||
|
||||
===== style-guide.md =====
|
||||
{Markdown content}
|
||||
|
||||
===== tailwind.config.js =====
|
||||
{JavaScript content}
|
||||
|
||||
===== validation-report.json =====
|
||||
{JSON content}
|
||||
```
|
||||
|
||||
### Phase 5: Parse & Write Output Files
|
||||
```bash
|
||||
# Parse Claude's response into separate files
|
||||
CREATE: {base_path}/.design/style-consolidation/
|
||||
|
||||
# Extract and write each file
|
||||
parsed_output = parse_claude_response(claude_response)
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/design-tokens.json",
|
||||
content: parsed_output.design_tokens
|
||||
})
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/style-guide.md",
|
||||
content: parsed_output.style_guide
|
||||
})
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/tailwind.config.js",
|
||||
content: parsed_output.tailwind_config
|
||||
})
|
||||
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-consolidation/validation-report.json",
|
||||
content: parsed_output.validation_report
|
||||
})
|
||||
```
|
||||
|
||||
### Phase 6: TodoWrite & Completion
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
|
||||
{content: "Select and validate variant IDs", status: "completed", activeForm: "Selecting variants"},
|
||||
{content: "Load design context from brainstorming", status: "completed", activeForm: "Loading context"},
|
||||
{content: "Synthesize unified design system with Claude", status: "completed", activeForm: "Synthesizing design system"},
|
||||
{content: "Write consolidated design system files", status: "completed", activeForm: "Writing output files"}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
✅ Style consolidation complete for session: {session_id}
|
||||
|
||||
Consolidated {selected_variants.length} variant(s):
|
||||
{FOR each variant: - {variant.name} ({variant.id})}
|
||||
|
||||
Validation Summary:
|
||||
- Colors: {total_colors} (WCAG AA: {compliant_count}/{total_colors})
|
||||
- Typography: {scale_count} sizes
|
||||
- Spacing: {scale_count} values
|
||||
- Accessibility: {status}
|
||||
|
||||
📂 Output: {base_path}/.design/style-consolidation/
|
||||
├── design-tokens.json (Final token definitions)
|
||||
├── style-guide.md (Design system documentation)
|
||||
├── tailwind.config.js (Tailwind configuration)
|
||||
└── validation-report.json (Validation audit)
|
||||
|
||||
Next: /workflow:ui-design:generate --session {session_id} --pages "dashboard,auth"
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, UI generation is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/.design/style-consolidation/
|
||||
├── design-tokens.json # Final validated CSS tokens
|
||||
├── style-guide.md # Comprehensive design system documentation
|
||||
├── tailwind.config.js # Tailwind theme configuration
|
||||
└── validation-report.json # Validation audit results
|
||||
```
|
||||
|
||||
### design-tokens.json Format
|
||||
```json
|
||||
{
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"secondary": "oklch(0.60 0.15 320 / 1)",
|
||||
"accent": "oklch(0.70 0.18 150 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"elevated": "oklch(1.00 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.60 0.15 142 / 1)",
|
||||
"warning": "oklch(0.75 0.12 85 / 1)",
|
||||
"error": "oklch(0.55 0.22 27 / 1)",
|
||||
"info": "oklch(0.55 0.18 252 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.45 0.01 270 / 1)",
|
||||
"tertiary": "oklch(0.60 0.01 270 / 1)",
|
||||
"inverse": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.85 0.01 270 / 1)",
|
||||
"strong": "oklch(0.70 0.01 270 / 1)",
|
||||
"subtle": "oklch(0.92 0.01 270 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Inter, system-ui, sans-serif",
|
||||
"body": "Inter, system-ui, sans-serif",
|
||||
"mono": "JetBrains Mono, Consolas, monospace"
|
||||
},
|
||||
"font_size": {
|
||||
"xs": "0.75rem",
|
||||
"sm": "0.875rem",
|
||||
"base": "1rem",
|
||||
"lg": "1.125rem",
|
||||
"xl": "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem"
|
||||
},
|
||||
"font_weight": {
|
||||
"normal": "400",
|
||||
"medium": "500",
|
||||
"semibold": "600",
|
||||
"bold": "700"
|
||||
},
|
||||
"line_height": {
|
||||
"tight": "1.25",
|
||||
"normal": "1.5",
|
||||
"relaxed": "1.75"
|
||||
},
|
||||
"letter_spacing": {
|
||||
"tight": "-0.025em",
|
||||
"normal": "0",
|
||||
"wide": "0.025em"
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"0": "0",
|
||||
"1": "0.25rem",
|
||||
"2": "0.5rem",
|
||||
"3": "0.75rem",
|
||||
"4": "1rem",
|
||||
"5": "1.25rem",
|
||||
"6": "1.5rem",
|
||||
"8": "2rem",
|
||||
"10": "2.5rem",
|
||||
"12": "3rem",
|
||||
"16": "4rem",
|
||||
"20": "5rem",
|
||||
"24": "6rem"
|
||||
},
|
||||
"border_radius": {
|
||||
"none": "0",
|
||||
"sm": "0.25rem",
|
||||
"md": "0.5rem",
|
||||
"lg": "0.75rem",
|
||||
"xl": "1rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"shadows": {
|
||||
"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No style cards found**: Report error, suggest running `/workflow:ui-design:extract` first
|
||||
- **Invalid variant IDs**: List available IDs, auto-select all if called from auto workflow
|
||||
- **Parsing errors**: Retry with stricter format instructions
|
||||
- **Validation warnings**: Report but continue (non-blocking)
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Zero External Dependencies**: No `gemini-wrapper`, no `codex` - pure Claude
|
||||
2. **Direct Token Merging**: Reads `proposed_tokens` from style cards directly
|
||||
3. **Single-Pass Synthesis**: One comprehensive prompt generates all outputs
|
||||
4. **Reproducible**: Deterministic structure with clear consolidation rules
|
||||
5. **Streamlined**: `Load → Synthesize → Write` (3 steps vs 7+ previously)
|
||||
|
||||
## Integration Points
|
||||
- **Input**: `style-cards.json` from `/workflow:ui-design:extract` (with `proposed_tokens`)
|
||||
- **Output**: `design-tokens.json` for `/workflow:ui-design:generate`
|
||||
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md`
|
||||
327
.claude/commands/workflow/ui-design/extract.md
Normal file
327
.claude/commands/workflow/ui-design/extract.md
Normal file
@@ -0,0 +1,327 @@
|
||||
---
|
||||
name: extract
|
||||
description: Extract design style from reference images or text prompts using Claude's analysis
|
||||
usage: /workflow:ui-design:extract [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>]
|
||||
argument-hint: "[--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:extract --images "design-refs/*.png" --variants 3
|
||||
- /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --variants 3
|
||||
- /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --variants 2
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
|
||||
## Overview
|
||||
Extract design style elements from reference images or text prompts using Claude's built-in analysis capabilities. Generates a single, comprehensive `style-cards.json` file containing multiple design variants with complete token proposals.
|
||||
|
||||
## Core Philosophy
|
||||
- **Claude-Native**: 100% Claude-driven analysis, no external tools
|
||||
- **Single Output**: Only `style-cards.json` with embedded token proposals
|
||||
- **Sequential Execution**: Generate multiple style variants in one pass
|
||||
- **Flexible Input**: Images, text prompts, or both
|
||||
- **Reproducible**: Deterministic output structure
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 0: Parameter Detection & Validation
|
||||
```bash
|
||||
# Detect input source
|
||||
IF --images AND --prompt:
|
||||
input_mode = "hybrid" # Text guides image analysis
|
||||
ELSE IF --images:
|
||||
input_mode = "image"
|
||||
ELSE IF --prompt:
|
||||
input_mode = "text"
|
||||
ELSE:
|
||||
ERROR: "Must provide --images or --prompt"
|
||||
|
||||
# Detect session mode
|
||||
IF --session:
|
||||
session_mode = "integrated"
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/"
|
||||
ELSE:
|
||||
session_mode = "standalone"
|
||||
session_id = "design-session-" + timestamp()
|
||||
base_path = "./{session_id}/"
|
||||
|
||||
# Set variant count
|
||||
variants_count = --variants provided ? {count} : 1
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
```
|
||||
|
||||
### Phase 1: Input Loading & Validation
|
||||
```bash
|
||||
# Expand and validate inputs
|
||||
IF input_mode IN ["image", "hybrid"]:
|
||||
expanded_images = Glob({--images pattern})
|
||||
VERIFY: expanded_images.length > 0
|
||||
FOR each image IN expanded_images:
|
||||
image_data[i] = Read({image_path}) # Load for analysis
|
||||
|
||||
IF input_mode IN ["text", "hybrid"]:
|
||||
VALIDATE: --prompt is non-empty string
|
||||
prompt_guidance = {--prompt value}
|
||||
|
||||
# Create output directory
|
||||
CREATE: {base_path}/.design/style-extraction/
|
||||
```
|
||||
|
||||
### Phase 2: Unified Style Analysis (Claude)
|
||||
This is a single-pass analysis that replaces all external tool calls.
|
||||
|
||||
**Analysis Prompt Template**:
|
||||
```
|
||||
Analyze the following design references and generate {variants_count} distinct design style proposals.
|
||||
|
||||
INPUT MODE: {input_mode}
|
||||
|
||||
{IF input_mode IN ["image", "hybrid"]}
|
||||
VISUAL REFERENCES: {list of loaded images}
|
||||
Identify: color palettes, typography patterns, spacing rhythms, visual hierarchy, component styles
|
||||
{ENDIF}
|
||||
|
||||
{IF input_mode IN ["text", "hybrid"]}
|
||||
TEXT GUIDANCE: "{prompt_guidance}"
|
||||
Use this to guide the aesthetic direction and feature requirements
|
||||
{ENDIF}
|
||||
|
||||
TASK: Generate {variants_count} design style variants that:
|
||||
1. Each have a distinct visual identity and design philosophy
|
||||
2. Use OKLCH color space for all color values
|
||||
3. Include complete, production-ready design token proposals
|
||||
4. Are semantically organized (brand, surface, semantic colors)
|
||||
|
||||
OUTPUT FORMAT: JSON matching this exact structure:
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "{session_id}",
|
||||
"input_mode": "{input_mode}",
|
||||
"timestamp": "{ISO timestamp}",
|
||||
"variants_count": {variants_count}
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Concise Style Name (e.g., Modern Minimalist)",
|
||||
"description": "2-3 sentence description of this style's visual language and user experience",
|
||||
"design_philosophy": "Core design principles for this variant",
|
||||
"preview": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"font_heading": "Inter, system-ui, sans-serif",
|
||||
"border_radius": "0.5rem"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"secondary": "oklch(0.60 0.15 320 / 1)",
|
||||
"accent": "oklch(0.70 0.18 150 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"elevated": "oklch(1.00 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.60 0.15 142 / 1)",
|
||||
"warning": "oklch(0.75 0.12 85 / 1)",
|
||||
"error": "oklch(0.55 0.22 27 / 1)",
|
||||
"info": "oklch(0.55 0.18 252 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.45 0.01 270 / 1)",
|
||||
"tertiary": "oklch(0.60 0.01 270 / 1)",
|
||||
"inverse": "oklch(0.95 0.01 270 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.85 0.01 270 / 1)",
|
||||
"strong": "oklch(0.70 0.01 270 / 1)",
|
||||
"subtle": "oklch(0.92 0.01 270 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Inter, system-ui, sans-serif",
|
||||
"body": "Inter, system-ui, sans-serif",
|
||||
"mono": "JetBrains Mono, Consolas, monospace"
|
||||
},
|
||||
"font_size": {
|
||||
"xs": "0.75rem",
|
||||
"sm": "0.875rem",
|
||||
"base": "1rem",
|
||||
"lg": "1.125rem",
|
||||
"xl": "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem"
|
||||
},
|
||||
"font_weight": {
|
||||
"normal": "400",
|
||||
"medium": "500",
|
||||
"semibold": "600",
|
||||
"bold": "700"
|
||||
},
|
||||
"line_height": {
|
||||
"tight": "1.25",
|
||||
"normal": "1.5",
|
||||
"relaxed": "1.75"
|
||||
},
|
||||
"letter_spacing": {
|
||||
"tight": "-0.025em",
|
||||
"normal": "0",
|
||||
"wide": "0.025em"
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"0": "0",
|
||||
"1": "0.25rem",
|
||||
"2": "0.5rem",
|
||||
"3": "0.75rem",
|
||||
"4": "1rem",
|
||||
"5": "1.25rem",
|
||||
"6": "1.5rem",
|
||||
"8": "2rem",
|
||||
"10": "2.5rem",
|
||||
"12": "3rem",
|
||||
"16": "4rem",
|
||||
"20": "5rem",
|
||||
"24": "6rem"
|
||||
},
|
||||
"border_radius": {
|
||||
"none": "0",
|
||||
"sm": "0.25rem",
|
||||
"md": "0.5rem",
|
||||
"lg": "0.75rem",
|
||||
"xl": "1rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"shadows": {
|
||||
"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
RULES:
|
||||
- Each variant must be distinct in visual character
|
||||
- All colors MUST use OKLCH format: oklch(L C H / A)
|
||||
- Token structures must be complete and production-ready
|
||||
- Use semantic naming throughout
|
||||
- Ensure accessibility (contrast ratios, readable font sizes)
|
||||
```
|
||||
|
||||
### Phase 3: Generate & Write Output
|
||||
```bash
|
||||
# Parse Claude's JSON response
|
||||
style_cards_data = parse_json(claude_response)
|
||||
|
||||
# Write single output file
|
||||
Write({
|
||||
file_path: "{base_path}/.design/style-extraction/style-cards.json",
|
||||
content: style_cards_data
|
||||
})
|
||||
```
|
||||
|
||||
### Phase 4: TodoWrite & Completion
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Analyze design references with Claude", status: "completed", activeForm: "Analyzing design"},
|
||||
{content: "Generate {variants_count} style cards with token proposals", status: "completed", activeForm: "Generating style cards"}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
✅ Style extraction complete for session: {session_id}
|
||||
|
||||
Input mode: {input_mode}
|
||||
{IF image mode: Images analyzed: {count}}
|
||||
{IF prompt mode: Prompt: "{truncated_prompt}"}
|
||||
|
||||
Generated {variants_count} style variant(s):
|
||||
{FOR each card: - {card.name} ({card.id})}
|
||||
|
||||
📂 Output: {base_path}/.design/style-extraction/style-cards.json
|
||||
|
||||
Next: /workflow:ui-design:consolidate --session {session_id} --variants "{all_variant_ids}"
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, consolidation is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/.design/style-extraction/
|
||||
└── style-cards.json # Single comprehensive output
|
||||
```
|
||||
|
||||
### style-cards.json Format (Enhanced)
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "WFS-xxx or design-session-xxx",
|
||||
"input_mode": "image|text|hybrid",
|
||||
"timestamp": "2025-01-15T10:30:00Z",
|
||||
"variants_count": 3
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"name": "Modern Minimalist",
|
||||
"description": "Clean, high-contrast design with bold typography and ample whitespace",
|
||||
"design_philosophy": "Less is more - focus on content clarity and visual breathing room",
|
||||
"preview": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"font_heading": "Inter, system-ui, sans-serif",
|
||||
"border_radius": "0.5rem"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": { /* complete color system */ },
|
||||
"typography": { /* complete typography system */ },
|
||||
"spacing": { /* complete spacing scale */ },
|
||||
"border_radius": { /* border radius scale */ },
|
||||
"shadows": { /* shadow system */ },
|
||||
"breakpoints": { /* responsive breakpoints */ }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No images found**: Report glob pattern and suggest corrections
|
||||
- **Invalid prompt**: Require non-empty string for text mode
|
||||
- **Claude JSON parsing error**: Retry with stricter format instructions
|
||||
- **Invalid session**: Create standalone session automatically
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Zero External Dependencies**: No `gemini-wrapper`, no `codex` - pure Claude
|
||||
2. **Single Output File**: Eliminates `semantic_style_analysis.json`, `design-tokens.json`, `tailwind-tokens.js` clutter
|
||||
3. **Complete Token Proposals**: Each style card contains a full design system proposal
|
||||
4. **Reproducible**: Same inputs = same output structure (content may vary based on Claude model)
|
||||
5. **Streamlined Flow**: `Input → Analysis → style-cards.json` (3 steps vs 7+ previously)
|
||||
|
||||
## Integration Points
|
||||
- **Input**: Reference images (PNG, JPG, WebP) or text prompts
|
||||
- **Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
|
||||
- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md` can guide prompts
|
||||
363
.claude/commands/workflow/ui-design/generate.md
Normal file
363
.claude/commands/workflow/ui-design/generate.md
Normal file
@@ -0,0 +1,363 @@
|
||||
---
|
||||
name: generate
|
||||
description: Generate UI prototypes using consolidated design tokens
|
||||
usage: /workflow:ui-design:generate [--pages "<list>"] [--session <id>] [--variants <count>] [--creative-variants <count>]
|
||||
argument-hint: "[--pages \"dashboard,auth\"] [--session WFS-xxx] [--variants 3] [--creative-variants 3]"
|
||||
examples:
|
||||
- /workflow:ui-design:generate --pages "home,pricing" --variants 2
|
||||
- /workflow:ui-design:generate --session WFS-auth --pages "dashboard" --creative-variants 4
|
||||
- /workflow:ui-design:generate --session WFS-auth --variants 3
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
|
||||
# UI Generation Command
|
||||
|
||||
## Overview
|
||||
Generate production-ready UI prototypes (HTML/CSS) strictly adhering to consolidated design tokens and synthesis specification requirements.
|
||||
|
||||
## Core Philosophy
|
||||
- **Dual-Mode Execution**: Standard (consistent) or Creative (exploratory)
|
||||
- **Agent-Driven**: Uses `Task(conceptual-planning-agent)` exclusively
|
||||
- **Token-Driven**: All styles reference design-tokens.json; no hardcoded values
|
||||
- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Mode Detection & Context Loading
|
||||
```bash
|
||||
# Detect execution mode
|
||||
IF --creative-variants provided:
|
||||
mode = "creative" # Parallel agents for diverse layouts
|
||||
creative_count = {--creative-variants value}
|
||||
VALIDATE: 1 <= creative_count <= 10
|
||||
ELSE:
|
||||
mode = "standard" # Single agent, multiple variants
|
||||
variants_count = --variants provided ? {count} : 1
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
|
||||
# Detect session mode
|
||||
IF --session:
|
||||
session_mode = "integrated"
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/"
|
||||
ELSE:
|
||||
session_mode = "standalone"
|
||||
# Infer session_id from existing design-session-* directory
|
||||
base_path = "./{detected_design_session}/"
|
||||
|
||||
# Infer page list if not provided
|
||||
IF --pages provided:
|
||||
page_list = {explicit_pages}
|
||||
ELSE IF session_mode == "integrated":
|
||||
# Read synthesis-specification.md to extract page requirements
|
||||
synthesis_spec = Read({base_path}/.brainstorming/synthesis-specification.md)
|
||||
page_list = extract_pages_from_synthesis(synthesis_spec)
|
||||
ELSE:
|
||||
# Infer from existing prototypes or default
|
||||
page_list = detect_from_prototypes({base_path}/.design/prototypes/) OR ["home"]
|
||||
|
||||
VALIDATE: page_list not empty
|
||||
|
||||
# Load design system
|
||||
VERIFY: {base_path}/.design/style-consolidation/design-tokens.json exists
|
||||
design_tokens = Read({base_path}/.design/style-consolidation/design-tokens.json)
|
||||
style_guide = Read({base_path}/.design/style-consolidation/style-guide.md)
|
||||
|
||||
# Load requirements (if integrated mode)
|
||||
IF session_mode == "integrated":
|
||||
synthesis_spec = Read({base_path}/.brainstorming/synthesis-specification.md)
|
||||
```
|
||||
|
||||
### Phase 2: UI Generation Execution
|
||||
|
||||
**Route based on mode**:
|
||||
|
||||
#### A. Standard Mode (Default)
|
||||
Execute if `mode == "standard"`. Single agent generates multiple variants with consistent layout strategy.
|
||||
|
||||
```bash
|
||||
# Create output directory
|
||||
CREATE: {base_path}/.design/prototypes/
|
||||
|
||||
# Single agent call generates N variants for all pages
|
||||
Task(conceptual-planning-agent): "
|
||||
[UI_GENERATION]
|
||||
|
||||
Generate UI prototypes adhering to design tokens
|
||||
|
||||
## Context
|
||||
SESSION: {session_id}
|
||||
MODE: standard
|
||||
PAGES: {page_list}
|
||||
VARIANTS_PER_PAGE: {variants_count}
|
||||
OUTPUT: {base_path}/.design/prototypes/
|
||||
|
||||
## Input Files
|
||||
- Design Tokens: {base_path}/.design/style-consolidation/design-tokens.json
|
||||
- Style Guide: {base_path}/.design/style-consolidation/style-guide.md
|
||||
{IF integrated: - Requirements: {base_path}/.brainstorming/synthesis-specification.md}
|
||||
|
||||
## Task
|
||||
For each page in [{page_list}], generate {variants_count} variant(s):
|
||||
- {page}-variant-{n}.html (semantic HTML5)
|
||||
- {page}-variant-{n}.css (token-driven, no hardcoded values)
|
||||
- {page}-variant-{n}-notes.md (implementation notes)
|
||||
|
||||
## Layout Strategy
|
||||
Use a consistent, modern layout approach across all variants. Variants should differ in:
|
||||
- Component arrangement (e.g., sidebar left vs. right)
|
||||
- Content density (spacious vs. compact)
|
||||
- Navigation style (top-nav vs. side-nav)
|
||||
|
||||
## Token Usage Requirements
|
||||
- STRICT adherence to design-tokens.json
|
||||
- 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 (e.g., #4F46E5, 16px) allowed
|
||||
|
||||
## HTML Requirements
|
||||
- Semantic HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
||||
- ARIA attributes for accessibility (role, aria-label, aria-labelledby)
|
||||
- Proper heading hierarchy (h1 → h2 → h3)
|
||||
- Mobile-first responsive design
|
||||
|
||||
## CSS Requirements
|
||||
- Use CSS custom properties from design-tokens.json
|
||||
- Mobile-first media queries using token breakpoints
|
||||
- No inline styles
|
||||
- BEM or semantic class naming
|
||||
|
||||
## Responsive Design
|
||||
- Mobile: 375px+ (single column, stacked)
|
||||
- Tablet: var(--breakpoint-md) (adapted layout)
|
||||
- Desktop: var(--breakpoint-lg)+ (full layout)
|
||||
|
||||
## Deliverables
|
||||
For each page-variant combination:
|
||||
1. HTML file with token-driven structure
|
||||
2. CSS file with custom property references
|
||||
3. Notes file with implementation details
|
||||
|
||||
Total files: {len(page_list) * variants_count * 3}
|
||||
"
|
||||
```
|
||||
|
||||
#### B. Creative Mode
|
||||
Execute if `mode == "creative"`. Parallel agents explore diverse layout strategies.
|
||||
|
||||
```bash
|
||||
# Define diverse layout strategies
|
||||
layout_strategies = [
|
||||
"F-Pattern: Traditional reading flow with strong visual hierarchy",
|
||||
"Asymmetric Grid: Dynamic, modern layout with intentional imbalance",
|
||||
"Card-Based Modular: Flexible card grid for content-heavy pages",
|
||||
"Z-Pattern: Zigzag visual flow for conversion-focused layouts",
|
||||
"Split-Screen: Dramatic 50/50 division for dual-focus content",
|
||||
"Bento Box: Japanese-inspired grid with varied cell sizes",
|
||||
"Full-Bleed Hero: Large hero section with scrolling content",
|
||||
"Sidebar-First: Prominent sidebar navigation with content area"
|
||||
]
|
||||
|
||||
# Launch N agents × M pages in parallel
|
||||
CREATE: {base_path}/.design/prototypes/
|
||||
|
||||
FOR page IN page_list:
|
||||
FOR i IN range(creative_count):
|
||||
layout = layout_strategies[i % len(layout_strategies)]
|
||||
|
||||
Task(conceptual-planning-agent): "
|
||||
[UI_GENERATION_CREATIVE]
|
||||
|
||||
Generate creative UI prototype: {page} (Variant {i+1})
|
||||
|
||||
## Context
|
||||
PAGE: {page}
|
||||
LAYOUT_STRATEGY: {layout}
|
||||
VARIANT_NUMBER: {i+1}
|
||||
OUTPUT: {base_path}/.design/prototypes/
|
||||
|
||||
## Input Files
|
||||
- Design Tokens: {base_path}/.design/style-consolidation/design-tokens.json
|
||||
- Style Guide: {base_path}/.design/style-consolidation/style-guide.md
|
||||
{IF integrated: - Requirements: {base_path}/.brainstorming/synthesis-specification.md}
|
||||
|
||||
## Task
|
||||
Generate a single prototype for {page} using '{layout}' layout:
|
||||
- {page}-creative-variant-{i+1}.html
|
||||
- {page}-creative-variant-{i+1}.css
|
||||
- {page}-creative-variant-{i+1}-notes.md
|
||||
|
||||
## Layout Focus
|
||||
This variant MUST follow '{layout}' layout strategy.
|
||||
Be bold and exploratory - this is for design exploration.
|
||||
|
||||
## Token Usage Requirements (STRICT)
|
||||
- All colors: var(--color-*) from design-tokens.json
|
||||
- All spacing: var(--spacing-*) from design-tokens.json
|
||||
- All typography: var(--font-*) from design-tokens.json
|
||||
- NO hardcoded values allowed
|
||||
|
||||
## HTML/CSS/Accessibility Requirements
|
||||
- Semantic HTML5 with ARIA attributes
|
||||
- Mobile-first responsive design
|
||||
- Token-driven styling only
|
||||
- Unique layout interpretation of '{layout}' strategy
|
||||
|
||||
## Deliverables
|
||||
1. HTML file embodying '{layout}' layout
|
||||
2. CSS file with strict token usage
|
||||
3. Notes explaining layout decisions
|
||||
"
|
||||
|
||||
# Wait for all {len(page_list) * creative_count} tasks to complete
|
||||
```
|
||||
|
||||
### Phase 3: Generate Preview Files
|
||||
|
||||
```bash
|
||||
# Generate preview utilities
|
||||
Write({base_path}/.design/prototypes/index.html) # Master navigation
|
||||
Write({base_path}/.design/prototypes/compare.html) # Side-by-side comparison
|
||||
Write({base_path}/.design/prototypes/PREVIEW.md) # Setup instructions
|
||||
Write({base_path}/.design/prototypes/design-tokens.css) # CSS custom properties
|
||||
```
|
||||
|
||||
**index.html Template**:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI Prototypes Preview - {session_id}</title>
|
||||
<style>
|
||||
body { font-family: system-ui; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
|
||||
h1 { color: #2563eb; }
|
||||
.prototype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
|
||||
.prototype-card { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; transition: box-shadow 0.2s; }
|
||||
.prototype-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.prototype-card h3 { margin: 0 0 0.5rem; color: #1f2937; }
|
||||
.prototype-card .meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem; }
|
||||
.prototype-card a { display: inline-block; margin-right: 0.5rem; color: #2563eb; text-decoration: none; }
|
||||
.prototype-card a:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎨 UI Prototypes Preview</h1>
|
||||
<p><strong>Session:</strong> {session_id} | <strong>Mode:</strong> {mode}</p>
|
||||
<p><a href="compare.html">📊 Compare Variants</a> | <a href="PREVIEW.md">📖 Instructions</a></p>
|
||||
|
||||
<div class="prototype-grid">
|
||||
{FOR each generated file:
|
||||
<div class="prototype-card">
|
||||
<h3>{page} - Variant {n}</h3>
|
||||
<div class="meta">{mode} mode</div>
|
||||
<a href="{filename}.html" target="_blank">View →</a>
|
||||
<a href="{filename}-notes.md">Notes</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**design-tokens.css Template**:
|
||||
```css
|
||||
/* Auto-generated from design-tokens.json */
|
||||
:root {
|
||||
/* Colors - Brand */
|
||||
--color-brand-primary: {value};
|
||||
--color-brand-secondary: {value};
|
||||
--color-brand-accent: {value};
|
||||
|
||||
/* Colors - Surface */
|
||||
--color-surface-background: {value};
|
||||
--color-surface-elevated: {value};
|
||||
--color-surface-overlay: {value};
|
||||
|
||||
/* Typography */
|
||||
--font-family-heading: {value};
|
||||
--font-family-body: {value};
|
||||
--font-size-base: {value};
|
||||
/* ... all tokens as CSS custom properties ... */
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: TodoWrite & Completion
|
||||
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Detect mode and load design system", status: "completed", activeForm: "Loading design system"},
|
||||
{content: "Generate {total_count} UI prototypes", status: "completed", activeForm: "Generating prototypes"},
|
||||
{content: "Generate preview files", status: "completed", activeForm: "Generating preview"}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
✅ UI generation complete for session: {session_id}
|
||||
|
||||
Mode: {mode}
|
||||
Pages: {page_list}
|
||||
{IF standard: Variants per page: {variants_count}}
|
||||
{IF creative: Creative variants per page: {creative_count}}
|
||||
|
||||
Generated {total_count} prototypes:
|
||||
{FOR each file: - {filename}}
|
||||
|
||||
📂 Location: {base_path}/.design/prototypes/
|
||||
|
||||
🌐 Preview:
|
||||
1. Quick: Open index.html in browser
|
||||
2. Server: cd prototypes && python -m http.server 8080
|
||||
3. Compare: Open compare.html for side-by-side view
|
||||
|
||||
Next: /workflow:ui-design:update --session {session_id}
|
||||
|
||||
Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
.workflow/WFS-{session}/.design/prototypes/
|
||||
├── index.html # Preview index (master navigation)
|
||||
├── compare.html # Side-by-side comparison
|
||||
├── PREVIEW.md # Preview instructions
|
||||
├── design-tokens.css # CSS custom properties
|
||||
├── {page}-variant-{n}.html
|
||||
├── {page}-variant-{n}.css
|
||||
├── {page}-variant-{n}-notes.md
|
||||
└── ... (all generated prototypes)
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **No design tokens found**: Run `/workflow:ui-design:consolidate` first
|
||||
- **Invalid page names**: Extract from synthesis-specification.md or error
|
||||
- **Agent execution errors**: Report details, suggest retry
|
||||
- **Missing requirements**: Continue with design tokens only
|
||||
|
||||
## Quality Checks
|
||||
After generation, ensure:
|
||||
- [ ] All CSS values reference design token custom properties
|
||||
- [ ] No hardcoded colors, spacing, or typography
|
||||
- [ ] Semantic HTML structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Responsive design implemented
|
||||
- [ ] Mobile-first approach
|
||||
|
||||
## Key Improvements Over Previous Version
|
||||
|
||||
1. **Unified Execution Model**: Only `Task(conceptual-planning-agent)` - no CLI tools
|
||||
2. **Dual-Mode Simplicity**: Standard (consistent) or Creative (exploratory)
|
||||
3. **Explicit Layout Strategies**: Creative mode uses predefined layout patterns
|
||||
4. **Preview Enhancements**: index.html, compare.html, and design-tokens.css
|
||||
5. **Streamlined**: Clear, consistent agent invocation patterns
|
||||
|
||||
## Integration Points
|
||||
- **Input**: design-tokens.json, style-guide.md from `/workflow:ui-design:consolidate`
|
||||
- **Output**: HTML/CSS prototypes for `/workflow:ui-design:update`
|
||||
- **Context**: synthesis-specification.md for page requirements and content guidance
|
||||
348
.claude/commands/workflow/ui-design/update.md
Normal file
348
.claude/commands/workflow/ui-design/update.md
Normal file
@@ -0,0 +1,348 @@
|
||||
---
|
||||
name: update
|
||||
description: Update brainstorming artifacts with finalized design system
|
||||
usage: /workflow:ui-design:update --session <session_id> [--selected-prototypes "<list>"]
|
||||
argument-hint: "--session WFS-session-id [--selected-prototypes \"dashboard-variant-1,auth-variant-2\"]"
|
||||
examples:
|
||||
- /workflow:ui-design:update --session WFS-auth
|
||||
- /workflow:ui-design:update --session WFS-dashboard --selected-prototypes "dashboard-variant-1"
|
||||
allowed-tools: Read(*), Write(*), TodoWrite(*), Glob(*), Bash(*)
|
||||
---
|
||||
|
||||
# Design Update Command
|
||||
|
||||
## Overview
|
||||
Synchronize finalized design system (tokens, style guide, selected prototypes) back to brainstorming artifacts, preparing for `/workflow:plan` phase consumption.
|
||||
|
||||
## Core Philosophy
|
||||
- **Main Claude Execution**: Direct updates by main Claude (avoid Agent context loss, following synthesis pattern)
|
||||
- **Reference-Based Integration**: Use @ references, not content duplication
|
||||
- **Synthesis Alignment**: Update synthesis-specification.md UI/UX Guidelines section
|
||||
- **UI Designer Sync**: Mirror design system to ui-designer/style-guide.md
|
||||
- **Plan-Ready Output**: Ensure design artifacts discoverable by task-generate
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Session & Design System Validation
|
||||
```bash
|
||||
# Validate session and verify design system completeness
|
||||
CHECK: .workflow/.active-* marker files
|
||||
VALIDATE: session_id matches active session
|
||||
|
||||
VERIFY required artifacts:
|
||||
- .design/style-consolidation/design-tokens.json
|
||||
- .design/style-consolidation/style-guide.md
|
||||
- .design/style-consolidation/tailwind.config.js
|
||||
- .design/prototypes/*.html (at least one prototype)
|
||||
|
||||
IF --selected-prototypes provided:
|
||||
VALIDATE: Specified prototypes exist
|
||||
ELSE:
|
||||
AUTO-SELECT: Use all generated prototypes
|
||||
```
|
||||
|
||||
### Phase 2: Load Design System Context
|
||||
**Direct Claude Code Execution** (no Agent invocation)
|
||||
|
||||
```bash
|
||||
# Load all design system artifacts
|
||||
Read(.workflow/WFS-{session}/.design/style-consolidation/design-tokens.json)
|
||||
Read(.workflow/WFS-{session}/.design/style-consolidation/style-guide.md)
|
||||
Read(.workflow/WFS-{session}/.design/style-consolidation/tailwind.config.js)
|
||||
Read(.workflow/WFS-{session}/.design/style-consolidation/validation-report.json)
|
||||
|
||||
# Load selected prototype files
|
||||
FOR each selected_prototype IN selected_prototypes:
|
||||
Read(.workflow/WFS-{session}/.design/prototypes/{selected_prototype}.html)
|
||||
Read(.workflow/WFS-{session}/.design/prototypes/{selected_prototype}-notes.md)
|
||||
|
||||
# Load target brainstorming artifacts
|
||||
Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md) [if exists]
|
||||
```
|
||||
|
||||
### Phase 3: Update Synthesis Specification
|
||||
**Direct Write by Main Claude**
|
||||
|
||||
Update `.brainstorming/synthesis-specification.md`:
|
||||
|
||||
```markdown
|
||||
## UI/UX Guidelines
|
||||
|
||||
### Design System Reference
|
||||
**Finalized Design Tokens**: @../.design/style-consolidation/design-tokens.json
|
||||
**Style Guide**: @../.design/style-consolidation/style-guide.md
|
||||
**Tailwind Configuration**: @../.design/style-consolidation/tailwind.config.js
|
||||
|
||||
### Design Philosophy
|
||||
[Extract philosophy section from style-guide.md]
|
||||
|
||||
### Token System Overview
|
||||
**Colors**: OKLCH-based color system with semantic naming
|
||||
- Brand: primary, secondary, accent
|
||||
- Surface: background, elevated, sunken
|
||||
- Semantic: success, warning, error, info
|
||||
|
||||
**Typography**: {font_family_count} font families, {scale_count}-step scale
|
||||
- Heading: {heading_font}
|
||||
- Body: {body_font}
|
||||
- Monospace: {mono_font}
|
||||
|
||||
**Spacing**: {scale_count}-step scale ({min}rem to {max}rem)
|
||||
|
||||
**Components**: Border radius, shadows, and component tokens defined
|
||||
|
||||
### Implementation Requirements
|
||||
**Token Adherence**: All UI implementations MUST use design token CSS custom properties
|
||||
**Accessibility**: WCAG AA compliance validated in design-tokens.json
|
||||
**Responsive**: Mobile-first design using token-based breakpoints
|
||||
**Component Patterns**: Follow patterns documented in style-guide.md
|
||||
|
||||
### Reference Prototypes
|
||||
[For each selected prototype:]
|
||||
- **{page_name}**: @../.design/prototypes/{prototype}.html
|
||||
- Layout: {layout_description from notes}
|
||||
- Components: {component_list from notes}
|
||||
- Token Usage: {token_usage_summary from notes}
|
||||
|
||||
### Design System Assets (for task-generate consumption)
|
||||
```json
|
||||
{
|
||||
"design_tokens": ".design/style-consolidation/design-tokens.json",
|
||||
"style_guide": ".design/style-consolidation/style-guide.md",
|
||||
"tailwind_config": ".design/style-consolidation/tailwind.config.js",
|
||||
"prototypes": [
|
||||
".design/prototypes/{prototype-1}.html",
|
||||
".design/prototypes/{prototype-2}.html"
|
||||
]
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
**Implementation**:
|
||||
```bash
|
||||
# Edit synthesis-specification.md
|
||||
Edit(
|
||||
file_path=".workflow/WFS-{session}/.brainstorming/synthesis-specification.md",
|
||||
old_string="## UI/UX Guidelines\n[existing content or empty]",
|
||||
new_string="## UI/UX Guidelines\n\n[new design system content with @ references]"
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 4: Update UI Designer Analysis
|
||||
**Create or update** `.brainstorming/ui-designer/style-guide.md`:
|
||||
|
||||
```markdown
|
||||
# UI Designer Style Guide
|
||||
|
||||
## Design System Integration
|
||||
This style guide integrates the finalized design system from the design refinement phase.
|
||||
|
||||
**Source Design Tokens**: @../../.design/style-consolidation/design-tokens.json
|
||||
**Source Style Guide**: @../../.design/style-consolidation/style-guide.md
|
||||
|
||||
## Design Philosophy
|
||||
[Extract philosophy section from source style-guide.md]
|
||||
|
||||
## Design Tokens Reference
|
||||
For complete token definitions, see: @../../.design/style-consolidation/design-tokens.json
|
||||
|
||||
### Color System
|
||||
[Summary of color tokens]
|
||||
|
||||
### Typography System
|
||||
[Summary of typography tokens]
|
||||
|
||||
### Spacing System
|
||||
[Summary of spacing tokens]
|
||||
|
||||
### Component Tokens
|
||||
[Summary of component tokens: border-radius, shadows]
|
||||
|
||||
## Component Patterns
|
||||
[Reference to style-guide.md component patterns]
|
||||
|
||||
## Implementation Guidelines
|
||||
1. **Use CSS Custom Properties**: All styles reference design tokens
|
||||
2. **Follow Semantic HTML**: Use HTML5 semantic elements
|
||||
3. **Maintain Accessibility**: WCAG AA compliance required
|
||||
4. **Responsive Design**: Mobile-first with token-based breakpoints
|
||||
|
||||
## Reference Prototypes
|
||||
[Links to selected prototypes with descriptions]
|
||||
|
||||
---
|
||||
*Auto-generated by /workflow:design:design-update*
|
||||
*Last updated: {timestamp}*
|
||||
```
|
||||
|
||||
**Implementation**:
|
||||
```bash
|
||||
Write(
|
||||
file_path=".workflow/WFS-{session}/.brainstorming/ui-designer/style-guide.md",
|
||||
content="[generated style guide content with @ references]"
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 5: Create Design System Symlinks (Optional)
|
||||
**For easier task-generate discovery**
|
||||
|
||||
```bash
|
||||
# Create read-only mirror of key design files in brainstorming space
|
||||
bash(cd .workflow/WFS-{session}/.brainstorming && \
|
||||
ln -s ../.design/style-consolidation/design-tokens.json design-tokens.json && \
|
||||
ln -s ../.design/style-consolidation/style-guide.md design-style-guide.md)
|
||||
```
|
||||
|
||||
### Phase 6: TodoWrite Integration
|
||||
```javascript
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{
|
||||
content: "Validate session and design system completeness",
|
||||
status: "completed",
|
||||
activeForm: "Validating design system"
|
||||
},
|
||||
{
|
||||
content: "Load design tokens, style guide, and selected prototypes",
|
||||
status: "completed",
|
||||
activeForm: "Loading design artifacts"
|
||||
},
|
||||
{
|
||||
content: "Update synthesis-specification.md with design system references",
|
||||
status: "completed",
|
||||
activeForm: "Updating synthesis specification"
|
||||
},
|
||||
{
|
||||
content: "Create or update ui-designer/style-guide.md",
|
||||
status: "completed",
|
||||
activeForm: "Updating UI designer style guide"
|
||||
},
|
||||
{
|
||||
content: "Create design system symlinks for task-generate discovery",
|
||||
status: "completed",
|
||||
activeForm: "Creating artifact symlinks"
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
**Updated Files**:
|
||||
```
|
||||
.workflow/WFS-{session}/.brainstorming/
|
||||
├── synthesis-specification.md # Updated with UI/UX Guidelines section
|
||||
├── ui-designer/
|
||||
│ └── style-guide.md # New or updated comprehensive style guide
|
||||
├── design-tokens.json # Symlink to ../.design/style-consolidation/design-tokens.json
|
||||
└── design-style-guide.md # Symlink to ../.design/style-consolidation/style-guide.md
|
||||
```
|
||||
|
||||
**Reference Structure** (@ references in synthesis-specification.md):
|
||||
- `@../.design/style-consolidation/design-tokens.json`
|
||||
- `@../.design/style-consolidation/style-guide.md`
|
||||
- `@../.design/style-consolidation/tailwind.config.js`
|
||||
- `@../.design/prototypes/{prototype}.html`
|
||||
|
||||
## Integration with task-generate
|
||||
|
||||
After this update, `/workflow:tools:task-generate` will discover:
|
||||
|
||||
**In context.artifacts**:
|
||||
```json
|
||||
{
|
||||
"artifacts": [
|
||||
{
|
||||
"type": "synthesis_specification",
|
||||
"path": ".brainstorming/synthesis-specification.md"
|
||||
},
|
||||
{
|
||||
"type": "design_tokens",
|
||||
"path": ".design/style-consolidation/design-tokens.json"
|
||||
},
|
||||
{
|
||||
"type": "style_guide",
|
||||
"path": ".design/style-consolidation/style-guide.md"
|
||||
},
|
||||
{
|
||||
"type": "tailwind_config",
|
||||
"path": ".design/style-consolidation/tailwind.config.js"
|
||||
},
|
||||
{
|
||||
"type": "ui_prototypes",
|
||||
"paths": [
|
||||
".design/prototypes/dashboard-variant-1.html",
|
||||
".design/prototypes/auth-variant-2.html"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**In flow_control.pre_analysis** (for UI tasks):
|
||||
```json
|
||||
{
|
||||
"step": "load_design_tokens",
|
||||
"action": "Load design system tokens and style guide",
|
||||
"commands": [
|
||||
"bash(cat .workflow/WFS-{session}/.design/style-consolidation/design-tokens.json)",
|
||||
"bash(cat .workflow/WFS-{session}/.design/style-consolidation/style-guide.md)"
|
||||
],
|
||||
"output_to": "design_system_context",
|
||||
"on_error": "warn"
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
- **Missing design tokens**: Error, run `/workflow:ui-design:consolidate` first
|
||||
- **Missing prototypes**: Error, run `/workflow:ui-design:generate` first
|
||||
- **synthesis-specification.md not found**: Warning, create minimal version
|
||||
- **Edit conflicts**: Preserve existing content, append design system section
|
||||
- **Symlink failures**: Warning only, continue with @ references
|
||||
|
||||
## Validation Checks
|
||||
After update, verify:
|
||||
- [ ] synthesis-specification.md contains UI/UX Guidelines section
|
||||
- [ ] UI/UX Guidelines include @ references to design system files
|
||||
- [ ] ui-designer/style-guide.md created or updated
|
||||
- [ ] design-tokens.json symlink created (if applicable)
|
||||
- [ ] All referenced files exist and are readable
|
||||
|
||||
## Integration Points
|
||||
- **Input**: design-tokens.json, style-guide.md, prototypes from design phase
|
||||
- **Output**: Updated synthesis-specification.md, ui-designer/style-guide.md
|
||||
- **Next Phase**: `/workflow:plan` can now discover and utilize design system
|
||||
|
||||
## Completion Message
|
||||
|
||||
```
|
||||
Design system update complete for session: WFS-{session}
|
||||
|
||||
Updated artifacts:
|
||||
✓ synthesis-specification.md - UI/UX Guidelines section added
|
||||
✓ ui-designer/style-guide.md - Comprehensive style guide created
|
||||
✓ Design system references: @ notation for all design files
|
||||
|
||||
Design system assets ready for task generation:
|
||||
- design-tokens.json ({token_count} tokens)
|
||||
- style-guide.md (comprehensive component patterns)
|
||||
- tailwind.config.js (Tailwind theme extension)
|
||||
- {prototype_count} reference prototypes
|
||||
|
||||
Next: /workflow:plan [--agent] "<task description>"
|
||||
The plan phase will automatically discover and utilize the design system.
|
||||
```
|
||||
|
||||
## Main Claude Direct Execution Rationale
|
||||
|
||||
This command is executed directly by main Claude (not delegated to an Agent) because:
|
||||
|
||||
1. **Context Preservation**: Main Claude has full session context and conversation memory
|
||||
2. **Integration Complexity**: Requires understanding multiple artifact relationships
|
||||
3. **Reference Accuracy**: @ reference generation needs precise path resolution
|
||||
4. **Synthesis Pattern**: Follows the same direct-execution pattern as `/workflow:brainstorm:synthesis`
|
||||
5. **Minimal Transformation**: Primarily reference integration, not generative analysis
|
||||
6. **Error Recovery**: Main Claude can better handle edit conflicts and missing files
|
||||
|
||||
This approach ensures reliable, context-aware integration without Agent handoff overhead.
|
||||
Reference in New Issue
Block a user