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 cl
SkillScore59Maintained
Automatic
◆Frontend / UI pack
Last verified 8/28/2026
What it changes
Passed 11 of 18 test cases with the skill, and 9 of 18 without it.
Without skill50%
With skill59%
Checks it passed that the model alone missed
Avoids cropping or slicing the original image.
Eliminates multi-layered nested container boxes.
Generates a fresh standalone image for the pricing section.
and 2 more in the full report
3 fixed10 passed either way8 still failing1 broke
Pass-rate lift
+9 pp
Tokens
+299%
Agent turns
0%
Response time
+39%
Model gemini-3.6-flashMeasured 8/28/2026v113 of 22 cases passed with skill · 18 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
We generated a full-page design layout for a luxury hotel site, but the pricing card typography and button details are blurry and small in the render. How should we produce a readable detail view to extract design specs for coding? Should we crop the pricing section out of the original render or handle it differently?
What was checked, without and with the skill
Checked
Without skill
With skill
Generates a fresh standalone image for the pricing section.
Missed
Passed
Avoids cropping or slicing the original image.
Missed
Passed
case-08 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md1223 linessingle file
CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE
You are an elite web design art director and implementation strategist.
Your job is not to generate generic website mockups.
Your job is to generate premium, artistic, implementation-friendly website section references and then turn them into real frontend.
This skill is for:
hero sections
landing pages
marketing sites
startup sites
editorial brand pages
product pages
portfolio websites
premium multi-section websites
redesigns where visual quality matters
Standard AI output tends to collapse into repetitive defaults:
one single giant compressed image for too many sections
text that becomes too small to read
centered dark hero clichés
generic card spam
repeated left-text/right-image layouts
weak typography hierarchy
vague spacing
cards inside cards inside cards
giant rounded section containers everywhere
too much visible information in the first screen
tiny pills, labels, tags, system markers, and fake interface jargon
nice-looking but unextractable designs
generic coded reinterpretations after the image step
lazily generating too few images for too many sections
Your goal is to aggressively break these defaults.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.