Design MCP for Cursor, VS Code and Windsurf

Cursor: one entry, then a login button

Cursor reads MCP servers from a JSON file: one in your home folder for every project, or one inside a project's .cursor folder for that project alone. Add the uberdesigner entry from the block below. In Cursor's settings, under MCP, the server then appears marked as needing login. Click it, sign in to uberdesigner in the browser, and the mark clears.

VS Code and Windsurf

VS Code can add a server from the command line or from an mcp.json file in the project's .vscode folder. Either way it asks you to sign in the first time Copilot's agent uses the server, so nothing happens at setup and the prompt appears at your first request.

Windsurf's config file runs local commands, so the entry for a remote server goes through mcp-remote, a bridge started with npx that connects to the address and handles the browser sign-in. The same bridge works for any client that can only start local servers.

Say whose look wins

An editor agent can see your stylesheet, your tokens and your components. That is an advantage only when the request uses it. When you ask for a piece from a design library, decide up front: either the piece keeps its own look and sits in the page as designed, or it keeps its behaviour and structure and takes your project's colours, type and radii.

The second is the usual choice inside an app. State it in the request and name the file that holds your tokens, so the agent maps values instead of pasting a second palette beside the first.

Before you ask an editor agent for a design

• The entry is in the right file: user-level for every project, project-level for one.
• The JSON is valid: a stray comma means the editor loads no servers and may not say why.
• The sign-in is done: Cursor shows no login mark; VS Code has asked once and been answered.
• The agent mode is on: a plain chat panel that cannot call tools will not reach the server.
• You named the token file, if the piece should take your project's look.
• You named the target: the file or component where the piece goes.

A prompt to start from

// Cursor: ~/.cursor/mcp.json (or .cursor/mcp.json in the project)
{ "mcpServers": { "uberdesigner": { "url": "https://uberdesigner.ai/api/mcp" } } }

// VS Code, in a terminal:
code --add-mcp '{"name":"uberdesigner","type":"http","url":"https://uberdesigner.ai/api/mcp"}'

// Windsurf: ~/.codeium/windsurf/mcp_config.json
{ "mcpServers": { "uberdesigner": { "command": "npx", "args": ["-y", "mcp-remote", "https://uberdesigner.ai/api/mcp"] } } }

// First request, in the editor's agent:
Use the uberdesigner server. I need [the piece, e.g. a tab bar for the settings screen with four tabs: Profile, Billing, Team, Alerts].

Browse the library and show me two or three pieces that fit, each with its name, link and whether it's free or Pro. Wait for my pick.

Then add it to [src/components/SettingsTabs.tsx] in this project. Keep the piece's structure, states and motion timings. Take colours, type and radii from our tokens in [src/styles/tokens.css]; add no new colour values. Keyboard: arrow keys move between tabs, focus is visible at 2px.

Touch the named file and its stylesheet only. Run the app, check the screen at 390px and 1280px wide and with reduced motion set, and list every file you changed.

Needs an editor agent with the uberdesigner MCP server in its config and the browser sign-in completed. Use the snippet for your editor only.

Keep reading

• How to choose a design MCPFive criteria for judging a design MCP server: what its tools return, who made the designs, how you sign in, what counts against your plan, and whether results are checked.
• 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.

• Claude Code
• Codex and terminal agents
• Chat apps
• Whole websites
• UI components
• Design morphing