Design to Website With AI Without Losing the Details

Give an AI agent only a picture of your design and you get a page that looks right at first glance but loses the details: the exact font, the spacing, the shadows, the small shapes. Add half a page of real numbers and the rule "the numbers win", and the agent gets almost all of them right on the first try. It takes about ten minutes per screen, and the spec and prompts are below, ready to paste.

What It Is

It's a way of handing a design to an AI coding agent. Not just the picture, but the picture plus a spec: fonts with their exact weight, color codes, text sizes, gaps, corners and shadows. The spec tells the agent what a picture can't say precisely.

Alek put it to the test with one design and Claude Code. The design is the top of a home page for a made-up morning app, Morrow: a logo and three links, a big headline with one word in green italics, a short paragraph, two buttons, a row of colored dots and a green card with a sun, two hills and two small white labels. Exported as a flat picture at 1280 by 760 pixels, the way you'd export a frame from your design tool.

He then handed it over three different ways and laid each result on top of the design, marking every pixel out of place in pink.

Why It Helps

When a design becomes a page, quality is rarely lost in the big things. It's lost in the small ones.

Try 1, picture only. The agent got the picture and one sentence: build this design as a web page, in a single file. About a minute later the page was there, and it was close: same layout, same words, the card, the sun, both labels.

Laid over the design, though, almost all the text was pink: every element a few pixels off, or drawn with a slightly different version of the font. About 3.2% of pixels didn't match.

Asked to compare its page with the design, the agent found 36 differences. They fall into five groups:

• Right font, wrong version. The headline used weight 700 instead of 600 and a different style. Same name, different feel: it shouts.
• Small gaps add up. 2 extra pixels above the headline and 2 below, so the buttons ended up 4 pixels lower.
• Colors are almost right. Background #F5F0E6 instead of #F6F1E7, two slightly different grays instead of one. You can't say what's wrong, but the page feels less calm.
• Shadows get guessed. The main button's shadow was lighter and wider. A shadow is hard to read from a picture, so the agent made one up.
• Small shapes get simplified. The leaf logo became an arch. A semi-transparent label became solid warm gray.

None of this is beyond the agent. It had to guess, and a guess made from a picture is always a little off.

Try 2, numbers first. A clean folder, the same picture plus a half-page spec, and a prompt saying the spec beats the picture. Result: about 0.7% of pixels off, less than a quarter of the first try. What was left: three nav links nudged sideways, a few label letters off by a pixel, and the curves of the hills.

Try 3, fix it afterwards. Back to the first page: the agent got the design, a screenshot of its own page and the spec, and was asked to list the differences and fix them. It improved, but stopped at about 2.0%. Most likely because each fix is a patch on a structure built from guesses, and some of those guesses stay.

The lesson: give the numbers first, not later. They cost ten minutes and save you rounds of "make it look more like the design".

How to Do It

1. Export the screen as a picture at its real size, so the agent sees the layout.
2. Write the spec next to it. Fonts with exact weights, every color code, text sizes, main gaps, corner radius, shadows. Copy them from your design tool's inspect panel, the one where you click an element and see its font, size, color and spacing. Half a page is enough.
3. Say the spec wins. If the picture and the spec disagree, follow the spec.
4. Make the fonts available. Install them or point to the files, and ask the agent to use them by name. The wrong version of the right font is the mistake people notice most.
5. Ask what it wasn't sure about. That list shows you which numbers your spec is missing.
6. Let it see the result. Give it a way to take a screenshot of its page, or take one yourself and pass it back. Ask for a list of differences before any fix, and fix with numbers, not a vague "make it closer".

Ready to copy, the spec to fill in (delete the lines you don't need):

Ready to copy, the prompt to send with the picture and the spec:

And the one for the check, once the page exists:

Quick Test

Take a screen you've already designed, the simplest one. Spend ten minutes writing its spec from the inspect panel. Give the agent the picture, the spec and the prompt. Then open the page next to the design at the same width and check three things: does the headline have the same weight? Are the buttons at the same height? Is the background the same color code? If all three match on the first pass, the method works. If the agent flags uncertain values, those are the numbers to add to the spec next time.

Watch Out For

• Our spec was perfect. The test design was built from exact values. In a real project you copy the numbers by hand, and a number copied wrong becomes a mistake the agent follows faithfully.
• What you describe only in words stays uncertain. The hills were described in words, the agent flagged them as its least certain values, and that's exactly where it went wrong. If a shape matters, give it measurements or a file.
• The agent often can't see its own page. In these tests it could only read and write files, and it said so: it couldn't check the result. Without a screenshot it works blind.
• The percentages are indicative. 3.2% or 0.7% of pixels off is a way to compare the tries, not a quality score.

Next step: write the spec for one screen today and see how close the first build gets. If you're redoing an app that already exists, read how to redesign an app with AI without breaking the code. To start from a real reference with the prompt already written, see the design prompt gallery.

This pill is adapted from a piece Alek published on Medium. You'll also find prompts written to keep the details on MagpUI, the gallery Alek is building: every piece belongs to its author and links back to the original.

In short: A picture alone gets AI close to your design; the picture plus half a page of real numbers, with the rule that the numbers win, gets almost everything right first time.