Workflow

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.

TheDesignAgent team4 min read

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. 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 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 covers the common messages. Other clients: Codex and Cursor.