🎨 DesignForge — AI Design Generator CLI

Multi-provider AI UI design generation from your terminal.

• 4 Providers: Google Stitch, Vercel v0, Figma API, Canva Connect API
• Text-to-Design: Generate UI designs from text prompts
• Design Editing: Edit existing designs with AI assistance
• Design System Extraction: Extract tokens, colors, typography from designs
• 12 Style Presets: dashboard, landing, ecommerce, saas, mobile-app, blog...
• 4 Device Types: mobile, desktop, tablet, agnostic
• Batch Processing: Generate multiple designs from YAML config
• Templates: Save prompts with {variables} for repeatable generation
• Cost Tracking: Per-provider spending summaries
• History: Full generation log with search

Quick Start

npm install -g designforge

# Generate a UI design (free with Google Stitch)
designforge gen "a modern dashboard with sidebar navigation"

# Generate with a style preset
designforge gen "user profile page" --preset saas --device desktop

# Extract design system from a file
designforge extract screenshot.png

# Compare providers
designforge compare "landing page for a SaaS product"

Commands

Generate Design

designforge generate <prompt>          # (alias: gen, g)
  -p, --provider <name>               # stitch, v0, figma, canva
  -m, --model <model>                 # Specific model
  -s, --preset <style>                # Style preset (dashboard, landing, saas...)
  -D, --device <type>                 # mobile, desktop, tablet, agnostic
  -n, --count <N>                     # Number of designs
  -o, --output <path>                 # Output file path
  -t, --template <name>               # Use saved prompt template
  -v, --var <key=value>               # Template variable (repeatable)
  --format <type>                     # html, png, react (default: html)
  --open                              # Open design after generation

Edit Design

designforge edit <prompt>              # Edit existing design
  -i, --input <file>                  # Input design file (required)
  -p, --provider <name>               # Provider to use
  -o, --output <path>                 # Output file path

Extract Design System

designforge extract <file-or-url>      # Extract design system tokens
  -o, --output <path>                 # Output file path
  --format <type>                     # json, yaml, css (default: json)

Other Commands

designforge vary <design-id>           # Generate design variations
designforge fill <template-id>         # Auto-fill design template
designforge export <screen-id>         # Export design to file
designforge compare <prompt>           # Compare across providers
designforge batch <config.yaml>        # Batch generate from YAML
designforge providers list             # List all providers
designforge history list               # View generation history
designforge template save <n> <p>      # Save prompt template
designforge cost summary               # Spending summary
designforge cost pricing               # Per-provider pricing
designforge config set <key> <val>     # Set configuration
designforge config list                # Show all config

Providers

| Provider | Capabilities | Export Formats | API Key | |----------|-------------|----------------|---------| | Google Stitch | Text-to-Design, Edit, Variants, Extract | HTML, PNG | FREE (no key) | | Vercel v0 | Text-to-Design, Edit | React code | v0.apiKey | | Figma API | Extract Design System, Export | PNG, SVG, PDF | figma.apiKey | | Canva Connect API | Template Autofill, Export | PNG, PDF | canva.apiKey |

Setup

# Google Stitch — FREE, no key required

# Vercel v0
designforge config set v0.apiKey "your-v0-key"

# Figma API
designforge config set figma.apiKey "your-figma-key"

# Canva Connect API
designforge config set canva.apiKey "your-canva-key"

Style Presets

| Preset | Description | |--------|-------------| | dashboard | Admin dashboard with charts, tables, sidebar navigation | | landing | Marketing landing page with hero, features, CTA sections | | ecommerce | Product listing, cart, checkout flow | | saas | SaaS application with clean, professional interface | | mobile-app | Native mobile app screen layout | | blog | Blog layout with articles, categories, reading view | | portfolio | Creative portfolio with project showcase | | social-media | Social feed, profiles, messaging interface | | email | Email template with responsive layout | | onboarding | User onboarding flow with steps and progress | | settings | Settings page with forms, toggles, preferences | | auth | Login, signup, password reset screens |

Device Types

| Device | Resolution | Use Case | |--------|-----------|----------| | mobile | 375×812 | Mobile phone screens | | desktop | 1440×900 | Desktop web applications | | tablet | 768×1024 | Tablet interfaces | | agnostic | Responsive | Device-agnostic responsive design |

Batch Processing

Create a YAML file:

items:
  - prompt: "dashboard with analytics charts"
    provider: stitch
    preset: dashboard
    device: desktop
  - prompt: "mobile onboarding flow"
    provider: v0
    preset: onboarding
    device: mobile

designforge batch designs.yaml
designforge batch designs.yaml --dry-run  # Preview only

Templates

# Save a template with variables
designforge template save app-screen "{page_type} page for {app_name} with {style} theme" --preset saas

# Use the template
designforge gen "" -t app-screen -v page_type=settings -v app_name=MyApp -v style=dark

# List and manage
designforge template list
designforge template show app-screen
designforge template delete app-screen

Part of the Forge Ecosystem

| Tool | Purpose | |------|---------| | AppForge | Scaffold projects | | BackForge | Backend init | | TestForge | AI test generation | | ImgForge | AI image generation | | AudioForge | AI audio generation | | VideoForge | AI video generation | | DesignForge | AI design generation | | ScreenForge | App store assets | | StoreForge | Store deployment | | MonForge | Production monitoring |

License

MIT © magicpro97