Stitch Ui Design

# Stitch UI Design Skill

Expert guidance for creating effective prompts in Google Stitch, the AI-powered UI design tool.

## Overview

This skill provides comprehensive guidance for crafting precise, actionable prompts that generate high-quality UI designs in Google Stitch. It covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows.

## What's Included

### SKILL.md
Core prompting principles and techniques:
- Specificity and detail requirements
- Visual style definition
- Multi-screen flow structuring
- Platform and responsive specifications
- Functional requirements
- Prompt templates
- Iteration strategies
- Common use cases
- Anti-patterns to avoid

### References

#### prompt-examples.md
Comprehensive library of effective Stitch prompts organized by category:
- Landing pages
- Mobile apps
- Dashboards
- E-commerce
- Forms & authentication
- Content platforms
- SaaS applications

Each example includes detailed component breakdowns, style specifications, and platform requirements.

#### advanced-techniques.md
Advanced strategies for production-ready designs:
- Image-to-UI workflows
- Design system integration
- Responsive design strategies
- Accessibility considerations
- Performance optimization
- Component reusability
- Atomic design methodology
- Export and handoff best practices

## When to Use This Skill

Use this skill when:
- Creating UI designs in Google Stitch
- Generating mobile or web app interfaces
- Crafting effective Stitch prompts
- Converting sketches or wireframes to digital UI
- Building design systems
- Creating responsive layouts
- Ensuring accessibility compliance
- Optimizing design-to-code workflows

## Key Principles

1. **Be Specific** - Generic prompts yield generic results
2. **Define Visual Style** - Always include colors, aesthetics, and design direction
3. **Structure Clearly** - List components and sections explicitly
4. **Specify Platform** - Indicate mobile, tablet, desktop, or responsive
5. **Include Functionality** - Describe interactions, states, and user flows
6. **Iterate Incrementally** - Make focused changes rather than complete redesigns

## Quick Start

### Basic Prompt Template

```
[Screen/Component Type] for [User/Context]

Key Features:
- [Feature 1 with specific details]
- [Feature 2 with specific details]
- [Feature 3 with specific details]

Visual Style:
- [Color scheme]
- [Design aesthetic]
- [Layout approach]

Platform: [Mobile/Web/Responsive]
```

### Example Usage

```
Dashboard for SaaS analytics platform

Key Features:
- Top metrics cards showing MRR, active users, churn rate
- Line chart for revenue trends (last 30 days)
- Recent activity feed with user actions
- Quick action buttons for reports and exports

Visual Style:
- Dark mode with blue/purple gradient accents
- Modern glassmorphic cards with subtle shadows
- Clean data visualization with accessible colors

Platform: Responsive web (desktop-first)
```

## Best Practices

### Do's ✅
- Provide specific component details
- Define clear visual direction
- Specify responsive behavior
- Include interaction states
- Use design terminology
- Reference existing designs when helpful
- Iterate with annotations
- Consider accessibility from the start

### Don'ts ❌
- Use vague descriptions ("nice website")
- Omit visual style guidance
- Forget platform specifications
- Ignore responsive requirements
- Skip accessibility considerations
- Make complete redesigns instead of incremental changes

## Integration with Development

### Stitch → Figma → Code
1. Generate UI in Stitch with detailed prompts
2. Export to Figma for design system integration
3. Hand off to developers with design specs
4. Implement with production-ready code

### Stitch → HTML → Framework
1. Generate and refine UI in Stitch
2. Export HTML/CSS code
3. Convert to React/Vue/Svelte components
4. Integrate into application codebase

## Resources

- **SKILL.md** - Core prompting guide
- **prompt-examples.md** - 30+ deta