TheDesignAgent
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
ホスト型 MCP サーバー
npx add-mcp 'https://www.thedesignagent.ai/mcp'Claude Code、Codex、Cursor などにインストールできます
ドキュメント
◢ 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
| Item | PO qty × price | Received qty | Billed qty × price | Result |
|---|---|---|---|---|
| Pressure gauge 0–300 psi, glycerin PG-0300G | 24 × $42.00 | 24 | 24 × $45.50 | Price mismatch +$3.50/unit × 24 = +$84.00 Limit 2% and $50 per line |
| Quick coupler, steel, ½in NPT QC-050S | 60 × $18.75 | 48 | 60 × $18.75 | Billed 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 →
◢ 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.