Connecting uberdesigner to Claude Code over MCP

What the connection does

Claude Code supports MCP servers, which give an agent tools from outside the project. uberdesigner runs one. With it connected, you don't copy a prompt from a web page into the terminal: you name the template, and the agent fetches what it needs and builds from it.

The steps below are the ones on uberdesigner's own MCP page on the review date of this guide. If anything differs, the MCP page ↗ is the current source.

Set it up

1. Add the server. In a terminal, run the command in the block below.
2. Open Claude Code in your project folder and type /mcp.
3. Pick uberdesigner from the list and choose Authenticate.
4. Sign in. uberdesigner opens in the browser; sign in to your account there.
5. Go back to Claude Code and ask for a template by name, or describe what you're building.

What to ask once it's connected

• By name. "Build the melune template from uberdesigner in this folder." Use this when you have already chosen from the library ↗.
• By description. "I'm building a landing page for a sleep app. What in uberdesigner fits?" Ask for options before any building starts.
• As a piece of an existing project. "Add the spotlight tabs template as the tab bar on the settings screen, using our tokens."

Keep your own brief in the conversation

A template gives Claude Code a finished design. It still needs your subject. Say what the product is, give the copy or the file it's in, and state what must stay as designed: the type, the spacing, the colours, the motion. The working method doesn't change because a template is involved. Ask for a plan, approve it, and have Claude Code run the build and report, as in how to prompt Claude for design.

Which templates your account opens depends on your plan. The uberdesigner page on this site has the free and paid terms.

The command that adds the server

claude mcp add --transport http uberdesigner https://uberdesigner.ai/api/mcp

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to prompt Claude for designThe working method for design work with Claude and Claude Code: brief, plan first, build, run and look, then correct with specifics.
• Design rules in CLAUDE.mdHow to keep design rules in a CLAUDE.md file so every Claude Code session follows them, with an example rules block to copy.
• Claude chat or Claude Code for design workWhich to use for what: the Claude chat app for one HTML file to look at, Claude Code for a real project. How to move a draft from one to the other.

• Whole sites
• Redesigns
• Animation