Workflow

How to add a design review gate to your pull requests

Install the TheDesignAgent GitHub App, or add one GitHub Actions workflow, and every pull request's preview deploy gets its changed pages reviewed for UX and visual quality, with one updating PR comment and a check that fails below your threshold.

5 min readWorkflow

How to add design review to Claude Code

Install the TheDesignAgent plugin with two commands. Claude Code then gets a design brief before it builds a screen and a scored UX and visual review after, without you asking. The same install works in Grok Build.

4 min readWorkflow

How to add design review to Codex

Save your API key once, then install the TheDesignAgent plugin from its marketplace, or add the MCP server to config.toml. Codex then gets a design brief before it builds a screen and a scored UX and visual review after.

3 min readWorkflow

How to add design review to Cursor

Add the TheDesignAgent MCP server to Cursor's mcp.json, locally or hosted, and Cursor's agent gets a design brief before it builds a screen and a scored UX and visual review after.

3 min readConcepts

The best MCP servers for frontend development in 2026

Twelve MCP servers worth connecting to Claude Code, Codex or Cursor when you build UI, grouped by the job they do: design context, components, up-to-date docs, the browser, quality checks, generation and deploys.

8 min readConcepts

TheDesignAgent vs Claude Design: designing before the build, reviewing during it

Claude Design is where you design with Claude before you build: prototypes, slides and one-pagers using your brand, handed off to Claude Code. TheDesignAgent works inside the coding agent's loop on every screen it builds: a brief before, scored UX and visual reviews after. They cover different moments, and they work together.

4 min readConcepts

TheDesignAgent vs Figma MCP: which does your coding agent need?

Figma MCP tells your coding agent what the design is. TheDesignAgent briefs the build and checks whether the result fits the user's job and holds up visually. They work on opposite sides of the build, and most teams that have a Figma file benefit from both.

4 min readConcepts

Why does AI-generated UI look AI-generated?

Because coding agents design from defaults instead of from the job. They don't know who uses the screen, what that person is trying to do, or what your product has already decided, so they reach for the most common pattern. Here are the tells, why they happen, and what actually fixes them.

6 min readConcepts

The best AI design agents in 2026, and which job each one does

AI design tools now do five different jobs: generating UI from a prompt, bridging design files and code, shaping how a site looks, checking one layer such as accessibility, and working as a design agent inside the coding agent's loop. Here are ten worth knowing, grouped by job, with where each fits and where it stops.

8 min readWorkflow

Adding design review to your agent: what the workflow looks like

How to add a design judgment step to Claude Code, Cursor, or any agent that builds UI. What to call, when to call it, how to read the response, and what the loop looks like across multiple builds.

5 min readPatterns

Affordance density: how much belongs on a row before it stops being readable

Agents solve row density in one of two ways: everything visible (unreadable) or almost nothing visible and everything behind a click (high-ceremony). The right answer is a calibrated three-tier model.

5 min readConcepts

Cognitive load is three things, not one

Most design principles treat cognitive load as a single dial to turn down. It isn't. CLT has three sources that behave differently — and reducing the wrong one makes a screen worse.

6 min readConcepts

Component grammar: when shadcn defaults stop being neutral

Shadcn's defaults are a position, not a blank slate. When agents apply them unchanged, the result reads as AI-built before the user consciously registers why.

5 min readAnti-patterns

Confirm everything: why agents wrap routine actions in "Are you sure?"

The confirmation dialog is the agent's safety net. Applied to every action, not just destructive ones, it creates an interrupt-heavy experience that slows down every workflow it was meant to protect.

4 min readConcepts

Day-shape: why one persona has many jobs, and your UI needs to know which one is loaded

Most users don't have one job — they have several, and they shift between them across the workday. Designing for 'the user' without day-shape means designing for the average of all their jobs, which usually fits none of them well.

5 min readPatterns

Decision surfaces: putting the action where the eye already is

A decision surface is a layout where each row is a unit of decision and the action is on the record. It's what agents should build when the job is deciding, not watching.

5 min readConcepts

Why order fulfillment punishes friction harder than financial review

Extraneous load is near-fatal in warehouse operations and tolerable in loan underwriting. Good UX isn't universal — the same pattern can be right in one domain and wrong in another.

