Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Generate images, video, music and voice from your CLI or AI agent. On-brand AI media toolkit.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 5/5 合格 · 質問内容は提供元のサーバー(distribea.com)を通ります
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげます · 約 5 分
Distribea MCP のキーが必要です(提供元のサイトで作成) · claude.ai かデスクトップアプリで一度設定すれば、チャットで使えます · 無料アカウントは 1 つまで · Team/Enterprise はオーナー(Owner)が追加
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
CustomizeConnectors
ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します
Distribea MCPhttps://distribea.com/api/mcp/remoteRequest headers に、この名前と値を追加
AuthorizationBearer <ここにキーを貼り付け>キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Authentication は Claude が検出したままにして Add を押します
+ConnectorsDistribea MCP
Distribea MCP を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Distribea MCP を使っていると言うか、回答に Distribea MCP のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ Distribea MCP につなげません
Distribea MCP は接続時に自分のキーが必要ですが、OpenAI のヘルプページは OAuth ログインしか説明しておらず、確認できたキー入力方法がありません
A · Distribea MCP につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code につなげます · 約 5 分
Distribea MCP のキーが必要です(提供元のサイトで作成)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
claude mcp add --transport http --scope user distribea https://distribea.com/api/mcp/remote --header 'Authorization: Bearer your-value'Enter の前に「your-value」を自分のキーに書き換えてください
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Distribea MCP が一覧にあり、接続済みと表示されれば OK です
Distribea MCP を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が Distribea MCP を使っていると言うか、回答に Distribea MCP のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげます · 約 5 分
Distribea MCP のキーが必要です(提供元のサイトで作成)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Distribea MCP の設定で Authorization が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Distribea MCP を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が Distribea MCP を使っていると言うか、回答に Distribea MCP のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげます · 約 5 分
Distribea MCP のキーが必要です(提供元のサイトで作成)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Distribea MCP の設定で Authorization が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Distribea MCP を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が Distribea MCP を使っていると言うか、回答に Distribea MCP のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
Web 経由でつなぐアプリ用のアドレス
https://distribea.com/api/mcp/remoteJSON 設定は下の「開発者向け」にあります
Claude Code
claude mcp add --transport http --scope user distribea https://distribea.com/api/mcp/remote --header 'Authorization: Bearer your-value'Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"distribea": {
"url": "https://distribea.com/api/mcp/remote",
"headers": {
"Authorization": "Bearer your-value"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"distribea": {
"type": "http",
"url": "https://distribea.com/api/mcp/remote",
"headers": {
"Authorization": "Bearer your-value"
}
}
}
}Claude Code
claude mcp add --scope user distribea --env DISTRIBEA_MCP_KEY=your-value -- npx -y distribea-mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"distribea": {
"command": "npx",
"args": [
"-y",
"distribea-mcp"
],
"env": {
"DISTRIBEA_MCP_KEY": "your-value"
}
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"distribea": {
"command": "npx",
"args": [
"-y",
"distribea-mcp"
],
"env": {
"DISTRIBEA_MCP_KEY": "your-value"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"distribea": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"distribea-mcp"
],
"env": {
"DISTRIBEA_MCP_KEY": "your-value"
}
}
}
}DISTRIBEA_MCP_KEY 秘密 必須 envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
インターネット経由でつなげるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
パソコン上で動かせるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
このサーバーは、ツール一覧を表示する前にサインインを求めます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月12日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント Distribea で確認済みです
コードの最終更新:25 日前
MITを使用
189ミリ秒で応答(HTTP 401)
OAuthでのサインインに対応しているため、AIアプリがログイン画面へ案内してくれます
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック5項目のうち5項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:Authorization, DISTRIBEA_MCP_KEY
どちらでも使えます。パソコンにインストールしても、クラウド版につないでもかまいません。
GitHubリポジトリの最終更新は25 日前、最新バージョン(2.1.0)がレジストリに届いたのは5 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URL で接続するので、リモート MCP に対応したアプリでも使えます(例:ChatGPT Business 以上)。
同じカテゴリには:Figma Context MCP, AutoClip, Next AI Draw.io
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
CLI · MCP server · Claude Skill — works with Claude Code · Cursor · Windsurf · Replit · Copilot
[Distribea](https://distribea.com) remakes any video with you in it ([Motion Control](https://distribea.com/ai/motion-control)) and gives a royalty-free library of music, sound effects, footage and images. This package is its on-brand AI media toolkit for builders: it generates images, video, music and voice from plain-language prompts and ships them production-ready — optimised WebP with SEO alt text, downloaded for you or patched straight into your code. One connector, four media types, reachable three ways: a CLI in your terminal, an MCP server your AI coding agent calls while it builds, and a Claude Skill. Define your brand once; a built-in AI art director writes every prompt — you say what you want, never how to render it. Billed in credits at the regular site price; the connector holds no API keys and no secrets.
npm install -g distribea-mcp
distribea login # opens your browser — no key to paste
distribea image "founder portrait, soft daylight" --portrait distribea video "slow waves rolling at golden hour" --landscape distribea music "warm lo-fi beat, mellow, 90 bpm" distribea voice "Welcome to our store." --lang en
Each file lands in a tidy folder, ready to use. Add --dry-run to any command to see the exact credit price first (0 credits, generates nothing).
Most AI media tools hand you a raw model and a blank prompt box, in a browser tab, one image at a time. Distribea is the layer above that — and it lives where you build.
distribea …), drop it into your AI agent as an MCP server (Claude Code, Cursor, Windsurf, Replit, Copilot), or add the Claude Skill so the model reaches for it on its own.The heavy lifting — art direction, generation, billing — runs on the hosted Distribea engine. This package is only the local connector: it scans and patches your files, holds no API keys and no secrets, and bills generation in credits on your Distribea plan at the regular site price.
| Media | Command | What you get |
|---|---|---|
| 🖼️ Image | distribea image " " | One on-brand image (png/jpg), any aspect ratio. Portraits, heroes, product shots, illustrations, review avatars. |
| 🎬 Video | distribea video " " | One short clip (mp4) — text-to-video, or image-to-video from a reference photo. |
| 🎵 Music | distribea music " " | One royalty-ready track (mp3) — intros, backing music, ad beds. |
| 🎙️ Voice | distribea voice " " | One voice-over (mp3), text-to-speech in many languages. |
| 📄 A whole page | distribea page [path] | Every placeholder on a page (or the whole project) filled on-brand, in parallel, patched into your code. |
| ✍️ Blog cover | distribea blog " " | A 16:9 cover image that illustrates the article's actual subject, in your style, + alt text. |
Reach for Distribea whenever a project needs imagery or audio and you'd otherwise ship stock photos, gray placeholders, CSS-gradient-only sections, or a raw pasted photo. Typical jobs:
| Raw-model CLI / MCP | Generic image MCP | Distribea | |
|---|---|---|---|
| Image · video · music · voice | ⚠️ varies | ❌ image only | ✅ all four, one connector |
| Lives in your terminal & your agent | ⚠️ one of them | ⚠️ MCP only | ✅ CLI · MCP · Skill |
| Writes the art direction for you | ❌ you prompt each model | ⚠️ prompt by prompt | ✅ built-in art director |
| Locks your brand once | ❌ | ⚠️ per prompt | ✅ applied everywhere |
| Same face across scenes | ❌ | ❌ | ✅ recurring characters |
| Fills a whole page in one call | ❌ | ❌ | ✅ distribea page |
| Production-ready (WebP + SEO alt) | ❌ | ❌ | ✅ automatic |
| No keys/secrets in the connector | ⚠️ holds your model keys | ⚠️ varies | ✅ browser sign-in, nothing to paste |
In one line: other tools give you a model and a prompt box; Distribea gives you finished, on-brand assets — in the four media types you actually need — without leaving the place you build.
A Distribea plan powers generation (free/trial accounts get a couple of gift images to try it). The connector itself is free and stores no secrets.
npm install -g distribea-mcp
distribea login # opens your browser, click Authorize — no key to paste
distribea whoami confirms you're connected.
Drop this into the .mcp.json at the root of your project:
{
"mcpServers": { "distribea-mcp": { "command": "npx", "args": ["-y", "distribea-mcp@latest"], "env": { "DISTRIBEA_MCP_KEY": "dmcp_…" } } } }
Grab your dmcp_… key at distribea.com/account/mcp. If you've already run distribea login, the server reuses that session and you can omit the env block entirely.
| Tool | Where to add it |
|---|---|
| Claude Code | claude mcp add distribea-mcp -e DISTRIBEA_MCP_KEY=dmcp_… -- npx -y distribea-mcp@latest |
| Cursor | Settings → MCP → Add, or paste the block into ~/.cursor/mcp.json |
| Windsurf | Paste into ~/.codeium/windsurf/mcp_config.json |
| VS Code (Copilot) | Paste into .vscode/mcp.json |
| Replit | Add as a custom MCP server with the command above |
The package ships SKILL.md. Add it once and your agent reaches for Distribea on its own whenever a page needs imagery or audio.
npx skills add Distribea/distribea-mcp
npm install -g distribea-mcp
distribea login distribea image "a quiet beach at sunrise, warm light" --landscape
The file lands in a tidy folder, ready to use. That's it — no model to pick, no prompt engineering: the style is inferred and the art director writes the prompt. From here, swap image for video, music, or voice, or run distribea page to dress a whole page at once.
Every command takes a plain-language subject. Add --dry-run to preview the price first (0 credits, generates nothing).
distribea image "founder portrait, soft daylight, neutral background" --portrait
distribea video "slow waves rolling onto a tropical beach" --landscape
distribea music "warm lo-fi beat, mellow, 90 bpm" --out ./assets
distribea voice "Welcome to our store — let's get you started." --lang en
Turn a real photo into a new on-brand image or animate it. Pass --ref once, or several times for multiple references — automatically capped to what the chosen model accepts.
distribea image "the same product on a marble kitchen counter" --ref ./bottle.jpg
distribea video "gentle push-in on the cliff at golden hour" --ref ./cliff.jpg --portrait
Reads the article and illustrates its specific subject, matched to your locked style, as a 16:9 WebP + alt text.
distribea blog "How we cut our build times in half — full article body here…"
Defaults are strong; only name a model when you want a particular one.
distribea image "minimalist blue logo on white" --model nano-banana-pro --dry-run
distribea models image # or: video | music | voice
The page workflow is the superpower. Build your page with markers wherever an image goes, then one call fills every slot with imagery that matches your brand — one consistent look across the whole site, recurring characters with the same face in every scene, believable UGC avatars for review sections.
distribea page ./index.html # omit the path to dress the whole project
Every image lands production-ready: optimised WebP, proper SEO alt text, and patched straight into your code. No stock photos. No placeholders. No export step. The style is inferred from the page itself, so there's nothing to set up.
Already have a site with cheap or off-brand stock photos? Rebrand them in place — the first pass lists every replaceable image for free, then applies the new look without touching your code (originals kept as *.original).
A real person (a founder, a teacher) or a product that must look identical in every shot is treated as a locked subject — the face/object stays 100% identical, only the staging changes.
distribea image "the teacher explaining at a whiteboard" --ref ./founder.jpg
Never paste a raw photo into the page: leave a placeholder and let the engine restage that exact face in your site's world. Review and testimonial avatars come out as casual smartphone selfies (UGC look); the same reviewer keeps the same face acros