AI Image to Code

intent

convert a UI screenshot, wireframe, or design mockup into runnable frontend code (HTML, CSS, React, or framework-agnostic components). use this when a user provides a visual image and asks to "turn this into code", "rebuild this UI", "code this design", "generate HTML from this screenshot", or "write the React component for this". the output is actual working code that approximates the visual layout and styling, not a description or design artifact.

inputs

• image source: screenshot, wireframe, mockup, or design file (PNG, JPG, GIF, WebP, or URL)
• vision model access: required to analyze image content; any LLM with vision capability (Claude, GPT-4V, etc.)
• code generation intent: user must explicitly ask for code (not just a description)
• output format preference (optional): HTML/CSS (default), React + Tailwind, Vue, or framework-agnostic JSX
• target audience (optional): mobile-first, desktop, responsive, or specific breakpoint

optional external inputs:

• design system documentation (if user provides brand guidelines or design tokens)
• placeholder image service access (placeholder.com, picsum.photos) for realistic mock images
• Tailwind CSS CDN or build toolchain (if React mode selected)

procedure

step 1: receive and validate image

1. user provides image via paste, file upload, or URL
2. validate image is readable (not corrupted, not text-only, dimensions >200x200px)
3. if image is unavailable or corrupted, request user re-upload
4. note image dimensions, aspect ratio, and apparent device type (mobile, tablet, desktop, print)

output: confirmed image file or URL; metadata (dimensions, device type)

step 2: analyze visual structure

1. use vision model to inspect image and extract:

   • layout grid (header, sidebar, main content, footer, modal overlays)
   • color palette (background, primary text, secondary text, accent, borders, hover states)
   • typography (identify heading levels, body text, labels; estimate font size hierarchy)
   • spacing system (padding, margins, gaps between components; note if grid-based or flexible)
   • interactive elements (buttons, inputs, checkboxes, dropdowns, toggles, tabs)
   • visual hierarchy (what draws attention, what recedes, use of contrast/size/position)
   • any images, icons, or decorative elements

2. if image is complex (>10 distinct UI sections or multiple nested layouts):

   • prioritize main content area over chrome
   • note secondary elements but focus code generation on primary flow

3. flag any ambiguities:

   • color is subjective from screenshot (may differ on user's display)
   • spacing is approximate from pixel measurements
   • exact font family cannot be determined from image alone

output: detailed visual inventory (structured list of sections, colors as hex/rgb, typography scale, spacing notes, component list)

step 3: select code strategy

based on image content and user intent, choose output format:

image content	recommended output	rationale
landing page hero, marketing site	single HTML file with embedded CSS	self-contained, minimal dependencies
dashboard, admin panel, data-heavy UI	HTML + CSS with grid/flexbox layout	card-based, reusable component structure
mobile app screen, small viewport	mobile-first responsive HTML, max-width 375-425px	constraint-driven design
form, login, checkout	semantic HTML form with proper inputs and labels	accessibility, progressive enhancement
card, list item, component preview	component-based JSX or HTML with CSS classes	reusable, composable
chart, graph, data viz	SVG or canvas rendering (if complex)	vector-based, scalable

if user requested React mode, use JSX + Tailwind CSS utility classes. if no preference, default to HTML + CSS.

output: chosen format; justification

step 4: generate code

step 4a: HTML/CSS default mode

1. write valid HTML5 document structure (DOCTYPE, html, head, body)
2. include meta tags: charset UTF-8, viewport for responsiveness
3. extract and embed CSS colors, typography, spacing from step 2 analysis
4. structure HTML to match layout regions identified in step 2
5. use semantic tags (header, nav, main, section, article, footer, aside) where appropriate
6. use meaningful class names (.card, .header-nav, .cta-button, not .box1, .div2)
7. avoid external dependencies; use CSS Grid or Flexbox for layout
8. placeholder text: use context-appropriate filler ("Search...", "Enter email", "Learn more", not random lorem)
9. placeholder images: link to placeholder.com or similar service with alt text
10. include comments marking major layout sections

example scaffold:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UI Component</title>
  <style>
    /* extracted colors, typography, spacing */
    :root {
      --color-primary: #...; /* from image */
      --color-bg: #...;
      --font-size-heading: ...;
    }
    /* layout and component styles */
  </style>
</head>
<body>
  <!-- major sections with semantic tags -->
</body>
</html>

step 4b: React + Tailwind mode

1. write functional React component with JSX syntax
2. use Tailwind utility classes (no custom CSS); reference Tailwind docs for utility mapping
3. extract colors from image and map to Tailwind scale (if image color is not Tailwind standard, use closest match and note in comment)
4. use component composition (break into smaller sub-components if layout is complex)
5. placeholder data: inline or as prop defaults, not fetched from API
6. no JavaScript logic, state, or event handlers beyond simple className toggles
7. export as named export (e.g., export function ProductCard() { ... })

example scaffold:

export function UIComponent() {
  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <header className="bg-white rounded-lg shadow-sm p-4">
        {/* header content */}
      </header>
      <main className="mt-6 grid grid-cols-3 gap-4">
        {/* main content */}
      </main>
    </div>
  );
}

