Image to Code
Treat the design image as an implementation specification, then ship working code that matches its hierarchy, rhythm, assets, and responsive intent.
Precedence
- Use this skill as the single orchestrator for image-first web implementation.
- Invoke image generation as an internal step when references are missing; do not independently run a second competing web-design workflow.
- Use
design-taste-frontend instead for normal code-first frontend work.
- Use
imagegen-frontend-web alone when the user wants images but no code.
Workflow
- Inspect the repository, runtime, existing design system, routes, assets, and supplied images.
- Determine the section list and identify which sections lack a readable reference.
- Generate fresh, standalone section images only where needed. Prefer large section-specific references over a tiny full-page board.
- Analyze each reference for layout, type, spacing, color, surfaces, imagery, components, and responsive behavior.
- Implement with the existing stack, matching the reference before introducing stylistic reinterpretation.
- Compare the rendered page against the reference and correct the largest visual deltas first.
- Verify responsive behavior, interactions, reduced motion, accessibility, and build/tests.
Non-negotiables
- Do not crop old images to manufacture missing section references.
- Keep the hero readable and visible on a small laptop; do not let decorative art bury copy or CTAs.
- Recreate hierarchy and spacing, not just colors and border radii.
- Avoid nested cards, micro-UI clutter, fake screenshots, and placeholder rectangles.
- Use real/generated assets at the correct aspect ratio and preserve focal points responsively.
- Extract repeated values into existing tokens or a small coherent token set; avoid one-off magic values everywhere.
- Preserve functionality and project conventions while improving visual fidelity.
- Do not claim fidelity without inspecting the rendered result at representative desktop and mobile sizes.
Detailed reference
Read only the relevant section of references/full-guide.md:
- Deciding when to generate references: search
MANDATORY IMAGE-FIRST RULE or WHEN TO TRIGGER.
- Section-image strategy: search
CODEX-SPECIFIC SECTION IMAGE or SECTION IMAGE GENERATION.
- Visual analysis: search
DEEP IMAGE ANALYSIS REQUIREMENT.
- Hero, responsive first view, and box reduction: search the corresponding heading.
- Extracting text, type, spacing, components, and color: search
EXTRACTION RULE.
- Fidelity and missing details: search
ANTI-DRIFT or MISSING DETAIL RESOLUTION.
- Final verification: search
CLARITY CHECK.
Use rg -n "<heading>" references/full-guide.md; read the full guide only for a large, ambiguous reconstruction requiring the complete protocol.
1---2name: image-to-code3description: Build or reconstruct a visually important website through an image-first workflow: generate or inspect section references, analyze them, then implement matching responsive code. Use when the user supplies a website image to reproduce or explicitly wants a visual-first web build. Do not use for ordinary frontend edits, image-only deliverables, mobile apps, or brand boards.4---56# Image to Code78Treat the design image as an implementation specification, then ship working code that matches its hierarchy, rhythm, assets, and responsive intent.910## Precedence1112- Use this skill as the single orchestrator for image-first web implementation.13- Invoke image generation as an internal step when references are missing; do not independently run a second competing web-design workflow.14- Use `design-taste-frontend` instead for normal code-first frontend work.15- Use `imagegen-frontend-web` alone when the user wants images but no code.1617## Workflow18191. Inspect the repository, runtime, existing design system, routes, assets, and supplied images.202. Determine the section list and identify which sections lack a readable reference.213. Generate fresh, standalone section images only where needed. Prefer large section-specific references over a tiny full-page board.224. Analyze each reference for layout, type, spacing, color, surfaces, imagery, components, and responsive behavior.235. Implement with the existing stack, matching the reference before introducing stylistic reinterpretation.246. Compare the rendered page against the reference and correct the largest visual deltas first.257. Verify responsive behavior, interactions, reduced motion, accessibility, and build/tests.2627## Non-negotiables2829- Do not crop old images to manufacture missing section references.30- Keep the hero readable and visible on a small laptop; do not let decorative art bury copy or CTAs.31- Recreate hierarchy and spacing, not just colors and border radii.32- Avoid nested cards, micro-UI clutter, fake screenshots, and placeholder rectangles.33- Use real/generated assets at the correct aspect ratio and preserve focal points responsively.34- Extract repeated values into existing tokens or a small coherent token set; avoid one-off magic values everywhere.35- Preserve functionality and project conventions while improving visual fidelity.36- Do not claim fidelity without inspecting the rendered result at representative desktop and mobile sizes.3738## Detailed reference3940Read only the relevant section of [references/full-guide.md](references/full-guide.md):4142- Deciding when to generate references: search `MANDATORY IMAGE-FIRST RULE` or `WHEN TO TRIGGER`.43- Section-image strategy: search `CODEX-SPECIFIC SECTION IMAGE` or `SECTION IMAGE GENERATION`.44- Visual analysis: search `DEEP IMAGE ANALYSIS REQUIREMENT`.45- Hero, responsive first view, and box reduction: search the corresponding heading.46- Extracting text, type, spacing, components, and color: search `EXTRACTION RULE`.47- Fidelity and missing details: search `ANTI-DRIFT` or `MISSING DETAIL RESOLUTION`.48- Final verification: search `CLARITY CHECK`.4950Use `rg -n "<heading>" references/full-guide.md`; read the full guide only for a large, ambiguous reconstruction requiring the complete protocol.
wedabro