Use Curio with Claude Code在 Claude Code 里用 Curio

Curio

Claude Code can build whole interfaces — but on its own it defaults to the same generic look as every other agent. Connect Curio and it can apply any of 989 real design styles instead, consistently, without you writing a design spec by hand.Claude Code 能搭出整套界面 —— 但单独用时，它默认跟其它 agent 一样的「通用脸」。连上 Curio，它就能改用 989 真实设计风格中的任意一种，而且一致，不用你手写设计规范。

What this gives Claude Code这给 Claude Code 带来什么

Curio runs a Model Context Protocol (MCP) server. Once Claude Code is connected, it 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.Curio 跑着一个 Model Context Protocol (MCP) 服务。Claude Code 连上后，就获得了搜索风格库、读取风格元数据、以及取用完整设计规范（色彩、字体、间距、组件、规则）的工具，用于你正在做的东西。

It is read-only and sign-in based: you connect once with OAuth, no API keys to manage. The same connection works in Claude Code, Cursor, VS Code, Codex, and other MCP clients.它是只读、登录制的：用 OAuth 连一次，不用管 API key。同一个连接在 Claude Code、Cursor、VS Code、Codex 等 MCP 客户端里都能用。

Setup配置步骤

1

Add the Curio MCP server添加 Curio MCP 服务

In Claude Code, add an MCP server pointing at https://mcp.designbycurio.com/mcp. Claude Code will open the OAuth sign-in flow in your browser.在 Claude Code 里添加一个指向 https://mcp.designbycurio.com/mcp 的 MCP 服务。Claude Code 会在浏览器里打开 OAuth 登录流程。
2

Sign in with OAuth用 OAuth 登录

Sign in with email, Google, or GitHub and approve the connection. A free account works for free styles; Pro or Max unlocks the full library.用邮箱、Google 或 GitHub 登录并同意授权。免费账户可用免费风格；Pro 或 Max 解锁完整库。
3

Find a style找一种风格

Ask Claude Code 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.让 Claude Code 搜 Curio —— 比如「在 Curio 里搜一个干净的金融科技风格」—— 或直接点名，比如包豪斯或 Stripe。它会用 search_styles 和 get_style 选出匹配。
4

Apply it to your build套到你的项目上

Tell Claude Code to build in that style. It fetches the full spec with get_style_spec and generates your slides, page, or component using the style's exact tokens and rules.让 Claude Code 用那种风格来生成。它会用 get_style_spec 取来完整规范，按该风格的精确 token 和规则生成你的幻灯片、页面或组件。

What you get你能得到什么

Consistent output: every screen Claude Code generates holds the same look, because it works from one authoritative spec instead of re-guessing each time.输出一致：Claude Code 生成的每一屏都保持同一个外观，因为它依据的是一份权威规范，而不是每次重新猜。

Real, distinct styles: hundreds of movements, brands, and traditions — not the generic default — so your work stops looking AI-generated.真实、各异的风格：几百种流派、品牌与传统 —— 不是通用默认脸 —— 你的作品不再「一看就是 AI 做的」。

No file wrangling: you never hand-write or hunt for a DESIGN.md; Claude Code fetches it live over MCP.不用折腾文件：你永远不用手写或到处找 DESIGN.md；Claude Code 通过 MCP 实时取来。

Example prompts示例 prompt

Search Curio for a warm, editorial design style and build a 5-slide deck about our Q3 results in it.在 Curio 里搜一个温暖的编辑风设计，用它做一套关于我们三季度业绩的 5 页幻灯片。

Use the Bauhaus style from Curio to build the landing page hero for this product.用 Curio 里的包豪斯风格，给这个产品做落地页的 hero 区。

FAQ常见问题

Do I need an API key?需要 API key 吗？

No. Curio's MCP server uses OAuth — you sign in once in the browser and Claude Code stays connected. There are no keys to copy or rotate.不需要。Curio 的 MCP 服务用 OAuth —— 你在浏览器里登录一次，Claude Code 就保持连接。没有 key 要拷贝或轮换。

Does fetching a style cost anything?取用一种风格要花钱吗？

Fetching a style's full spec uses one quota credit, the same as a download on the website. Free accounts get a set allowance; Pro and Max get more on a rolling window. Searching and reading metadata is free.取用一种风格的完整规范会消耗一个额度，跟网站上下载一次一样。免费账户有一定额度；Pro 和 Max 在滚动周期内更多。搜索和读元数据免费。

Does this work in other tools too?在别的工具里也能用吗？

Yes. The same MCP endpoint works in Cursor, VS Code, Codex, ChatGPT, and other MCP-capable clients. See the developer docs for per-client setup.能。同一个 MCP 端点在 Cursor、VS Code、Codex、ChatGPT 等支持 MCP 的客户端里都能用。逐客户端配置见开发者文档。

Read the developer docs →查看开发者文档 →