output: runnable code snippet (HTML file or JSX component); code is valid, no unclosed tags, proper nesting

step 5: validate output

1. check HTML validity:

   • all opening tags have closing tags (or are self-closing void elements)
   • no nested violations (e.g., block inside inline without wrapper)
   • proper use of semantic tags
   • alt text on images

2. check visual alignment:

   • all major layout regions from step 2 are present in code (header, sidebar, main, footer if they existed in image)
   • color palette is visibly derived from image (colors within ±10% perceptual match; exact match is impossible from screenshot)
   • typography hierarchy preserved (h1 > h2 > body size, appropriate weight)
   • spacing proportions approximately match image

3. check content appropriateness:

   • no brand names, product names, or proprietary text invented (unless explicitly in image)
   • placeholder text is generic but contextually sensible ("Add to Cart", "Search", not fabricated product names)
   • no copyrighted logos or icons reproduced; use generic substitutes or SVG symbols

4. check code quality:

   • no external dependencies required (or only CDN-hosted libraries clearly stated)
   • code is readable and maintainable (indentation, comments on sections)
   • no unused CSS or HTML cruft

if validation fails on any point, regenerate or note limitation to user.

output: validation checklist completed; any deviations flagged

step 6: deliver and set expectations

1. present code with clear note: "this is an approximation based on the image. colors, fonts, and exact spacing may need fine-tuning."
2. provide code as:
   • inline HTML (if short)
   • code block with language tag (html or jsx)
   • downloadable file link (if platform supports)
3. offer next steps: "need to adjust colors?", "want responsive tweaks?", "ready to add interactivity?"

output: user-ready code with caveats stated

decision points

if user provides image but no code format preference:

• default to HTML + CSS (single file, self-contained, lowest friction)
• note: "output as HTML; reply with /react if you prefer a React component"

if image is ambiguous (colors hard to read, low contrast, poor quality):

• state assumption explicitly: "image appears to use a dark theme with blue accents; confirm?"
• offer to adjust colors after generation
• do not guess or invent

if image contains copyrighted branding, logos, or proprietary UI:

• do not reproduce trademarked elements
• note: "I've replaced the branded logo with a generic placeholder icon"
• suggest user provide their own brand assets

if user requests backend code, API integration, or state management:

• decline out of scope: "this skill generates static layout code only. for API calls or business logic, you'll need additional setup"
• offer to generate React structure ready for props or context injection

if image is a mobile screenshot and user doesn't specify responsive intent:

• assume mobile-first but include CSS for larger viewports
• use meta viewport tag and responsive classes (Tailwind breakpoints or CSS media queries)
• note: "code is optimized for mobile; scale up for desktop via media queries"

if placeholder.com or image CDN is unreachable or blocked:

• use inline SVG placeholder shapes instead
• note: "images using SVG placeholders; replace src with real image URLs"

if user requests pixel-perfect fidelity:

• clarify: "this is ~80-90% visual approximation. for exact pixel matching, you'll need design tool source files or manual CSS refinement"

if image contains complex interactions (animations, modals, drag-drop):

• output only static HTML/CSS layout
• note which interactions are visual-only vs. require JavaScript
• offer follow-up: "want to add interactivity with JavaScript?"

output contract

format:

• HTML mode: valid HTML5 file (single .html file or code block), self-contained CSS in