feat: add stitch-ui-design skill for Google Stitch prompting (#45)
Add comprehensive skill for creating effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs (Gemini 2.5 Flash). Includes: - Core prompting principles and templates - 10+ practical examples (landing pages, mobile apps, dashboards) - Iteration strategies and anti-patterns - Design-to-code workflows - 44KB of reference documentation Category: Data & AI / General Risk: Low (design guidance, no executable commands)
This commit is contained in:
@ALEKGG
541
skills/stitch-ui-design/references/advanced-techniques.md
Normal file
541
skills/stitch-ui-design/references/advanced-techniques.md
Normal file
@@ -0,0 +1,541 @@
|
||||
# Advanced Stitch Techniques
|
||||
|
||||
Advanced strategies for maximizing Stitch's capabilities and creating production-ready designs.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Image-to-UI Workflows](#image-to-ui-workflows)
|
||||
2. [Design System Integration](#design-system-integration)
|
||||
3. [Responsive Design Strategies](#responsive-design-strategies)
|
||||
4. [Accessibility Considerations](#accessibility-considerations)
|
||||
5. [Performance Optimization](#performance-optimization)
|
||||
6. [Component Reusability](#component-reusability)
|
||||
|
||||
---
|
||||
|
||||
## Image-to-UI Workflows
|
||||
|
||||
### Converting Sketches to Digital UI
|
||||
|
||||
Stitch can interpret hand-drawn sketches, wireframes, and rough mockups.
|
||||
|
||||
**Best practices:**
|
||||
|
||||
1. **Clear structure** - Draw distinct boxes for components
|
||||
2. **Label elements** - Annotate buttons, inputs, sections
|
||||
3. **Show hierarchy** - Use size and position to indicate importance
|
||||
4. **Include notes** - Add text describing interactions or states
|
||||
|
||||
**Example workflow:**
|
||||
```
|
||||
1. Sketch wireframe on paper or tablet
|
||||
2. Take clear photo or scan
|
||||
3. Upload to Stitch with prompt:
|
||||
"Convert this wireframe to a modern web interface with
|
||||
glassmorphic design and purple gradient accents"
|
||||
4. Refine generated design with annotations
|
||||
```
|
||||
|
||||
### Reference-Based Design
|
||||
|
||||
Upload screenshots of existing designs to create similar layouts with your own branding.
|
||||
|
||||
**Prompt structure:**
|
||||
```
|
||||
Create a [type] similar to this reference image, but with:
|
||||
- [Your color scheme]
|
||||
- [Your content/copy]
|
||||
- [Your brand style]
|
||||
- [Specific modifications]
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Create a pricing page similar to this reference, but with:
|
||||
- Navy blue and gold color scheme
|
||||
- 4 pricing tiers instead of 3
|
||||
- Annual/monthly toggle
|
||||
- Feature comparison table below
|
||||
- Testimonials section at bottom
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design System Integration
|
||||
|
||||
### Establishing Design Tokens
|
||||
|
||||
Define reusable design tokens in your initial prompt for consistency across screens.
|
||||
|
||||
**Token categories:**
|
||||
- Colors (primary, secondary, accent, neutral, semantic)
|
||||
- Typography (font families, sizes, weights, line heights)
|
||||
- Spacing (scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px)
|
||||
- Border radius (none, sm, md, lg, full)
|
||||
- Shadows (elevation levels)
|
||||
|
||||
**Example prompt:**
|
||||
```
|
||||
Dashboard using this design system:
|
||||
|
||||
Colors:
|
||||
- Primary: #2563EB (blue)
|
||||
- Secondary: #7C3AED (purple)
|
||||
- Success: #10B981 (green)
|
||||
- Warning: #F59E0B (amber)
|
||||
- Error: #EF4444 (red)
|
||||
- Neutral: #6B7280 (gray)
|
||||
|
||||
Typography:
|
||||
- Headings: Inter Bold
|
||||
- Body: Inter Regular
|
||||
- Code: JetBrains Mono
|
||||
|
||||
Spacing: 8px base unit
|
||||
Border radius: 8px for cards, 4px for buttons
|
||||
Shadows: Subtle elevation with 0 4px 6px rgba(0,0,0,0.1)
|
||||
```
|
||||
|
||||
### Component Library Approach
|
||||
|
||||
Create a component library by generating individual components first, then composing them into full screens.
|
||||
|
||||
**Workflow:**
|
||||
```
|
||||
1. Generate base components:
|
||||
- Button variants (primary, secondary, outline, ghost)
|
||||
- Input fields (text, email, password, search)
|
||||
- Cards (basic, with image, with actions)
|
||||
- Navigation (header, sidebar, tabs)
|
||||
|
||||
2. Document component specs:
|
||||
- States (default, hover, active, disabled)
|
||||
- Sizes (sm, md, lg)
|
||||
- Variants
|
||||
|
||||
3. Compose screens using established components:
|
||||
"Create a settings page using the button and input
|
||||
components from previous generations"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design Strategies
|
||||
|
||||
### Mobile-First Approach
|
||||
|
||||
Start with mobile design, then scale up to tablet and desktop.
|
||||
|
||||
**Prompt sequence:**
|
||||
|
||||
**Step 1 - Mobile (375px):**
|
||||
```
|
||||
Mobile app home screen for recipe platform
|
||||
|
||||
Layout:
|
||||
- Stacked vertical sections
|
||||
- Full-width cards
|
||||
- Bottom navigation
|
||||
- Hamburger menu
|
||||
|
||||
Content:
|
||||
- Search bar at top
|
||||
- Featured recipe hero card
|
||||
- Category chips (horizontal scroll)
|
||||
- Recipe grid (1 column)
|
||||
```
|
||||
|
||||
**Step 2 - Tablet (768px):**
|
||||
```
|
||||
Adapt the mobile recipe home screen for tablet:
|
||||
- 2-column recipe grid
|
||||
- Persistent sidebar navigation (replaces hamburger)
|
||||
- Larger featured hero with side-by-side layout
|
||||
- Category chips remain scrollable
|
||||
```
|
||||
|
||||
**Step 3 - Desktop (1440px):**
|
||||
```
|
||||
Adapt for desktop:
|
||||
- 3-column recipe grid
|
||||
- Full sidebar with categories expanded
|
||||
- Hero section with 3 featured recipes
|
||||
- Top navigation bar with search and user menu
|
||||
```
|
||||
|
||||
### Breakpoint-Specific Prompts
|
||||
|
||||
Specify exact breakpoints and layout changes.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Responsive product grid:
|
||||
|
||||
Mobile (< 640px):
|
||||
- 1 column
|
||||
- Full-width cards
|
||||
- Vertical image orientation
|
||||
|
||||
Tablet (640px - 1024px):
|
||||
- 2 columns
|
||||
- Square images
|
||||
- Compact card layout
|
||||
|
||||
Desktop (> 1024px):
|
||||
- 4 columns
|
||||
- Hover effects with overlay
|
||||
- Quick view button
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Considerations
|
||||
|
||||
### WCAG Compliance Prompts
|
||||
|
||||
Include accessibility requirements directly in prompts.
|
||||
|
||||
**Key areas to specify:**
|
||||
|
||||
1. **Color Contrast**
|
||||
```
|
||||
Ensure all text meets WCAG AA standards:
|
||||
- Normal text: 4.5:1 contrast ratio minimum
|
||||
- Large text (18pt+): 3:1 contrast ratio minimum
|
||||
- Interactive elements: clear focus states with 3:1 contrast
|
||||
```
|
||||
|
||||
2. **Touch Targets**
|
||||
```
|
||||
All interactive elements minimum 44x44px touch target size
|
||||
Adequate spacing between clickable elements (8px minimum)
|
||||
```
|
||||
|
||||
3. **Keyboard Navigation**
|
||||
```
|
||||
Clear focus indicators on all interactive elements
|
||||
Logical tab order following visual flow
|
||||
Skip navigation link for keyboard users
|
||||
```
|
||||
|
||||
4. **Screen Reader Support**
|
||||
```
|
||||
Descriptive button labels (not just "Click here")
|
||||
Alt text for all meaningful images
|
||||
Form labels properly associated with inputs
|
||||
Heading hierarchy (H1 → H2 → H3)
|
||||
```
|
||||
|
||||
**Comprehensive accessibility prompt:**
|
||||
```
|
||||
Create an accessible contact form:
|
||||
|
||||
Fields:
|
||||
- Name (required, with aria-required)
|
||||
- Email (required, with validation and error message)
|
||||
- Subject (dropdown with clear labels)
|
||||
- Message (textarea with character count)
|
||||
|
||||
Accessibility features:
|
||||
- All inputs have visible labels
|
||||
- Required fields marked with asterisk and aria-required
|
||||
- Error messages with role="alert"
|
||||
- Submit button with descriptive text
|
||||
- Focus indicators with 3px blue outline
|
||||
- Color contrast meets WCAG AA
|
||||
- Touch targets 44x44px minimum
|
||||
|
||||
Style: Clean, form-focused, high contrast
|
||||
Colors: Dark text on light background, red for errors
|
||||
```
|
||||
|
||||
### Inclusive Design Patterns
|
||||
|
||||
**Consider diverse users:**
|
||||
|
||||
```
|
||||
Design a video player interface that supports:
|
||||
- Captions/subtitles toggle
|
||||
- Audio description option
|
||||
- Keyboard shortcuts (space to play/pause, arrows to seek)
|
||||
- Playback speed control
|
||||
- High contrast mode
|
||||
- Reduced motion option (disable animations)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Optimized Asset Prompts
|
||||
|
||||
Request performance-conscious designs from the start.
|
||||
|
||||
**Image optimization:**
|
||||
```
|
||||
E-commerce product gallery with performance optimization:
|
||||
- Lazy loading for images below fold
|
||||
- Thumbnail images (200x200px) for grid
|
||||
- Full-size images (1200x1200px) only on click
|
||||
- WebP format with JPEG fallback
|
||||
- Blur placeholder while loading
|
||||
```
|
||||
|
||||
**Code efficiency:**
|
||||
```
|
||||
Generate lightweight HTML/CSS without:
|
||||
- Unnecessary wrapper divs
|
||||
- Inline styles (use classes)
|
||||
- Large external dependencies
|
||||
- Redundant CSS rules
|
||||
```
|
||||
|
||||
### Progressive Enhancement
|
||||
|
||||
Design for core functionality first, then enhance.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Create a filterable product list with progressive enhancement:
|
||||
|
||||
Base (no JavaScript):
|
||||
- Server-rendered product grid
|
||||
- Form-based filters with submit button
|
||||
- Pagination links
|
||||
|
||||
Enhanced (with JavaScript):
|
||||
- AJAX filter updates without page reload
|
||||
- Infinite scroll
|
||||
- Smooth animations
|
||||
- Real-time search
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Reusability
|
||||
|
||||
### Atomic Design Methodology
|
||||
|
||||
Build from atoms → molecules → organisms → templates → pages.
|
||||
|
||||
**Atoms (basic elements):**
|
||||
```
|
||||
Generate design system atoms:
|
||||
- Button (primary, secondary, outline, ghost, danger)
|
||||
- Input field (text, email, password, search, textarea)
|
||||
- Label, Badge, Tag
|
||||
- Icon set (24x24px, consistent style)
|
||||
- Avatar (circle, square, with status indicator)
|
||||
```
|
||||
|
||||
**Molecules (simple combinations):**
|
||||
```
|
||||
Create molecules using atoms:
|
||||
- Search bar (input + button + icon)
|
||||
- Form field (label + input + error message)
|
||||
- Card header (avatar + name + timestamp + menu)
|
||||
- Stat card (icon + label + value + trend)
|
||||
```
|
||||
|
||||
**Organisms (complex components):**
|
||||
```
|
||||
Build organisms from molecules:
|
||||
- Navigation bar (logo + search bar + user menu)
|
||||
- Product card (image + title + price + rating + button)
|
||||
- Comment thread (avatar + name + timestamp + text + actions)
|
||||
- Data table (headers + rows + pagination + filters)
|
||||
```
|
||||
|
||||
**Templates (page layouts):**
|
||||
```
|
||||
Compose templates from organisms:
|
||||
- Dashboard layout (sidebar + header + content grid)
|
||||
- Article layout (header + hero + content + sidebar)
|
||||
- Checkout flow (progress + form + summary)
|
||||
```
|
||||
|
||||
### Variant Generation
|
||||
|
||||
Create systematic variations of components.
|
||||
|
||||
**Button variants prompt:**
|
||||
```
|
||||
Generate button component with all variants:
|
||||
|
||||
Sizes: Small (32px), Medium (40px), Large (48px)
|
||||
|
||||
Types:
|
||||
- Primary (filled, brand color)
|
||||
- Secondary (filled, gray)
|
||||
- Outline (border only)
|
||||
- Ghost (transparent, hover background)
|
||||
- Danger (filled, red)
|
||||
|
||||
States for each:
|
||||
- Default
|
||||
- Hover
|
||||
- Active (pressed)
|
||||
- Disabled
|
||||
- Loading (with spinner)
|
||||
|
||||
Include: Icon support (left/right), full-width option
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Advanced Iteration Techniques
|
||||
|
||||
### Conditional Variations
|
||||
|
||||
Generate multiple versions based on different conditions.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Create 3 hero section variants for A/B testing:
|
||||
|
||||
Variant A - Image-focused:
|
||||
- Large background image
|
||||
- Minimal text overlay
|
||||
- Single CTA button
|
||||
|
||||
Variant B - Text-focused:
|
||||
- Solid color background
|
||||
- Detailed copy with bullet points
|
||||
- Two CTA buttons (primary + secondary)
|
||||
|
||||
Variant C - Video-focused:
|
||||
- Background video
|
||||
- Minimal text
|
||||
- Play button + CTA
|
||||
|
||||
All variants use same brand colors and maintain mobile responsiveness
|
||||
```
|
||||
|
||||
### State-Based Design
|
||||
|
||||
Design for all possible states, not just the happy path.
|
||||
|
||||
**Comprehensive state prompt:**
|
||||
```
|
||||
Design a data table with all states:
|
||||
|
||||
Default state:
|
||||
- 10 rows of data
|
||||
- Sortable columns
|
||||
- Pagination
|
||||
|
||||
Loading state:
|
||||
- Skeleton loaders for rows
|
||||
- Disabled controls
|
||||
|
||||
Empty state:
|
||||
- Illustration
|
||||
- "No data found" message
|
||||
- "Add new" CTA button
|
||||
|
||||
Error state:
|
||||
- Error icon
|
||||
- Error message
|
||||
- "Retry" button
|
||||
|
||||
Search/Filter active:
|
||||
- Applied filters shown as chips
|
||||
- Clear filters option
|
||||
- Result count
|
||||
|
||||
Selected rows:
|
||||
- Checkbox selection
|
||||
- Bulk action toolbar
|
||||
- Select all option
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Export and Handoff Best Practices
|
||||
|
||||
### Preparing for Development
|
||||
|
||||
Before exporting, ensure designs are developer-ready.
|
||||
|
||||
**Pre-export checklist:**
|
||||
|
||||
1. **Naming conventions**
|
||||
- Use semantic class names
|
||||
- Follow BEM or consistent methodology
|
||||
- Name components clearly
|
||||
|
||||
2. **Documentation**
|
||||
- Add comments for complex interactions
|
||||
- Document responsive breakpoints
|
||||
- Note any required JavaScript behavior
|
||||
|
||||
3. **Asset organization**
|
||||
- Export images at correct sizes
|
||||
- Provide SVG for icons
|
||||
- Include font files or CDN links
|
||||
|
||||
4. **Specifications**
|
||||
- Document spacing values
|
||||
- List color hex codes
|
||||
- Specify font sizes and weights
|
||||
|
||||
### Figma Integration
|
||||
|
||||
Optimize Stitch → Figma workflow.
|
||||
|
||||
**Steps:**
|
||||
```
|
||||
1. Generate design in Stitch with detailed specifications
|
||||
2. Use "Paste to Figma" export
|
||||
3. In Figma:
|
||||
- Organize layers with clear naming
|
||||
- Create components from repeated elements
|
||||
- Set up auto-layout for responsive behavior
|
||||
- Define color and text styles
|
||||
- Add design system documentation
|
||||
4. Share with developers using Figma's inspect mode
|
||||
```
|
||||
|
||||
### Code Export Refinement
|
||||
|
||||
Improve exported HTML/CSS for production.
|
||||
|
||||
**Post-export tasks:**
|
||||
|
||||
1. **Semantic HTML**
|
||||
- Replace divs with semantic tags (header, nav, main, article, section, footer)
|
||||
- Add ARIA labels where needed
|
||||
- Ensure proper heading hierarchy
|
||||
|
||||
2. **CSS optimization**
|
||||
- Extract repeated styles into utility classes
|
||||
- Use CSS custom properties for theme values
|
||||
- Organize with methodology (BEM, SMACSS, etc.)
|
||||
- Add responsive media queries if missing
|
||||
|
||||
3. **Accessibility**
|
||||
- Add alt text to images
|
||||
- Ensure form labels are associated
|
||||
- Add focus styles
|
||||
- Test with screen reader
|
||||
|
||||
4. **Performance**
|
||||
- Optimize images
|
||||
- Minify CSS
|
||||
- Remove unused styles
|
||||
- Add loading strategies
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
These advanced techniques help you move beyond basic Stitch usage to create production-ready, accessible, and performant designs. Combine these strategies with the core prompting principles to maximize your efficiency and output quality.
|
||||
|
||||
**Key takeaways:**
|
||||
- Use images and references to accelerate design
|
||||
- Establish design systems early for consistency
|
||||
- Design responsively from the start
|
||||
- Prioritize accessibility in every prompt
|
||||
- Think in reusable components
|
||||
- Plan for all states, not just happy paths
|
||||
- Refine exports before production use
|
||||
Reference in New Issue
Block a user