OpenDesign · Model Context Protocol

Give your agent real design taste.

Connect OpenDesign's 560+ curated, grounded design systems to Cursor, Claude, Windsurf — any MCP client. Your agent searches the library, pulls a reference's actual tokens (color, type scale, spacing, layout, motion), and builds from those — not from memory.

Why MCP, not "just paste a link"? Many agent runtimes block or sandbox raw web fetches (URL allowlists, browser CORS). An MCP tool is connected by you, so it works where a bare fetch is refused — the network calls run from the local MCP process, with no CORS and no URL policy.

Install — Node, zero dependencies

Needs Node ≥ 18. Grab the one file, point your client at it:

curl -o opendesign-mcp.mjs https://opendesign.cc/mcp/opendesign-mcp.mjs

Then add to your MCP config (Claude Desktop: claude_desktop_config.json · Cursor: ~/.cursor/mcp.json):

{
  "mcpServers": {
    "opendesign": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/opendesign-mcp.mjs"]
    }
  }
}

Restart the client — opendesign appears in the tool list. Source & a Python version: github.com/qiuyiwu1989-star/opendesign.

What your agent gets

Tool	Does
`search_designs`	Find references by need — score-ranked. `"fintech trust"`, `tags:["ai"]`
`get_design_system`	A site's real grounded tokens (colors, typography, spacing, surfaces, layout, motion)
`fetch_design_spec_markdown`	The full 11-layer spec as Markdown — drop into a prompt
`list_designs`	Browse the catalog
`get_director_protocol`	The design-director protocol — diagnose → recommend → decompose

Try it in one line

npx @modelcontextprotocol/inspector node opendesign-mcp.mjs