Setup guide接入指南
Use Curio with Windsurf在 Windsurf 里用 Curio
Windsurf is fast at writing UI code — but left alone it reaches for the same generic look as every other AI. Connect Curio and it can apply any of 989 real design styles instead, consistently, with no design spec to hand-write.Windsurf 写 UI 代码很快 —— 但放任不管，它会跟其它 AI 一样抓「通用脸」。连上 Curio，它就能改用 989 真实设计风格中的任意一种，而且一致，不用你手写设计规范。
What this gives Windsurf这给 Windsurf 带来什么
Curio runs a Model Context Protocol (MCP) server. Once Windsurf is connected, its Cascade agent 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) 服务。Windsurf 连上后，它的 Cascade agent 就获得了搜索风格库、读取风格元数据、以及取用完整设计规范（色彩、字体、间距、组件、规则）的工具，用于你正在做的东西。
It is read-only and sign-in based: you connect once with OAuth, no API keys to manage. The same connection works in Windsurf, Claude Code, Cursor, VS Code, Codex, and other MCP clients.它是只读、登录制的：用 OAuth 连一次，不用管 API key。同一个连接在 Windsurf、Claude Code、Cursor、VS Code、Codex 等 MCP 客户端里都能用。
Setup配置步骤
-
1
Add the Curio MCP server添加 Curio MCP 服务
In Windsurf's MCP settings, add a new server with the URL https://mcp.designbycurio.com/mcp. The developer docs show the exact place for your Windsurf version.在 Windsurf 的 MCP 设置里添加一个新服务，URL 填 https://mcp.designbycurio.com/mcp。具体位置随你的 Windsurf 版本而定，见开发者文档。
-
2
Sign in with OAuth用 OAuth 登录
Windsurf opens the sign-in flow in your browser. 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.Windsurf 会在浏览器里打开登录流程。用邮箱、Google 或 GitHub 登录并同意授权。免费账户可用免费风格；Pro 或 Max 解锁完整库。
-
3
Find a style in Cascade在 Cascade 里找风格
In Windsurf's Cascade chat, 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.在 Windsurf 的 Cascade 聊天里让它搜 Curio —— 比如「在 Curio 里搜一个干净的金融科技风格」—— 或直接点名，比如包豪斯或 Stripe。它会用 search_styles 和 get_style 选出匹配。
-
4
Build in that style用那种风格生成
Tell Windsurf 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.让 Windsurf 用选定风格生成你的组件或页面。它会用 get_style_spec 取来完整规范，按该风格的精确 token 和规则写代码。
What you get你能得到什么
Consistent output: every component Windsurf generates holds the same look, because it works from one authoritative spec instead of re-guessing each time.输出一致：Windsurf 生成的每个组件都保持同一个外观，因为它依据的是一份权威规范，而不是每次重新猜。
Real, distinct styles: hundreds of movements, brands, and traditions — not the generic default — so your UI stops looking AI-generated.真实、各异的风格：几百种流派、品牌与传统 —— 不是通用默认脸 —— 你的 UI 不再「一看就是 AI 做的」。
No file wrangling: you never hand-write or hunt for a DESIGN.md; Windsurf fetches it live over MCP.不用折腾文件：你永远不用手写或到处找 DESIGN.md；Windsurf 通过 MCP 实时取来。
Example prompts示例 prompt
Search Curio for a clean fintech style and rebuild this dashboard component in it.在 Curio 里搜一个干净的金融科技风格，用它重写这个仪表盘组件。
Use the Memphis style from Curio for this marketing page hero.用 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 Windsurf stays connected. There are no keys to copy or rotate.不需要。Curio 的 MCP 服务用 OAuth —— 你在浏览器里登录一次，Windsurf 就保持连接。没有 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 Claude Code, Cursor, VS Code, Codex, ChatGPT, and other MCP-capable clients. See the developer docs for per-client setup.能。同一个 MCP 端点在 Claude Code、Cursor、VS Code、Codex、ChatGPT 等支持 MCP 的客户端里都能用。逐客户端配置见开发者文档。