Skill / Visual / Taste / Layout / External
image-to-code-skill
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.
by Leonxlnx
Works with
Universal
Hosted in an external repository
This skill's full instructions live in its source repository, not on UI Skillbook. Open it on GitHub to read it, or copy a prompt that points your agent straight at it.
Related skills
antfu-designExternal
antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.
beautiful-shadowsExternal
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
breakExternal
Answers "does this survive?" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.
compact-landingExternal
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.