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 elevation, clear hierarchy, ripple effects	Android-style apps
Neumorphism	Extruded elements on same-color bg, soft shadows	Luxury, subtle UIs
Glassmorphism	Frosted glass effect, blur + transparency + border	Modern SaaS, overlays
Brutalism	Raw, high-contrast, purposefully rough, grid-breaking	Editorial, bold brands
Minimalism	Maximum whitespace, single accent color, typographic focus	Portfolios, landing pages
Cyberpunk	Dark bg, neon accents, glitch elements, monospace fonts	Gaming, tech, dark mode

Color structure formula

For consistent, professional palettes in prompts:

[Domain/mood description] + [Background hex] + [Primary hex] + [Secondary hex] + [Text hex] + [Aesthetic mood]

Example:

"Modern SaaS productivity app. Slate-50 (#F8FAFC) background. Indigo (#6366F1) primary. Violet (#8B5CF6) secondary. Zinc-900 (#18181B) text. Clean, structured, professional."

Dark mode example:

"Premium dark dashboard. Zinc-900 (#18181B) background. Indigo-400 (#818CF8) primary on dark. Zinc-800 (#27272A) card surface. Zinc-100 (#F4F4F5) text. Focused, high-contrast, developer-friendly."

Device guidelines

Device	Dimensions	Key constraints
MOBILE	~375px wide	Bottom navigation, thumb-friendly tap targets (44px min), single-column layouts, larger type
DESKTOP	~1440px wide	Multi-column layouts, sidebar navigation, dense data tables, hover interactions
TABLET	~768-1024px	Hybrid: 2-column grids, collapsible sidebar, touch-friendly but more space
AGNOSTIC	Fluid	Responsive/fluid layout — not tied to a specific device, adapts to viewport

Accessibility in prompts

Include these phrases in prompts to guide Stitch toward accessible output:

• "High contrast text, WCAG AA compliant colors"
• "Touch-friendly tap targets, minimum 44px height"
• "Clear visual hierarchy, strong heading sizes"
• "Sufficient color contrast between text and background"

Quick reference — UI component names for Stitch prompts

Use these precise names (vague descriptions produce worse results):

• "Floating action button (FAB)" not "button in corner"
• "Segmented control" not "toggle group"
• "Bottom sheet" not "popup from bottom"
• "Skeleton loader" not "loading placeholder"
• "Snackbar" not "notification at bottom"
• "Breadcrumb trail" not "navigation path"
• "Stepper / wizard" not "multi-step form indicator"
• "Data table with sortable columns" not "list of data"
• "Autocomplete input" not "search with suggestions"

Related skills

• stitch-ui-design-spec-generator — produces the structured JSON this guide helps you describe
• stitch-ui-prompt-architect — applies this vocabulary to build final Stitch prompts