gabelul 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 describestitch-ui-prompt-architect— applies this vocabulary to build final Stitch prompts