在 VS Code 里用 Curio

这给 VS Code 带来什么

Curio 跑着一个 Model Context Protocol (MCP) 服务。在 VS Code 里注册之后，Copilot 的 agent 模式就获得了搜索风格库、读取风格元数据、以及取用完整设计规范（色彩、字体、间距、组件、规则）的工具，用于你正在做的东西。

它是只读、登录制的：用 OAuth 连一次，不用管 API key。同一个连接在 VS Code、Claude Code、Cursor、Codex 等 MCP 客户端里都能用。

配置步骤

1. 1

   添加 Curio MCP 服务

   在 VS Code 里添加一个 URL 为 https://mcp.designbycurio.com/mcp 的 MCP 服务。具体注册位置随你的 VS Code 与 Copilot 版本而定，见开发者文档。

2. 2

   用 OAuth 登录

   VS Code 会在浏览器里打开登录流程。用邮箱、Google 或 GitHub 登录并同意授权。免费账户可用免费风格；Pro 或 Max 解锁完整库。

3. 3

   在 Copilot 聊天里找风格

   在 Copilot 的 agent 模式里让它搜 Curio —— 比如「在 Curio 里搜一个干净的金融科技风格」—— 或直接点名，比如包豪斯或 Stripe。它会用 search_styles 和 get_style 选出匹配。

4. 4

   用那种风格生成

   让 Copilot 用选定风格生成你的组件或页面。它会用 get_style_spec 取来完整规范，按该风格的精确 token 和规则写代码。

你能得到什么

输出一致：Copilot 生成的每个组件都保持同一个外观，因为它依据的是一份权威规范，而不是每次重新猜。

真实、各异的风格：几百种流派、品牌与传统 —— 不是通用默认脸 —— 你的 UI 不再「一看就是 AI 做的」。

不用折腾文件：你永远不用手写或到处找 DESIGN.md；VS Code 通过 MCP 实时取来。

示例 prompt

在 Curio 里搜一个干净的金融科技风格，用它重写这个设置页面。

用 Curio 里的包豪斯风格，给这个应用做落地页的 hero 区。

常见问题