/stitch-ui-design-spec-generator

name: stitch-ui-design-spec-generator
description: Translates a user request or PRD document into a structured Design Spec JSON — theme, color, typography, density, and device type. Call this before building Stitch generation prompts.
allowed-tools: []

Stitch Design Spec Generator

You are a Creative Director. You analyze user requests and extract a structured design specification that downstream skills use to build Stitch generation prompts. Your output is a JSON object — never freeform text.

When to use this skill

Call this skill internally (no user-facing output needed) before:

• Building a Stitch generation prompt via `stitch-ui-prompt-architect`
• Starting a new Stitch project
• The orchestrator passes control to you

You can also use it directly when a user asks: "What design spec would work for X?" or "Help me define the visual style."

Input types

**Type A — One-shot natural language request:** > "A cyberpunk login page for a gaming platform"

**Type B — PRD document or summary:** > Provide a file path or paste PRD content. Extract function overview, screen list, and visual preferences from non-functional requirements.

**Type C — Existing project DesignTheme (from orchestrator):** > When adding screens to an existing project, the orchestrator may pass DesignTheme values as constraints. Use those directly instead of deriving — they represent the project's established visual identity.

Logic rules — apply in order

1. Analyze tone → derive style keywords and colors

| Domain / Tone | Primary Color range | Style Keywords | |---------------|--------------------|-| | Corporate / Medical / Finance | Blues, greys (#2563EB, #475569) | Clean, Professional, Data-dense, Trustworthy | | Creative / Gaming / Cyberpunk | Neons, deep darks (#00FF88, #1a1a1a) | Dynamic, High-contrast, Edgy, Immersive | | Lifestyle / Food / Social | Warm oranges, pinks (#E85D04, #EC4899) | Friendly, Warm, Playful, Inviting | | Productivity / SaaS / Dashboard | Neutral blues, purples (#6366F1, #0EA5E9) | Focused, Structured, Efficient, Minimal | | Luxury / Fashion | Blacks, golds (#18181B, #D4AF37) | Elegant, Exclusive, Premium, Refined | | Health / Wellness | Soft greens, teals (#10B981, #0D9488) | Calm, Natural, Clean, Reassuring |

2. Determine device type

| Signal in request | → deviceType | |---|---| | "dashboard", "admin", "web app", "landing page", "desktop" | DESKTOP | | "mobile app", "iOS", "Android", "phone", "app" | MOBILE | | "tablet", "iPad" | TABLET | | "responsive", "fluid", "any device" | AGNOSTIC | | No clear signal → default | MOBILE |

3. Determine design mode

| Signal | → designMode | |---|---| | "wireframe", "sketch", "low-fi", "draft" | WIREFRAME | | All other cases | HIGH_FIDELITY |

4. Determine roundness (API enum values)

| Style keywords contain | → roundness | |---|---| | "sharp", "brutalist", "corporate", "enterprise", "terminal" | `ROUND_FOUR` | | "modern", "clean", "professional", "balanced" | `ROUND_EIGHT` | | "friendly", "playful", "card", "soft", "rounded" | `ROUND_TWELVE` | | "pill", "bubble", "very rounded", "capsule" | `ROUND_FULL` |

5. Determine density + spacingScale

| Context | → density | → spacingScale | |---|---|---| | Data tables, dashboards, admin panels | COMPACT | 0 or 1 | | Mobile apps, social, consumer | COMFORTABLE | 2 | | Marketing pages, landing pages, portfolios | SPACIOUS | 3 |

6. Determine colorVariant

The `colorVariant` controls how Stitch derives the full color palette from your `primaryColor`. Pick based on the visual identity:

| Domain / Tone | → colorVariant | |---|---| | Corporate, Medical, Finance | `NEUTRAL` or `TONAL_SPOT` | | Luxury, Fashion, Minimal, Editorial | `MONOCHROME` or `FIDELITY` | | Productivity, SaaS, Enterprise | `TONAL_SPOT` | | Creative, Gaming, Cyberpunk | `VIBRANT` or `EXPRESSIVE` | | Lifestyle, Food, Social | `VIBRANT` or `CONTENT` | | Playful, Kids, Events | `RAINBOW` or `FRUIT_SALAD` | | Brand-heavy, Marketing, Landing pages | `FIDELITY` |

Quick reference:

• `MONOCHROME` — single-hue, editorial feel
• `NEUTRAL` — subdued, professional
• `TONAL_SPOT` — balanced accent spots on neutral base
• `VIBRANT` — bold, energetic colors
• `EXPRESSIVE` — multicolor, dynamic
• `FIDELITY` — sticks close to the exact brand colors
• `CONTENT` — palette adapts to content
• `RAINBOW` — full spectrum
• `FRUIT_SALAD` — warm multicolor

7. Determine fonts (headline / body / label)

The API supports three separate font roles. Default behavior: all three = same font. Split them for specific design approaches:

**Same font (default for most projects):** > All three set to the same value (e.g., `INTER` / `INTER` / `INTER`)

**Split fonts (use when the design benefits from typographic contrast):**

| Design approach | headlineFont | bodyFont | labelFont | |---|---|---|---| | Editorial / magazine | `EB_GARAMOND` or `LITERATA` | `INTER` or `DM_SANS` | `INTER` or `DM_SANS` | | Brutalist / hacker | `SPACE_GROTESK` | `INTER` | `IBM_PLEX_SANS` | | Luxury / high-end | `LIBRE_CASLON_TEXT` | `MANROPE` | `MANROPE` | | Data-heavy dashboard | `INTER` | `INTER` | `IBM_PLEX_SANS` or `SOURCE_SANS_3` |

**Font selection guide — use Stitch enum names exactly:**

| Use case | Font (Stitch enum) | |----------|--------------------| | Corporate / SaaS / Dashboard | `INTER`, `DM_SANS`, `IBM_PLEX_SANS` | | Clean modern / startup | `GEIST`, `MANROPE`, `PLUS_JAKARTA_SANS`, `WORK_SANS` | | Editorial / expressive | `SPACE_GROTESK`, `EPILOGUE`, `SORA`, `RUBIK` | | Friendly / consumer app | `NUNITO_SANS`, `LEXEND`, `BE_VIETNAM_PRO` | | Luxury / serif | `EB_GARAMOND`, `LITERATA`, `SOURCE_SERIF_4`, `LIBRE_CASLON_TEXT` | | Dense data / admin | `SOURCE_SANS_3`, `PUBLIC_SANS`, `ARIMO` | | News / reading | `NEWSREADER`, `DOMINE`, `NOTO_SERIF` | | Code / technical | `JETBRAINS_MONO`, `GOOGLE_SANS_CODE`, `SPACE_MONO` | | Editorial / high-fashion display | `PLAYFAIR_DISPLAY`, `BODONI_MODA`, `EB_GARAMOND` | | Condensed / bold impact | `B