Stitch Ued Guide

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 (28 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 | Corner radius preset | | spacingScale | integer 0-3 | Layout density | | 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

Source & license

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

• Author: gabelul
• Source: gabelul/stitch-kit
• License: Apache-2.0
• Homepage: https://booplex.com/projects/stitch-kit-design-intelligence-for-ai-agents

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