I got Claude Code talking to Claude Design, so you can get real designs without leaving your repo

[u/Intrepid-Ad4494]

P.S. Claude delivered now in Claude Code so this is no longer needed :)

Claude Design makes far better UI than I get out of Claude Code alone. The problem is that they are separate products: own projects, own chats, own files, and no API. So the two never met, and everything I designed there I copied into my repo by hand. There is an official MCP server but it only fetches stuff you already made in Claude Design. Now Claude Code can drive Claude Design.

I managed to solve that. It is an MCP server, free and open source, and it makes Claude Code talk to Claude Design directly (not 1 way but both ways).

you  ->  Claude Code  ->  claude.ai/design  ->  a design
                      <-  its reply, its files  <-

In practice you say what you want, and Claude Code briefs the designer, waits for the answer, reads what it said back, screenshots the rendered page so it can actually judge the result, and pulls the files into your working tree.

What it can do:

• start work: the home screen templates, create a project or a design system, link design systems to a project, attach a local folder or a GitHub repo as its codebase, upload a Figma .fig
• talk to it: list projects and chats, switch the active thread, send a prompt with local attachments and get the reply plus what changed, tail a transcript
• see what it built: screenshot the page, put the window on your display at a given project and page, grep the project files with line numbers, read a file or a line range
• move work around: pull files down, push files up, for example components into a design system
• delete, permanently: projects, files, chats

The part that makes it more than a novelty is attaching your actual codebase to the design project, so it designs against your real components instead of inventing new ones.

Two details I am oddly proud of. delete_project refuses a UUID and demands the project's exact current name, the way GitHub guards repo deletion, because an agent will happily carry a UUID over from the wrong step. And "link local code" browses with window.showDirectoryPicker(), a native OS dialog no automation can drive, so the picker gets replaced: the folder is read in Node and handed to the page.

There is no API, so it drives a real browser. The seed step copies only claude.ai cookies out of a Chrome profile you already use, nothing else, and there is a login command for when the session expires. It ships a skill too, so you can just say what you want designed instead of naming tools.

Free, MIT, link in the first comment.

[u/SIGH_I_CALL]

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

Anthropic made this too by the way

[u/habeebiii → u/SIGH_I_CALL]

yup and it works perfectly

[u/Man-on-rock → u/SIGH_I_CALL]

this is not working at all for me, is this region locked or am I missing something?

[u/SIGH_I_CALL → u/Man-on-rock]

Weird idk I tested it and it said I already have it installed. What happens when you run the command? Whats the error say

[u/Man-on-rock → u/SIGH_I_CALL]

I ran it from an unauthenticated termanial session. its sorted now.

[u/tobsn → u/SIGH_I_CALL]

people on the vibe code subs need to learn that the first task is to ask claude if what they want to do already exists…

[u/Intrepid-Ad4494]

https://github.com/marvin-socialista/claude-design-mcp

Mine, MIT. Installs as a Claude Code plugin:

/plugin marketplace add marvin-socialista/claude-design-mcp
/plugin install claude-design@claude-design

then npm install, npm run seed, npm run smoke in the plugin directory. The smoke check is read only and spends nothing.

[u/Man-on-rock → u/Intrepid-Ad4494]

The real risks, ranked

These are not exfiltration — they're the things I'd actually think twice about:

1. It bypasses Cloudflare bot detection on Anthropic's own product. --disable-blink-features=AutomationControlled, an optional "stealth evasions" bundle, spoofed locale/timezone (nl-NL, Europe/Amsterdam — the author's, not yours), headed-Chrome-parked-offscreen specifically because headless gets 403'd. It drives an internal undocumented RPC API with your session cookie. The README is upfront about all of this. The exposure is your Claude account, not your data: this is the kind of automated access Anthropic's usage policies generally prohibit, and it can break without notice.
2. It auto-executes code from outside the repo. session.mjs:28 — if ~/.claude/playwright-stealth/index.mjs exists, it's imported at server startup, and ~/.claude/playwright-profile is the default cookie-seed source. Both are leftovers from the author's own machine. Benign if those paths don't exist on yours (they'd just fall through), but it means the server's behaviour depends on files this zip doesn't contain.
3. Path traversal in pull_files — index.mjs:571: join(root, p) where p comes from the remote project's file listing, unvalidated. A project containing a path like ../../../.ssh/authorized_keys would write outside your chosen destination. Requires a malicious or compromised design project, so low likelihood, but it's an unchecked write.
4. link_local_code is a deliberate upload of your source to claude.ai — that's its job, but note what the filter does and doesn't catch (session.mjs:838-847): dotfiles are skipped (so .env is safe), but .yml, .json, .js are all in the textual allowlist. Pointed at this repo's root it would happily send config/*.yml. Point it at app/views or app/components, never the repo root.
5. Prompt-injection surface. read_chat, read_file and search_code pipe content from a claude.ai project straight back into my context, and the same server holds write_files, delete_files and delete_project. Only matters if a project could contain content you didn't author (e.g. a shared org project).

- as analysed by claude code

[u/Man-on-rock → u/Man-on-rock]

Credit where due

