Verified Agent Skill record

image-to-code

An image-first website design skill for Codex environments that generates large, readable, section-specific design images, deeply analyzes them for layout, typography, and component details, and then implements the frontend to match the visual reference as closely as possible.

Tasks

Generate a set of large, section-specific design reference images for a multi-section landing page, then deeply analyze them for typography, spacing, colors, and component logic before writing any frontend code
Create a premium hero section for a startup site by first generating a dedicated hero reference image, analyzing its visual hierarchy and CTA wording, and then implementing the frontend to match the generated design as closely as possible

Inputs

requests for hero sections, landing pages, marketing sites, startup sites, editorial brand pages, product pages, portfolio websites, premium multi-section websites, and redesigns where visual quality matters
user preferences such as clean, crazy creative, premium SaaS, or editorial

Outputs

large, readable, section-specific design reference images
deep analysis of generated image(s) covering exact visible text, typography relationships, spacing, colors, layout, buttons, and component logic
frontend implementation that matches the generated design as closely as reasonably possible

Limitations and checks

should not start with freeform coding or skip straight to implementation for visually important tasks
should not compress too many website sections into one single image inside Codex if that would make text, spacing, buttons, or layout details too small to analyze
should not crop, cut out, zoom into, or slice old images for dedicated section or detail views
direct-code first is only acceptable when the task is mostly technical, a bug fix, a precise design system is already provided, or the task is mainly structural rather than visual
Confirm that design images were generated before any frontend implementation began for visually important tasks
Verify that each section or detail view uses a fresh, standalone, section-specific image rather than a crop or slice from a previously generated larger image
Ensure the deep analysis covers typography scale, spacing, colors, button hierarchy, and component logic before implementation
Check that the frontend implementation faithfully matches the generated design system and does not collapse into generic card spam, nested containers, or centered dark hero clichés