# 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.

Source: https://www.thedesignagent.ai/field-notes/add-design-review-to-claude-code · Workflow · 2026-10-04

The fastest way to add design review to Claude Code is the TheDesignAgent plugin. It installs with two commands and brings a design agent into Claude Code's loop: a brief before it builds a screen, a scored UX and visual review after, and a project memory that every session on the repo shares. Grok Build reads Claude Code plugins, so the same install works there too.

## Before you start

- An API key from [your dashboard](https://www.thedesignagent.ai/dashboard/api-keys). It starts with `tda_`, and new accounts get free monthly credits.
- Node.js 20 or later. The plugin runs its MCP server through `npx`.

## Install the plugin

In Claude Code, run:

```
/plugin marketplace add CMBurnett/the-design-agent-plugin
/plugin install tda@thedesignagent
```

Claude Code asks for your API key during the install. If it didn't, or the tools don't appear, open **Manage Plugins → TheDesignAgent → configure** (the gear icon) and paste it there.

Then **fully restart Claude Code**. In VS Code, run **Developer: Reload Window** from the Command Palette. Reloading plugins alone refreshes the skills but keeps the old MCP server running.

> **What you get:** the `Discover`, `Ux` and `Visual` tools; a `design-loop` skill that teaches Claude the brief → build → review → fix loop; the `/tda:setup`, `/tda:brief` and `/tda:review` commands; and hooks that remind Claude to run a review after it edits UI files.

## Check it works

Open a repo with a UI and ask for something small, such as "add a settings page". Before it writes code, Claude should run `/tda:setup` once to register the project and create a `DESIGN.md` if you don't have one, then call `Discover` for a brief. After it builds, it calls `Ux` and `Visual` and fixes what they flag.

You can also run the commands yourself:

- `/tda:brief add a settings page` gets a brief for a screen before you build it.
- `/tda:review` scores the UI files changed on your branch, or pass a URL or file.

## Prefer just the MCP server?

Skip the plugin and add the server on its own:

```
claude mcp add thedesignagent -e THEDESIGNAGENT_API_KEY=tda_... -- npx -y --package=@thedesignagent/mcp thedesignagent-mcp
```

Or use the hosted server, with nothing to install:

```
claude mcp add --transport http thedesignagent https://www.thedesignagent.ai/mcp --header "Authorization: Bearer tda_..."
```

The hosted server reviews public pages and preview deploys. To review pages on `localhost`, use the plugin or the local server above. Without the plugin you get the tools but not the skills, commands or hooks, so you'll want a line in `CLAUDE.md` telling Claude when to call them. See [adding design review to your agent](/field-notes/adding-design-review-to-your-agent) for the loop.

## Pages behind login

`Visual` reviews a real screenshot. For pages behind a login, `/tda:setup` sets up automatic sign-in: a small login recipe for Supabase apps, or a one-time browser login for anything else. If a session expires, `Visual` stops before reviewing and charges nothing.

## If something's wrong

Most problems are a missing key or an MCP server that didn't restart. The [support page](/support) covers the common messages. Other clients: [Codex](/field-notes/add-design-review-to-codex) and [Cursor](/field-notes/add-design-review-to-cursor).