Design MCP for Claude Code

Add the server, then authenticate inside the session

The two halves happen in different places, and people often stop after the first. The command in the block below registers the server under a name. The sign-in happens later, inside Claude Code: type /mcp, pick uberdesigner from the list and choose Authenticate. A browser tab opens, you sign in to your uberdesigner account, and the tab hands control back.

If the server shows in the list but its tools never get called, the sign-in is the usual cause. Open /mcp again and look at the server's state before changing anything else.

Decide where the server should be available

Claude Code can register a server for one project or for all of your work on the machine. A design library is useful across projects, so most people want it everywhere. If you share a repository with a team, a project-level entry means everyone gets the same server, and each person still signs in with their own account. Check Claude Code's documentation for the scope options in your version.

Make the first request a browse

The agent decides when to call a tool, so the wording of your request steers it. Naming the server ("use uberdesigner") removes the guess. Asking for options first makes it read the library in brief and come back with two or three ways to go, each with a reason. Browsing does not count toward a free account's templates; taking one does.

Once you have picked, say so in a short second message with the template's name. That is the point at which the agent fetches the template and starts writing files.

Before you ask Claude Code for a design

• The server is added: it appears in the /mcp list under the name you gave it.
• You are signed in: the server's state in /mcp shows it as connected, not waiting for authentication.
• You are in the right folder: the one that holds, or will hold, the project.
• Your content is in the folder: photos, copy and data the design should carry.
• The request names the server and asks for options before any files are written.
• You know your plan: a free account takes free templates' prompts; monthly and yearly plans open everything, including projects.

A prompt to start from

# In a terminal:
claude mcp add --transport http uberdesigner https://uberdesigner.ai/api/mcp

# In Claude Code: type /mcp, pick uberdesigner, choose Authenticate, sign in in the browser.

# Then send this:
Use the uberdesigner server. I'm building [what it is, e.g. a one-page site for a ceramics studio that releases 12 pieces a month] for [who it's for].

Before you write any file, browse the library once and give me three ways to go. For each: the template's name, one line on why it fits this project, its page link, and whether it is free or Pro. Lead with ones my account can open.

Do not fetch a template yet. Wait for me to pick.

When I pick, build it in this folder as Vite + React + TypeScript with plain CSS. Keep the template's typefaces, sizes, spacing, colours and motion. Replace its subject with mine: the copy is in ./content.md and the images are in ./images, [number] files, already in display order.

When it's built, run it and check the page at 390px and 1440px wide and with prefers-reduced-motion set. Tell me anything you changed from the template and why.

Needs Claude Code with the uberdesigner MCP server added and authenticated. A free uberdesigner account is enough for the browse step and for free templates.

Keep reading

• What to ask a connected agentFive habits for requests to an agent with a design MCP: browse first, compare options, name the template, say what is yours, and tell it to keep the design.
• Design MCP permissions and safetyGood practice for connecting any MCP server to an AI agent: trust, what tools ask for, browser sign-in over pasted keys, and reviewing what the agent writes.

• Cursor and editors
• Codex and terminal agents
• Chat apps
• Whole websites
• UI components
• Design morphing