AGENT-DESIGN-STUDIO

A skill for AI coding agents · Free and open · Seven steps · Two points where you decide

Your agent can already write UI. This teaches it to design.

Tell it what you need. It asks the questions a good designer would ask, sketches a rough skeleton, then builds three genuinely different versions and stops so you can pick one. It finishes your choice properly, adds movement only where movement helps, and inspects its own work against a strict checklist before handing anything over. Every step leaves a file you can open and read.

Install See how it works
Version C — a near-white, centred single-column page, not chosen
03 · C
Version B — a deep-slate editorial page with oversized type
03 · B
Version A — a warm-paper specimen sheet, the one picked at the first checkpoint
03 · A
GATE 1

Three real versions this page was offered. A person picked one.

  1. 00Setup
  2. 01Questions
  3. 02How finished
  4. 03Skeleton
  5. 04Pick one · you
  6. 05Build
  7. 06Movement
  8. 07Sign-off · you

01 — how it works

Seven steps, and the order is the whole point

Jump ahead and you get something beautiful that answers the wrong question, or something correct that nobody remembers. Two of the seven steps stop and wait for you. Wherever that happens, this page turns to paper — and the red line runs straight through it, because the checkpoint is part of the work, not a pause in it.

  1. 00

    Setup

    Is this a page that stands on its own, or a screen inside software you already have? The answer changes what "finished" means for everything after it.

    —before we start
  2. 01

    The questions

    Who is this for, and what is the one job it has to do? It reads whatever already exists before it asks you for anything.

    00-brief.md
  3. 02

    How finished

    A quick sketch, or something ready to put in front of customers? Deciding this on purpose, instead of drifting into it, is the first real design decision.

    01-fidelity.md
  4. 03

    The skeleton

    A rough sketch of the bones — boxes and labels, no colour, kept deliberately plain so you judge the layout rather than the paint. It writes down here what happens on a phone, and what happens if you only use a keyboard.

    02-wireframe.html+ .png
  5. 04

    Three versionsYOU DECIDE

    Three genuinely different versions, each one built for real — never three adjectives on a list for you to imagine. Then it stops and hands them to you. Nothing else happens until you choose.

    03-directions/a · b · c03-direction-decision.md
  6. 05

    Build it properly

    Your choice, built for real. First the page's rulebook — the colours, sizes and spacing everything has to follow, so nothing drifts — then the page itself. Colours come from something that actually exists, with the reason written beside each one.

    04-design-system/tokens.json05-implementation.md
  7. 06

    Movement

    A second pass over a page that already works without it. Every piece of movement has to say what it is for, or it gets turned down in writing — and the turned-down list is handed over with everything else.

    06-motion-spec.md
  8. 07

    Strict inspectionYOU DECIDE

    It marks its own work against a hard checklist, including a blunt one: look at the first screen for three seconds — does it read as a real product, or as a document? It fixes what it finds, one change at a time, then brings it to you. You have the last word.

    07-uat-report.mdSTATUS.md

02 — movement, running

Movement has to earn its place. Here it is, running.

Your device asks for less movement, so everything this page would have animated on its own is switched off. The four examples below still work, because they only move when you press them — that is the difference between movement you asked for and movement you did not.

Everything that moved on your way down this page was written down first, with a reason. Below are four of the rules behind it, built as things you can press instead of claims you have to take on trust. A page that sells this and then only describes it has made the weaker version of its own case.

06-motion-spec.md
21kept, each with a reason, a shape and a length
18turned down, each with the rule that stopped it

The turned-down list is handed over too. It is the half that proves the other half was a choice.

A

Pressing something

none
140ms ease-out
400ms ease-in

A press should answer in about a tenth of a second. The first button says nothing back. The third starts slowly and finishes late — it drags out the exact moment you are watching, which is why the rulebook forbids that shape on anything you click.

B

Same length, two shapes

linear
cubic-bezier

Both take exactly the same time. The lower one still arrives sooner and settles, because it moves fast at the start and eases into place. How quick something feels is set by the shape of the movement, not its length.

