imgtohtml

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

   • Colors (hex/rgb values from the image)
   • Typography (font families, sizes, weights)
   • Icons and imagery
   • Borders, shadows, gradients, effects

3. Component Types

   • Headers, navigation, cards, buttons, inputs, tables, etc.
   • Interactive elements and their states
   • Data displays, labels, badges

4. 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 \x3Cstyle> tags (or separate CSS file if complex)
• All necessary meta tags for viewport/responsiveness
• Comments explaining major sections if helpful

If the design is complex, you may split into multiple files (HTML, CSS, JS).

Accuracy Priorities

1. Visual Fidelity: Match the original image as closely as possible
2. Proportions: Maintain correct size ratios between elements
3. Colors: Use exact or nearest-match color values
4. Typography: Match font styles accurately
5. Spacing: Replicate padding, margins, and gaps faithfully

Limitations to Communicate

• Exact font matching may require web fonts (Google Fonts, etc.)
• Some effects may be approximated if the exact technique isn't visible
• Interactive behavior beyond hover states requires user specification
• Dynamic content should be represented with placeholder data

Multi-Image Handling

When the user provides multiple images at once, process each image individually and sequentially to ensure maximum quality:

Sequential Processing Workflow:

1. Process ONE image at a time through the complete conversion pipeline
2. For each image:
   • Analyze its unique layout, colors, typography, and components
   • Create a dedicated HTML/CSS replica
   • Verify visual fidelity before moving to the next
3. Maintain consistent naming conventions across all generated files
4. After processing all images, provide a summary of all converted files

Output Organization:

• Name files descriptively based on each image's content (e.g., login-page.html, dashboard.html)
• If images represent different pages of the same site, maintain shared styles in a common CSS file when appropriate
• If images are unrelated, create self-contained HTML files for each

Quality Assurance:

• Do NOT batch-process images together - each deserves full analysis attention
• If images are related (e.g., different screens of the same app), note shared components and reuse CSS where sensible
• Communicate progress to the user as you work through each image

Example Workflow

1. User provides UI screenshot(s)
2. For each image:
   • Analyze layout, colors, typography, components
   • Create HTML structure matching the hierarchy
   • Apply CSS to replicate visual appearance
   • Add polish (hover states, transitions, responsive considerations)
3. Deliver complete HTML file(s) - one per input image (or split logically for multi-page designs)

Remember: The goal is a pixel-perfect replica that functions as a real web page, not just a close approximation. Pay attention to details like shadows, borders, gradients, and spacing - these make the difference between "close" and "indistinguishable."