Workflow

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.

TheDesignAgent team3 min read

To add design review to Cursor, add the TheDesignAgent MCP server to Cursor's mcp.json. Cursor's agent then has a design agent in its loop: Discover gives it a brief before it builds a screen, and Ux and Visual score the result for job fit, UX and visual quality, using a project memory every agent on the repo shares.

Before you start

An API key from your dashboard. It starts with tda_.
For the local server, Node.js 20 or later.

Local or hosted?

Local runs on your machine through npx. All three tools work, and Visual can screenshot pages on localhost.
Hosted needs no install. Discover, Ux and Visual all work, but Visual can only reach public pages and preview deploys, not localhost.

Most people building locally want the local server.

Add the server

Open Cursor's MCP settings, or edit .cursor/mcp.json in your project (~/.cursor/mcp.json applies it to every project).

Local:

{
  "mcpServers": {
    "thedesignagent": {
      "command": "npx",
      "args": ["-y", "--package=@thedesignagent/mcp", "thedesignagent-mcp"],
      "env": { "THEDESIGNAGENT_API_KEY": "tda_..." }
    }
  }
}

Hosted:

{
  "mcpServers": {
    "thedesignagent": {
      "url": "https://www.thedesignagent.ai/mcp",
      "headers": { "Authorization": "Bearer tda_..." }
    }
  }
}

Keep the --package form for the local server: the package has two commands, so a bare npx @thedesignagent/mcp won't start.

Keep the key out of your repo. Run npx -y --package=@thedesignagent/mcp thedesignagent login once to save it to ~/.thedesignagent/credentials, then drop the env line from the local config. Don't commit a project mcp.json that contains a key.

Tell the agent when to use it

The tools tell Cursor's agent what they do, but a rule makes the loop reliable. Add a project rule along these lines:

For any new screen or significant UI change: call Discover with the task before building,
build from the brief, then call Ux and Visual (with render_url for a running page) and
fix critical and high findings before finishing.

Cursor can also install the plugin from its repository if your version supports Agent Plugins: https://github.com/CMBurnett/the-design-agent-plugin. That adds skills which teach the same loop.

Check it works

Ask Cursor to build a small screen. On a new project, the first Discover asks the agent to scan the repo and send a project model; after that, briefs come back immediately. Then watch for the Ux and Visual calls once the screen is built.

If something's wrong

If the tools don't appear, check the server shows as connected in Cursor's MCP settings and that the key is set. The support page covers the common error messages. Other clients: Claude Code and Grok Build and Codex.