Two studio microphones on a wooden table facing each other, with a blank folded card standing between them
Claude Design2 min read

How do I use Claude Code with Claude Design and my bernard site?

Claude Code can hold both connections at once: your bernard site and your Claude Design projects. With both attached, one terminal can read a real page, rebuild it as a design, take your edits, push them back to your draft, and publish when you say so. The connections are made once and kept.

The prompt

I have bernard and Claude Design both connected in Claude Code. Read the homepage of my [site name] site, rebuild it as an editable design in my Claude Design project [project name], and tell me what to check before I push anything back.

Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).

1. Add bernard

In a terminal, add bernard’s server, then sign in when Claude Code asks:

claude mcp add --scope user --transport http bernard https://mcp.bernardmoves.com/mcp

Inside Claude Code, run /mcp, pick bernard and complete the sign-in. It is the same one-click sign-in Claude on the web uses, so there is no key to copy, and the consent screen shows exactly what Claude Code may do. If you would rather use a pasted key, Account shows a setup prompt and a JSON block you can paste instead; either way, disconnect from Account when you want to.

2. Add Claude Design

Add its server the same way, then run its login:

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

Then, inside Claude Code, run /design-login and authorise it with your Claude account. From then on Claude Code can list your Claude Design projects, read a page or a design system out of one, and, after showing you the plan, write files into a design-system project.

3. Ask for the loop

The pattern is the one described in Can I edit my site in Claude Design and push the changes back?: read the real page, rebuild it as a design, edit, push element by element, preview, publish. In the terminal, be explicit about both sides:

Read the homepage of my [site name] site through bernard, and rebuild it as an editable design in my Claude Design project [project name], using the real copy, colours and fonts.

I have edited the hero in Claude Design. Read the changed elements from that file and push only those back to my bernard draft, then show me a phone and desktop preview.

Two things to know

Photos travel as files, never as links. If Claude Code offers you a short-lived link to an image, ask for the file instead before putting it in a design; a link expires within minutes and the slot goes blank.

Blocks bernard builds itself keep their words in bernard: shop and course pages, and the sign-up forms it generates. The family overview, What can I do with Claude Design and my bernard site?, has the full line.

Questions people ask

Do I need a key for bernard?
No. Add the server and sign in when Claude Code asks; bernard’s connection uses the same sign-in as Claude on the web, and you approve the permissions on a consent screen. A pasted key from Account still works for tools that cannot sign in, and you revoke either from the same place.
What does the Claude Design login give Claude Code?
Access to your Claude Design projects: it can list them, read a page or a design system out of one, and write files into a design-system project after showing you the plan. It runs on your Claude account; there is nothing to install.
Can Claude Code publish my site from the terminal?
Only when you ask. Every change lands in your draft first, and nothing goes live until you approve it, either by pressing Approve in bernard or by telling Claude Code to publish. It never publishes on its own initiative.
Where does this differ from doing it in Claude Design’s own chat?
Same site, same rules. Claude Code is the better seat when you want the design file and your site’s code side by side in one terminal, or when you are scripting the loop. Claude Design’s chat is the better seat when you want to edit on the canvas by hand.

Next