Ai Design Generation

AI Design Generation

1. AI Design Generation Philosophy

AI as Co-Pilot, Not Replacement

AI generation tools are accelerators, not replacements for design thinking. A generation tool has no understanding of user needs, business goals, or brand strategy — it only transforms text into pixels. The designer (or design-aware agent like Sumi) provides the intelligence: the brief, the constraints, the quality bar, the iteration direction.

The Co-Pilot Model:

• Human/agent defines the problem, constraints, and success criteria
• AI generates candidates rapidly across the solution space
• Human/agent evaluates, selects, critiques, and steers
• AI refines based on directed feedback
• Human/agent makes final production decisions

This is not a compromise — it is genuinely superior to either pure human or pure AI workflows. AI explores breadth (hundreds of variations in minutes); humans provide depth (taste, context, strategy). The combination outperforms either alone.

The Human Curation Loop

Every AI generation workflow must include a curation checkpoint. The loop follows a consistent pattern:

1. Specify — Translate design intent into a structured prompt
2. Generate — Produce 3-6 candidates per round
3. Evaluate — Score against design criteria (brand, usability, aesthetics)
4. Select — Choose the strongest candidate(s) to advance
5. Refine — Adjust the prompt based on what worked and what did not
6. Repeat — 2-4 rounds typically reach production quality

Never ship a first-generation output without evaluation. Even when the result looks good, check: Does it match the brand? Is the typography readable? Are the proportions correct? Does it solve the actual user problem?

Prompt Engineering as a Design Skill

Writing effective generation prompts is a design discipline. It requires the same skills as writing a design brief: clarity about goals, specificity about constraints, awareness of audience, and taste in execution. The best prompters are experienced designers who understand what to ask for — not prompt template collectors.

Core Principles of Design Prompt Engineering:

• Specificity beats length — "16px Inter Medium, #1A1A2E on white, 8px radius card" beats "make it look modern and clean"
• Reference real products — "Stripe dashboard density" communicates more than paragraphs of description
• Constrain before you create — State what the design must NOT do (no gradients, no stock photos, no rounded avatars)
• Layer your prompt — Style first, then layout, then content, then fine details
• Include quality modifiers — "production-ready", "pixel-perfect", "4K render" shift models toward higher fidelity

---

2. MCP Integration Overview

How Claude Code Connects to Design Generation Tools

Claude Code communicates with design generation services through MCP (Model Context Protocol) servers. Each MCP server wraps an external API and exposes it as a set of tools that Claude can invoke directly within a conversation.

The Architecture:

User Request → Claude Code (Sumi skill) → MCP Server → External API → Generated Asset
                      ↓                                        ↓
              Prompt Engineering                         Raw Output
              Quality Scoring                            Post-Processing
              Iteration Direction                        Final Delivery

Key Benefits of MCP Integration:

• Claude can generate designs mid-conversation without the user leaving the terminal
• Prompt construction is automated using Sumi's design intelligence
• Results can be evaluated, iterated, and refined in a continuous loop
• Multiple tools can be chained in a single pipeline (e.g., Stitch for layout, Fal.ai for hero image, Recraft for icons)

MCP Server Configuration

All MCP servers are configured in Claude Code's settings. Each server requires an API key for its respective service. Configuration is stored in ~/.claude/mcp_servers.json or the project-level .mcp.json.

Example Configuration:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@anthropic/stitch-mcp"],
      "env": { "STITCH_API_KEY": "sk-..." }
    },
    "fal": {
      "command": "npx",
      "args": ["@fal-ai/mcp"],
      "env": { "FAL_KEY": "key-..." }
    },
    "recraft": {
      "command": "npx",
      "args": ["recraft-mcp"],
      "env": { "RECRAFT_API_KEY": "rc-..." }
    },
    "figma": {
      "command": "npx",
      "args": ["@anthropic/figma-mcp"],
      "env": { "FIGMA_ACCESS_TOKEN": "figd_..." }
    }
  }
}

Supported MCP Servers (All Optional)

| Server | What It Does | Install | Key Required | |--------|-------------|---------|-------------| | stitch-mcp | Generate UI screens from text descriptions | npm i -g @anthropic/stitch-mcp | Stitch API | | @fal-ai/mcp | 600+ image/video models (Imagen 4, FLUX, Veo 3.1, Recraft V3) | npm i -g @fal-ai/mcp | Fal.ai API | | replicate-mcp | Open-source model access | npm i -g replicate-mcp | Replicate API | | openai-images-mcp | GPT-Image / DALL-E 3 | npm i -g openai-images-mcp | OpenAI API | | figma-mcp | Read/write Figma files (official) | npm i -g @anthropic/figma-mcp | Figma token |

This skill enhances Sumi when MCP servers are available but does NOT require them. Without MCP servers, Sumi provides detailed specifications and prompts that users can use manually with any generation tool.

---

3. Stitch MCP — UI Generation

