Stitch-kit stitch-ued-guide

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.

install

source · Clone the upstream repo

git clone https://github.com/gabelul/stitch-kit

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/gabelul/stitch-kit "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/stitch-ued-guide" ~/.claude/skills/gabelul-stitch-kit-stitch-ued-guide && rm -rf "$T"

manifest: skills/stitch-ued-guide/SKILL.md

source content

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