web-create-assets

Web Create Assets

Create professional UI assets that perfectly match your existing web application's design system.

Quick Start

# 1. Capture screenshots of your existing UI (optional - uses webapp-testing skill first)
# 2. Analyze screenshots and extract style
python3 scripts/analyze_style.py --screenshots ./screenshots --output style_guide.json

# 3. Create UI asset plan
python3 scripts/create_asset_plan.py --style style_guide.json --requirements requirements.json --output asset_plan.json

# 4. Generate assets
python3 scripts/generate_assets.py --plan asset_plan.json --output ./new_assets

Workflow Overview

┌──────────────────┐    ┌──────────────────┐    ┌──────────────────┐
│ 1. ANALYZE       │ →  │ 2. PLAN          │ →  │ 3. GENERATE      │
│ Extract style    │    │ Define assets    │    │ Create matching  │
│ from screenshots │    │ with specs       │    │ professional     │
│                  │    │                  │    │ assets           │
└──────────────────┘    └──────────────────┘    └──────────────────┘

Phase 1: Style Analysis

Extract Style from Screenshots

Analyze existing UI screenshots to extract:

• Color Palette: Primary, secondary, accent, background, text colors
• Typography Style: Font characteristics, weight preferences, sizing patterns
• Visual Patterns: Shadows, borders, corner radii, spacing
• Component Aesthetics: Button styles, card treatments, input fields

python3 scripts/analyze_style.py \
  --screenshots ./screenshots \
  --output style_guide.json \
  --extract-colors \
  --extract-typography \
  --extract-patterns

Style Guide Output Format

{
  "project_name": "MyApp",
  "extracted_from": ["screenshot1.png", "screenshot2.png"],
  "color_palette": {
    "primary": "#0066FF",
    "secondary": "#00D9FF",
    "accent": "#FF6B35",
    "background": "#0F172A",
    "surface": "#1E293B",
    "text_primary": "#F8FAFC",
    "text_secondary": "#94A3B8"
  },
  "typography": {
    "style": "modern sans-serif",
    "weights": ["400", "600", "700"],
    "characteristics": "clean, geometric, high readability"
  },
  "visual_patterns": {
    "shadows": "subtle drop shadows, 4-8px blur",
    "borders": "1px solid with low opacity",
    "corner_radius": "8-12px for cards, 4-6px for buttons",
    "spacing": "8px base grid, generous whitespace"
  },
  "style_summary": "Modern minimalist tech aesthetic with dark mode, blue primary accent"
}