Curio — Design Style Library

Curio MCP

Connect your AI to Curio — a design-style library built for AI agents. Thousands of design styles (real design movements, brands, cultural traditions), each with a machine-readable spec your agent can apply directly to slides, websites, and products.

• Find the right style: search in English or Chinese, or filter by what you're making (slides, websites, apps, stores, articles, posters…) and the feel you want (minimal, luxury, playful, retro, futuristic…).

• See it before you pick it: every style comes with a cover image and, on request, screenshots of real layouts — slide cover, content and data slides, a dashboard, a pricing page, an article.

• Apply it exactly: fetch the full design spec (DESIGN.md) and your AI uses its exact colors, type, spacing and components.

• Endpoint: https://mcp.designbycurio.com/mcp (streamable HTTP)

• Auth: OAuth sign-in for most clients. A client that can't open a browser to sign in uses a personal API key instead. Searching, browsing and previews are free; 1 credit unlocks a style for good (credit packs, never expire). Out of credits? Your AI gives you a link to buy more.

• Protocol: MCP 2026-07-28 and the 2025 revisions

• Docs: designbycurio.com/docs

Tools

Your AI never spends a credit on its own: get_style_spec only reads, and unlock_style is meant to be called after you agree. Unlocking a style you already own costs nothing.

Install

Gemini CLI

gemini extensions install https://github.com/designbycurio/curio-mcp-extension

Claude Code

claude mcp add --transport http curio https://mcp.designbycurio.com/mcp

Claude.ai / Claude Desktop

Settings → Connectors → Add custom connector → https://mcp.designbycurio.com/mcp

Cursor

The button opens Cursor and adds Curio for you. Or add it to ~/.cursor/mcp.json yourself — Cursor opens a browser to sign in on first use:

{
  "mcpServers": {
    "curio": { "url": "https://mcp.designbycurio.com/mcp" }
  }
}

VS Code (Copilot)

The button opens VS Code and installs Curio in your user MCP config. Or add it to .vscode/mcp.json yourself — VS Code opens a browser to authorize on first connect:

{
  "servers": {
    "curio": { "type": "http", "url": "https://mcp.designbycurio.com/mcp" }
  }
}

Codex (CLI / IDE extension)

codex mcp add curio --url https://mcp.designbycurio.com/mcp

Kimi Code CLI

kimi mcp add --transport http --auth oauth curio https://mcp.designbycurio.com/mcp

ChatGPT

Settings → Apps & Connectors → Developer mode → add https://mcp.designbycurio.com/mcp.

API key

Some clients can't open a browser to sign in — they only have a field for a token (ZCode, WorkBuddy, Qoder, Trae, Cherry Studio, Antigravity, Manus…). For those, create a personal API key and send it as a request header. Clients that can sign in with OAuth don't need one.

1. Sign in at designbycurio.com and open Account → Connected apps → API keys. Name the key after the client and create it.
2. Copy the key straight away — it starts with curio_sk_ and is shown only once.
3. In the client's MCP settings, add the server URL with this header:

Authorization: Bearer curio_sk_…

Most clients take a JSON block like this. Some name the address field serverUrl or httpUrl, or ask for a transport type — pick streamable HTTP.

{
  "mcpServers": {
    "curio": {
      "url": "https://mcp.designbycurio.com/mcp",
      "headers": { "Authorization": "Bearer curio_sk_…" }
    }
  }
}

Claude Code takes the header on the command line:

claude mcp add --transport http curio https://mcp.designbycurio.com/mcp --header "Authorization: Bearer curio_sk_…"

Codex reads the key from an environment variable, so it never sits in a config file:

export CURIO_API_KEY=curio_sk_…
codex mcp add curio --url https://mcp.designbycurio.com/mcp --bearer-token-env-var CURIO_API_KEY

VS Code can prompt for the key and store it securely instead of writing it into mcp.json:

{
  "inputs": [
    { "type": "promptString", "id": "curio-key", "description": "Curio API key", "password": true }
  ],
  "servers": {
    "curio": {
      "type": "http",
      "url": "https://mcp.designbycurio.com/mcp",
      "headers": { "Authorization": "Bearer ${input:curio-key}" }
    }
  }
}

Two kinds of key. A read-only key (the default) can search, browse and fetch styles you've already unlocked, and never spends credits. Tick Allow it to spend credits to unlock styles when you create a key and your AI may also call unlock_style — after asking you, same as over OAuth. Treat a key like a password: don't paste it into a chat or commit it to a repo. Revoke it any time on the same page; clients using it stop working within 30 seconds.

Example prompts

• "Find a Japanese minimal style and restyle my landing page with it."
• "Show me how the Swiss International style looks on slides before I pick it."
• "Find a luxurious style for my pitch deck."
• "找一个适合做 PPT、显高级的风格。"
• "Browse Curio for an 80s retro style that works for a dashboard."
• "Fetch the bauhaus-weimar spec and apply it to my slides."
• "How many Curio credits do I have left?"

Links

Website · Gallery · Pricing · Docs · Privacy · Terms · [email protected]