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:

• Standard Mode (Gemini 2.5 Flash)

Best for: Rapid iteration, wireframing, exploring multiple layout ideas quickly. Features: Fast generation, Text-to-UI, Theme editing. * Use Case: "Show me 3 different layout options for a login screen."

• Experimental Mode (Gemini 2.5 Pro)

Best for: High-fidelity design, complex logic, visual references. Features: Image-to-UI (Sketch/Screenshot upload), richer details, smarter component logic. * Use Case: "Turn this napkin sketch into a production-ready dashboard."

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 generatescreenfrom_text):

• Context & style defined? (device, app type, theme)
• Layout defined? (nav position, main area structure)
• Key components specific? (avoid "a list"; use e.g. "Workout Cards with map thumbnail, duration, Start button")
• Sample content / state included? (real copy, active state)

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-<tool> names (e.g. get_screen → stitch-mcp-get-screen).

References

• [Examples](examples/usage.md)

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。