AI Skill Report Card
Converting Images to HTML/CSS
YAML--- name: converting-images-to-html-css description: Converts a UI screenshot or design image into pixel-accurate HTML and CSS code. Use when a user uploads an image/mockup/screenshot and wants it turned into a working webpage, or asks to "code this design", "convert this image to HTML", or "replicate this UI in HTML/CSS". ---
Converting Images to HTML/CSS
Quick Start13 / 15
Given an image, follow this pipeline: Analyze → Plan → Code → Review → Submit. Never redesign — replicate exactly what's in the image, including imperfections.
1. Analyze: List every visual element with measurements (px estimates), colors (hex), fonts, spacing.
2. Plan: Outline HTML structure (semantic tags) + CSS approach (flexbox/grid) before writing code.
3. Code: Write complete, self-contained HTML with embedded or linked CSS.
4. Review: Diff your mental render against the image — check colors, spacing, alignment, font sizes.
5. Submit: Output final code only after review passes.
Recommendation▾
Add a second fuller example showing a more complex layout output in complete code (Example 2 is truncated/described rather than shown), to balance the concrete input/output requirement.
Workflow14 / 15
Progress checklist to follow for every conversion:
- Step 1: Analyze the image (layout, colors, spacing, typography, imagery)
- Step 2: Write a short structural plan (sections, hierarchy, layout method)
- Step 3: Write HTML markup (semantic, matches visual hierarchy)
- Step 4: Write CSS (colors, spacing, fonts, positioning)
- Step 5: Review code against image for accuracy
- Step 6: Submit final, complete code block
Step 1: Analyze the Image
Extract and note explicitly:
- Layout structure: header/nav/hero/sections/footer, columns, grid vs. flex patterns
- Spacing: padding and margin estimates in px/rem between elements, sections, and edges
- Colors: background colors, text colors, border colors — estimate hex codes as precisely as possible
- Typography: font family (guess closest web-safe or Google Font), size, weight, line-height, letter-spacing
- Components: buttons, cards, forms, images, icons — note border-radius, shadows, borders
- Alignment: left/center/right, vertical alignment within containers
- Responsive cues: if the image implies mobile/desktop, note it, but default to matching the exact viewport shown
Step 2: Create a Plan
Before coding, write a brief plan such as:
Plan:
- Structure: <header> (logo + nav), <main> (hero section, 3-column feature grid), <footer>
- Layout: Flexbox for header/nav, CSS Grid for feature cards
- Colors: background #FFFFFF, primary text #1A1A1A, accent #3B82F6
- Spacing: 24px section padding, 16px gap between cards
- Typography: sans-serif, headings bold ~32px, body ~16px
This plan must be shown before the code, not skipped.
Step 3-4: Write the Code
- Use only HTML and CSS — no JavaScript, no frameworks, no build tools
- Use semantic HTML5 tags (
header,nav,main,section,footer,article) - Prefer Flexbox/Grid over floats or absolute positioning unless the image requires exact overlap
- Inline
<style>in<head>by default (single-file output) unless user requests separate files - Use placeholder images (
<div>with background color, or a gray box with dimensions) when exact images aren't available — note this in a comment - Match colors as hex codes, not named CSS colors, for precision
- Use
rem/emfor font sizes,pxfor borders/precise spacing when it improves accuracy
Step 5: Review
Before submitting, re-check:
- Do spacing/padding values look proportionally correct vs. the image?
- Do colors match (not just "close enough" named colors)?
- Is text hierarchy (size/weight) preserved?
- Are elements aligned the same way (centered vs. left-aligned)?
- Is anything invented that wasn't in the image? Remove it.
Step 6: Submit
Output the complete, runnable HTML file (with embedded CSS) as the final answer. No partial snippets unless explicitly requested.
Recommendation▾
Include an explicit edge case for handling images with real photos/logos (e.g., asking whether to use placeholder or actual asset URLs) rather than just noting placeholder boxes.
Examples15 / 20
Example 1: Input: Image of a simple landing page hero — centered headline "Build Faster", subtext, blue CTA button, white background, dark navy text.
Output:
Plan:
- Structure: single <section class="hero"> with h1, p, and a button
- Layout: flexbox column, centered, vertical padding 80px
- Colors: background #FFFFFF, heading #0F172A, subtext #475569, button bg #2563EB, button text #FFFFFF
- Typography: h1 ~48px bold, p ~18px regular
<!DOCTYPE html>
<html>
<head>
<style>
body { margin:0; font-family: Arial, sans-serif; }
.hero {
display:flex; flex-direction:column; align-items:center;
text-align:center; padding: 80px 20px; background:#FFFFFF;
}
.hero h1 { font-size:48px; font-weight:700; color:#0F172A; margin-bottom:16px; }
.hero p { font-size:18px; color:#475569; margin-bottom:32px; }
.hero button {
background:#2563EB; color:#FFFFFF; border:none;
padding:12px 28px; border-radius:6px; font-size:16px; cursor:pointer;
}
</style>
</head>
<body>
<section class="hero">
<h1>Build Faster</h1>
<p>The fastest way to ship your ideas.</p>
<button>Get Started</button>
</section>
</body>
</html>
Example 2: Input: Image of a 3-card pricing grid with shadows and rounded corners.
Output: Plan describing CSS Grid with grid-template-columns: repeat(3, 1fr), gap: 24px, card style with border-radius: 12px, box-shadow: 0 4px 12px rgba(0,0,0,0.08) — followed by full HTML/CSS matching exact card colors, padding, and text sizes from the image.
Recommendation▾
Add guidance on responsive behavior expectations (e.g., should output include media queries by default or only match the exact static viewport?) since this is currently ambiguous.
Best Practices
- Always show the plan before the code — never jump straight to code
- Estimate measurements in standard increments (4, 8, 12, 16, 24, 32, 48, 64px) — designs are usually built on a spacing scale
- When a font isn't identifiable, choose the closest common web font (e.g., Helvetica/Arial for generic sans-serif, Georgia for serif) rather than guessing an obscure one
- Use CSS variables (
:root { --primary: #2563EB; }) for repeated colors to keep code clean and easy to adjust - Keep output as a single self-contained HTML file by default for easy preview
- If the image has multiple sections, build and verify one section at a time mentally before assembling the full page
Common Pitfalls
- Do not redesign — don't "improve" spacing, colors, or layout choices even if they seem suboptimal; replicate faithfully
- Don't add JavaScript, animations, or interactivity unless explicitly visible/requested
- Don't use vague named colors (
blue,gray) — always extract specific hex values - Don't skip the analysis/plan step, even for simple images — it prevents structural mistakes
- Don't guess at content not visible in the image (extra nav links, footer text) — only include what's shown
- Don't use
<table>layouts or absolute positioning as a default — reserve for cases where the image genuinely requires it (e.g., overlapping elements) - Don't submit partial/truncated code — always deliver a complete, renderable file