5 min readConcepts

JTBD lives in three places: corpus, project profile, and score

Jobs-to-be-Done isn't a single lookup. In TheDesignAgent it shows up in three distinct places — and the evaluation only makes sense when all three are in play.

5 min readAnti-patterns

Modals all the way down: why agents bury decisions you'd put on the row

The modal reflex is one of the most consistent patterns in agent-built UI. A button opens a dialog. The action lives in the dialog. Save closes it. It compounds in batch workflows.

4 min readPatterns

Outputs that update as you decide: the summary is a side-effect, not a dashboard

Decision surfaces need a running total. Not a KPI strip showing system state — a summary that reflects what the user has decided so far. These are different numbers, and agents build the wrong one.

4 min readPatterns

Progress rails: layouts that mirror the sequence of work, not its categories

A progress rail is the shape that emerges when a sequential job gets the interface it needs. Not a wizard, not a stepper, not tabs — something closer to a spatial map of the work already done and the work still ahead.

5 min readWorkflow

Reading the score trajectory: why convergence beats absolute fit

A single fit score tells you where a build is. A score trajectory tells you whether it's getting better, plateaued, or regressing — and which dimensions are moving. The second question is usually the more important one.

5 min readConcepts

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 readAnti-patterns

The 8-field form: why agents collect what the schema has, not what the job needs

Agents build forms from data models. A schema with twelve fields produces a form with twelve fields. The job usually requires three. This is how to close that gap.

4 min readAnti-patterns

The filter buffet: every column gets a filter, none of them get used

Agents build filters from columns. A table with ten columns gets ten filter controls. The user's actual filtering question involves two of them. The rest is noise that teaches the interface to be ignored.

4 min readWorkflow

The first call is discovery: why the init prompt sets the frame for everything after

The first time a build agent calls TheDesignAgent with no prior context, something different happens. Not just a score — an inference of domain, persona, jobs, and day-shape. Every evaluation that follows is calibrated to what was learned here.

5 min readWorkflow

The full design process, end to end: what an evaluation actually looks at

TheDesignAgent doesn't evaluate one thing. It runs through the same process a skilled human design reviewer would — JTBD, cognitive patterns, visual craft, visual cognitive load, component grammar, accessibility — encoded as a rubric an agent can call mid-build.

6 min readConcepts

The missing design layer: why AI coding agents ship UI without a judgment step

The AI coding stack has linters, test runners, type checkers, and deployment gates. It has no design review step. This isn't an oversight — it's a hard problem. Here's why it's still unsolved and what solving it actually requires.

6 min readConcepts

The tools agents reach for (and the design layer most setups still miss)

Claude Code, Codex and Cursor can reach dozens of MCP tools for code, data, deployment and communication, and a growing set of design tools. Most of those design tools cover one layer: accessibility, a Figma file, or how the site looks. This is what agents have available, and what's still missing from most setups.

6 min readCase studies

Visual cognitive load on a financial review screen: when the data was right but the layout fought the eye

The JTBD was correct. The workflow was sound. The screen still felt like work to look at. A visual lens evaluation on a loan review tool where the problem wasn't structure — it was parse cost.

6 min readConcepts

Visual cognitive load: when a screen is well-designed and still hard to look at

A screen can be JTBD-aligned, cognitively appropriate for the job, and still be hard to parse. Visual cognitive load is the mental cost of reading the layout itself — paid before any task thinking starts.

6 min readConcepts

What Figma access gives agents — and what it doesn't

Agents can now read Figma files, extract components, and pull design tokens. This is useful for implementation fidelity. It doesn't solve design judgment. Here's why the gap between 'access to designs' and 'understanding of design intent' is still wide.

5 min readConcepts

Why there's no UX linter (and what it would take to build one)

ESLint catches code that violates rules. There's no equivalent for UI that violates design principles. The reason isn't that nobody tried — it's that design correctness isn't rule-shaped.

5 min readConcepts

Two lenses, one pipeline: why UX and visual review are different jobs

A single rubric kept producing the same shape of answer regardless of what the agent was actually getting wrong. Splitting it in two fixed that.

5 min readAnti-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