@ngxtm/devkit 3.0.2 → 3.1.0

package/skills/stitch-ui-design/references/advanced-techniques.md

@@ -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