メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
Master entry point for all Stitch design workflows. Routes from user request → design spec → prompt assembly → screen generation → iteration (edit, variants, design systems) → design system extraction → framework conversion (Next.js, Svelte, HTML, React Native, or SwiftUI) → optional quality pass.
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
Creates a reusable Stitch Design System from theme tokens — colors, fonts, roundness, saturation. Can be applied to future screens for visual consistency.
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
| name | stitch-ued-guide |
| description | 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. |
| allowed-tools | [] |
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