Stop shipping the average: ambitious design with coding agents
The old design ladder of sketches, wireframes and prototypes existed because building the real thing was expensive. Coding agents build it in minutes, so creative work is now about exploring and choosing. Practical patterns for working with an agent on anything visual - show pictures instead of adjectives, ask for many versions, fight the agent's pull to the average, and turn every idea into a playground you can drive yourself.
The fidelity ladder is gone
Design has always climbed a ladder of fidelity. You start with sketches on paper, move to wireframes, then mockups, then a clickable prototype, and only at the end does anyone build the real thing. Each rung exists for the same reason: the real thing was expensive, so you settled as many questions as possible while it was still cheap to change your mind.
Now a coding agent builds the real thing, in the real medium, with real motion, data and interaction, in minutes. It will build a second version and a tenth just as quickly, and it doesn’t get bored.
Skipping straight to the real thing used to be reckless. Now it’s the cheapest way to find out if an idea works.
A sketch can’t tell you how an animation feels, how a layout behaves at every width, or whether a texture reads as paper or as noise. The real thing can.
The new frontier is pure creativity
You’re no longer held back by your execution skills. The elaborate animation, the generative background that’s different on every visit, the interactive piece that reacts to the cursor: things that used to need a specialist, weeks of work and a budget to match are now an afternoon in the browser.
If you can picture it, you can make it.
Everyone ships the average
Look around. Everyone can build a website or an app now, and almost every new one looks the same: the same templates, the same gradients, the same component library, the same hero with the same three cards underneath. They look decent and they’re boring, and often they aren’t even polished, because the defaults were good enough to ship. The tools that made building easy also made the average easy, and the average is what most people ship.
When anyone can make a decent website or app, decent no longer stands out.
That’s the opportunity. The way to excel now is to go beyond it: to make the stunning, delightful, surprising things you always wanted to make but never had the time or the skills for. The effort that used to go into execution can go into ambition.
The short version
So execution is no longer what limits you. Your imagination and your taste are. You’re the art director now: the agent produces, and you decide what looks best, what’s interesting, what fits your brand and what will delight the people who use it. Those aren’t right-or-wrong calls. They’re choices, made by looking, comparing and pushing further, and making them well, and aiming high, is the job. That calls for a different way of working. These are the patterns that make the difference, from a designer working with a coding agent on visual work over many long sessions. None of them needs special tools: an image model, a coding agent and a browser are enough.
- Show, don’t tell. Generate reference images with ChatGPT or another image model and give them to the agent. Pictures carry hundreds of decisions; adjectives carry almost none.
- Ask for ten versions, not one. Side by side, with a switch to flip between them. Pick your favourites, say what you like in each, and iterate on those. Choosing is easier than describing.
- Fight the average. Agents drift to the uniform and stay with what they’ve already built. Ask explicitly for variation, for range, and for directions that have nothing to do with the last one.
- Name the technology. Canvas, WebGL and shaders unlock effects plain HTML and CSS can’t do. You don’t have to write them; you have to ask for them.
- Build a playground. Have the agent turn every parameter into a control, with wide ranges. It can get elaborate, and that’s fine.
- Don’t ask for the change; ask for the control. If you don’t like something, get a slider for it and find what you want yourself.
- Save everything. Snapshots, named versions, persisted settings. They’re what make bold experiments safe.
Explore in the real thing
The first shift is in your head. When a working, high-fidelity version costs minutes, you don’t need to sketch your way towards it: you explore in the finished medium from the start, and the right number of attempts goes up by an order of magnitude. A visual idea that would once have got one careful prototype at the end of the process can now get twenty working versions on day one.
That’s a gift, but only if you use it to explore rather than to polish your first idea faster. Throw away more than you keep. The interesting direction is rarely the first or the obvious one, and the agent will happily build the obvious one first.
The flip side: when nothing costs much, it’s easy to keep trying without learning anything. After each round, say why it didn’t work (“too busy”, “it suggests a building”, “it competes with the text”). Those reasons pile up into a far sharper brief than the one you started with, and they’re the part the agent can’t supply.
Show the agent pictures, not adjectives
“Subtle”, “organic”, “more premium”, “not quite the vibe”: these words mean something precise to you and something vague to a model. A coding agent can read an image, though, and an image carries hundreds of decisions at once: proportions, density, colour, texture, how much empty space there is.
So make pictures:
- Generate references. Ask ChatGPT or another image model for rough renders of what you have in mind, even if they’re full of mistakes. Give them to the agent with a note: “directionally right, but the lines should be thinner”.
- Point at a specific effect or concept. Not a mood board of things you like, but the one thing you want from a reference: the way the bands branch in a streamgraph you built years ago, the grain on a particular print, the easing on a specific menu. Show it and name the part that matters (“I want this branching, not these colours”). Your own old work is often the best reference, because you know exactly which part of it was right.
- Point at things. A screenshot of the current version with an arrow and one sentence (“this part always bends to the right”) beats a paragraph of description.
Every time you switch from words to a picture, expect the next version to jump forward.
Ask for ten versions
Don’t ask the agent for “a hero animation”. Ask for ten, with a control to switch between them. Comparing is far easier than specifying: seeing ten side by side tells you what you like, what surprises you and what you’d never have thought to ask for.
Then pick your favourites, two or three, not just one, and say what you like about each (“the motion in 3, the colours in 7”). Ask for the next round around those: ten new versions that take the favourites further and combine what works in each. Pick again, and keep going. A few rounds of this get you somewhere no single prompt would, the way breeding gets you somewhere no single plant would.
And, now and then, ask for ten that have nothing to do with any of them, so you don’t narrow in too early.
Fight the pull to the average
Language models produce the likely answer, and in visual work the likely answer is the average: even spacing, one texture applied everywhere, the same width for everything, the same timing. Real material, paper, brushwork, light, crowds, is never average.
Agents also tend to stay with what they’ve built. Ask for “something different” and you’ll often get a variation of the current version, not a new idea.
This is where you matter most. The agent won’t leave the middle of the road on its own, but it will go anywhere you point it. So point: name the specific alternative direction you want to try, not just “different”. “What if these were paper strips instead of lines?” “Try it as if it were printed, with misregistration.” “Make it behave like a flock, not a wave.” Each of those is a direction the agent would never have picked, and it can build any of them in minutes. Your taste, your references and the odd ideas you’ve been carrying around for years are exactly what it lacks.
Then counter the pull to the average, explicitly and repeatedly:
- Ask for variation by name. “Vary the widths a lot, mix wide and thin, don’t make them uniform.” Expect to say it more than once.
- Ask for range. “Make these three versions as different from each other as possible.”
- Ask it to start over. “Forget the current approach. Give me three directions that don’t use it at all.”
- Say how big a change you want. Agents tend to overreact to your latest message and rebuild things you liked. “Subtle adjustment, keep everything else” is worth saying every time.
Know which technology to ask for
Canvas, 3D and shaders used to be specialist territory: a different kind of programming, with its own maths, that most designers and front-end developers never touched. That’s over. The agent writes that code as easily as a layout, so they’re no longer scary. They’re just options.
Canvas, 3D and shaders are no longer scary. They're just options.
You don’t need to write the code, but knowing what’s possible changes what you get. Left to itself, an agent reaches for the safe option: HTML elements and CSS animations. That’s fine for a button. It caps you hard for anything ambitious.
Name the technology and whole new options open up:
- Canvas for drawing thousands of moving things at once: particles, strands, generative patterns, anything that would be too many elements for the page.
- WebGL for real-time graphics on the GPU: depth, light, large scenes, smooth motion at full screen. Libraries like three.js make it practical.
- Shaders for the things that make work feel crafted rather than generated: grain, paper and print textures, blur, glow, distortion, colour that blends like ink. A shader runs for every pixel on the GPU, so effects that would be impossible otherwise run smoothly.
- SVG for crisp, scalable illustration and shapes you want to animate precisely.
- Noise and physics for movement that feels natural rather than mechanical: flowing, drifting, swarming, settling.
You don’t have to know how they work, only what they’re good for, so you can say “do this with a fragment shader” or “draw it on a canvas” when the agent’s first attempt hits a wall. And ask it to explain the options when you’re unsure: “what are three ways to build this, and what does each make possible?”
Turn every idea into a playground
This is the pattern that changes the pace of the work most. Instead of asking the agent for the answer, ask it for an instrument:
Make every parameter a control. For each one, give me a setting and a variance, and make the ranges wide enough to surprise me.
The agent builds the controls into the thing itself: a small draggable panel of sliders, toggles and colour pickers that floats over the real page or app and hides with one click, so you see every change in place, in context, at full size. From then on you explore at the speed of dragging a slider rather than the speed of a chat round-trip. Things that would have taken an evening of back-and-forth take a minute.
It can get elaborate, and that’s fine. A playground for one animation can grow to dozens or even hundreds of controls, grouped into collapsible sections, with search. The agent builds that kind of tooling quickly and well, and you won’t ship the panel anyway.
Some details that pay off:
- Setting plus variance, not just a value. It’s how you get controlled variety instead of uniformity.
- Wide ranges. Agents set timid ranges, the same pull to the safe middle again: every slider stops just short of anything interesting. Ask for ranges that go well past what looks reasonable, to the extremes in both directions. If a slider still doesn’t go far enough, just ask for a bigger range; you can always pull it back, but you can’t explore what the slider won’t reach.
- Randomness on a button. A “shuffle” control, and sometimes the decision to keep the randomness in the final version, so it’s a little different every time.
Don’t ask for the change, ask for the control
Once you have a playground, change how you give feedback. When something isn’t how you want it, don’t ask the agent to change it (“make the lines a bit thinner”). Ask for a control that changes it (“add a control for line thickness, with a variance”).
Then set it yourself. You’ll find what you’re after faster than you could have described it, you’ll learn how much it actually matters, and the control stays there for the next time you change your mind.
Your requests also get easier for the agent to get right. “Make it more elegant” is a guess. “This slider needs to go further” or “I need a control for how much the colours mix” is a precise instruction.
Save snapshots and persist settings
Good states are fragile. The next experiment, or the agent’s next overreaction, can wipe out the version you liked, and you won’t remember the exact settings.
Make the playground remember:
- Persist settings across reloads, so you never lose where you were.
- Copy and paste states as text. Paste a favourite into the chat with “lock this one in” and have the agent save it.
- Named snapshots in the playground, so you can flip between your best candidates.
- Commit often, and keep a backup branch of the playground before you start cleaning up.
The point isn’t tidiness. Once nothing you like can be lost, you’ll be far more willing to try something bold.
Keep the brief alive
Long sessions drift. After dozens of changes the agent may have quietly dropped something you asked for at the start. When the results start to wander, ask it to collect every instruction so far into one brief and build from that. A restated brief often works better than any single correction.
And now and then, step back from the details. The biggest improvements often come from removing the problem rather than solving it: showing the real images instead of imitating their style in code, or cutting a feature instead of tuning it. That kind of step back is the part the agent won’t take on its own.
Finish like an engineer
Once the look is settled, switch modes. Ask the agent to bake the chosen settings into the production version, drop everything you didn’t use, and make it fast: lower resolution where nobody will notice, a lower frame rate once the motion settles, and graceful behaviour on slow devices. The agent is at its best here.
Keep the playground. You’ll want it the next time someone asks for “the same, but a bit different”.
Make the thing you always wanted to make
The agent will build anything you can point it at, but it won’t dream anything up. Left to itself it makes the average, and the average is what everyone else is shipping. The ideas, the odd references, the directions nobody else would try and the ambition to make something genuinely delightful all have to come from you.
That’s the opportunity. Execution used to be the wall between what you could imagine and what you could make, and for most people it decided what got built. That wall is gone. So don’t use the agent to make another decent, forgettable website or app faster. Use it to make the stunning, surprising thing you always wanted to make and never had the time or the skills for.