← Claude Code Hub
✦ Tip #175 Aug 24, 2026

Claude Design MCP in Claude Code: keep design and code in sync

One command wires the Claude Design MCP into your terminal. Pulling a design into the repo, or pushing the repo up as a project, stops being copy and paste.

The Claude Design MCP in Claude Code: two lanes between your terminal and your Claude Design projects, one pulling down .dc.html artboards ready to build and one pushing your work up as a project with its own URL, with /design-consent as a grant you give once

TL;DR One command wires your Claude Design projects into the terminal, both ways: pull down .dc.html artboards and have Claude build them, or push your work up as a project with its own URL. Wiring it has one step the docs skip, because connected is not the same as allowed: after claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp, run /design-consent.

I spent a long time wishing for an MCP that talks to Claude Design directly. Until now the bridge ran one way and by hand: you designed on the web, exported, pasted the link into the terminal. That MCP exists now, and wiring it up has one step the support article never mentions.

What actually moves, in each direction

Worth setting expectations: what travels is the project's files, not components generated from a design.

  • Into your repo. Claude lists your projects, reads their files and drops them in your folder. What comes down are artboards in .dc.html format, the same one the /design command publishes. From there you ask it to build what is inside.
  • Out to Claude Design. It creates a new project on your account and uploads the files you name. It lands on claude.ai/design with its own URL, ready to share.

In my run the MCP saw 10 projects and pulled down an artboard of 11,679 bytes. The native tool Claude Code already ships saw zero of those same projects, because it only looks at design-system ones.

If your loop runs against a Figma design, that is a different MCP and it already has its own writeup: Figma and Chrome MCP.

How to add the Claude Design MCP server to Claude Code

1. Add the server

claude mcp add --scope user --transport http claude-design \
  https://api.anthropic.com/v1/design/mcp

2. Check that it shows up

claude mcp list
claude-design: https://api.anthropic.com/v1/design/mcp (HTTP) - ✔ Connected

3. Start a new session

A freshly added MCP does not join a session that was already running. Its tools show up the next time you start one.

4. Grant the consent

/design-consent

Connected does not mean allowed

This is the step that takes hunting. claude mcp list says ✔ Connected and asks for no authentication, unlike other servers that plainly report "Needs authentication". It looks finished. It is not: the first real call comes back with this.

Connect to Claude Design? Claude can read and edit your Design
projects from this tool. Change anytime at
claude.ai/design/settings or with /design revoke.
The user hasn't granted this yet

Connecting the server and authorizing access to your projects are two separate things. The second one is granted with /design-consent, spelled with a hyphen, and it is durable: it stays until you revoke it.

The spelling warning is not pedantry. That refusal points you at /design consent with a space, which in the client is a different route with its own enabling condition: it hangs off the /design command, which depends on your organization's policy, on signing in with a claude.ai account, and on a staged rollout. The standalone hyphenated command does not carry that last condition.

The questions people ask before wiring it up

There is no separate login. If you already sign in to Claude Code with your claude.ai account, the server connects on that credential and asks for nothing else. /design-login exists for sessions without that first-party login, not as a mandatory step for everyone.

It replaces nothing you already have. The /design command and this MCP are two roads to the same product, and they do not clash.

It is not in the release notes. This road is documented only in the Claude Design support article, not in Claude Code's What's New. That is why it is so easy to miss.

What you are granting

The consent text says it plainly: Claude can read and edit your Claude Design projects. It is not read-only. If you keep real work in there, weigh that before approving.

You take it back with /design-revoke, or from claude.ai/design/settings.

One limit you will run into

The MCP exposes 23 tools: projects, files, members, sharing permissions, comments and previews. None of them deletes a project. You can create and you can write, but undoing a creation is on you, from the web interface. If you test the export direction, give the project a name you will recognize so you can clean it up afterwards.

Reference

Aspect Detail
Connect claude mcp add --scope user --transport http claude-design <url>
Authorize /design-consent (hyphenated)
Revoke /design-revoke or claude.ai/design/settings
Consent scope Read and write on your projects
Tools 23, none deletes projects
Format pulled down .dc.html artboards
When the tools appear On a new session, not the one already running

Official docs: Get started with Claude Design

Requirements

  • A first-party claude.ai account (not an API key, Bedrock or Vertex)
  • A plan with Claude Design available, and an org policy that permits it
  • Tested on Claude Code v2.1.241
Workshop for teams

Multiply your team's output without sacrificing quality: a 6 to 8 hour AI First workshop, online, on the Claude platform.

See the workshop
Free guide

The 51 essentials, as a PDF.

One page per tip. Five chapters. What I actually use daily in production — no theory, no fluff.

  • I. Getting started 10 tips
  • II. Awareness 3 tips
  • III. Mastery 22 tips
  • IV. Autonomy 10 tips
  • V. Comparison 6 tips
Are you a professional Web developer?

You'll receive the guide by email · You join the Gravitas newsletter · Unsubscribe anytime

of 51
#

Wmedia · 51 Tips
Free guide · 51 tips · 5 chapters

The 51 essentials, as a PDF.

Are you a professional Web developer? · Unsubscribe anytime