mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
Enhance UI Design Workflow: Parameter Validation and Documentation Improvements
- Added validation for --style-variants in generate command to ensure it matches actual style directories, preventing errors during prototype generation. - Updated ui-instantiate-prototypes.sh script to validate style variants against existing directories, providing warnings and auto-correcting when necessary. - Improved clarity in generate.md documentation regarding parameters, default values, and auto-detection mechanisms. - Created a comprehensive UI Design Workflow Parameter Clarity Report to address inconsistencies in parameter naming and documentation across extract, consolidate, and generate commands. - Unified parameter naming conventions to reduce confusion and improve user experience. - Enhanced user guidance with a new README.md for the UI Design Workflow, outlining best practices and common mistakes.
This commit is contained in:
catlog22
@@ -3,10 +3,26 @@ name: consolidate
|
||||
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]"
|
||||
parameters:
|
||||
- name: --variants
|
||||
type: number
|
||||
default: all available variants from style-cards.json
|
||||
description: "Number of style variants to consolidate (1-N). Processes first N variants from style-cards.json. Creates style-N directories."
|
||||
- name: --layout-variants
|
||||
type: number
|
||||
default: 3
|
||||
description: "Number of layout strategies to generate (1-5). Creates dynamic layout plans based on project context and modern trends."
|
||||
- name: --session
|
||||
type: string
|
||||
description: "Workflow session ID (e.g., WFS-auth). Finds latest design run in session directory."
|
||||
- name: --base-path
|
||||
type: string
|
||||
description: "Custom base path for input/output. Overrides --session if provided."
|
||||
examples:
|
||||
- /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
|
||||
- /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533" # Uses all variants, default 3 layouts
|
||||
- /workflow:ui-design:consolidate --session WFS-auth --layout-variants 2 # Process all variants from extraction
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
|
||||
---
|
||||
|
||||
@@ -228,17 +244,11 @@ FILE 1: style-{variant_id}/design-tokens.json
|
||||
"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": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." },
|
||||
"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", ..., "24": "6rem" },
|
||||
"typography": { "font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...} },
|
||||
"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" }
|
||||
"breakpoints": { "sm": "640px", ..., "2xl": "1536px" }
|
||||
}
|
||||
|
||||
FILE 2: style-{variant_id}/style-guide.md
|
||||
@@ -372,111 +382,33 @@ The generate command will read layout strategies from layout-strategies.json.
|
||||
|
||||
## design-tokens.json Format
|
||||
|
||||
Complete token structure with OKLCH colors and semantic naming:
|
||||
**Token structure** (all variants follow identical structure with different values):
|
||||
|
||||
```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)"
|
||||
}
|
||||
"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": "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"
|
||||
}
|
||||
"font_family": { "heading": "...", "body": "...", "mono": "..." },
|
||||
"font_size": { "xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." },
|
||||
"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"
|
||||
}
|
||||
"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" }
|
||||
}
|
||||
```
|
||||
|
||||
**Requirements**: All colors in OKLCH format, complete token coverage, semantic naming
|
||||
|
||||
## Error Handling
|
||||
|
||||
- **No style cards found**: Report error, suggest running `/workflow:ui-design:extract` first
|
||||
|
||||
@@ -3,11 +3,29 @@ name: extract
|
||||
description: Extract design style from reference images or text prompts using Claude's analysis
|
||||
usage: /workflow:ui-design:extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>]
|
||||
argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3]"
|
||||
parameters:
|
||||
- name: --variants
|
||||
type: number
|
||||
default: 1
|
||||
description: "Number of design variants to extract (1-5). Each variant will be maximally contrasting. Generates style-cards.json with variant-N IDs."
|
||||
- name: --images
|
||||
type: string
|
||||
description: "Glob pattern for reference images (e.g., 'refs/*.png'). Supports PNG, JPG, WebP."
|
||||
- name: --prompt
|
||||
type: string
|
||||
description: "Text description of desired style (e.g., 'Modern minimalist blog'). Can be combined with --images."
|
||||
- name: --session
|
||||
type: string
|
||||
description: "Workflow session ID (e.g., WFS-auth). Creates design run in session directory."
|
||||
- name: --base-path
|
||||
type: string
|
||||
description: "Custom base path for output. Overrides --session if provided."
|
||||
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
|
||||
- /workflow:ui-design:extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --variants 3
|
||||
- /workflow:ui-design:extract --prompt "Bold vibrant" --variants 1 # Single variant (default)
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
|
||||
---
|
||||
|
||||
@@ -82,108 +100,259 @@ IF input_mode IN ["text", "hybrid"]:
|
||||
CREATE: {base_path}/style-extraction/
|
||||
```
|
||||
|
||||
### Phase 1.5: Design Trend Research (Exa MCP)
|
||||
### Phase 0.5: AI-Driven Design Space Divergence
|
||||
|
||||
```bash
|
||||
# Step 1: Load project context to inform search queries
|
||||
# Step 1: Load project context to inform design space analysis
|
||||
project_context = ""
|
||||
IF exists({base_path}/.brainstorming/synthesis-specification.md):
|
||||
project_context = Read({base_path}/.brainstorming/synthesis-specification.md)
|
||||
ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
|
||||
project_context = Read({base_path}/.brainstorming/ui-designer/analysis.md)
|
||||
|
||||
# Extract hints from context and prompt
|
||||
search_hints = []
|
||||
IF prompt_guidance:
|
||||
search_hints.append(extract_design_keywords(prompt_guidance)) # e.g., "minimalist", "dark theme", "Linear.app"
|
||||
IF project_context:
|
||||
search_hints.append(extract_project_type(project_context)) # e.g., "dashboard", "SaaS", "blog"
|
||||
REPORT: "🎨 Analyzing design space to generate maximally contrasting directions..."
|
||||
|
||||
# Step 2: Search for design trends using Exa MCP
|
||||
REPORT: "🔍 Researching modern design trends and color theory..."
|
||||
# Step 2: AI-driven divergent direction generation
|
||||
divergence_prompt = """
|
||||
Analyze the user's design requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions.
|
||||
|
||||
# Build comprehensive search query
|
||||
exa_queries = [
|
||||
"modern UI design color palettes trends 2024 2025 {search_hints}",
|
||||
"typography web design best practices system fonts {search_hints}",
|
||||
"design system color theory accessibility WCAG {search_hints}",
|
||||
"UI spacing rhythm layout patterns {search_hints}"
|
||||
]
|
||||
USER INPUT:
|
||||
{IF prompt_guidance}
|
||||
Prompt: "{prompt_guidance}"
|
||||
{ENDIF}
|
||||
|
||||
design_trends = {}
|
||||
FOR query IN exa_queries:
|
||||
category = identify_category(query) # "colors", "typography", "layout", "accessibility"
|
||||
design_trends[category] = mcp__exa__get_code_context_exa(
|
||||
query=query,
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
{IF project_context}
|
||||
Project Context Summary:
|
||||
{extract_key_points(project_context, max_lines=10)}
|
||||
{ENDIF}
|
||||
|
||||
REPORT: "✅ Design research complete. Found trends for: colors, typography, layout, accessibility"
|
||||
{IF images}
|
||||
Reference Images: {image_count} images will be analyzed in next phase
|
||||
{ENDIF}
|
||||
|
||||
DESIGN ATTRIBUTE SPACE (use to maximize contrast):
|
||||
- Color Saturation: [monochrome, muted, moderate, vibrant, hypersaturated]
|
||||
- Visual Weight: [minimal, light, balanced, bold, heavy]
|
||||
- Formality: [playful, casual, professional, formal, luxury]
|
||||
- Organic vs Geometric: [organic/fluid, soft, balanced, geometric, brutalist]
|
||||
- Innovation: [timeless, modern, contemporary, trendy, experimental]
|
||||
- Density: [spacious, airy, balanced, compact, dense]
|
||||
|
||||
TASK:
|
||||
1. Identify the design space center point from user requirements
|
||||
2. Generate {variants_count} design directions that:
|
||||
- Are MAXIMALLY DISTANT from each other in attribute space
|
||||
- Each occupies a distinct region/quadrant of the design spectrum
|
||||
- Together provide diverse aesthetic options for the user
|
||||
- Are contextually appropriate for the project type
|
||||
- Have clear, memorable philosophical differences
|
||||
|
||||
3. For each direction, generate:
|
||||
- Specific search keywords for MCP research (3-5 keywords)
|
||||
- Anti-keywords to avoid (2-3 keywords that would reduce contrast)
|
||||
- Clear rationale explaining why this contrasts with other variants
|
||||
|
||||
OUTPUT FORMAT: Valid JSON only, no markdown:
|
||||
{
|
||||
"design_space_center": {
|
||||
"color_saturation": "moderate",
|
||||
"visual_weight": "balanced",
|
||||
"formality": "professional",
|
||||
"organic_geometric": "balanced",
|
||||
"innovation": "contemporary",
|
||||
"density": "balanced"
|
||||
},
|
||||
"divergent_directions": [
|
||||
{
|
||||
"id": "variant-1",
|
||||
"philosophy_name": "Brief name 2-3 words (e.g., 'Minimal Brutalist')",
|
||||
"design_attributes": {
|
||||
"color_saturation": "monochrome",
|
||||
"visual_weight": "minimal",
|
||||
"formality": "professional",
|
||||
"organic_geometric": "brutalist",
|
||||
"innovation": "timeless",
|
||||
"density": "spacious"
|
||||
},
|
||||
"search_keywords": ["minimal", "brutalist", "monochrome", "geometric", "Swiss design"],
|
||||
"anti_keywords": ["decorative", "colorful", "organic"],
|
||||
"rationale": "Extreme minimalism with geometric rigor, contrasts with any ornamental or colorful approaches"
|
||||
}
|
||||
// ... {variants_count} total directions
|
||||
],
|
||||
"contrast_verification": {
|
||||
"min_pairwise_distance": "0.75",
|
||||
"strategy": "Brief explanation of how maximum contrast was achieved"
|
||||
}
|
||||
}
|
||||
|
||||
RULES:
|
||||
- Output ONLY valid JSON, no markdown code blocks or explanations
|
||||
- Maximize inter-variant distance in attribute space
|
||||
- Ensure each variant occupies a distinct aesthetic region
|
||||
- Avoid overlapping attribute combinations
|
||||
- All directions must be contextually appropriate for: {project_context or "general web UI"}
|
||||
- Philosophy names should be memorable and evocative
|
||||
- Search keywords should be specific and actionable for web research
|
||||
"""
|
||||
|
||||
# Execute AI analysis
|
||||
divergence_response = Claude_Native_Analysis(divergence_prompt)
|
||||
divergent_directions = parse_json(divergence_response)
|
||||
|
||||
REPORT: "✅ Generated {variants_count} contrasting design directions:"
|
||||
FOR direction IN divergent_directions.divergent_directions:
|
||||
REPORT: " - {direction.philosophy_name}: {direction.rationale}"
|
||||
|
||||
# Store divergent directions for next phase
|
||||
design_space_analysis = divergent_directions
|
||||
```
|
||||
|
||||
### Phase 2: Unified Style Analysis (Claude with Design Trends)
|
||||
### Phase 1.5: Variant-Specific Design Trend Research (Exa MCP)
|
||||
|
||||
This is a single-pass analysis that replaces all external tool calls.
|
||||
```bash
|
||||
# Step 1: Execute independent MCP research for each variant
|
||||
REPORT: "🔍 Researching design trends for each variant independently..."
|
||||
|
||||
design_trends = {}
|
||||
|
||||
FOR direction IN design_space_analysis.divergent_directions:
|
||||
variant_id = direction.id
|
||||
philosophy = direction.philosophy_name
|
||||
keywords = direction.search_keywords
|
||||
anti_keywords = direction.anti_keywords
|
||||
|
||||
REPORT: " → Researching {philosophy} ({variant_id})..."
|
||||
|
||||
# Build variant-specific search queries
|
||||
variant_queries = [
|
||||
# Colors: philosophy-specific palette trends
|
||||
f"{philosophy} UI design color palettes {' '.join(keywords[:3])} 2024 2025",
|
||||
|
||||
# Typography: philosophy-specific font trends
|
||||
f"{philosophy} typography trends {' '.join(keywords[:3])} web design 2024",
|
||||
|
||||
# Layout: philosophy-specific patterns
|
||||
f"{philosophy} layout patterns {' '.join(keywords[:3])} design systems 2024",
|
||||
|
||||
# Contrast query: emphasize differentiation
|
||||
f"design systems {philosophy} NOT {' NOT '.join(anti_keywords[:2])}"
|
||||
]
|
||||
|
||||
# Execute MCP searches for this variant
|
||||
design_trends[variant_id] = {
|
||||
"philosophy": philosophy,
|
||||
"attributes": direction.design_attributes,
|
||||
"keywords": keywords,
|
||||
"anti_keywords": anti_keywords,
|
||||
"research": {}
|
||||
}
|
||||
|
||||
FOR query IN variant_queries:
|
||||
category = identify_category(query) # "colors", "typography", "layout", "contrast"
|
||||
design_trends[variant_id].research[category] = mcp__exa__get_code_context_exa(
|
||||
query=query,
|
||||
tokensNum=2000 # Increased for more detailed guidance
|
||||
)
|
||||
|
||||
REPORT: " ✅ {philosophy} research complete"
|
||||
|
||||
# Step 2: Gather shared accessibility guidelines (all variants)
|
||||
REPORT: " → Researching universal accessibility guidelines..."
|
||||
shared_accessibility = mcp__exa__get_code_context_exa(
|
||||
query="WCAG 2.2 accessibility color contrast ARIA best practices 2024",
|
||||
tokensNum=1500
|
||||
)
|
||||
|
||||
REPORT: "✅ All variant-specific design research complete"
|
||||
```
|
||||
|
||||
### Phase 2: Variant-Specific Style Synthesis (Claude with Divergent Research)
|
||||
|
||||
This is a single-pass analysis that generates each variant based on its specific design direction and research.
|
||||
|
||||
**Analysis Prompt Template**:
|
||||
```
|
||||
Analyze the following design references and generate {variants_count} distinct design style proposals informed by current design trends.
|
||||
Generate {variants_count} design style proposals, each guided by its pre-analyzed design direction and independent trend research.
|
||||
|
||||
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
|
||||
Analyze these images through the lens of each variant's design philosophy
|
||||
{ENDIF}
|
||||
|
||||
{IF input_mode IN ["text", "hybrid"]}
|
||||
TEXT GUIDANCE: "{prompt_guidance}"
|
||||
Use this to guide the aesthetic direction and feature requirements
|
||||
Apply this guidance while maintaining each variant's distinct aesthetic direction
|
||||
{ENDIF}
|
||||
|
||||
DESIGN TRENDS RESEARCH (from web, 2024-2025):
|
||||
DESIGN SPACE ANALYSIS:
|
||||
{design_space_analysis summary}
|
||||
|
||||
COLOR TRENDS:
|
||||
{design_trends.colors}
|
||||
VARIANT-SPECIFIC DESIGN DIRECTIONS AND RESEARCH:
|
||||
|
||||
TYPOGRAPHY TRENDS:
|
||||
{design_trends.typography}
|
||||
{FOR each variant_id IN design_trends.keys()}
|
||||
---
|
||||
VARIANT: {variant_id}
|
||||
PHILOSOPHY: {design_trends[variant_id].philosophy}
|
||||
DESIGN ATTRIBUTES:
|
||||
- Color Saturation: {design_trends[variant_id].attributes.color_saturation}
|
||||
- Visual Weight: {design_trends[variant_id].attributes.visual_weight}
|
||||
- Formality: {design_trends[variant_id].attributes.formality}
|
||||
- Organic/Geometric: {design_trends[variant_id].attributes.organic_geometric}
|
||||
- Innovation: {design_trends[variant_id].attributes.innovation}
|
||||
- Density: {design_trends[variant_id].attributes.density}
|
||||
|
||||
LAYOUT PATTERNS:
|
||||
{design_trends.layout}
|
||||
SEARCH KEYWORDS: {', '.join(design_trends[variant_id].keywords)}
|
||||
ANTI-PATTERNS (avoid): {', '.join(design_trends[variant_id].anti_keywords)}
|
||||
|
||||
ACCESSIBILITY GUIDELINES:
|
||||
{design_trends.accessibility}
|
||||
TREND RESEARCH FOR THIS VARIANT:
|
||||
|
||||
TASK: Generate {variants_count} design style variants that:
|
||||
1. Each have a distinct visual identity and design philosophy
|
||||
2. Incorporate modern design trends from the research above (2024-2025)
|
||||
3. Balance trend awareness with timeless design principles
|
||||
4. Use OKLCH color space for all color values
|
||||
5. Include complete, production-ready design token proposals
|
||||
6. Are semantically organized (brand, surface, semantic colors)
|
||||
7. Apply current accessibility best practices from WCAG guidelines
|
||||
Color Trends ({variant_id}):
|
||||
{design_trends[variant_id].research.colors}
|
||||
|
||||
OUTPUT FORMAT: JSON matching this exact structure:
|
||||
Typography Trends ({variant_id}):
|
||||
{design_trends[variant_id].research.typography}
|
||||
|
||||
Layout Patterns ({variant_id}):
|
||||
{design_trends[variant_id].research.layout}
|
||||
|
||||
Contrast Emphasis ({variant_id}):
|
||||
{design_trends[variant_id].research.contrast}
|
||||
|
||||
---
|
||||
{ENDFOR}
|
||||
|
||||
SHARED ACCESSIBILITY GUIDELINES (apply to all variants):
|
||||
{shared_accessibility}
|
||||
|
||||
TASK: Generate {variants_count} design style variants where EACH variant:
|
||||
1. Strictly follows its pre-defined design philosophy and attributes
|
||||
2. Uses ONLY its variant-specific trend research for aesthetic decisions
|
||||
3. Maintains maximum contrast with other variants' attributes
|
||||
4. Incorporates its search keywords and avoids its anti-patterns
|
||||
5. Uses OKLCH color space for all color values
|
||||
6. Includes complete, production-ready design token proposals
|
||||
7. Applies WCAG accessibility guidelines from shared research
|
||||
|
||||
CRITICAL RULES FOR CONTRAST:
|
||||
- Variant-1 should feel completely different from Variant-2 and Variant-3
|
||||
- Use each variant's specific attribute scores (e.g., "monochrome" vs "vibrant")
|
||||
- Reference variant-specific research, NOT shared trends
|
||||
- If Variant-1 is "minimal/geometric", Variant-2 must be "bold/organic" or similar contrast
|
||||
- Each variant should be immediately distinguishable by visual inspection
|
||||
|
||||
OUTPUT FORMAT: JSON matching this structure (see full schema at end of prompt):
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "{session_id}",
|
||||
"input_mode": "{input_mode}",
|
||||
"timestamp": "{ISO timestamp}",
|
||||
"variants_count": {variants_count}
|
||||
},
|
||||
"extraction_metadata": { "session_id": "...", "input_mode": "...", "timestamp": "...", "variants_count": N },
|
||||
"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(...)",
|
||||
"background": "oklch(...)",
|
||||
"font_heading": "Font name, fallbacks",
|
||||
"border_radius": "value"
|
||||
},
|
||||
"name": "Concise Style Name (2-3 words)",
|
||||
"description": "2-3 sentence description",
|
||||
"design_philosophy": "Core design principles",
|
||||
"preview": { "primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..." },
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": { "primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)" },
|
||||
@@ -192,34 +361,29 @@ OUTPUT FORMAT: JSON matching this exact structure:
|
||||
"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": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." },
|
||||
"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", ..., "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" }
|
||||
"typography": { "font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...} },
|
||||
"spacing": { "0": "0", ..., "24": "6rem" },
|
||||
"border_radius": { "none": "0", ..., "full": "9999px" },
|
||||
"shadows": { "sm": "...", ..., "xl": "..." },
|
||||
"breakpoints": { "sm": "640px", ..., "2xl": "1536px" }
|
||||
}
|
||||
},
|
||||
// Repeat for variants_count total
|
||||
}
|
||||
// Repeat structure for ALL {variants_count} variants
|
||||
]
|
||||
}
|
||||
|
||||
RULES:
|
||||
- Each variant must be distinct in visual character
|
||||
- Incorporate insights from DESIGN TRENDS RESEARCH into color, typography, and spacing choices
|
||||
- Balance modern trends with timeless design principles
|
||||
- Each variant must strictly adhere to its pre-defined design attributes
|
||||
- Use ONLY variant-specific trend research (do NOT cross-pollinate research between variants)
|
||||
- Maximize visual contrast between variants using their attribute differences
|
||||
- All colors MUST use OKLCH format: oklch(L C H / A)
|
||||
- Token structures must be complete and production-ready
|
||||
- Use semantic naming throughout (e.g., "brand-primary" not "color-1")
|
||||
- Ensure accessibility (WCAG AA contrast ratios: 4.5:1 text, 3:1 UI) using guidelines from research
|
||||
- Apply modern typography trends (variable fonts, system font stacks, optical sizing)
|
||||
- Include complete token categories for each variant
|
||||
- Reference specific trends or patterns from the research when making design decisions
|
||||
- Ensure accessibility (WCAG AA contrast ratios: 4.5:1 text, 3:1 UI) using shared guidelines
|
||||
- Apply typography trends from each variant's specific research
|
||||
- Incorporate search keywords and actively avoid anti-patterns for each variant
|
||||
- Each variant's philosophy_name should match the pre-analyzed name from design space analysis
|
||||
- Reference specific trends from variant-specific research, not from other variants
|
||||
```
|
||||
|
||||
### Phase 3: Parse & Write Output
|
||||
@@ -241,9 +405,11 @@ Write({
|
||||
TodoWrite({
|
||||
todos: [
|
||||
{content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Research modern design trends with Exa MCP", status: "completed", activeForm: "Researching design trends"},
|
||||
{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"}
|
||||
{content: "Analyze design space for maximum contrast", status: "completed", activeForm: "Analyzing design space"},
|
||||
{content: `Generate ${variants_count} divergent design directions`, status: "completed", activeForm: "Generating design directions"},
|
||||
{content: "Research variant-specific design trends with Exa MCP", status: "completed", activeForm: "Researching variant trends"},
|
||||
{content: "Synthesize style cards with independent research", status: "completed", activeForm: "Synthesizing style cards"},
|
||||
{content: `Generate ${variants_count} contrasting style variants`, status: "completed", activeForm: "Generating style variants"}
|
||||
]
|
||||
});
|
||||
```
|
||||
@@ -256,8 +422,18 @@ Input mode: {input_mode}
|
||||
{IF image mode: Images analyzed: {count}}
|
||||
{IF prompt mode: Prompt: "{truncated_prompt}"}
|
||||
|
||||
🎨 Design Space Analysis:
|
||||
- Generated {variants_count} MAXIMALLY CONTRASTING design directions
|
||||
- Min pairwise contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
|
||||
- Strategy: {design_space_analysis.contrast_verification.strategy}
|
||||
|
||||
Generated {variants_count} style variant(s):
|
||||
{FOR each card: - {card.name} ({card.id})}
|
||||
{FOR each card: - {card.name} ({card.id}) - {card.design_philosophy}}
|
||||
|
||||
🔍 Research performed:
|
||||
- {variants_count} × 4 variant-specific MCP queries ({variants_count * 4} total)
|
||||
- 1 shared accessibility research query
|
||||
- Each variant has independent trend guidance
|
||||
|
||||
📂 Output: {base_path}/style-extraction/style-cards.json
|
||||
|
||||
@@ -280,113 +456,127 @@ OR (standalone mode):
|
||||
|
||||
### style-cards.json Format
|
||||
|
||||
Complete structure with example values:
|
||||
**Schema Structure**:
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "WFS-xxx or design-session-xxx",
|
||||
"session_id": "string",
|
||||
"input_mode": "image|text|hybrid",
|
||||
"timestamp": "ISO 8601 string",
|
||||
"variants_count": "number"
|
||||
},
|
||||
"style_cards": [
|
||||
{
|
||||
"id": "variant-{n}",
|
||||
"name": "Concise Style Name (2-3 words)",
|
||||
"description": "2-3 sentence description of visual language and UX",
|
||||
"design_philosophy": "Core design principles for this variant",
|
||||
"preview": {
|
||||
"primary": "oklch(...)",
|
||||
"background": "oklch(...)",
|
||||
"font_heading": "Font family, fallbacks",
|
||||
"border_radius": "value"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"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": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..." },
|
||||
"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", ..., "24": "6rem" },
|
||||
"border_radius": { "none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px" },
|
||||
"shadows": { "sm": "...", "md": "...", "lg": "...", "xl": "..." },
|
||||
"breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }
|
||||
}
|
||||
}
|
||||
// Repeat structure for variants_count total (variant-1, variant-2, ..., variant-n)
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Concrete Example (variant-1 only, others follow same structure)**:
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "WFS-auth",
|
||||
"input_mode": "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. Focuses on content clarity with minimal visual noise.",
|
||||
"design_philosophy": "Less is more - prioritize content clarity and visual breathing room over decorative elements",
|
||||
"name": "Minimal Brutalist",
|
||||
"description": "Stark geometric design with monochrome palette and sharp edges. Prioritizes function over decoration with extreme clarity.",
|
||||
"design_philosophy": "Form follows function - eliminate all non-essential visual elements",
|
||||
"preview": {
|
||||
"primary": "oklch(0.45 0.20 270 / 1)",
|
||||
"background": "oklch(0.98 0.01 270 / 1)",
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"background": "oklch(0.98 0.00 0 / 1)",
|
||||
"font_heading": "Inter, system-ui, sans-serif",
|
||||
"border_radius": "0.5rem"
|
||||
"border_radius": "0"
|
||||
},
|
||||
"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)"
|
||||
"primary": "oklch(0.20 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.40 0.01 270 / 1)",
|
||||
"accent": "oklch(0.60 0.01 270 / 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)"
|
||||
"background": "oklch(0.98 0.00 0 / 1)",
|
||||
"elevated": "oklch(0.95 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.90 0.00 0 / 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)"
|
||||
"success": "oklch(0.30 0.01 270 / 1)",
|
||||
"warning": "oklch(0.30 0.01 270 / 1)",
|
||||
"error": "oklch(0.30 0.01 270 / 1)",
|
||||
"info": "oklch(0.30 0.01 270 / 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)"
|
||||
"primary": "oklch(0.10 0.00 0 / 1)",
|
||||
"secondary": "oklch(0.40 0.00 0 / 1)",
|
||||
"tertiary": "oklch(0.60 0.00 0 / 1)",
|
||||
"inverse": "oklch(0.98 0.00 0 / 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)"
|
||||
"default": "oklch(0.20 0.00 0 / 1)",
|
||||
"strong": "oklch(0.10 0.00 0 / 1)",
|
||||
"subtle": "oklch(0.85 0.00 0 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Inter, system-ui, sans-serif",
|
||||
"body": "Inter, system-ui, sans-serif",
|
||||
"mono": "JetBrains Mono, Consolas, monospace"
|
||||
"mono": "JetBrains Mono, 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"
|
||||
"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"
|
||||
}
|
||||
"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"
|
||||
"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"
|
||||
"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)",
|
||||
@@ -395,247 +585,36 @@ Complete structure with example values:
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "variant-2",
|
||||
"name": "Bold Vibrant",
|
||||
"description": "High-energy design with saturated colors and strong visual hierarchy. Creates excitement and demands attention.",
|
||||
"design_philosophy": "Make a statement - use color and contrast to create memorable, energetic experiences",
|
||||
"preview": {
|
||||
"primary": "oklch(0.50 0.25 330 / 1)",
|
||||
"background": "oklch(0.15 0.02 270 / 1)",
|
||||
"font_heading": "Poppins, system-ui, sans-serif",
|
||||
"border_radius": "0.75rem"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.50 0.25 330 / 1)",
|
||||
"secondary": "oklch(0.65 0.22 60 / 1)",
|
||||
"accent": "oklch(0.70 0.20 180 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.15 0.02 270 / 1)",
|
||||
"elevated": "oklch(0.20 0.02 270 / 1)",
|
||||
"overlay": "oklch(0.25 0.02 270 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.65 0.18 140 / 1)",
|
||||
"warning": "oklch(0.70 0.15 80 / 1)",
|
||||
"error": "oklch(0.60 0.25 25 / 1)",
|
||||
"info": "oklch(0.60 0.20 250 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.95 0.01 270 / 1)",
|
||||
"secondary": "oklch(0.75 0.01 270 / 1)",
|
||||
"tertiary": "oklch(0.60 0.01 270 / 1)",
|
||||
"inverse": "oklch(0.20 0.01 270 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.35 0.02 270 / 1)",
|
||||
"strong": "oklch(0.50 0.02 270 / 1)",
|
||||
"subtle": "oklch(0.25 0.02 270 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Poppins, system-ui, sans-serif",
|
||||
"body": "Open Sans, system-ui, sans-serif",
|
||||
"mono": "Fira Code, 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.10)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.15)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.20)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.25)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
}
|
||||
}
|
||||
"description": "High-energy design with saturated colors, dynamic typography, and strong contrast. (Full token structure same as variant-1)",
|
||||
"design_philosophy": "Make a statement - use color and energy to create memorable experiences",
|
||||
"preview": { "primary": "oklch(0.50 0.25 330 / 1)", "background": "oklch(0.15 0.02 270 / 1)", "..." },
|
||||
"proposed_tokens": { "...same structure as variant-1 with different values..." }
|
||||
},
|
||||
{
|
||||
"id": "variant-3",
|
||||
"name": "Elegant Serif",
|
||||
"description": "Sophisticated design with serif typography and refined color palette. Conveys professionalism and timeless quality.",
|
||||
"design_philosophy": "Timeless elegance - combine classical typography with modern layout principles",
|
||||
"preview": {
|
||||
"primary": "oklch(0.35 0.08 280 / 1)",
|
||||
"background": "oklch(0.96 0.01 60 / 1)",
|
||||
"font_heading": "Playfair Display, Georgia, serif",
|
||||
"border_radius": "0.25rem"
|
||||
},
|
||||
"proposed_tokens": {
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": "oklch(0.35 0.08 280 / 1)",
|
||||
"secondary": "oklch(0.50 0.10 320 / 1)",
|
||||
"accent": "oklch(0.65 0.12 40 / 1)"
|
||||
},
|
||||
"surface": {
|
||||
"background": "oklch(0.96 0.01 60 / 1)",
|
||||
"elevated": "oklch(1.00 0.00 0 / 1)",
|
||||
"overlay": "oklch(0.94 0.01 60 / 1)"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "oklch(0.55 0.12 145 / 1)",
|
||||
"warning": "oklch(0.70 0.10 85 / 1)",
|
||||
"error": "oklch(0.50 0.18 30 / 1)",
|
||||
"info": "oklch(0.50 0.15 255 / 1)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "oklch(0.25 0.01 280 / 1)",
|
||||
"secondary": "oklch(0.50 0.01 280 / 1)",
|
||||
"tertiary": "oklch(0.65 0.01 280 / 1)",
|
||||
"inverse": "oklch(0.95 0.01 60 / 1)"
|
||||
},
|
||||
"border": {
|
||||
"default": "oklch(0.82 0.01 60 / 1)",
|
||||
"strong": "oklch(0.65 0.01 60 / 1)",
|
||||
"subtle": "oklch(0.90 0.01 60 / 1)"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"heading": "Playfair Display, Georgia, serif",
|
||||
"body": "Source Sans Pro, system-ui, sans-serif",
|
||||
"mono": "Source Code Pro, 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.03)",
|
||||
"md": "0 4px 6px oklch(0.00 0.00 0 / 0.05)",
|
||||
"lg": "0 10px 15px oklch(0.00 0.00 0 / 0.08)",
|
||||
"xl": "0 20px 25px oklch(0.00 0.00 0 / 0.12)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
}
|
||||
}
|
||||
"name": "Organic Natural",
|
||||
"description": "Soft, rounded design with warm earth tones and fluid layouts. (Full token structure same as variant-1)",
|
||||
"design_philosophy": "Nature-inspired - embrace curves, warmth, and organic flow",
|
||||
"preview": { "primary": "oklch(0.55 0.15 60 / 1)", "background": "oklch(0.96 0.03 80 / 1)", "..." },
|
||||
"proposed_tokens": { "...same structure as variant-1 with different values..." }
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Key Points**:
|
||||
- Each variant has complete, independent token proposals
|
||||
- All colors use OKLCH format for perceptual uniformity
|
||||
- Token structures are production-ready (no placeholders)
|
||||
- Variants have distinct visual identities and philosophies
|
||||
**Key Structural Requirements**:
|
||||
- Each variant MUST have complete, independent token proposals (all categories present)
|
||||
- All colors MUST use OKLCH format: `oklch(L C H / A)`
|
||||
- Token keys MUST match exactly across all variants for consistency
|
||||
- Variants differ in VALUES, not structure
|
||||
- Production-ready: no placeholders or incomplete sections
|
||||
|
||||
## Error Handling
|
||||
|
||||
@@ -647,48 +626,60 @@ Complete structure with example values:
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **Trend-Aware Style Generation** 🆕
|
||||
- Uses Exa MCP to research current design trends (2024-2025)
|
||||
- Searches for color theory, typography trends, layout patterns, and accessibility guidelines
|
||||
- Generates style variants informed by modern best practices
|
||||
- Balances innovation with timeless design principles
|
||||
1. **🚀 AI-Driven Design Space Exploration (Strategy A)** 🆕
|
||||
- **Phase 0.5**: AI analyzes requirements and generates MAXIMALLY CONTRASTING design directions
|
||||
- Uses 6-dimensional design attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density)
|
||||
- Ensures each variant occupies a distinct region of the design spectrum
|
||||
- Generates search keywords and anti-patterns for each variant
|
||||
- Provides contrast verification with minimum pairwise distance metrics
|
||||
|
||||
2. **Zero External Dependencies for Analysis**
|
||||
2. **🎯 Variant-Specific Trend Research** 🆕
|
||||
- **Independent MCP queries** for each variant (4 queries per variant)
|
||||
- Each variant researches its specific design philosophy (e.g., "minimal brutalist" vs "bold vibrant")
|
||||
- Uses philosophy-specific keywords and avoids cross-contamination
|
||||
- Eliminates趋同性 (convergence) by preventing shared trend influence
|
||||
- Shared accessibility research applied to all variants
|
||||
|
||||
3. **🔒 Maximum Contrast Guarantee**
|
||||
- AI-driven divergence ensures variants are maximally distant in attribute space
|
||||
- Each variant has distinct: philosophy, color saturation, visual weight, formality, etc.
|
||||
- Explicit anti-patterns prevent variants from borrowing each other's characteristics
|
||||
- Contrast verification built into design space analysis
|
||||
|
||||
4. **Zero External Dependencies for Core Analysis**
|
||||
- No `gemini-wrapper`, no `codex` for style synthesis - pure Claude
|
||||
- Single-pass comprehensive analysis with trend integration
|
||||
- Single-pass comprehensive analysis with variant-specific trend integration
|
||||
- Only uses Exa MCP for external trend research (not for synthesis)
|
||||
|
||||
3. **Streamlined Output**
|
||||
5. **Streamlined Output**
|
||||
- Single file (`style-cards.json`) vs. multiple scattered files
|
||||
- Eliminates `semantic_style_analysis.json`, `design-tokens.json`, `tailwind-tokens.js` clutter
|
||||
- Each variant contains complete token proposals embedded
|
||||
|
||||
4. **Flexible Input Modes**
|
||||
- Image-only: Analyze visual references
|
||||
- Text-only: Generate from descriptions
|
||||
- Hybrid: Text guides image analysis
|
||||
- All modes enhanced with web-based design research
|
||||
6. **Flexible Input Modes**
|
||||
- Image-only: Analyze visual references through each variant's philosophical lens
|
||||
- Text-only: Generate from descriptions with maximum divergence
|
||||
- Hybrid: Text guides image analysis while maintaining variant independence
|
||||
- All modes enhanced with variant-specific web research
|
||||
|
||||
5. **Context-Aware Research**
|
||||
7. **Context-Aware & Dynamic**
|
||||
- Extracts design keywords from user prompts (e.g., "minimalist", "Linear.app")
|
||||
- Considers project type from brainstorming artifacts
|
||||
- Customizes search queries based on project context
|
||||
- Dynamically generates design directions based on project context
|
||||
- No hardcoded design philosophies - fully adaptive
|
||||
|
||||
6. **Reproducible Structure**
|
||||
- Same inputs = same output structure
|
||||
- Deterministic JSON schema
|
||||
- Content informed by current design trends
|
||||
|
||||
7. **Production-Ready Tokens**
|
||||
8. **Production-Ready Tokens**
|
||||
- Complete design system proposals per variant
|
||||
- OKLCH color format for accessibility
|
||||
- OKLCH color format for perceptual uniformity and accessibility
|
||||
- Semantic naming conventions
|
||||
- WCAG AA accessibility considerations from latest guidelines
|
||||
- Modern typography trends (variable fonts, system stacks)
|
||||
- WCAG AA accessibility considerations from shared research
|
||||
- Variant-specific typography trends (not generic)
|
||||
|
||||
8. **Workflow Integration**
|
||||
9. **Workflow Integration**
|
||||
- Integrated mode: Works within existing workflow sessions
|
||||
- Standalone mode: Auto-creates session in scratchpad
|
||||
- Context-aware: Can reference synthesis-specification.md or ui-designer/analysis.md
|
||||
- Contrast metrics included in completion report
|
||||
|
||||
## Integration Points
|
||||
|
||||
|
||||
@@ -3,11 +3,27 @@ name: generate
|
||||
description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components
|
||||
usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
argument-hint: "[--targets \"dashboard,auth,navbar,hero\"] [--target-type \"page\"] [--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--style-variants 3] [--layout-variants 3]"
|
||||
parameters:
|
||||
- name: --style-variants
|
||||
type: number
|
||||
default: 3
|
||||
description: "Number of style variants to generate prototypes for (1-5). Auto-validates against actual style-* directories. ⚠️ Recommend omitting to use auto-detection."
|
||||
- name: --layout-variants
|
||||
type: number
|
||||
default: auto-detected from layout-strategies.json
|
||||
description: "Number of layout variants. Default: loaded from consolidation output. Can override for manual testing."
|
||||
- name: --targets
|
||||
type: string
|
||||
description: "Comma-separated list of targets (pages or components) to generate"
|
||||
- name: --target-type
|
||||
type: string
|
||||
default: page
|
||||
description: "Type of targets: 'page' (full layout) or 'component' (isolated element)"
|
||||
examples:
|
||||
- /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "dashboard,settings" --target-type "page" --style-variants 3 --layout-variants 3
|
||||
- /workflow:ui-design:generate --session WFS-auth --targets "home,pricing" --target-type "page" --style-variants 2 --layout-variants 2
|
||||
- /workflow:ui-design:generate --base-path "./.workflow/.design/run-20250109-150533" # ✅ Recommended: auto-detect variants
|
||||
- /workflow:ui-design:generate --targets "navbar,hero,card" --target-type "component" --style-variants 3 --layout-variants 2
|
||||
- /workflow:ui-design:generate --base-path "./.workflow/.design/run-20250109-150533" --style-variants 3 --layout-variants 3
|
||||
- /workflow:ui-design:generate --pages "home,dashboard" --style-variants 2 --layout-variants 2 # Legacy syntax
|
||||
executor: → @ui-design-agent
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
@@ -79,8 +95,25 @@ ELSE:
|
||||
# 2. Determine style variant count (layout_variants already loaded in Phase 0)
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
|
||||
# Validate range
|
||||
VALIDATE: 1 <= style_variants <= 5
|
||||
|
||||
# Validate against actual style directories (prevent style-N file generation for non-existent directories)
|
||||
actual_style_count = count_directories({base_path}/style-consolidation/style-*)
|
||||
|
||||
IF actual_style_count == 0:
|
||||
ERROR: "No style directories found in {base_path}/style-consolidation/"
|
||||
SUGGEST: "Run /workflow:ui-design:consolidate first to generate style design systems"
|
||||
EXIT 1
|
||||
|
||||
IF style_variants > actual_style_count:
|
||||
WARN: "⚠️ Requested {style_variants} style variants, but only {actual_style_count} directories exist"
|
||||
REPORT: " Available styles: {list_directories({base_path}/style-consolidation/style-*)}"
|
||||
REPORT: " Auto-correcting to {actual_style_count} style variants"
|
||||
style_variants = actual_style_count
|
||||
|
||||
REPORT: "✅ Validated style variants: {style_variants} (matching actual directory count)"
|
||||
|
||||
# Note: layout_variants is loaded from layout-strategies.json in Phase 0
|
||||
|
||||
# 3. Enhanced target list parsing with type detection
|
||||
@@ -149,55 +182,7 @@ IF --session:
|
||||
synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
```
|
||||
|
||||
### Phase 1.5: Implementation Pattern Research (Exa MCP)
|
||||
|
||||
```bash
|
||||
# Step 1: Extract project context and technology preferences
|
||||
project_context = ""
|
||||
tech_stack_hints = []
|
||||
|
||||
IF --session:
|
||||
# Load brainstorming artifacts to understand tech requirements
|
||||
IF exists(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md):
|
||||
project_context = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
|
||||
tech_stack_hints = extract_tech_stack(project_context) # e.g., "React", "Vue", "vanilla JS"
|
||||
|
||||
IF exists(.workflow/WFS-{session}/.brainstorming/system-architect/analysis.md):
|
||||
arch_context = Read(.workflow/WFS-{session}/.brainstorming/system-architect/analysis.md)
|
||||
tech_stack_hints.extend(extract_tech_stack(arch_context))
|
||||
|
||||
# Step 2: Extract page types and requirements
|
||||
page_types = classify_pages(page_list) # e.g., "dashboard", "auth", "settings"
|
||||
layout_names = [s.name for s in layout_strategies.strategies]
|
||||
|
||||
REPORT: "🔍 Researching modern UI implementation patterns..."
|
||||
|
||||
# Step 3: Multi-dimensional implementation research using Exa MCP
|
||||
exa_queries = {
|
||||
"component_patterns": f"modern UI component implementation patterns {' '.join(tech_stack_hints)} 2024 2025",
|
||||
"responsive_design": f"responsive web design best practices mobile-first {' '.join(page_types)} 2024",
|
||||
"accessibility": f"web accessibility ARIA attributes implementation WCAG 2.2 {' '.join(page_types)}",
|
||||
"html_semantics": f"semantic HTML5 structure best practices {' '.join(page_types)} modern",
|
||||
"css_architecture": f"CSS architecture design tokens custom properties BEM {' '.join(tech_stack_hints)}"
|
||||
}
|
||||
|
||||
implementation_research = {}
|
||||
FOR category, query IN exa_queries.items():
|
||||
REPORT: f" Searching {category}..."
|
||||
implementation_research[category] = mcp__exa__get_code_context_exa(
|
||||
query=query,
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
|
||||
REPORT: "✅ Implementation research complete:"
|
||||
REPORT: " - Component patterns and best practices"
|
||||
REPORT: " - Responsive design strategies"
|
||||
REPORT: " - Accessibility implementation guides"
|
||||
REPORT: " - Semantic HTML structures"
|
||||
REPORT: " - CSS architecture patterns"
|
||||
```
|
||||
|
||||
### Phase 1.8: Token Variable Name Extraction
|
||||
### Phase 1.5: Token Variable Name Extraction
|
||||
|
||||
```bash
|
||||
# Load design-tokens.json from style-1 to extract exact variable names
|
||||
@@ -261,15 +246,17 @@ REPORT: f" - Other variables: {len(radius_vars) + len(shadow_vars) + len(break
|
||||
|
||||
**Strategy**: Two-layer generation reduces complexity from `O(S×L×P)` to `O(L×P)`, achieving **`S` times faster** performance.
|
||||
|
||||
- **Layer 1**: Generate `L × P` layout templates (HTML structure + structural CSS) with modern best practices
|
||||
- **Layer 2**: Instantiate `S × L × P` final prototypes via fast file operations
|
||||
- **Layer 1**: Generate `L × T` layout templates (HTML structure + structural CSS) by agent
|
||||
- **Layer 2**: Instantiate `S × L × T` final prototypes via fast file operations
|
||||
|
||||
#### Phase 2a: Layout Template Generation (Research-Informed)
|
||||
*T = targets (pages or components), P = pages (legacy notation)*
|
||||
|
||||
#### Phase 2a: Layout Template Generation
|
||||
|
||||
**Parallel Executor**: → @ui-design-agent
|
||||
|
||||
Generate style-agnostic layout templates for each `{page} × {layout}` combination.
|
||||
Total agent tasks: `layout_variants × len(page_list)`
|
||||
Generate style-agnostic layout templates for each `{target} × {layout}` combination.
|
||||
Total agent tasks: `layout_variants × len(target_list)`
|
||||
|
||||
```bash
|
||||
# Create directories
|
||||
@@ -289,13 +276,14 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
- Even if '{target}' might coexist with other targets in a final application,
|
||||
your task is to create an INDEPENDENT, REUSABLE template for '{target}' alone
|
||||
|
||||
Generate a **style-agnostic** layout template for a specific {target_type} and layout strategy, informed by modern web development best practices.
|
||||
Generate a **style-agnostic** layout template for a specific {target_type} and layout strategy.
|
||||
|
||||
🎯 **CRITICAL REQUIREMENTS**:
|
||||
✅ **ADAPTIVE**: Multi-device responsive design (mobile, tablet, desktop)
|
||||
✅ **STYLE-SWITCHABLE**: Support runtime theme/style switching via CSS variables
|
||||
✅ **TOKEN-DRIVEN**: 100% CSS variable usage, zero hardcoded values
|
||||
✅ **INDEPENDENT**: Template for '{target}' only, no other targets included
|
||||
✅ **RESEARCH-INFORMED**: Use MCP tools to research modern UI patterns as needed
|
||||
|
||||
## Context
|
||||
LAYOUT_ID: {layout_id}
|
||||
@@ -320,25 +308,8 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
- Content: Focus solely on the component design
|
||||
}
|
||||
|
||||
## Implementation Research (from web, 2024-2025)
|
||||
|
||||
COMPONENT PATTERNS:
|
||||
{implementation_research.component_patterns}
|
||||
|
||||
RESPONSIVE DESIGN:
|
||||
{implementation_research.responsive_design}
|
||||
|
||||
ACCESSIBILITY GUIDELINES:
|
||||
{implementation_research.accessibility}
|
||||
|
||||
HTML SEMANTICS:
|
||||
{implementation_research.html_semantics}
|
||||
|
||||
CSS ARCHITECTURE:
|
||||
{implementation_research.css_architecture}
|
||||
|
||||
## Task
|
||||
Generate TWO files that work together as a reusable template, incorporating insights from the implementation research above:
|
||||
Generate TWO files that work together as a reusable template:
|
||||
|
||||
**File 1**: `{target}-layout-{layout_id}.html`
|
||||
- 🏗️ **SEMANTIC STRUCTURE**: HTML5 structure WITHOUT any style-specific values
|
||||
@@ -414,20 +385,20 @@ FOR layout_id IN range(1, layout_variants + 1):
|
||||
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)
|
||||
## HTML Requirements
|
||||
- 🏗️ **SEMANTIC STRUCTURE**: HTML5 elements (<header>, <nav>, <main>, <section>, <article>)
|
||||
- ♿ **ACCESSIBILITY**: ARIA attributes following WCAG 2.2 guidelines from research
|
||||
- ♿ **ACCESSIBILITY**: ARIA attributes following WCAG 2.2 guidelines
|
||||
- 📋 **HEADING HIERARCHY**: Proper h1 → h2 → h3 structure
|
||||
- 📱 **RESPONSIVE MARKUP**: Mobile-first structure with adaptive containers
|
||||
- 🧩 **COMPONENT MODULARITY**: Reusable component structure from modern patterns
|
||||
- 🧩 **COMPONENT MODULARITY**: Reusable component structure
|
||||
- 🎨 **STYLE-AGNOSTIC**: NO hardcoded colors/fonts/spacing in HTML
|
||||
|
||||
## CSS Requirements (Apply Architecture Patterns from Research)
|
||||
## CSS Requirements
|
||||
- 🎨 **DYNAMIC THEMING**: 100% CSS custom properties (var()) for style switching
|
||||
- 📱 **ADAPTIVE LAYOUT**: Mobile-first media queries using token breakpoints
|
||||
- 🔄 **RUNTIME SWITCHABLE**: All visual styles via CSS variables only
|
||||
- 🚫 **NO HARDCODED VALUES**: Zero literal colors/fonts/spacing
|
||||
- 📐 **SEMANTIC CLASSES**: BEM or descriptive naming following CSS architecture
|
||||
- 📐 **SEMANTIC CLASSES**: BEM or descriptive naming
|
||||
- 🏛️ **MODERN PATTERNS**: Grid, flexbox, container queries for responsiveness
|
||||
- 💡 **TOKEN REFERENCES**: Every style property uses var(--token-name)
|
||||
|
||||
@@ -821,7 +792,7 @@ TodoWrite({
|
||||
todos: [
|
||||
{content: "Load layout strategies from consolidation", status: "completed", activeForm: "Loading layout strategies"},
|
||||
{content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Research modern UI implementation patterns with Exa MCP", status: "completed", activeForm: "Researching implementation patterns"},
|
||||
{content: "Extract design token variable names", status: "completed", activeForm: "Extracting token variables"},
|
||||
{content: `Generate ${layout_variants}×${target_list.length} layout templates using planned strategies`, status: "completed", activeForm: "Generating layout templates"},
|
||||
{content: "Convert design tokens to CSS variables", status: "completed", activeForm: "Converting tokens"},
|
||||
{content: `Instantiate ${style_variants}×${layout_variants}×${target_list.length} prototypes using script`, status: "completed", activeForm: "Running instantiation script"},
|
||||
@@ -951,29 +922,23 @@ After generation, ensure:
|
||||
|
||||
## Key Features
|
||||
|
||||
1. **Research-Informed Implementation** 🆕
|
||||
- Uses Exa MCP to research modern UI implementation patterns (2024-2025)
|
||||
- Searches for component patterns, responsive design, accessibility, HTML semantics, CSS architecture
|
||||
- Generates prototypes based on current web development best practices
|
||||
- Context-aware: extracts tech stack hints from project brainstorming artifacts
|
||||
- Multi-dimensional research: component, responsive, accessibility, semantic HTML, CSS patterns
|
||||
|
||||
2. **Unified Target Generation**
|
||||
1. **Unified Target Generation**
|
||||
- Supports both pages (full layouts) and components (isolated elements)
|
||||
- Intelligent wrapper selection based on target type
|
||||
- Backward compatible with legacy `--pages` parameter
|
||||
|
||||
3. **Optimized Template-Based Architecture**
|
||||
2. **Optimized Template-Based Architecture**
|
||||
- Decouples HTML structure from CSS styling
|
||||
- Generates `L × T` reusable templates instead of `S × L × T` unique files (T=targets)
|
||||
- **`S` times faster** than previous approach (typically 3× faster for S=3)
|
||||
|
||||
4. **Two-Layer Generation Strategy**
|
||||
- Layer 1: Agent-driven creative generation of layout templates (informed by research)
|
||||
3. **Two-Layer Generation Strategy**
|
||||
- Layer 1: Agent-driven creative generation of layout templates
|
||||
- Layer 2: Fast file operations for prototype instantiation (script-based)
|
||||
- Reduces expensive Agent calls by ~67% (for S=3)
|
||||
- Agent autonomously uses MCP tools for modern UI pattern research
|
||||
|
||||
5. **Script-Based Instantiation (v3.0)**
|
||||
4. **Script-Based Instantiation (v3.0)**
|
||||
- Uses `ui-instantiate-prototypes.sh` for efficient file operations
|
||||
- Auto-detection of configuration from directory structure
|
||||
- Robust error handling with detailed reporting
|
||||
@@ -981,33 +946,26 @@ After generation, ensure:
|
||||
- Integrated preview file generation
|
||||
- Supports both page and component modes
|
||||
|
||||
6. **Modern Best Practices Integration**
|
||||
- Component patterns from latest UI libraries and frameworks
|
||||
- WCAG 2.2 accessibility implementation
|
||||
- Modern responsive design (grid, flexbox, container queries)
|
||||
- Semantic HTML5 structure following current standards
|
||||
- CSS architecture patterns (BEM, design tokens, custom properties)
|
||||
|
||||
7. **Consistent Cross-Style Layouts**
|
||||
5. **Consistent Cross-Style Layouts**
|
||||
- Same layout structure applied uniformly across all style variants
|
||||
- Easier to compare styles directly (HTML structure is identical)
|
||||
- Simplified maintenance (edit template once, affects all styles)
|
||||
|
||||
8. **Dynamic Style Injection**
|
||||
6. **Dynamic Style Injection**
|
||||
- CSS custom properties enable runtime style switching
|
||||
- Each style variant has its own `tokens.css` file
|
||||
- Clean separation of structure and aesthetics
|
||||
|
||||
9. **Interactive Visualization**
|
||||
7. **Interactive Visualization**
|
||||
- Full-featured compare.html from template
|
||||
- Matrix grid view with synchronized scrolling
|
||||
- Enhanced index.html with statistics
|
||||
- Comprehensive PREVIEW.md documentation
|
||||
- Per-style design system references
|
||||
|
||||
10. **Production-Ready Output**
|
||||
- Semantic HTML5 and ARIA attributes (following latest guidelines)
|
||||
- Mobile-first responsive design (modern patterns)
|
||||
8. **Production-Ready Output**
|
||||
- Semantic HTML5 and ARIA attributes (following WCAG 2.2 guidelines)
|
||||
- Mobile-first responsive design
|
||||
- Token-driven styling (no hardcoded values)
|
||||
- Implementation notes for each prototype
|
||||
|
||||
|
||||
@@ -258,6 +258,33 @@ if [ "$LAYOUT_VARIANTS" -lt 1 ] || [ "$LAYOUT_VARIANTS" -gt 5 ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Validate STYLE_VARIANTS against actual style directories
|
||||
if [ "$STYLE_VARIANTS" -gt 0 ]; then
|
||||
style_dir="$BASE_PATH/../style-consolidation"
|
||||
|
||||
if [ ! -d "$style_dir" ]; then
|
||||
log_error "Style consolidation directory not found: $style_dir"
|
||||
log_info "Run /workflow:ui-design:consolidate first"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
actual_styles=$(find "$style_dir" -maxdepth 1 -type d -name "style-*" 2>/dev/null | wc -l)
|
||||
|
||||
if [ "$actual_styles" -eq 0 ]; then
|
||||
log_error "No style directories found in: $style_dir"
|
||||
log_info "Run /workflow:ui-design:consolidate first to generate style design systems"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ "$STYLE_VARIANTS" -gt "$actual_styles" ]; then
|
||||
log_warning "Requested $STYLE_VARIANTS style variants, but only found $actual_styles directories"
|
||||
log_info "Available style directories:"
|
||||
find "$style_dir" -maxdepth 1 -type d -name "style-*" 2>/dev/null | sed 's|.*/||' | sort
|
||||
log_info "Auto-correcting to $actual_styles style variants"
|
||||
STYLE_VARIANTS=$actual_styles
|
||||
fi
|
||||
fi
|
||||
|
||||
# Parse pages into array
|
||||
IFS=',' read -ra PAGE_ARRAY <<< "$PAGES"
|
||||
|
||||
|
||||
425
ui-workflow-parameter-clarity-report.md
Normal file
425
ui-workflow-parameter-clarity-report.md
Normal file
@@ -0,0 +1,425 @@
|
||||
# UI设计工作流参数清晰度分析报告
|
||||
|
||||
## 📋 执行摘要
|
||||
|
||||
**问题来源**：用户手动调用 `/workflow:ui-design:generate` 时传入了 `--style-variants 4`，但实际只有3个样式目录存在，导致生成了引用不存在CSS文件的 `style-4` 原型。
|
||||
|
||||
**根本原因**：工作流命令链中参数命名不一致、验证缺失、文档说明不清晰。
|
||||
|
||||
## 🔍 关键发现
|
||||
|
||||
### 1. 参数命名不一致
|
||||
|
||||
| 命令 | 参数名称 | 默认值 | 说明 |
|
||||
|------|---------|--------|------|
|
||||
| `extract` | `--variants` | 1 | ⚠️ 未在文档中明确说明默认值 |
|
||||
| `consolidate` | `--variants` | 所有变体 | ⚠️ 与extract同名但语义不同 |
|
||||
| `generate` | `--style-variants` | 3 | ⚠️ 名称不一致，默认值说明不清晰 |
|
||||
|
||||
**问题**：
|
||||
- `extract` 和 `consolidate` 使用 `--variants`，但 `generate` 使用 `--style-variants`
|
||||
- `--variants` 在两个命令中含义不同：
|
||||
- `extract`：生成多少个变体
|
||||
- `consolidate`：处理多少个变体
|
||||
|
||||
### 2. 命名转换混淆
|
||||
|
||||
```
|
||||
extract 输出 → consolidate 处理 → generate 使用
|
||||
variant-1 → style-1/ → login-style-1-layout-1.html
|
||||
variant-2 → style-2/ → login-style-2-layout-1.html
|
||||
variant-3 → style-3/ → login-style-3-layout-1.html
|
||||
```
|
||||
|
||||
**问题**：
|
||||
- `variant-N` 到 `style-N` 的转换没有文档说明
|
||||
- 增加了用户的认知负担
|
||||
- 容易造成混淆和错误
|
||||
|
||||
### 3. 验证缺失
|
||||
|
||||
#### ❌ 当前状态（generate.md 第79-82行）
|
||||
|
||||
```bash
|
||||
# Phase 1: Path Resolution & Context Loading
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
VALIDATE: 1 <= style_variants <= 5
|
||||
```
|
||||
|
||||
**问题**：
|
||||
- ✅ 验证范围（1-5）
|
||||
- ❌ 不验证是否匹配实际目录数量
|
||||
- ❌ 允许传入 `4` 但实际只有 `3` 个目录
|
||||
|
||||
#### ✅ 应有的验证
|
||||
|
||||
```bash
|
||||
style_variants = --style-variants OR 3
|
||||
actual_styles = count_directories({base_path}/style-consolidation/style-*)
|
||||
|
||||
IF style_variants > actual_styles:
|
||||
WARN: "Requested {style_variants} styles, but only {actual_styles} exist"
|
||||
REPORT: "Auto-correcting to {actual_styles} style variants"
|
||||
style_variants = actual_styles
|
||||
|
||||
VALIDATE: 1 <= style_variants <= actual_styles
|
||||
```
|
||||
|
||||
### 4. 文档清晰度问题
|
||||
|
||||
#### extract.md
|
||||
|
||||
**问题点**：
|
||||
- ⚠️ 默认值 `1` 未在 `usage` 或 `argument-hint` 中说明
|
||||
- ⚠️ 输出的 `variant-N` 命名未解释后续转换为 `style-N`
|
||||
|
||||
**当前文档**（第580行附近）：
|
||||
```
|
||||
"id": "variant-2" # 缺少说明这会成为 style-2 目录
|
||||
```
|
||||
|
||||
#### consolidate.md
|
||||
|
||||
**问题点**：
|
||||
- ⚠️ `--variants` 与 `extract` 同名但语义不同
|
||||
- ⚠️ 默认行为（处理所有变体）不够突出
|
||||
- ⚠️ `variant-N` → `style-N` 转换未文档化
|
||||
|
||||
#### generate.md
|
||||
|
||||
**问题点**：
|
||||
- ⚠️ `--style-variants` 名称与前置命令不一致
|
||||
- ⚠️ 默认值 `3` 的来源和意义不清晰
|
||||
- ⚠️ 自动检测机制未说明
|
||||
- ❌ 手动覆盖无验证
|
||||
|
||||
**当前文档**（第79-82行）：
|
||||
```bash
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
VALIDATE: 1 <= style_variants <= 5
|
||||
```
|
||||
|
||||
## 💡 改进方案
|
||||
|
||||
### 方案1：代码层面改进（推荐）
|
||||
|
||||
#### 1.1 统一参数命名
|
||||
|
||||
```diff
|
||||
# extract.md
|
||||
- usage: /workflow:ui-design:extract [--variants <count>]
|
||||
+ usage: /workflow:ui-design:extract [--style-variants <count>]
|
||||
|
||||
# consolidate.md
|
||||
- usage: /workflow:ui-design:consolidate [--variants <count>]
|
||||
+ usage: /workflow:ui-design:consolidate [--style-variants <count>]
|
||||
|
||||
# generate.md (保持不变)
|
||||
usage: /workflow:ui-design:generate [--style-variants <count>]
|
||||
```
|
||||
|
||||
**优点**：
|
||||
- ✅ 全链路参数名称统一
|
||||
- ✅ 语义清晰（style-variants）
|
||||
- ✅ 降低混淆风险
|
||||
|
||||
#### 1.2 添加验证逻辑（关键）
|
||||
|
||||
##### generate.md 改进
|
||||
|
||||
```bash
|
||||
# Phase 1: Path Resolution & Context Loading
|
||||
style_variants = --style-variants OR 3 # Default to 3
|
||||
|
||||
# 🆕 添加验证逻辑
|
||||
actual_styles = count_directories({base_path}/style-consolidation/style-*)
|
||||
|
||||
IF actual_styles == 0:
|
||||
ERROR: "No style directories found in {base_path}/style-consolidation/"
|
||||
SUGGEST: "Run /workflow:ui-design:consolidate first"
|
||||
EXIT 1
|
||||
|
||||
IF style_variants > actual_styles:
|
||||
WARN: "⚠️ Requested {style_variants} style variants, but only {actual_styles} directories exist"
|
||||
REPORT: " Auto-correcting to {actual_styles} style variants"
|
||||
REPORT: " Available styles: {list_directories(style-consolidation/style-*)}"
|
||||
style_variants = actual_styles
|
||||
|
||||
VALIDATE: 1 <= style_variants <= actual_styles
|
||||
```
|
||||
|
||||
##### ui-instantiate-prototypes.sh 改进
|
||||
|
||||
在脚本第239行之后添加：
|
||||
|
||||
```bash
|
||||
# Validate STYLE_VARIANTS matches actual directories
|
||||
if [ "$STYLE_VARIANTS" -gt 0 ]; then
|
||||
actual_styles=$(find "$BASE_PATH/../style-consolidation" -maxdepth 1 -type d -name "style-*" 2>/dev/null | wc -l)
|
||||
|
||||
if [ "$actual_styles" -eq 0 ]; then
|
||||
log_error "No style directories found in style-consolidation/"
|
||||
log_info "Run /workflow:ui-design:consolidate first"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ "$STYLE_VARIANTS" -gt "$actual_styles" ]; then
|
||||
log_warning "Requested $STYLE_VARIANTS style variants, but only found $actual_styles directories"
|
||||
log_info "Auto-correcting to $actual_styles style variants"
|
||||
STYLE_VARIANTS=$actual_styles
|
||||
fi
|
||||
fi
|
||||
```
|
||||
|
||||
#### 1.3 统一命名约定
|
||||
|
||||
##### extract.md 改进
|
||||
|
||||
修改输出格式（第580行附近）：
|
||||
|
||||
```diff
|
||||
# style-cards.json 格式
|
||||
{
|
||||
"style_cards": [
|
||||
{
|
||||
- "id": "variant-1",
|
||||
+ "id": "style-1",
|
||||
"name": "Modern Minimalist",
|
||||
...
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 方案2：文档层面改进
|
||||
|
||||
#### 2.1 extract.md 文档改进
|
||||
|
||||
```markdown
|
||||
## Parameters
|
||||
|
||||
- `--style-variants <count>`: Number of style variants to extract. **Default: 1**
|
||||
- Range: 1-5
|
||||
- Each variant will become an independent design system (style-1, style-2, etc.)
|
||||
- Output IDs use `style-N` format for consistency across the workflow
|
||||
|
||||
## Output Format
|
||||
|
||||
style-cards.json uses `style-N` IDs that directly correspond to directory names
|
||||
created by the consolidate command:
|
||||
|
||||
- `style-1` → `style-consolidation/style-1/`
|
||||
- `style-2` → `style-consolidation/style-2/`
|
||||
```
|
||||
|
||||
#### 2.2 consolidate.md 文档改进
|
||||
|
||||
```markdown
|
||||
## Parameters
|
||||
|
||||
- `--style-variants <count>`: Number of style variants to process from style-cards.json.
|
||||
**Default: all available variants**
|
||||
- Processes the first N variants from the style-cards array
|
||||
- Creates separate `style-{n}` directories for each variant
|
||||
- Range: 1 to count available in style-cards.json
|
||||
|
||||
## Naming Convention
|
||||
|
||||
Variants from extraction are materialized into style directories:
|
||||
- Input: `style-cards.json` with `style-1`, `style-2`, `style-3`
|
||||
- Output: `style-consolidation/style-1/`, `style-2/`, `style-3/` directories
|
||||
```
|
||||
|
||||
#### 2.3 generate.md 文档改进
|
||||
|
||||
```markdown
|
||||
## Parameters
|
||||
|
||||
- `--style-variants <count>`: Number of style variants to generate prototypes for.
|
||||
**Default: 3** (can be overridden)
|
||||
- Range: 1-5
|
||||
- ⚠️ **IMPORTANT**: This value MUST match the number of style-* directories in style-consolidation/
|
||||
- If mismatched, the command will auto-correct to the actual directory count
|
||||
- Use auto-detection (omit parameter) for safety
|
||||
|
||||
## Auto-Detection vs Manual Override
|
||||
|
||||
The command uses intelligent auto-detection:
|
||||
|
||||
1. **Auto-Detection** (Recommended):
|
||||
```bash
|
||||
/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
|
||||
# Automatically counts style-1/, style-2/, style-3/ → uses 3
|
||||
```
|
||||
|
||||
2. **Manual Override** (Use with caution):
|
||||
```bash
|
||||
/workflow:ui-design:generate --style-variants 4
|
||||
# If only 3 styles exist, auto-corrects to 3 with warning
|
||||
```
|
||||
|
||||
3. **Safety Check**:
|
||||
- Command validates against actual `style-consolidation/style-*` directories
|
||||
- Prevents generation of prototypes referencing non-existent styles
|
||||
- Displays warning and auto-corrects if mismatch detected
|
||||
```
|
||||
|
||||
### 方案3：用户指南改进
|
||||
|
||||
创建 `.claude/commands/workflow/ui-design/README.md`：
|
||||
|
||||
```markdown
|
||||
# UI Design Workflow Parameter Guide
|
||||
|
||||
## Style Variant Count Flow
|
||||
|
||||
### 1. Extract Phase
|
||||
```bash
|
||||
/workflow:ui-design:extract --style-variants 3
|
||||
# Generates: style-cards.json with 3 style variants (style-1, style-2, style-3)
|
||||
```
|
||||
|
||||
### 2. Consolidate Phase
|
||||
```bash
|
||||
/workflow:ui-design:consolidate --style-variants 3
|
||||
# Creates: style-consolidation/style-1/, style-2/, style-3/
|
||||
```
|
||||
|
||||
### 3. Generate Phase
|
||||
```bash
|
||||
# ✅ Recommended: Let it auto-detect
|
||||
/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
|
||||
|
||||
# ⚠️ Manual: Must match consolidation output
|
||||
/workflow:ui-design:generate --style-variants 3
|
||||
```
|
||||
|
||||
## ⚠️ Common Mistakes
|
||||
|
||||
### Mistake 1: Mismatched Counts
|
||||
```bash
|
||||
# ❌ Wrong: Request 4 styles when only 3 exist
|
||||
/workflow:ui-design:generate --style-variants 4
|
||||
# Only 3 directories in style-consolidation/ → ERROR
|
||||
|
||||
# ✅ Correct: Omit parameter for auto-detection
|
||||
/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
|
||||
```
|
||||
|
||||
### Mistake 2: Naming Confusion
|
||||
```bash
|
||||
# ❌ Don't confuse variant-N with style-N
|
||||
# variant-N was old naming in style-cards.json
|
||||
# style-N is the current standard across all commands
|
||||
```
|
||||
|
||||
## 🎯 Best Practices
|
||||
|
||||
1. **Use auto-detection**: Omit `--style-variants` in generate command
|
||||
2. **Verify consolidation**: Check `consolidation-report.json` before generating
|
||||
3. **Use explore-auto**: Automated workflow prevents parameter mismatches
|
||||
4. **Check directories**: `ls .workflow/.design/run-xxx/style-consolidation/`
|
||||
```
|
||||
|
||||
## 🎯 实施优先级
|
||||
|
||||
### 🔴 高优先级（立即实施）
|
||||
|
||||
1. **generate.md 添加验证逻辑**
|
||||
- 防止参数不匹配问题再次发生
|
||||
- 影响范围：所有手动调用 generate 命令的场景
|
||||
|
||||
2. **ui-instantiate-prototypes.sh 添加验证**
|
||||
- 脚本层面的最后防线
|
||||
- 影响范围：所有原型生成操作
|
||||
|
||||
3. **文档说明默认值和验证机制**
|
||||
- 降低用户误用风险
|
||||
- 影响范围：所有新用户和手动操作场景
|
||||
|
||||
### 🟡 中优先级（短期改进）
|
||||
|
||||
4. **统一参数命名为 --style-variants**
|
||||
- 提高一致性，减少混淆
|
||||
- 影响范围：需要更新多个命令文件
|
||||
|
||||
5. **extract.md 统一使用 style-N 命名**
|
||||
- 消除命名转换混淆
|
||||
- 影响范围：需要更新 style-cards.json 格式
|
||||
|
||||
### 🟢 低优先级（长期优化）
|
||||
|
||||
6. **创建用户指南 README.md**
|
||||
- 提供完整的参数使用指南
|
||||
- 影响范围：文档层面，不影响功能
|
||||
|
||||
## 📊 改进效果预测
|
||||
|
||||
### 实施前
|
||||
|
||||
```
|
||||
用户手动调用: /workflow:ui-design:generate --style-variants 4
|
||||
实际目录数: 3
|
||||
结果: ❌ 生成 login-style-4-layout-1.html 引用不存在的 CSS
|
||||
```
|
||||
|
||||
### 实施后
|
||||
|
||||
```
|
||||
用户手动调用: /workflow:ui-design:generate --style-variants 4
|
||||
实际目录数: 3
|
||||
|
||||
验证检查:
|
||||
⚠️ Requested 4 style variants, but only 3 directories exist
|
||||
Available: style-1, style-2, style-3
|
||||
Auto-correcting to 3 style variants
|
||||
|
||||
结果: ✅ 生成正确的 style-1, style-2, style-3 原型，避免错误
|
||||
```
|
||||
|
||||
## 🔧 快速修复指南（针对当前问题）
|
||||
|
||||
### 立即修复生成的错误文件
|
||||
|
||||
```bash
|
||||
cd .workflow/.design/run-20251009-210559/prototypes
|
||||
|
||||
# 删除错误的 style-4 文件
|
||||
rm -f *-style-4-*
|
||||
|
||||
# 重新生成（使用自动检测）
|
||||
~/.claude/scripts/ui-instantiate-prototypes.sh . --session-id run-20251009-210559
|
||||
```
|
||||
|
||||
### 预防未来错误
|
||||
|
||||
```bash
|
||||
# ✅ 推荐：使用自动检测
|
||||
/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
|
||||
|
||||
# ⚠️ 如果必须手动指定，先验证
|
||||
jq '.variant_count' .workflow/.design/run-xxx/style-consolidation/consolidation-report.json
|
||||
# 输出: 3
|
||||
# 然后使用该数字
|
||||
/workflow:ui-design:generate --style-variants 3
|
||||
```
|
||||
|
||||
## 📝 总结
|
||||
|
||||
**核心问题**：
|
||||
- 参数命名不统一（`--variants` vs `--style-variants`）
|
||||
- 命名转换混淆（`variant-N` → `style-N`）
|
||||
- 验证缺失（不检查参数是否匹配实际目录）
|
||||
- 文档不清晰（默认值、自动检测机制说明不足）
|
||||
|
||||
**关键改进**：
|
||||
1. ✅ 添加参数验证逻辑（防止不匹配）
|
||||
2. ✅ 统一参数命名（提高一致性）
|
||||
3. ✅ 完善文档说明（降低误用风险）
|
||||
4. ✅ 提供清晰的用户指南
|
||||
|
||||
**预期效果**：
|
||||
- 🔒 杜绝参数不匹配问题
|
||||
- 📈 提高工作流鲁棒性
|
||||
- 🎓 降低用户学习成本
|
||||
- 🚀 提升整体用户体验
|
||||
Reference in New Issue
Block a user