Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
BrandPilot brands and design systems for coding agents: tokens, design context, repo rules.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
BRANDPILOT_API_KEY, BRANDPILOT_MCP_URL, BRANDPILOT_ORIGIN, Authorization「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
このアドレスはリクエストの header にキーが必要ですが、コネクタを追加するメニューでは設定できません。代わりにClaude Code、Cursor、VS Codeを使ってください。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"brandpilot": {
"command": "npx",
"args": [
"-y",
"brandpilot-mcp"
],
"env": {
"BRANDPILOT_API_KEY": "your-value",
"BRANDPILOT_MCP_URL": "your-value",
"BRANDPILOT_ORIGIN": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add --transport http brandpilot https://brandpilot.dev/api/mcp --header 'Authorization: your-value'claude mcp add brandpilot --env BRANDPILOT_API_KEY=your-value --env BRANDPILOT_MCP_URL=your-value --env BRANDPILOT_ORIGIN=your-value -- npx -y brandpilot-mcp動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"brandpilot": {
"url": "https://brandpilot.dev/api/mcp",
"headers": {
"Authorization": "your-value"
}
}
}
}プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"brandpilot": {
"command": "npx",
"args": [
"-y",
"brandpilot-mcp"
],
"env": {
"BRANDPILOT_API_KEY": "your-value",
"BRANDPILOT_MCP_URL": "your-value",
"BRANDPILOT_ORIGIN": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"brandpilot": {
"type": "http",
"url": "https://brandpilot.dev/api/mcp",
"headers": {
"Authorization": "your-value"
}
}
}
}プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"brandpilot": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"brandpilot-mcp"
],
"env": {
"BRANDPILOT_API_KEY": "your-value",
"BRANDPILOT_MCP_URL": "your-value",
"BRANDPILOT_ORIGIN": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
このアドレスはリクエストの header にキーが必要ですが、コネクタを追加するメニューでは設定できません。代わりにClaude Code、Cursor、VS Codeを使ってください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
BRANDPILOT_MCP_URL envBRANDPILOT_ORIGIN envAuthorization 秘密 必須 HTTP headerこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのツール一覧はまだ読み取っていません。エンドポイントは順番にチェックしています。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名はドメイン brandpilot.dev で確認済みです(レジストリがドメインの所有を確認しています)
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
まだチェックしていません。エンドポイントは順番にチェックしています
まだチェックしていません。エンドポイントは順番にチェックしています
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:BRANDPILOT_API_KEY, Authorization
どちらでも使えます。パソコンにインストールしても、クラウド版につないでもかまいません。
GitHubリポジトリの最終更新は–、最新バージョン(1.0.0)がレジストリに届いたのは15 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ(開発者モードのChatGPTなど)でも使えます。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
MCP server for BrandPilot: bring a brand into your coding agent - list your brands, read a design's context and continuation contract, install its repo rules pack and tokens, and fetch its design system kit - natively from Claude Code, Codex, Cursor, Claude Desktop or any other MCP client.
The package runs in one of two modes:
BRANDPILOT_API_KEY): a thin stdio proxy onto the hosted BrandPilot MCP at https://brandpilot.dev/api/mcp. Every tools/list, tools/call, prompts/list and prompts/get is forwarded and the answer relayed, so the tool list is always the one BrandPilot serves today - new tools arrive without a package update.It never touches a database; any machine with network access to brandpilot.dev can run it. Requires Node.js 20 or newer.
Create a workspace API key in BrandPilot under Settings, API keys. It starts with bp_live_. Replace bp_live_your_key_here below with it, and keep it out of committed files.
claude mcp add brandpilot --scope user -e BRANDPILOT_API_KEY=bp_live_your_key_here -- npx -y brandpilot-mcp
Then run /mcp in Claude Code to confirm brandpilot is connected, and ask "Ask BrandPilot who I am and list my brands".
codex mcp add brandpilot --env BRANDPILOT_API_KEY=bp_live_your_key_here -- npx -y brandpilot-mcp
or in ~/.codex/config.toml:
[mcp_servers.brandpilot]
command = "npx" args = ["-y", "brandpilot-mcp"]
[mcp_servers.brandpilot.env] BRANDPILOT_API_KEY = "bp_live_your_key_here"
To keep the key out of the file, export BRANDPILOT_API_KEY in your shell and use env_vars = ["BRANDPILOT_API_KEY"] in place of the env table.
Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project):
{
"mcpServers": { "brandpilot": { "command": "npx", "args": ["-y", "brandpilot-mcp"], "env": { "BRANDPILOT_API_KEY": "bp_live_your_key_here" } } } }
Run npx -y brandpilot-mcp as a stdio server with BRANDPILOT_API_KEY in its environment. The same shape works in Claude Desktop's claude_desktop_config.json.
| Message | Cause | Fix |
|---|---|---|
| BrandPilot rejected the API key (HTTP 401) | The key is mistyped, expired or revoked | Create a new key and restart the server |
| The API key does not have the permission this call needs (HTTP 403) | The key lacks a scope (for example a read-only key calling finish_external_design) | Use a key with that scope |
| The hosted BrandPilot MCP is not enabled (HTTP 404) | The hosted MCP is not switched on for that BrandPilot instance yet | Unset BRANDPILOT_API_KEY to use the public tools meanwhile, or check BRANDPILOT_MCP_URL |
| did not answer within N s | The hosted call took longer than BRANDPILOT_TIMEOUT_MS | Retry; raise the timeout for slow calls |
The key is sent only in the Authorization header and is never printed, including in error messages and on stderr.
In API-key mode the tools and prompts come from the hosted server (brands, design context, repo rules pack, design system kit, importing finished work back for review, and more); the current list is at https://brandpilot.dev/api/v2/mcp/tools and on brandpilot.dev/docs. A good first call is whoami.
Without a key the server serves these public tools, all over the BrandPilot REST API v2:
| Tool | Auth | What it does |
|---|---|---|
list_public_systems | none | List public design systems (name, display name, brand color, status, version, v2 endpoints) |
get_system_manifest | none | Full adoption manifest for a public system: tokens, components, pages, brand assets, direction |
export_system_tokens | none | Export a system's tokens (globals-css, colors-ts, spacing-ts, typography-ts, tailwind-theme, tailwind-v4, brand-manifest, dtcg) |
get_adoption_brief | none | Markdown onboarding doc: bootstrap a design package and run a design round (a Design canvas for Claude Code, local HTML drafts for other agents) |
1.0.0 is a major release because tools and a variable were removed. BrandPilot API v1 and the per-design handoff keys stop answering on 2026-12-15 (HTTP 410), so every 0.x install loses its keyless calls that day; upgrade before then.
/api/v2/..., and /api/v2/systems/{name}/export for tokens) instead of API v1 and /api/systems/export/{name}, and take the v2 names the hosted server uses: list_systems is now list_public_systems, get_system_adoption is get_system_manifest, get_system_tokens is export_system_tokens and get_agent_prompt is get_adoption_brief. Arguments are unchanged; export_system_tokens also accepts tailwind-v4 and dtcg.get_adoption_brief returns the new v2 brief: a design round on a Design canvas (Claude Code) or local HTML drafts (other agents), instead of the Claude Design steps.get_design_handoff, get_design_prompt_pack, import_design_artifacts and finish_external_design are removed from the keyless server, and DESIGNFLOW_HANDOFF_KEY is no longer read (a leftover value only prints one line asking you to remove it). Their v2 successors (get_design_context, get_design_brief, import_design_work, finish_design_import) are served by the hosted MCP: create a workspace API key in BrandPilot (Settings, API keys) and set BRANDPILOT_API_KEY, see Connect with an API key.brandpilot-mcp/catalog now exports the four public tools only, with their v2 endpoints.| Variable | Default | Purpose |
|---|---|---|
BRANDPILOT_API_KEY | (none) | Workspace API key; turns on proxy mode |
BRANDPILOT_MCP_URL | ${BRANDPILOT_ORIGIN}/api/mcp | Hosted MCP endpoint in proxy mode. Must be https, except on localhost |
BRANDPILOT_TIMEOUT_MS | 70000 | Per-request timeout in proxy mode (1000 to 600000) |
BRANDPILOT_ORIGIN | https://brandpilot.dev | Origin for the public tools, and the base of the default BRANDPILOT_MCP_URL - override to point at a local dev server |
npm install
npm run build npm test
The e2e tests drive the built server against a fake origin that answers API v2 and returns 410 on every v1 path. To run them against a local BrandPilot instead, set BRANDPILOT_E2E_ORIGIN=http://localhost:3005 (any origin that serves API v2) before npm test.
npm link then an MCP config pointing at the linked bin is the fastest way to verify against a live server: in API-key mode confirm whoami names your workspace; without a key confirm list_public_systems returns the curated pool and nothing private.
See CHANGELOG.md for release notes.