Skip to content
Blog

How to use MCP with Claude Code for better design

By Attuna ·

To use MCP for design work in Claude Code, connect the servers that hold your design context, then ask Claude to retrieve that context before it builds. A typical setup connects a design file source, your references and principles, and a browser for checking the result. The gain isn’t the connection itself. It’s that the right context arrives at the start of every task without you pasting it in.

If MCP is new to you, read what MCP is for designers first.

Step 1: Decide what context the agent needs

For most UI work, design context falls into four groups:

  • Implementation rules: components, tokens and patterns. Usually already in the codebase.
  • Design source: the frames or specs for this feature, often in Figma (see how to use Figma MCP with Claude Code).
  • Creative direction: references, principles and things to avoid.
  • Verification: a browser the agent can use to see what it built.

Only add a server where the context isn’t already in the project. Rules that live in the repository are better in CLAUDE.md, which the memory docs describe as loaded into every session.

Step 2: Add servers with the right scope

Remote servers use the HTTP transport. The Claude Code MCP docs give this syntax, including how to pass a bearer token in a header:

Terminal
claude mcp add --transport http <name> <url>

claude mcp add --transport http my-design-server https://example.com/mcp \
  --header "Authorization: Bearer $DESIGN_TOKEN"

Keep tokens in environment variables rather than typing them into commands that end up in shell history. Servers that support OAuth don’t need a header: add them, then run /mcp in a session and follow the sign-in steps.

Choose a scope deliberately:

  • Local (the default): this project, only you. Stored in ~/.claude.json.
  • Project: shared with the team through .mcp.json in the repository. Claude Code asks for approval before using these.
  • User: all your projects, only you. Good for personal context such as your own references.
Terminal
claude mcp add --transport http my-design-server --scope user https://example.com/mcp
claude mcp list

Step 3: Ask for context before building

Claude decides when to call tools, but you can make retrieval part of the brief. Put the instruction in the prompt for one task, or in CLAUDE.md if it should happen every time:

CLAUDE.md
## Design context
- Before any UI task, get creative direction for the task from the
  design context server, and look at the references it suggests.
- Treat references as intent. Never copy them.
- Our components and tokens in this repo always win over anything
  a reference shows.

Then brief the task in plain language and let the agent fetch what applies:

Prompt
Redesign the empty state for the projects page. Get creative
direction for "empty state for a project list in a B2B tool" first,
then summarise the principles and references you'll use before
writing any code.

Asking for that summary is a cheap check. You see what context the agent picked up, and you can correct it before it shapes the code.

Step 4: Use references as images, not just descriptions

MCP tool results can include images, so a server can return the actual reference rather than a text description of it. That’s the closest thing to sitting next to a designer and pointing. It’s also expensive in context, so retrieve a few relevant references per task rather than a whole collection. Our guide to giving Claude Code visual design references covers how to make each reference count.

Step 5: Verify in the browser

Close the loop by having Claude check the result visually. With the Chrome integration (start with claude --chrome), it can open your local server, take screenshots and compare them with the direction and references it retrieved.

Keep it under control

  • Context budget: Claude Code warns when an MCP tool returns more than 10,000 tokens and limits output to 25,000 by default. Prefer servers and tools that return focused results.
  • Trust: the docs advise verifying you trust each server, since servers that fetch external content carry prompt injection risk.
  • Precedence: tell the agent what wins when sources disagree. Usually the codebase’s design system beats a reference.
  • Write access: some servers can change data. Be clear about which tools may write, and review what they changed.

Where Attuna fits

Attuna provides an MCP server for the creative direction group. You connect Claude Code (or Codex, Cursor or another MCP client) over HTTP with a personal access token. The agent can then list your Taste Profiles, ask for creative direction for a specific task, search your references and see the images with your notes. Only principles you’ve approved are included. If the agent notices something about your preferences, it can propose a principle, which stays a suggestion until you accept it.

For the design system side, pair it with clear rules in your repository; see how to make Claude Code follow your design system. For why this matters at all, read how to give AI coding agents better design taste.

Sources