TheDesignAgent

A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.

Barındırılan MCP Sunucusu

npx add-mcp 'https://www.thedesignagent.ai/mcp'

Claude Code, Codex, Cursor ve daha fazlasına kurulur

Dokümantasyon

◢ 04

Your agent ships the wrong UI — the same three ways, every time.

Not a benchmark — the moves your agent reaches for when it doesn't know the job. You've fixed all three this week.

◢ 01 · DEFAULT

“It built another dashboard.”

— when the user just needed to do the thing.

The job was do the thing, not watch the thing. Your agent didn't know the difference.

◢ 02 · DEFAULT

“Tabs again.”

— even though the job is sequential.

High-stakes, sequential workflows split across status tabs. The default move when the agent doesn't know the flow.

◢ 03 · DEFAULT

“The shadcn defaults are showing.”

— and the diff passed review.

The UI ignores who's using it, when, and why. It looks fine. It's wrong. The user can't get through it.

◢ 05

Here's the same agent, the same model — with us in the loop.

Identical prompt. Identical model. The only difference is the brief before the build and the scoring after. Drag the slider to see what the judgment layer caught.

Ledger·

Accounts Payable Triage

Friday23 · May · 2026

Session

4/ 47cleared

22:14elapsed

72savg / inv

M. Cardoza

AP Specialist · II

mc

Queue12 of 47

All

Flagged

Low conf.

Mine

Aldenfield Components

3,420.00

INV-2026-04-1142

96

Bridger Steel Works

12,840.50

INV-2026-04-1158

94

Marcellus Freight

890.20

INV-2026-04-1163

71

Threadworks Apparel

2,210.00

INV-2026-04-1171

42

Hartwell Industrial Supply

1,789.60

INV-2026-04-1187

price variance

87

Korbex Manufacturing

4,210.40

INV-2026-04-1192

93

Pellier & Sons Co.

670.80

INV-2026-04-1198

99

Westmark Logistics

3,110.00

INV-2026-04-1204

qty mismatch

62

Quentin Paper Co

1,840.40

INV-2026-04-1209

88

Northshore Fabricators

9,220.10

INV-2026-04-1215

95

Vinland Solvents Ltd

540.20

INV-2026-04-1218

78

Atticus Hardware

1,180.50

INV-2026-04-1222

91

navigate

↑

↓

↵

H

Hartwell Industrial Supply Co.

Vendor #V-04412 · since 2019

Invoice total

$1,789.60

+$27.00 vs PO

Purchase Order

02 Apr 2026

PO-029841

Buyer: K. Whittle

$1,762.60

committed

received

Goods Receipt

14 Apr 2026

GRN-011420

Dock 3 · J. Pham

8 / 8

lines received

billed

Invoice

18 Apr 2026

INV-2026-04-1187

Received via EDI 810

$1,789.60

billed

SKU

Description

PO Qty

Rcv

Inv

PO Unit

Inv Unit

Line Total

Δ

HX-8042

Hex bolts M12 × 40 zinc plated

240

240

240

0.42

0.42

100.80

WX-2120

Lock washers M12 spring steel

240

240

240

0.08

0.08

19.20

PT-5530

PTFE thread tape 12mm × 10m

36

36

36

13.75

14.50

522.00

+27.00

BR-1090

Brass fittings 3/8" NPT elbow

48

48

48

4.20

4.20

201.60

GS-7700

Gasket sheet, 1/16" cork-nitrile

6

6

6

84.00

84.00

504.00

CL-3301

Cable clamps stainless 1/4"

80

80

80

1.15

1.15

92.00

LB-4400

Multi-purpose lubricant 1L

12

12

12

18.50

18.50

222.00

SH-2200

Shop rags blue bulk 50-ct

4

4

4

32.00

32.00

128.00

8 line items · all received · 1 variance

684

684

684

1,762.60

—

1,789.60

+27.00

AI Reconciliation

v4.2 · cached 11s

87

confidence

Recommendation

Flag for buyer signoff

"One line outside price tolerance; everything else reconciles. Cheaper to ping K. Whittle than to absorb $27."

Reconciliation checks3 pass · 1 fail

Line price tolerance

PT-5530 unit price +5.5% over PO (±3% allowed)

Quantities reconcile

PO ↔ GRN ↔ Invoice match across 8 SKUs

Receiving timeliness

Received 12 days after PO · within window

Duplicate detection

No matching invoice in 90-day window

Vendor history

Variance avg

1.8%

last 24 inv

