Open Design MCP

Independent, MIT-licensed design tools for coding agents. The server uses its own component registry, editable guidance and deterministic review algorithms. It does not call Better Design or require its subscription.

• Website: https://open-design-website.vercel.app

• Streamable HTTP MCP: https://open-design-mcp-liard.vercel.app/mcp

• Website source: https://github.com/pranav256/open-design-website

Connect

Use Streamable HTTP with the public MCP URL. Clients supporting mcpServers can use this configuration; check your client's configuration format.

{
  "mcpServers": {
    "open-design": {
      "type": "streamable-http",
      "url": "https://open-design-mcp-liard.vercel.app/mcp"
    }
  }
}

For Codex: codex mcp add open-design --url https://open-design-mcp-liard.vercel.app/mcp.

Related MCP server: weave-design-system-mcp

Included

31 design systems with actual React/Radix component source and shadcn-compatible registry dependencies, local Lucide icons, 72 original guidance topics and 25 original review rules. Tools support theme search/kits, extraction from supplied CSS or public page stylesheets, custom catalog-based themes, comprehension, rendered spacing evidence, inline source review, feature maps and video planning.

Public catalog/guidance/review calls need no account. Persistent theme edits and team rules use a private workspace capability key. Generate one with POST /api/workspace-key and send it as Authorization: Bearer <key> on MCP requests. Store it securely; anyone holding the key can edit that workspace. Theme registries are public by unguessable project URL; do not put secrets in theme names.

Run locally

Node 22 or newer:

npm ci
npm run check
npm test
npm run build
npm start

HTTP listens on port 3000. Configure OPEN_DESIGN_BASE_URL when using another origin. npm run dev runs TypeScript directly; node /absolute/path/dist/stdio.js runs stdio. Catalog/content assets resolve from the package location, while local state defaults to .open-design/state under the working directory. Set OPEN_DESIGN_STATE_DIR to choose a durable local location.

Install component source in a consumer project:

npx shadcn@latest add https://open-design-mcp-liard.vercel.app/registry/minimal-light/button.json

Edit content/library.json or import authorized writing with npm run content:import -- /path/to/export.json. See the library contract. Restart or redeploy to load edits.

Hosting and scope

See deployment, API, source coverage, runtime boundaries and registry verification.

This is an independent replacement, not full vendor parity. The private hosted content library was unavailable; guidance here is independently authored and editable. AI generation, proprietary inspiration, hosted sales/image generation, vendor accounts, mobile/Shopify install kits and trusted dashboard browser receipts are not implemented. Custom themes reuse a catalog base and supplied tokens. Review tools report only the evidence they actually receive.

There is no project-imposed monthly call quota. The public service remains subject to Vercel capacity and hosting limits; self-hosting lets you choose that capacity.

Upstream copyright and MIT notices are preserved in NOTICE, assets/LICENSE and vendor/upstream/LICENSE. This project is unaffiliated with Better Design. Research captures, credentials and private workspaces are excluded from the public repositories.