image-to-code
Generates design reference images for website sections first, deeply analyzes them, then implements the frontend code to match the visuals closely.
What it does
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Quality judgment
The document is thorough on workflow rules and anti-patterns with clear numbered sections, but it is highly repetitive (image-count rules restated multiple times), contains no concrete examples or sample prompts, and the content is truncated mid-sentence in section 25. Trigger conditions are described but scattered rather than crisply defined.