On-time rcpt

92%

vs ETA

Rejection

0.4%

trailing 12mo

External context

PTFE base resin prices rose 4.8–6.2% across U.S. distributors in March 2026. Hartwell newsletter (12 Mar) announced category-wide repricing.

Hartwell · trailing decisionslast 12 invoices

FebMarAprMay

up next

↵

Korbex Manufacturing

$4,210.40· 93% · likely auto-approve

Before

Invoice 1 of 11 left · V-10482 · Net 30

Halvorsen Industrial Supply

14 invoices this year · 1 prior price variance

Invoice total

$6,275.25

Due 28 Oct

Variance2 of 4 lines out of tolerance · invoice is +$309.00 over what was ordered and received.

Purchase order

PO 4500-21877

9 Sep · R. Okafor

CC 3120 · Plant maintenance

Ordered$5,713.00

Price differs

Goods receipt

GR 5000-39102

24 Sep · Dock 2 · M. Ruiz

Posted in ERP

Received value$5,488.00

Quantity differs

Invoice

HIS-88412

28 Sep · Net 30

Tax $478.25 (8.25%)

Billed, before tax$5,797.00

Billed above PO / receipt

Lines that need a decision

ItemPO qty × priceReceived qtyBilled qty × priceResult
Pressure gauge 0–300 psi, glycerin PG-0300G24 × $42.002424 × $45.50Price mismatch +$3.50/unit × 24 = +$84.00 Limit 2% and $50 per line
Quick coupler, steel, ½in NPT QC-050S60 × $18.754860 × $18.75Billed more than received 12 units × $18.75 = +$225.00 Limit $50 per line

Other checks

Duplicates — none in vendor history

Vendor — bank verified, not on hold

Tax — 8.25% matches ship-to rate

After

◢ 05

One design agent. Three layers. Calibrated to the job — not a generic rubric.

/discover before the build, /ux after, /visual when the screenshot matters. Not just accessibility, not just looks: the whole design pass, every time your agent touches UI.

◢ SEG · 01

/discover

Reads your system first.

— a JTBD brief, before the agent draws a pixel —

  • JTBD — who's using it, what's at stake.
  • Heuristics — picked for this job.
  • Patterns — surface, density, rhythm.
  • Project model — tokens, components. Cached.

◢ SEG · 02

/ux

Scores against the brief.

— findings cite the job + the file:line —

  • Heuristic check — Nielsen, JTBD-shaped.
  • Cognitive load — density vs. the work.
  • Pattern fit — graded vs. Discover.
  • Findings — file:line + the fix.

◢ SEG · 03

/visual

What code review can't see.

— headless screenshot, scored vs. your tokens —

  • Brand fit — palette, type, hierarchy.
  • Density — rhythm vs. JTBD profile.
  • Contrast — AA at ship level.
  • Diff — vs. last passing run.

◢ 06

Built for whoever owns the UI.

Four roles. Same gap. One install closes it — without changing your agent, your stack, or your taste.

◢ ROLE · 01

Builders

Ship right the first time.

— for the builder who's redone agent UI three times this week —

  • Same agent, same model — new behavior, no new tool.
  • Brief before pixels — score after. Findings cite file:line.
  • One install — every repo, every editor.

◢ ROLE · 02

Forward Deployed

Drop in any repo. Any stack.

— custom UI in customer code, every week —

  • No infra — one pointer file. Stdio MCP.
  • Reads tokens — ships in the customer's voice.
  • file:line + fix — agent applies before opening the PR.

◢ ROLE · 03

Designers

Your taste becomes the constraint.

— stop watching your system flatten into shadcn defaults —

  • Tokens enforced — palette, type, hierarchy at the pixel.
  • Pattern fit — graded against your brief, not a generic rubric.
  • The agent — has to pass through you.

◢ ROLE · 04

Product Managers

Out of the QA loop for agent slop.

— every build scored before it reaches you —

  • JTBD-calibrated — findings cite the actual job.
  • file:line + the fix — agent applies before the PR.
  • Reviewable — every run a diff. Nothing AI-slop lands.

◢ MIDROLL · DISPATCH FROM THE EDITOR

AI-generated UI looks AI-generated.
That's a bug — not a vibe.

m

The Manifesto · entry 01 of 05
read the full transmission with $ cat manifesto

◢ 11

What we're learning while building this.

◢ Concepts

The component library was the right answer to a problem agents no longer have

Component libraries exist because building UI was expensive and inconsistency was hard to prevent. AI agents changed the cost equation. The case for building unencumbered — and what you need instead.

