Design Studio Crew Run the demo

A studio of AI design agents, run from Telegram

Agents propose. Code judges. You approve.

They draft screens, brand assets and design audits. Real code measures every piece of work against a real design system. Nothing moves on until a person presses Approve.

Watch a job run Run the demo

Scroll to follow one brief from start to finish

One real job

Follow one brief all the way through

Everything in this story comes from a real run of the studio. Scroll to move through it.

Skip the story

A brief arrives in Telegram

Plain words, or a screenshot. This one asks for a weekly progress screen for a student.

Design Studio
A weekly progress screen for a student: streak, lessons done, next lesson, and a kind nudge if they fall behind.

The Lead picks a route

Screen, brand or audit. It proposes. You approve or send it back.

Screensstrategist, UX, UI, reviewer
Brand assetsstrategist, brand, reviewer
Auditsreviewer, handoff

Agents propose, one role each

Strategist, UX and UI each write a note. Every one waits for your Approve.

StrategistApproveGoal: see the week in ten seconds, without feeling judged.
UXApproveFour steps. First load, empty, error and success states.
UIApproveBuilt from the real Moon tokens. Attempt 1.

Code measures it

The Reviewer is not an AI. It opens a real Chrome and measures. Before you see anything.

Attempt 1 of the weekly progress screen at phone width. The cards run off the right edge, one badge is bright orange and the helper text is very faint.
2.84 to 161px past the edge#FF6B35

Rejected. Fixed. Passed.

The agent gets the numbers and fixes all four problems on its own, up to three times.

The rejected attempt.The same screen after the fixes: one column, Moon colours, readable text.

You approve. Everything is kept.

One rejection and two fixes, all logged. Then the files, the review and the log.

Approve
  • screen.html
  • review.md
  • Screen.tsx
  • spec.md
  • log.md

What comes out

Real outputs, not mockups

Everything here was made by the studio, in demo mode, and passed its own checks.

The approved weekly progress screen at desktop width, built from Moon tokens.A screen from a briefChecked at 375, 768 and 1024 px A square brand asset: the headline on a dark green panel over green hills.Brand, square post12 images made once, 15 assets A tall story format brand asset on a deep blue evening background.Story formatSafe zones measured A messy page with numbered red boxes around each problem the audit found.An audit, pointed at the page13 to fix, 25 to note

The log

  1. approvalLead route approved
  2. review_rejectcontrast, overflow, off palette
  3. fixUI produced attempt 2
  4. review_pass62 elements checked
  5. rejectionJimmy: make it simpler
  6. approvalHandoff approved

Every approval, rejection and fix, in order.

The React version of the screen rendered with the real Moon components.Handoff: verified ReactType checked, rendered, every word present

The part that is not an AI

Try to talk the Reviewer round

You cannot. It measures. Slide the text colour and watch the same maths it uses on every page.

AaPASS

Token: mo-black. On a white card.

13.16:1Normal text needs 4.5 to 1.

Watch it work on a real page

A real audit of a deliberately messy page. Click a pin to see what it found.

