From stitch-kit
Provides Stitch UED reference with design terminology, prompt engineering strategies, color variants, spacing scales, model selection, and device guidelines for UI prompts.
npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitThis skill cannot use any tools. It operates in read-only mode without the ability to modify files or execute commands.
This is a reference guide, not an action skill. Use it when:
Provides UED guidelines, visual vocabulary, and prompt structures for Stitch UI generation. Useful for layout/style terms, device constraints, and improving prompts with skills like stitch-ui-prompt-architect.
Generates DESIGN.md files for Google Stitch enforcing premium UI standards: strict typography, calibrated colors, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
Generates DESIGN.md files for Google Stitch screen generation with premium typography, color palettes, layouts, motion intents, and anti-generic UI rules.
Share bugs, ideas, or general feedback.
This is a reference guide, not an action skill. Use it when:
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)."
| 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 |
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 |
| 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 |
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 |
| 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 |
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 | 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 |
Include these phrases in prompts to guide Stitch toward accessible output:
Use these precise names (vague descriptions produce worse results):
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