Capabilities

Stitch is purpose-built for generating UI screens from natural language descriptions. Unlike general image models, Stitch understands UI primitives: navigation bars, cards, forms, data tables, modals, sidebars. Its output is structured, layouted, and component-aware.

What Stitch Generates Well:

• Full page layouts (dashboards, settings, profiles, feeds)
• Component compositions (card grids, form sections, navigation)
• Responsive variations (desktop, tablet, mobile)
• Light and dark mode variants
• Platform-specific UIs (iOS, Android, web)

What Stitch Does NOT Do Well:

• Photorealistic imagery (use Fal.ai or DALL-E for hero images)
• Custom illustrations (use Recraft or Midjourney)
• Animated prototypes (use Veo or Runway for motion)
• Pixel-perfect production code (use component-patterns-code skill for code)

Prompt Patterns for Stitch

Layout Generation Pattern:

Generate a [platform] [screen type] with:
- Navigation: [nav style + items]
- Layout: [grid/stack/split description]
- Content: [specific data to show]
- Style: [visual direction — reference product or design tokens]
- State: [default/loading/empty/error]

Component Generation Pattern:

Generate a [component name] component that:
- Contains: [child elements]
- Shows: [specific data]
- Supports: [interactions — hover, selected, disabled]
- Follows: [design system reference]

Full Page Generation Pattern:

Generate a complete [product type] [page name]:
- Header: [logo + nav items + user menu]
- Hero: [headline + subtext + CTA + visual]
- Section 1: [feature grid — 3 columns, icon + title + description]
- Section 2: [testimonials — carousel or grid]
- Section 3: [pricing — 3 tier cards with highlighted recommended]
- Footer: [links + social + newsletter signup]
Style: [reference product], [color palette], [typography]

Iteration Workflow with Stitch

Round 1 — Broad Exploration: Generate 3-4 variations with different layout approaches. Use general descriptions. Goal: find the right structural direction.

Round 2 — Refinement: Take the best layout and add specificity. Add exact content, adjust spacing descriptions, specify component variants. Goal: nail the composition.

Round 3 — Polish: Fine-tune typography descriptions, color references, spacing, and state variants. Generate light and dark modes. Goal: production-adjacent fidelity.

Round 4 — Variants: Generate the same screen for different breakpoints, different data states (empty, loading, error, populated), and edge cases (long text, missing images). Goal: completeness.

---

4. Image Generation Tools

Fal.ai — The Multi-Model Platform

Fal.ai provides access to 600+ models through a single API, making it the most versatile generation platform available. Key models for design work:

FLUX Pro / FLUX.1 Dev:

• Best for: High-fidelity UI mockup screenshots, product photography, realistic renders
• Strengths: Exceptional text rendering in images, photorealistic quality, fast generation
• Resolution: Up to 2048x2048, supports custom aspect ratios
• Prompt style: Descriptive, natural language, responds well to camera/lighting terminology
• Use case: Hero images, product shots, lifestyle imagery for landing pages

FLUX Schnell:

• Best for: Rapid iteration, concept exploration, batch generation
• Strengths: 4x faster than FLUX Pro, good quality for drafts
• Use case: Quick visual explorations before committing to high-fidelity generation

Imagen 4 (via Fal):

• Best for: Photorealistic imagery with precise prompt adherence
• Strengths: Superior text rendering, excellent at following complex compositional prompts
• Use case: Marketing materials, product mockups, banner images

Configuration for UI Asset Generation:

Model: flux-pro (high fidelity) or flux-schnell (speed)
Resolution: Match target — 1440x900 for desktop hero, 390x844 for mobile, 1200x630 for OG image
Steps: 28-50 for Pro, 4 for Schnell
Guidance: 3.5-7.5 (higher = more prompt adherence, lower = more creative latitude)

Recraft V3 — Vector and Icon Generation

Recraft V3 is the only AI model capable of generating true SVG/vector output. This makes it indispensable for icon generation, logo exploration, and scalable illustrations.

Vector Generation Capabilities:

• SVG output — real vector paths, not rasterized images saved as SVG
• Consistent style across batch generations
• Icon sets with unified weight, style, and grid alignment
• Illustration styles: flat, line art, isometric, hand-drawn, geometric

Icon Generation Best Practices:

Prompt structure: "[icon subject] icon, [style], [weight], [grid], [color]"
Example: "Shopping cart icon, line style, 2px stroke, 24x24 grid, single color #1A1A2E"
Batch: Generate full sets by varying only the subject while keeping style tokens identical

Illustration Style Presets:

• Corporate flat: "flat vector illustration, geometric shapes, limited palette, no outlines, modern SaaS style"
• Line art: "continuous line illustration, single stroke weight, minimal detail, elegant, editorial"
• Isometric: "isometric 3D illustration, flat shading, consistent 30-degree angle, pastel palette"
• Hand-drawn: "hand-drawn sketch illustration, imperfect lines, warm, approachable, ink on paper feel"

