👁️ Vision to Code Skill

Workflow

Step 1: Analyze Image

1. Identify layout structure (grid, flex, columns)
2. List all UI components
3. Note colors, fonts, spacing
4. Identify interactive elements

Step 2: Plan Component Structure

Page
├── Header (nav, logo, menu)
├── Hero (title, subtitle, CTA)
├── Features (grid of cards)
├── Testimonials (carousel)
└── Footer (links, social)