图片转HTML

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. 1. Layout Structure

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

1. 2. Visual Elements

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

1. 3. Component Types

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

1. 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 <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

1. 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. 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

1. 3. Maintain consistent naming conventions across all generated files
2. 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. 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)

1. 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."