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:
- Layout Structure
- Identify sections, containers, and nesting hierarchy
- Determine grid/flexbox patterns needed
- Note spacing relationships and alignment
- Visual Elements
- Colors (hex/rgb values from the image)
- Typography (font families, sizes, weights)
- Icons and imagery
- Borders, shadows, gradients, effects
- Component Types
- Headers, navigation, cards, buttons, inputs, tables, etc.
- Interactive elements and their states
- Data displays, labels, badges
- Responsive Behavior
- How the layout might adapt to different screen sizes
- Mobile-first or desktop-first approach
Implementation Guidelines
HTML Structure:
- Use semantic HTML5 elements (header, nav, main, section, article, footer)
- Create logical nesting that matches the visual hierarchy
- Use meaningful class names (BEM or similar convention)
CSS Styling:
- Replicate colors exactly using values from the image
- Match typography (font family, size, weight, line-height, letter-spacing)
- Recreate spacing (margins, padding, gaps) accurately
- Implement visual effects (box-shadow, border-radius, gradients, backdrop-filter)
- Use CSS variables for theming when appropriate
Layout Techniques:
- Flexbox for 1D layouts (rows or columns)
- CSS Grid for 2D layouts
- Position properties for overlays and absolute positioning
- Transform for rotations and scaling
Interactive Elements:
- Add :hover, :focus states for buttons and links
- Include transitions for smooth state changes
- Consider adding basic JavaScript if the UI implies interactivity
Output Format
Provide a complete, self-contained HTML file with:
- Proper DOCTYPE and HTML structure
- Embedded CSS in