Stitch UED Guidelines
This skill serves as a reference for User Experience Design (UED) guidelines when working with Stitch. It includes interaction principles, visual vocabulary, and prompt engineering strategies.
When to use this skill
Use this skill when:
- The user asks about layout or style terms (e.g. Masonry, Glassmorphism, Sidebar) or device constraints (mobile vs desktop width, touch targets).
- You need to structure or improve a Stitch prompt (Context → Layout → Component → Content) or ensure consistent UED wording.
- You are coordinating with stitch-ui-designer and need UED/accessibility/design-system alignment alongside Stitch generation.
For transforming vague ideas into a full Stitch prompt, use stitch-ui-prompt-architect; combine both when you want structure + vocabulary (this skill) and concrete prompt output (prompt-architect).
Design Modes (Model Selection)
Stitch operates in two distinct modes, which you should choose based on the user's need for speed vs. fidelity:
Prompt Engineering Strategy
A perfect Stitch prompt follows this structure:
[Context & Style] + [Layout Structure] + [Component Details] + [Content & Data]
1. Context & Style
- Context: "Mobile fitness app for gym goers."
- Style: "Dark mode with neon green accents (Cyberpunk). Rounded corners."
- Reference: "Similar to Spotify's dark theme but for fitness."
2. Layout Structure
- Mobile: "Bottom navigation bar, scrollable feed."
- Desktop: "Left sidebar navigation, top header, main content area with data grid."
- Grid: "3-column card grid with responsive behavior."
3. Component Details
- Don't say: "A list."
- Do say: "A vertical list of 'Workout Cards', each containing a map thumbnail, duration (e.g., '30 min'), and a 'Start' button."
4. Content & Data
- Realism: Ask for realistic data. "User 'Alice', 'Morning Yoga', '300 kcal'."
- State: "Active state for the 'Home' tab."
Quick checklist (before calling generate_screen_from_text):
Visual Vocabulary
Use these terms to control the look and feel:
Layout Patterns
- Hero Section: Top area with main headline/image.
- Split Screen: Left/Right division (common in Desktop Auth).
- Masonry: Waterfall layout (Pinterest style).
- Sidebar Navigation: Vertical nav on the left (SaaS standard).
Style Modifiers
- Flat: No shadows, high saturation.
- Material: Shadows, layers, paper metaphor.
- Neomorphism: Soft shadows, extruded shapes.
- Glassmorphism: Blurred transparency, frosted glass.
- Brutalism: Raw, bold, high contrast, large typography.
Color & Theme Prompts
When describing Context & Style, use a clear color structure so Stitch produces consistent palettes. A strong pattern (inspired by AI配色提示词-UI配色指南):
Structure: [App type] + [Background hex] + [Primary hex] + [Secondary hex] + [Accent hex] + [Design system] + [Mood]. Optionally add semantic colors: success green, alert red, warning yellow.
Example — Dark productivity:
Modern productivity app dark theme, charcoal grey background #1a1a1a, primary blue #4A90E2, secondary teal #26D0CE, neutral greys #2d2d2d to #f5f5f5, accent orange #FF6B35 for CTAs, Material Design 3 inspired, high contrast for readability, professional and focused atmosphere.
Example — Bright desktop tool:
Project management app bright theme, clean white background #FFFFFF, primary royal blue #2563EB, secondary purple #7C3AED, soft grey cards #F9FAFB, green success #22C55E, red alerts #DC2626, yellow warnings #F59E0B, minimal design with subtle shadows, organized and efficient visual hierarchy.
Quick color checklist: Background defined? Primary/secondary/accent with hex? Semantic colors (success/alert/warning) if needed? Design system (Material 3, Fluent) or style (glassmorphism, minimal) mentioned?
More ready-to-use prompts: see docs/color-prompt-guide.md in this repo, or the original article for 20 curated prompts.
Device Guidelines
- Mobile: ~375px width. Focus on thumb-friendly bottom navigation. Vertical scrolling is expected.
- Desktop/Web: ~1440px width. Use horizontal space. Multi-column layouts.
- Tablet: Hybrid. Often resembles desktop but with touch targets.
Accessibility & Inclusive Design
- Contrast & readability: Prefer sufficient contrast (dark/light); avoid low-contrast text. In prompts, you can add "high contrast" or "clear text hierarchy."
- Touch targets: For mobile/tablet, ask for touch-friendly controls (e.g. "buttons at least 44px tap area"). In Context or Component details, add "touch-friendly" when relevant.
- Focus & keyboard: For desktop, mention "clear focus states" or "keyboard-navigable" when the design should support accessibility.
- In prompts: Add phrases like "high contrast," "clear focus states," "touch-friendly buttons" in Context/Style or Component Details when UED or accessibility alignment is needed.
Controls & Variants
- Variants: Stitch generates multiple options. You can ask to "Generate variants for the hero section" to A/B test designs.
- Controls: Use the Interactive Chat to refine designs ("Make the button blue", "Move the logo to the center").
Related resources
- Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/ — official best practices; consult for up-to-date recommendations.
- Division of labor: stitch-ued-guide = structure and vocabulary (how to phrase, what terms to use). stitch-ui-prompt-architect = transform vague ideas into a full, executable Stitch prompt (with DESIGN.md, framework contracts). Use both when you need consistent UED wording and concrete prompt output.
- Vague → enhanced prompt: Use stitch-ui-prompt-architect (Path A: enhance vague UI ideas with specificity, UI/UX keywords, DESIGN.md context). Use with stitch-design-md for DESIGN.md and stitch-ui-design-spec-generator for full flow.
- Stitch skills in this repo (prefer these over official): design-md → stitch-design-md; enhance-prompt → stitch-ui-prompt-architect (two paths + framework contracts); react-components → stitch-react-components; stitch-loop → stitch-loop; remotion → stitch-remotion; shadcn-ui → stitch-shadcn-ui. Plus stitch-mcp-* (one skill per MCP tool: create-project, get-project, list-projects, generate-screen-from-text, get-screen, list-screens), stitch-ui-design-spec-* (Bootstrap, Element Plus, Layui, uView, uView Pro, Vant), stitch-ui-designer (orchestrator), and six Stitch→framework conversion skills (Vue + Element/Bootstrap/Layui/Vant, uni-app + uView/uView Pro). These skills reference each other and the same MCP; use stitch-mcp- names (e.g. get_screen → stitch-mcp-get-screen).
References