C

One after another

A small gap between items reads as one arrival. With no gap at all it is a jump and you miss the order; with a big gap you are watching a queue, and the last one is simply late.

D

Cutting it off halfway

CSS transition
CSS keyframes

Flip both back while they are still moving. The top one turns around from wherever it had got to. The bottom one snaps back to the start and begins again, and you can see the jump. That is the whole reason anything you can press twice in a row is built the first way.

03 — what you get

Every run leaves a folder you can open

Thirteen files, in the order they were made. None of them is a summary of work that happened somewhere you cannot see — each one is the work. The two marked below are the two places where you decided, and they carry your decision and your name.

Sheet — what lands in the folderRun 2026-08-24

00-brief.md
01-fidelity.md
02-wireframe.html + .png
03-directions/{a,b,c}.html + .png
03-compare.html
03-direction-decision.md ← gate 1
04-design-system/tokens.json
    components.md
    assets-manifest.md
05-implementation.md
06-motion-spec.md
07-uat-report.md ← gate 2
STATUS.md

One file is written for you, not for the machine

Which step is done, which one is waiting, who it is waiting on, and a link to everything made so far. One page, in plain words, for the person paying for the work rather than the one doing it — so nobody has to ask how it is going.

The two decision files are the ones that bind

Each decision file says which state it is in: waiting for you, approved by you, or chosen automatically because you set a rule that allowed it. An automatic choice is temporary on purpose — every version stays in the folder so you can come back and overrule it. That is not a formality. It is exactly what happened to this page.

Do not take our word for any of it

The run that produced this page is published in full — every file above, including the version that was turned down. Open the brief, run the three directions, read the review that passed a page a person then rejected.

Browse a real run

04 — the honest part

The first version of this page was turned down

It passed every check that can be measured: the text was readable, it worked with a keyboard, it worked on a phone, nothing was broken, nothing overflowed. It scored well enough to pass. Its weakest mark was craft — and the inspection let it through anyway, because the average looked respectable.

Then the owner opened the live page and looked at it.

It reads as a wireframe — a spec document, not a designed website. Almost no colour. The motion is invisible on first load. One even rhythm all the way down. It has to read as a product somebody invested in. Đức · 2026-08-24 · on the live v1.0 page

He was right, and the checkpoint is what let him say so. What you are reading is the rebuild — the same process, run again, on the version that had lost the first vote. Three things were tightened in the process itself that same day, so the next page cannot fail the same way: the three-second look at the first screen became a pass-or-fail rule, a low craft mark now blocks anything published, and a deliberately quiet design now owes you at least one moment worth looking at on every screen.

Then he came back and asked for two more things: say all of this in words anyone can follow, and make the page move like something somebody cared about. That is this version. Publishing a page nobody had looked at would have been the failure. Being overruled is the process working.

The first screen of the skeleton sketch: grey blocks and labels, layout with no styling at all
02 · the skeleton — layout only
The first screen of the version that was turned down: a warm paper sheet divided into a fine grid
v1.0 · the first screen
TURNED DOWN
The first screen of the previous version: the dark rebuild, before the words were made plain and the page was given movement
v1.1 · the version before this one

05 — install

Install

Two ready-made ways in, or copy the folder straight into any agent that can read a SKILL.md. Twelve reference documents and one router. Nothing to run in the background, nothing else to install.

Claude Code

/plugin marketplace add ducnguyen221/agent-design-studio
/plugin install agent-design-studio

Codex

$ codex plugin marketplace add ducnguyen221/agent-design-studio
$ codex plugin add agent-design-studio@agent-design-studio

06 — who it is for

Who this is for

The written references are the product. The seven steps are how they get used, in order.

People learning the craft

The references are written to be read, not only obeyed. What to decide first, where the limits are, and why — including the parts that tell you to stop and build nothing.

People shipping real work

A process you can point an agent at and run again next time, with a folder of files a client can follow, and two places where the outcome stays yours.