agent-design-studio
Seven steps · Two gates · MIT

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

One process, run end to end: intake, fidelity, wireframe, three real directions, a token system, motion, review. An artifact at every step. Two places where it stops and waits for you.

Install Read the process →

The process

Seven steps, in the order that decides whether it works

  1. 01

    Intake

    Subject, audience, and the single job this screen has to do.

  2. 02

    Fidelity

    How finished this needs to be — the first real design decision, made deliberately.

  3. 03

    Wireframe

    Structure only, deliberately unfinished, so review is about layout and not colour.

  4. 04

    Direction

    Three genuinely different renders, built for real. Never a written menu of adjectives.

  5. 05

    System + build

    Colour sampled from real assets and justified in one sentence. Then the code.

  6. 06

    Motion

    Every animation earns its place against four gates — or is refused, in writing.

  7. 07

    Review

    Scored on five dimensions against a hard floor. Fixed one commit at a time.


Deliverables

Every run leaves a paper trail

STATUS.md is the page for everyone else. Which step is done, which is waiting, who on, and a link to every artifact — written for the person paying for the work rather than the one doing it.

00-brief.md
01-fidelity.md
02-wireframe.html + .png
03-directions/{a,b,c}.html + .png
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