Stitch-to-Page Conversion Guidelines

This skill enables the agent to transform design exports from Google Stitch (or similar tools) into functional, high-quality React pages that follow the project's architecture and design system.

Workflow

1. Analysis phase

• Image Analysis: Review provided screenshots or reference images to identify layout structure (grids, sections), typography (font sizes, weights), color schemes (hex codes, gradients), and spacing (paddings, margins).
• HTML/CSS Analysis: Extract semantic structure from exported HTML. Identify key styles in the CSS and map them to the project's styling tool (e.g., Tailwind CSS).
• Design Intent: Understand the purpose of each section (Hero, Features, Testimonials, etc.) to choose the most appropriate components and structure.

2. Component Mapping

• Identify existing components in components/ that can be reused or extended.
• If a new component is needed, design it to be modular and consistent with the project's "Rich Aesthetics" guidelines (vibrant colors, smooth transitions, premium feel).

3. Page Implementation

• Create a new page component in pages/ (or the appropriate directory).
• Use Semantic HTML (header, main, section, footer).
• Apply Advanced Aesthetics: Use gradients, hover effects, and micro-animations to make the interface feel "alive".