All articles
Tool Guides6 min read

The DesignMD MCP Server: A Complete Guide

The MCP server lets AI agents search and retrieve DESIGN.md files directly, without copy-pasting. Here is everything it does, how to set it up, and the best ways to use it.

Copy-pasting your DESIGN.md into every AI session works. It just gets old fast. The MCP server is how you stop doing that.

Wire it up once and your AI tools can search, retrieve, and apply designs from the DesignMD catalog on demand. No file management. No manual context injection.

What MCP is (the short version)

MCP stands for Model Context Protocol. It is a standard that lets AI tools connect to external data sources and call external functions. Think of it as an API layer between your AI coding editor and the outside world.

When you add the DesignMD MCP server, your AI can call DesignMD tools directly during a session. You ask for a design, it fetches it. No browser tab needed.

The 4 tools the MCP server provides

search_designs

Search the DesignMD catalog by keyword, aesthetic, or use case. Returns matching designs with names and descriptions.

“Search DesignMD for a dark fintech design with sharp corners.”

get_design

Retrieve the full DESIGN.md content for a specific design by its slug. Returns the complete token file ready to use.

“Get the Linear design from DesignMD and apply the color tokens to this component.”

list_categories

List all available design categories in the catalog. Useful when you know the aesthetic type you want but not the specific design.

“List the categories in DesignMD. I want to see what fintech options are available.”

compare_designs

Compare two designs side by side. Returns a diff of their tokens so you can pick the one closer to your goals.

“Compare the Stripe and Vercel designs on DesignMD. Which has a warmer color palette?”

Setup for Claude Code

One command. Run this in your terminal:

claude mcp add designmd --transport http https://designmd.co/api/mcp

That registers the DesignMD MCP server globally in Claude Code. Every project you open will have access to the design tools. No per-project config needed.

Setup for Cursor and Windsurf

Both editors use a JSON config file to register MCP servers. Add the DesignMD entry to your config:

{

"mcpServers": {

"designmd": {

"type": "http",

"url": "https://designmd.co/api/mcp"

}

}

}

For Cursor: save this to ~/.cursor/mcp.json or your project's .cursor/mcp.json.

For Windsurf: save it to ~/.codeium/windsurf/mcp_config.json. Restart the editor after saving.

Setup via .claude/mcp.json

If you want the server scoped to a specific project, add it to the project's .claude/mcp.json file:

{

"mcpServers": {

"designmd": {

"type": "http",

"url": "https://designmd.co/api/mcp"

}

}

}

Commit this file alongside your project. Everyone on the team gets the DesignMD tools automatically when they open the project.

5 prompts that work well with the MCP server

Search DesignMD for a minimal dark SaaS design and apply the color tokens to my app.
Get the Stripe design from DesignMD. Use those typography and spacing tokens to style this form.
List the fintech categories on DesignMD. Fetch the one that looks closest to a Bloomberg terminal.
Compare the Linear and Vercel designs on DesignMD. Apply the one with better contrast ratios.
Search DesignMD for a warm consumer app design and use it to redesign the onboarding flow.

Rate limits and details

The MCP server is stateless. No auth required. Rate limit is 30 requests per minute per IP, which is more than enough for normal AI coding sessions.

Each tool call returns structured data that the AI uses directly. You do not have to parse anything. Just ask and the AI handles the rest.

Full MCP documentation and tool reference

Set up the MCP server

One command for Claude Code. One JSON block for Cursor and Windsurf. Full catalog access, no copy-pasting.

Set up MCP