5 min read →◢ Anti-patterns

The dashboard default: why agents build viewers when the job is deciding

Four KPI cards, a table, a date filter. The dashboard is the agent's lowest-effort answer to 'build me a tool for this data.' It's also wrong most of the time.

4 min read →

all field notes →

◢ INTERSTITIAL · 02:14

Your agent will not become a designer.It can ship like one is in the loop.

◢ 12

One credit, one call. Buy a pack when you need more.

No plans to pick. Every call costs one credit, whichever tool your agent calls. Packs last 12months, and auto-recharge tops you up before your agent runs dry. We don't charge for errors, and you pay half on degraded calls.

16free credits / month

Start free. No card.

16 credits every month, starting the day you sign up: about five full design loops in any repo, any agent. Need more? Grab a pack below.

1credit · /discoverproject model + JTBD brief, cached after first call

1credit · /ux4-stage JTBD evaluation with file:line findings

1credit · /visualheadless screenshot + token-fit scoring

CH · 01

$37once

40 calls · any tool

  • $0.93 / call
  • lasts 12 months

CH · 02★ FEATURED

$87once

100 calls · any tool

  • $0.87 / call
  • lasts 12 months

CH · 03

$199once

250 calls · any tool

  • $0.80 / call
  • lasts 12 months

CH · 04

$449once

600 calls · any tool

  • $0.75 / call
  • lasts 12 months

CH · 05

$999once

1,500 calls · any tool

  • $0.67 / call

  • lasts 12 months

  • $0 on pipeline errors

  • 50% off on degraded runs

  • Auto-recharge with a monthly cap

  • No subscription to cancel

Building an agent that buys its own usage? agent credit packs (MPP) →

◢ 13

Questions, answered.

What is TheDesignAgent?

A design agent that works inside your coding agent's loop. It works in layers: a brief before the agent builds a screen (the user's job, the heuristics and patterns that apply, your design tokens), a UX review and a visual review after it builds, and a project memory that every agent on the repo shares. It catches the generic, technically-correct-but-wrong UI that agents ship by default.

Which coding agents does it work with?

Any MCP client: Claude Code, Codex, Cursor, Grok Build, Claude Desktop and others. Claude Code also has a plugin that adds skills for the brief, build and review loop.

How do I add it to my agent?

Get an API key, then either point your client at the hosted MCP server (https://www.thedesignagent.ai/mcp, nothing to install) or run the local server with npx (package @thedesignagent/mcp). In Claude Code, install the plugin: /plugin marketplace add CMBurnett/the-design-agent-plugin, then /plugin install tda@thedesignagent.

What do Discover, Ux and Visual do?

Discover returns a short build brief before your agent builds a screen. Ux scores the built screen 0 to 10 for job fit, UX heuristics, cognitive load and pattern conformance. Visual scores brand compliance, visual hierarchy and aesthetics from a real screenshot of the running page. All three run on the hosted server, where Visual screenshots public pages and preview deploys; run the local server to screenshot localhost.

Is it an accessibility checker?

No. Accessibility checkers and Lighthouse cover one layer: whether a screen is valid. TheDesignAgent covers the whole design pass: whether the screen fits the user's job, follows UX heuristics, keeps cognitive load down, matches your patterns and brand, and holds up visually. Run an accessibility checker alongside it.

How is it different from a design prompt or a frontend skill?

Design skills and prompts shape how the agent styles a site, with the same guidance for every project. TheDesignAgent is a design agent the coding agent works with on every screen: it briefs before the build, reviews after, and keeps a model of your project (jobs, personas, design tokens, past findings), so findings cite your user's job rather than generic best practice and sharpen with every call.

What's stored where?

A small.thedesignagent pointer file with your project id lives in your repo. The project model and review history are stored server-side so every agent on the repo shares them. Visual's screenshots stay on your machine for 24 hours.

How much does it cost?

16 free credits every month with no card, then one-time credit packs with no subscription: 1 credit per call (Discover, Ux or Visual). Packs run from $37 for 40 credits to $999 for 1,500, last 12 months, and can auto-recharge. Failed calls are free and degraded calls cost half.

Can an agent buy credits on its own?

Yes, over MPP (Machine Payments Protocol), with no login. GET https://www.thedesignagent.ai/api/credits/mpp lists the packs; POST /api/credits/mpp/<pack> returns a 402 payment challenge, and paying it returns an API key or tops up the key sent as X-Api-Key.