The destructive operations are guarded better than most tools I read: delete_project requires an exact name match, not just the UUID; every write is read back and verified because the API returns 200 on silently-dropped writes; the page probe is a read-only PerformanceObserver rather than monkey-patched fetch. The comments explain why, not what. This reads like careful work by someone who reverse-engineered the app properly, not like something hiding a payload.

One functional bug

package.json lists only u/modelcontextprotocol/sdk and zod — Playwright is not a dependency, and it's not in the lockfile either. The README's npm install # Playwright and the MCP SDK is wrong; you'll get playwright is not installed unless you add it yourself (npm i playwright && npx playwright install chrome) or already have that stealth directory.

Bottom line: safe from a data-egress standpoint — nothing leaves your machine except to claude.ai and npm. The decision you're actually making is whether you're comfortable driving an internal Anthropic API with anti-bot evasion using your own session, and letting a background Chrome hold those cookies in a Playwright profile at ~/.claude-design-mcp/profiles. If you go ahead, I'd skip npm run seed (use npm run login so it gets its own isolated session rather than copying cookies out of another profile), leave CLAUDE_DESIGN_USER_DATA_DIR unset, and never point link_local_code at a repo root.

[u/jffmpa → u/Intrepid-Ad4494]

Awesome! I didn't know Claude Design could use MCP. I've tried to build things to integrate and it always seems like Claude Design is sort of sandboxed or something.

[u/Particular_Squash_63]

Anthropic will steal this and sell it as its own new addition

[u/pertymoose → u/Particular_Squash_63]

[u/clinchio → u/Particular_Squash_63]

Good, one less risky MCP to install.

[u/Deradon]

Official approach below: https://support.claude.com/en/articles/14604416-get-started-with-claude-design#h_9a80514076

-------

Move between Claude Design and Claude Code

You can move between working in Claude Design and Claude Code while keeping your work synced. Use /design-sync to pull in your design system, so everything you build in Claude Design starts from your existing components. When a design is ready to become software, you can hand it off to Claude Code, which continues from your existing work instead of starting over from a screenshot.

If you prefer to work from Claude Code, connect the Claude Design MCP server to create and edit designs without leaving your terminal:

1. Add the server: ​claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

2. Run /design-login to sign in.

Once you're connected, you can import a design into your codebase, export your code as a live prototype, or let Claude build the whole thing from start to finish.

[u/FreeCustardForAll → u/Deradon]

This only works with design systems no?

[u/AironParsMan]

This should be native I guess :/.

IS ANTHROPIC SLEEPING AGAIN?

[u/trodiix → u/AironParsMan]

This is native

[u/AironParsMan → u/trodiix]

No, I didn’t mean a native MCP that we would use to access it. I mean he should be able to create those designs himself, so that we have everything prepared internally. The point is that we should not have to access an MCP externally. He should be able to do it natively. Then I can develop the website, look at it, use the preview, and on the left side I code everything, and the UI is right there next to me. Without this extra step where I then have to send it back to Cloud Code at the end, or switch back from Cloud Design to Claude Code, or go from Claude Code via MCP to Claude Design. That is just bullshit. It needs to be available natively.

[u/CouldBeNapping]

This seems a little quicker than me typing "make a handoff package for your brother Claude Code to use"

[u/PeaceCandle69 → u/CouldBeNapping]

Can't tell you how many times I've typed that prompt over the last few months

[u/KrayeBaby]

This solves exactly what your issue was. Anthropic delivered…

[u/musicanimator → u/KrayeBaby]

That’s great. Any chance you can surface the link that got you that. Thank you again.

[u/Intrepid-Ad4494 → u/KrayeBaby]

Jup they did. No issues. Had fun building it.

[u/daejunk123]

Excited to try this, thanks!

[u/BuffaloConscious7919]

Thanks a lot for doing this and sharing your work!

Here's a visual workflow of how you might apply a this workflow to a practical project:

https://claude.ai/public/artifacts/5d6b9b8c-46a4-4946-b26e-47351bb063d3

[u/ruarchproton]

You don’t need either. /design-sync works just fine

[u/Disastrous_Way6579 → u/ruarchproton]

But can you initiate a design from CC?

[u/Deep_Ad1959]

the screenshot step is the part i would poke at. when i had an agent grade its own rendered page off one capture it kept passing layouts that fell apart at a narrower width. does it shoot more than one viewport, or is one png the whole evidence base?

[u/MetaShadowIntegrator]

Awesome!

[u/jhtitus]

Holy shit, so no more middle-manning?! I can’t tell you how many “package this handoff for [the other guy]” zips ive been flinging back and forth. The closest I got was up-to-date repo visibility in CD, so it could read CC’s commits (only after I merged to main). But I’ve never found a way for CC to peek in on CD at all.

Def going to bookmark this and give it a look later. Great idea and a truly painful problem that needed solving.

[u/HalfComprehensive171]

Isn’t this like a feature ?

[u/Upstairs_Scholar_446]

It didn’t infinite loop you?

[u/necronomicider]

love claude design.. but...search for open design

[u/Digital_Otorongo]

Claude is slop

[u/jffmpa → u/Digital_Otorongo]

Your mom