VS CodeでCurioを使う

VS Codeでできるようになること

CurioはModel Context Protocol（MCP）サーバーを提供しています。VS Codeに登録すると、Copilotのエージェントモードでライブラリの検索、メタデータの確認、色、タイポグラフィ、余白、コンポーネント、ルールを含む完全なデザイン仕様の取得ができます。

読み取り専用で、OAuthで一度接続すればAPIキーは不要です。同じ接続をVS Code、Claude Code、Cursor、CodexなどのMCPクライアントで利用できます。

Setup

1. 1

   CurioのMCPサーバーを追加する

   VS CodeでURLにhttps://mcp.designbycurio.com/mcpを指定したMCPサーバーを追加します。VS CodeとCopilotのバージョンごとの登録場所は開発者ドキュメントを確認してください。

2. 2

   OAuthでログインする

   VS Codeがブラウザでログインを開きます。メール、Google、GitHubのいずれかでログインして承認します。Freeでは無料スタイルを利用でき、ProまたはMaxではライブラリ全体が解放されます。

3. 3

   Copilotチャットでスタイルを探す

   CopilotのエージェントモードでCurioを検索するよう依頼します。たとえば「Curioでクリーンなフィンテックスタイルを検索してください」と伝えるか、BauhausやStripeを直接指定します。search_stylesとget_styleで候補を選びます。

4. 4

   そのスタイルで制作する

   Copilotに選んだスタイルでコンポーネントやページを作るよう依頼します。get_style_specで完全な仕様を取得し、正確なトークンとルールに従ってコードを書きます。

What you get

一貫した出力：Copilotが生成するすべてのコンポーネントは、一つの信頼できる仕様を基に同じ見た目を保ちます。

実在する個性的なスタイル：一般的な既定デザインではなく、数百の運動、ブランド、伝統から選べるため、UIのAIらしい画一感を避けられます。

ファイル管理は不要：DESIGN.mdを手書きしたり探したりせず、VS CodeがMCP経由で取得します。

Example prompts

Curioでクリーンなフィンテックスタイルを検索し、そのスタイルでこの設定ページを作り直してください。

CurioのBauhausスタイルを使って、このアプリのランディングページのヒーローセクションを作成してください。

FAQ