Teaching an agent to work like a product designerTeaching an agent to work like a product designer

I built an agent that works like a product designer. I describe what I need in plain words. It works out the problem first, starts from what the product already has, builds a prototype, often in more than one version, checks it in a browser, and then stops so I can choose.

What it does

It has seven commands. /design works through flows, structure, and wireframes before it touches visuals, and /prototype builds a working app. The other five cover the work around those two: brainstorming and ranking ideas, critiquing a screen, planning research, mapping flows, and writing a handoff a developer can build from.

It thinks first, as much as the job needs

Before it builds anything, it decides how much thinking a request deserves. A typo fix gets one line on who it’s for. A new screen also gets its scope and its riskiest assumptions. Anything hard to undo gets competing approaches and a recommendation.

It starts from what you already have

Inside an existing product, it reuses the components, tokens, and wording that are already there. It only makes something new when nothing existing can do the job, and it says why. It has no house style of its own. With no codebase and no Figma file to go on, it uses a plain fallback set and writes that down, so the next session doesn’t invent a second system.

It builds, checks, and stops

Prototypes are real apps you can click. When the choice is genuinely open, it builds a few versions, each named after the bet it’s making. The example project that ships with it is a billing dashboard in two versions: Month-end pulse, for a controller who wants the numbers at a glance, and Exception queue, for an accountant clearing a list of unmatched payouts.

Then it opens every version in a browser, down to a phone-width window, and saves screenshots. Nothing counts as verified until those exist, and it writes down what it didn’t get to. Then it stops and waits for a pick.

It keeps its answers short

When it’s done, it says what changed, where to find it, and whether it was checked. If something wasn’t checked, it says so plainly.

What I had to learn

The first version looked nothing like this. Most of the work was finding out what didn’t work, usually by watching it fail.

Less machinery worked better

The first version tried to police itself with quality gates, validators, and a lot of style data. It did fine on one setup and lost the thread on smaller models. I tore most of it out and replaced it with short files on one topic each, written so a smaller model could follow them.

It will say it checked when it didn’t

On a smaller model, the prototype command once reported success it hadn’t earned and shipped broken code. Part of the problem was the command, which asked for things its tools couldn’t do and gave the model no honest way out. So the rule became simple: no screenshot on disk, no “verified.”

Process should match the risk

For a while, every request went through the same thinking routine, and every prototype arrived in three versions. The decision log sums it up: “The protocol was written for a redesign and then applied to a typo.” Scaling the process to the risk fixed both.

A rule needs a check

The agent bans decorative em dashes in interface copy, but its own instructions were full of them. “A rule the repo visibly breaks is a rule the agent learns to treat as optional.” Now every rule has a source and an example, and the tests check the ones a machine can catch.

Building finds what reading misses

When I had it build a small dashboard from its own starter apps, it found defects in the starters themselves. One got past every automated check: on a phone-width screen, a customer’s name read after its own details. It took looking at the screen to catch it.

Where I fit

I still run the work. I write the brief, pick between the versions, and review what it hands back before anything goes further. The agent does the building and the checking. Deciding what’s good enough is still my job.