Stitch Enhance Prompt

Stitch Prompt Enhancer

Transforms vague UI ideas into detailed, structured prompts optimized for Stitch.

Overview

Stitch produces better results from detailed, specific prompts. This skill:

1. Enhances specificity: Converts vague descriptions into detailed specifications
2. Adds UI/UX keywords: Injects design terminology that Stitch understands
3. Design system context: Integrates style information from DESIGN.md
4. Structured output: Structures prompts for optimal generation results

Stitch Prompting Principles

3 Elements of an Effective Prompt

Prompt Quality Spectrum

Bad prompt: "login page"

Okay prompt: "Login page with email and password fields"

Good prompt: "
Minimal login page:
- Center-aligned card-style login form
- Logo and welcome message at top
- Email input field (with icon)
- Password input field (show/hide toggle)
- Blue primary button 'Login'
- 'Forgot password' link
- 'Create account' secondary button
- Soft gradient background
"

Enhancement Process

Step 1: Input Analysis

Analyze the user's original idea:

Input: "Make a dashboard"

Analysis:
- Type: Dashboard (admin/analytics UI)
- Missing information:
  - What data?
  - What style?
  - Key features?

Step 2: Context Gathering

Collect relevant information:

1. Check DESIGN.md (if available)

   • Color palette
   • Typography rules
   • Component styles

2. Domain inference

   • Identify domain from user mentions
   • Apply common patterns

Step 3: Prompt Expansion

Expansion Checklist

• Page purpose: What is the main goal of this page?
• User type: Who uses this page?
• Key elements: What elements must be included?
• Layout structure: What sections is it composed of?
• Interactions: What are the main actions?
• Visual style: What mood does it convey?

Step 4: Generate Structured Output

Enhancement Template

Basic Template

## [Page Type]: [Page Name]

### Overview
[1-2 sentence description of purpose and main function]

### Visual Style
- **Mood**: [adjectives - e.g., modern, minimal, professional]
- **Colors**: [main color description or DESIGN.md reference]
- **Typography**: [font style description]

### Layout Structure
1. **Header**: [header components]
2. **Main Section**: [main content area]
3. **Sidebar** (optional): [auxiliary information]
4. **Footer**: [footer components]

### Key Elements
- [Element 1]: [description]
- [Element 2]: [description]
- [Element 3]: [description]

### Interactions
- [Action 1]: [behavior description]
- [Action 2]: [behavior description]

### Design System
[Copy DESIGN.md section 6 or style guide]

UI/UX Keyword Dictionary

Keywords that improve prompts:

Layout Keywords

Style Keywords

Component Keywords

State Keywords

Things to Avoid

Reference Resources

• Stitch prompting guide: https://stitch.withgoogle.com/docs/learn/prompting/
• Stitch gallery (for inspiration): https://stitch.withgoogle.com/gallery
• UI pattern reference: https://ui-patterns.com/