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

Your agent can write UI.
This makes it design.

A seven-step process an AI coding agent runs from brief to reviewed interface. Three real directions before a single line of production CSS. An artifact on disk at every step. Two places where it stops and a person decides.

Install the pack Read the process
The process

Seven steps, in the order that matters

01

Intake

Subject, audience, and the one job this screen must do.

02

Fidelity

How finished it needs to be. The first real design decision.

03

Wireframe

Structure only — deliberately unfinished so reviewers judge layout.

04

Direction gate

Three genuinely different renders. Never a written menu.

05

System + build

Colour derived from real assets, never invented. Then code.

06

Motion

Every animation earns its place — or gets refused, in writing.

07

Review loop

Scored, floored, 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, not for the person 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