Brand Consistency Technique: To maintain brand consistency across multiple Recraft generations, anchor every prompt with the same style suffix:

Style anchor: ", [brand] style, [primary color] and [secondary color] palette, [illustration style], [line weight], consistent with previous generations"

Midjourney — High-Impact Visuals

Midjourney excels at generating visually striking imagery for hero sections, editorial illustrations, and marketing materials. It is not ideal for precise UI generation but unmatched for visual impact.

Prompt Structure for UI/UX Work:

[Subject description] --ar [aspect ratio] --style [raw/aesthetic] --stylize [0-1000] --v 6.1

Key Parameters:

• --ar 16:9 — Desktop hero images
• --ar 9:16 — Mobile hero images, app store screenshots
• --ar 1:1 — Avatars, thumbnails, social media
• --ar 3:2 — Blog post headers, card images
• --style raw — More literal prompt interpretation, better for specific UI needs
• --stylize 50-150 — Lower values for more control, higher for more artistic flair
• --no text, UI elements, buttons — Negative prompts to avoid unwanted elements

Best Use Cases in Design:

• Hero section background imagery
• Editorial and blog illustrations
• Conceptual mood board imagery
• Abstract background patterns and textures
• Product lifestyle photography concepts
• Marketing campaign visuals

Prompt Examples for Common Design Needs:

Hero image: "Abstract gradient mesh, deep navy transitioning to electric violet, subtle grain texture, premium SaaS aesthetic --ar 16:9 --style raw --stylize 100"

Illustration: "Isometric workspace with laptop, coffee cup, and plant, soft pastel palette, minimal geometric style --ar 3:2 --stylize 200"

Background: "Subtle topographic line pattern, light grey on white, barely visible, clean minimal texture --ar 16:9 --style raw --stylize 50 --no color"

DALL-E 3 — Concept Art and Exploration

DALL-E 3 (via OpenAI) has strong prompt comprehension and excels at conceptual exploration, but produces softer, more painterly results than FLUX or Midjourney.

Strengths:

• Excellent text comprehension — understands complex, multi-part prompts
• Good at conceptual and metaphorical imagery
• Reliable text rendering within images
• Accessible via direct API (no Discord, no queue)
• Integrated editing capabilities (inpainting, outpainting)

Limitations for UI Work:

• Output tends toward illustrated/painterly rather than photorealistic
• Less control over exact style compared to Midjourney
• Resolution limited to 1024x1024, 1024x1792, or 1792x1024
• Cannot match the precision of Stitch for UI layouts
• No vector output capability

Best Use Cases:

• Early concept exploration (before committing to a style direction)
• Metaphorical illustrations for blog posts and marketing
• Placeholder imagery during wireframing
• Quick visual brainstorming during design workshops
• Social media graphics and promotional imagery

---

5. Video Generation

Veo 3.1 (Google, via Fal.ai)

Veo 3.1 generates high-quality video clips from text prompts, useful for prototype animations, product demos, and marketing content.

Design Applications:

• Animated hero sections (looping background videos)
• Product walkthrough animations
• Micro-interaction previews at scale
• Social media video ads and promotional clips
• App store preview videos (conceptual)

Prompt Pattern:

"Smooth UI animation showing [interaction]: [starting state] transitions to [ending state],
[platform] design style, [duration] seconds, [camera movement], clean background, 60fps"

Runway Gen-3 Alpha

Runway specializes in creative video generation with strong artistic control.

Best For:

• Stylized product videos with artistic flair
• Brand videos with specific mood and aesthetic
• Motion graphics concepts
• Cinematic product reveals

Key Features:

• Image-to-video (animate a static mockup)
• Motion brush (control where movement happens)
• Style reference (maintain visual consistency)

Pika

Pika focuses on quick, accessible video generation with simple controls.

Best For:

• Rapid prototype animation concepts
• Simple motion mockups for client presentations
• Social media short-form content
• Quick iteration on animation direction

When to Use Which Video Tool: | Need | Tool | Why | |------|------|-----| | Photorealistic product demo | Veo 3.1 | Best realism, longest clips | | Artistic brand video | Runway Gen-3 | Best creative control | | Quick motion concept | Pika | Fastest, simplest | | UI animation reference | Veo 3.1 | Understands UI context |

---

6. Prompt Engineering for Design

UI Screenshot Prompts

The most common generation task is producing high-fidelity UI screenshots for mockups, presentations, and client approvals. Structure prompts in layers:

Layer 1 — Style Foundation:

"Modern SaaS dashboard, clean and minimal, Stripe/Linear aesthetic"

Layer 2 — Layout Structure:

"Left sidebar navigation (64px, dark), top header bar (56px, white),
main content area with 3-column card grid"

Layer 3 — Content Specifics: ``

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: phazurlabs
• Source: phazurlabs/sumi
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.