Use Curio with VS Code
GitHub Copilot in VS Code can write whole interfaces — but on its own it reaches for the same generic look as every other AI. Connect Curio and it can apply any of 2543 real design styles instead, consistently, with no design spec to hand-write.
What this gives VS Code
Curio runs a Model Context Protocol (MCP) server. Once it is registered in VS Code, Copilot's agent mode gains tools to search the library, read a style's metadata, and fetch the full design spec — colors, typography, spacing, components, and rules — for whatever you are building.
It is sign-in based: you connect once with OAuth, no API keys to manage, and your AI asks you before spending a credit. The same connection works in VS Code, Claude Code, Cursor, Codex, and other MCP clients.
Connect over MCP
-
1
Add the Curio MCP server
In VS Code, add an MCP server with the URL https://mcp.designbycurio.com/mcp. The developer docs show the exact place to register it for your VS Code and Copilot version.
-
2
Sign in with OAuth
VS Code opens the sign-in flow in your browser. Sign in with email, Google, or GitHub and approve the connection. Connecting and browsing are free; unlocking a style costs 1 credit, once, and your AI asks you first.
-
3
Find a style in Copilot chat
In Copilot's agent mode, ask it to search Curio — for example, "search Curio for a clean fintech style" — or name one directly, like Bauhaus or Stripe. It uses search_styles and get_style to pick a match.
-
4
Build in that style
Tell Copilot to build your component or page in the chosen style. It fetches the full spec with get_style_spec and writes the code using the style's exact tokens and rules.
What you get
Consistent output: every component Copilot generates holds the same look, because it works from one authoritative spec instead of re-guessing each time.
Real, distinct styles: hundreds of movements, brands, and traditions — not the generic default — so your UI stops looking AI-generated.
No file wrangling: you never hand-write or hunt for a DESIGN.md; VS Code fetches it live over MCP.
Example prompts
Search Curio for a clean fintech style and rebuild this settings page in it.
Use the Bauhaus style from Curio to build the landing page hero for this app.
FAQ
Do I need an API key?
No. Curio's MCP server uses OAuth — you sign in once in the browser and VS Code stays connected. There are no keys to copy or rotate.
Does fetching a style cost anything?
Only the first time. Unlocking a style costs 1 credit, once — the same unlock as on the website — and your AI asks you before spending it. After that, fetching that style is free, and searching and reading introductions are always free.
Does this work in other tools too?
Yes. The same MCP endpoint works in Claude Code, Cursor, Codex, ChatGPT, and other MCP-capable clients. See the developer docs for per-client setup.