img2html

This skill converts UI screenshots or design images into production-ready HTML/CSS code that accurately replicates the visual appearance and layout of the original.

The user provides an image (screenshot, mockup, or design reference) showing a UI interface they want replicated.

Analysis Process

First, carefully analyze the image to understand:

1. Layout Structure

   • Identify sections, containers, and nesting hierarchy
   • Determine grid/flexbox patterns needed
   • Note spacing relationships and alignment

2. Visual Elements