/stitch-ued-guide

name: stitch-ued-guide
description: Visual vocabulary, design terminology, and prompt engineering strategy for Stitch. Reference this when you need layout pattern names, aesthetic style terms, color structure formulas, or device guidelines.
allowed-tools: []

Stitch UED Guide

This is a reference guide, not an action skill. Use it when:

• You need specific design terminology for a Stitch prompt (masonry, glassmorphism, split-screen)
• You're unsure how to describe a layout pattern or visual style
• You want to apply color + theme structure consistently
• You need to know device-specific constraints for prompt writing

Prompt engineering strategy

The most effective Stitch prompts follow this 4-part structure:

[Context & Style] + [Layout Structure] + [Component Details] + [Content & Data]

**Context & Style:** > "Mobile fitness app for gym-goers. Dark mode with neon green accents. Cyberpunk aesthetic. Rounded corners."

**Layout Structure:** > "Bottom navigation bar (Home, Workout, Progress, Profile). Scrollable main feed. Sticky top bar with greeting."

**Component Details:** > "Workout cards with gradient border, thumbnail, title, duration badge, and 'Start' pill button."

**Content & Data:** > "Sample data: 'Upper Body Blast' (45 min), 'Core Destroyer' (20 min), 'Morning Run' (30 min, completed today)."

Stitch model selection

| Model | When to use | |-------|-------------| | `GEMINI_3_1_PRO` | High-fidelity designs, complex layouts, when quality matters — **recommended default** | | `GEMINI_3_FLASH` | Fast iteration, wireframes, rapid exploration, when speed matters | | `GEMINI_3_PRO` | **Deprecated** — still works but will be removed. Use `GEMINI_3_1_PRO` instead |

Color variant reference (colorVariant)

Controls how Stitch derives the full color palette from your `primaryColor`:

| colorVariant | Visual effect | Best for | |---|---|---| | `MONOCHROME` | Single-hue, editorial feel | Luxury, minimal, text-heavy, portfolios | | `NEUTRAL` | Subdued, professional | Corporate, enterprise, medical | | `TONAL_SPOT` | Balanced accent spots on neutral base | SaaS, productivity, dashboards | | `VIBRANT` | Bold, energetic colors | Consumer apps, social, food | | `EXPRESSIVE` | Multicolor, dynamic | Creative, gaming, entertainment | | `FIDELITY` | Precise brand color matching | Brand-heavy, marketing, landing pages | | `CONTENT` | Palette adapts to content | Media, editorial, photo-heavy | | `RAINBOW` | Full spectrum | Kids apps, events, playful | | `FRUIT_SALAD` | Warm multicolor | Food, lifestyle, wellness |

Spacing scale reference (spacingScale)

| spacingScale | Effect | Best for | |---|---|---| | 0 | Minimal spacing — very tight, data-dense | Admin panels, data tables, terminal-style UIs | | 1 | Compact — efficient use of space | Dashboards, dense mobile lists, SaaS tools | | 2 | Normal — comfortable breathing room | Standard apps, consumer products | | 3 | Spacious — generous whitespace | Landing pages, marketing, portfolios, luxury |

DesignTheme API field reference

Quick reference for all DesignTheme fields returned by `get_project`:

| Field | Type | Description | |---|---|---| | `colorMode` | LIGHT / DARK | Base theme mode | | `customColor` | hex string | Seed color for palette generation | | `colorVariant` | enum (9 values) | How palette is derived from seed | | `headlineFont` | font enum (68 values) | Display/headline typeface | | `bodyFont` | font enum | Body text typeface | | `labelFont` | font enum | Labels, captions, metadata typeface | | `font` | font enum | **Deprecated** — use headlineFont/bodyFont/labelFont | | `roundness` | ROUND_FOUR/EIGHT/TWELVE/FULL (`ROUND_TWO` exists but is deprecated/unused) | Corner radius preset | | `spacingScale` | integer 0-3 | Layout density | | `spacing` | object | Optional. Map of spacing token name → CSS value (e.g. `{"sm": "8px"}`) | | `typography` | object | Optional. Map of typography level name (e.g. `h1`, `body`) → Typography token (`fontFamily`, `fontSize`, `fontWeight`, `letterSpacing`, `lineHeight`) | | `namedColors` | object (40+ tokens) | Full semantic color map (Material 3) | | `designMd` | string | Auto-generated design system markdown | | `description` | string | Brief aesthetic description | | `overridePrimaryColor` | hex | Explicit primary override | | `overrideSecondaryColor` | hex | Explicit secondary override | | `overrideTertiaryColor` | hex | Explicit tertiary override | | `overrideNeutralColor` | hex | Explicit neutral base override | | `backgroundLight` | hex | Light mode background | | `backgroundDark` | hex | Dark mode background |

Layout patterns

Mobile patterns

• **Vertical scroll feed** — infinite scroll of content cards, sticky header, bottom nav
• **Tab navigation** — segmented control or tab bar, content switches inline
• **Bottom sheet** — slide-up panel for secondary content or actions
• **Full-screen form** — single-column, large touch targets, sticky submit
• **Detail → action** — hero content at top, description below, sticky CTA at bottom

Desktop patterns

• **Left sidebar + main** — persistent side nav (200-280px), main content area, top bar
• **Top nav + content** — horizontal navigation bar, sectioned main content below
• **Split screen** — two equal halves (form/preview, signup/product screenshot)
• **Dashboard grid** — KPI strip, charts, tables, widgets in responsive grid
• **Landing page** — full-width hero, feature sections, pricing, footer CTA

Universal patterns

• **Masonry grid** — variable-height cards, Pinterest-style layout
• **Bento grid** — asymmetric boxes of varying sizes, each containing different content
• **Hero section** — full-width/height with background image, headline, CTA
• **Card grid** — uniform cards in responsive column grid

Visual styles

| Style | Description | Use for | |-------|-------------|---------| | **Flat** | No shadows, bold colors, simple shapes | Mobile apps, illustrations | | **Material** | Cards with elevat