- name
- img2html
- description
- Convert UI screenshots/images into fully functional HTML/CSS copies. This skill is used when a user provides images of a website, application interface, dashboard, or any UI design and wants to recreate it as working HTML code with accurate styles, layout, and visual details.
- license
- Complete terms in LICENSE.txt
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
<style>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
- Visual Fidelity: Match the original image as closely as possible
- Proportions: Maintain correct size ratios between elements
- Colors: Use exact or nearest-match color values
- Typography: Match font styles accurately
- 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:
- Process ONE image at a time through the complete conversion pipeline
- 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
- Maintain consistent naming conventions across all generated files
- 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
- User provides UI screenshot(s)
- 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)
- 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."