A deliberately messy dashboard page at desktop width, with red pins marking the problems the Reviewer found.
  1. Finding 1 of 6

    Heading order jumps

    A heading jumps from h1 to h4.

    The fix: Use h2 here and use the size classes to style it.

  2. Finding 2 of 6

    Text too faint to read

    #999999 on #FAFAFA measures 2.73:1 at 17px, needs 4.5:1.

    The fix: Change the text to mo-grey (#6B6A66), the closest Moon colour that passes on this background.

  3. Finding 3 of 6

    Text too faint to read

    #22C55E on #FAFAFA measures 2.18:1 at 26px, needs 3:1.

    The fix: Change the text to mo-green-8 (#3B8B57), the closest Moon colour that passes on this background.

  4. Finding 4 of 6

    An image does not load

    An image did not load (missing-banner.png).

    The fix: Fix the image address or remove the image.

  5. Finding 5 of 6

    Lines far too long

    Lines run about 151 characters, which is hard to follow. Aim for 45 to 90.

    The fix: Limit the text width, for example max-w-prose.

  6. Finding 6 of 6

    A field with no label

    Form field has no label.

    The fix: Give it a visible label tied to the field with for and id. Placeholder text is not a label.

2.3 to 1Faint text on a brand panel. It needed 3.
61pxA card pushed past the edge of a phone.
108pxA headline running off the top of an ad.
7 of 15Brand assets rejected on the first try.
2.91 to 1Moon's own secondary button. White on blue. It fails.

The crew

Seven roles. Six are agents.

01Studio LeadAgent

Reads a brief or a screenshot and picks the route: screen, brand or audit. Does no design itself, and only proposes.

02StrategistAgent

Goals, users and constraints, kept short, with every assumption labelled as one.

03UXAgent

The flow, a screen outline and every state a screen needs: first load, empty, error and success.

04UIAgent

Builds screens from the real Moon tokens and fixes whatever the Reviewer rejects, with the measured numbers in hand.

05BrandAgent

Plans variations and sizes. An image model draws the artwork only. The studio sets every word, in Moon type.

06HandoffAgent

Build specs and fix lists. For a screen, the React code is generated and then verified before you see it.

07ReviewerCode, not an AI

The standard keeper. Real checks in a real Chrome, rejections with numbers and fixes, and no way to talk it round.

How it works

Three routes, one rule

Each route plans first, shows its cost, and waits for you before it acts.

Screens

  • Built from the real Moon tokens, checked at three widths.
  • Up to three automatic fixes before you see it.
  • Handoff turns it into verified React.

Brand assets

  • The plan shows the exact image count and cost first.
  • An image model draws artwork only. Chrome sets the words.
  • A layout fix reuses every image. Only changed looks cost more.

Audits

  • A web address, an HTML file or a screenshot. It only reads.
  • Findings in priority order, boxed on the page, each with a fix.
  • Waive what is deliberate. The next audit remembers.

Handoff code is checked, not trusted

  1. 1. Type checkAgainst Moon's real components, with Moon's own TypeScript.
  2. 2. Server renderBundled and rendered with react-dom, so it runs.
  3. 3. Every wordAll the text of the approved screen must be in the output.
  4. 4. Rendered and reviewedMoon's Tailwind build, a real Chrome, the same Reviewer.

Guardrails

It acts for you, so the limits are deliberate

Secrets

Keys come only from environment variables and are removed from every log and message. A test fails if anything key shaped is in the source.

One user

The Telegram bot answers one person, by id, for messages and button presses.

Money

Live agents and real images are opt in, separately. A key alone never spends. Every job has a spend cap and an image cap.

Read only

Audits refuse private and internal addresses on every request, including redirects. No clicking, typing, signing in or downloads.

Untrusted pages

Text from an audited page never reaches the agent that writes the fix list. It sees counts and rule names only.

Plain words

Everything the studio writes is filtered for plain language, and the project is tested for it.

Status

What is proven, and what is not

This is a working prototype, and it says so.

Status of each part
PartState
Reviewer, gates, logging, cost caps, converter, verification, audit safetyBuilt and tested 93 automated tests, including security cases such as redirects to private addresses and a page built to bait a clicker.
The three routes end to endWorking in the demos With mock agents, placeholder art and a terminal standing in for Telegram.
Real Telegram botNot run yet Tested against a fake Telegram. Needs a bot token.
Real Claude agentsNot run yet Tested against a stand in. Needs an API key.
Real Gemini imagesNot run yet Tested against a stand in. Needs a key, and a check of the real price per image.

Known limits

  • In demo mode the agents are templates, not a model. They answer in the same formats as the live agents, so everything around them is real.
  • The first attempt in each demo is seeded with known flaws on purpose, so the review loop is visible.
  • The brand artwork in the demo is placeholder art drawn in Moon colours, not generated images.

Try it

Run a whole job in a few seconds

The demos need no keys. Each plays a job with a scripted approver and writes its files to a folder.

npm install
npm run demoa screen, then the Handoff pack
npm run demo:brandcampaign assets, then the asset spec
npm run demo:audita messy page, measured, annotated, fix list
npm test93 tests

The README in the project folder has the full setup for Telegram, Claude and Gemini, including exactly what has to be done by hand.