Turn a reference image or mockup into a working local frontend that matches it closely. Inspects the image, extracts the design system (layout, type, spacing, color, components), implements it, then screenshot-compares and iterates to close the gap.
SkillScore82Maintained
Automatic
◆Frontend / UI pack
Last verified 8/6/2026
What it changes
Passed 16 of 20 test cases with the skill, and 11 of 20 without it.
Without skill55%
With skill82%
Checks it passed that the model alone missed
The response references `./design/context.md` for project constraints.
The response directs interactive flow wiring tasks to `design-prototype`.
The response ranks typography defects above spacing, color, and icon defects.
and 4 more in the full report
7 fixed11 passed either way3 still failing1 broke
Pass-rate lift
+27 pp
Tokens
-3%
Agent turns
0%
Response time
-45%
Model gemini-3.6-flashMeasured 8/6/2026v118 of 22 cases passed with skill · 20 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 7 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 7
Prompt
I'm starting an image-to-code conversion for `./mocks/user-table.png`. Before inspecting the image elements, what configuration file in `./design/` should I check for existing project constraints?
What was checked, without and with the skill
Checked
Without skill
With skill
The response references `./design/context.md` for project constraints.
Missed
Passed
case-15 · gemini-3.6-flash · 8/6/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md63 linessingle file
Design — Image To Code
Reproduce a reference image as a real, runnable frontend — verified by screenshot diff, not "looks roughly like it". The discipline that separates this from generic codegen: you measure the result against the reference and iterate until the gap is minor and explainable.
When to use
You have a mockup/screenshot (from a designer, design-ideate, or generated) to implement.
"Build this design", "code this screenshot", "make this real".
Recreating a UI you can see but don't have code for.
When NOT to use
The source is a live site (you can hit its URL/HTML) → design-url-to-code (it can extract real CSS).
No image yet, just an idea → design-ideate.
You need interactivity/flow wiring, not a static match → design-prototype (run this first to build screens).
Inputs
The reference image(s) (path).
Target stack: ask; default to matching the repo, else React + Vite + Tailwind + TS.
./design/context.md constraints if present.
Workflow
Inspect the image with a vision/read tool. Inventory every meaningful element. Extract the design system: layout grid, type scale, spacing rhythm, palette, components, radii, shadows.
Reuse before inventing: if adapting an existing project, read its components/tokens/fonts first and use them.
First pass: build to match the primary viewport as closely as possible. Don't chase responsive yet.
Capture: run the app, screenshot at the reference's exact dimensions via a browser-automation tool.
Compare & list mismatches in priority order: layout → type → spacing → color → icons.
Iterate until differences are minor and explainable. Then handle responsive (tablet/mobile).
Missing assets: use supplied files; generate raster assets with an image tool; or use clearly-marked placeholders + a note.
Worked example
reference: ./mocks/pricing.png (1440px wide)
stack: matches repo → Next.js + Tailwind + Aurora DS
pass 1: built 3-tier pricing grid, header, CTA
capture: screenshot @1440 → ./design/checks/pricing-impl.png
mismatches:
- [layout] cards 3-col but gap too tight (16 vs ~32 in ref)
- [type] tier price 32px, ref ~40px
- [color] "popular" badge wrong accent (#7C3 vs ref #16A34A)
- [spacing] section pad 48 vs ref ~80
iterate: fix gap=32, price=40px, badge=#16A34A, section pad=80