Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
パソコンで動く
AIGUI
概要
作者による説明（英語の原文）
Let coding agents draw charts, diagrams, 3D, molecules and animated topologies as PNGs or live pages
PopNx MCPの3つの柱
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
- 利用者の声iレビューはまだありませんレビューは今後のステップで、アカウント機能と一緒に始まります
- 私たちの基本チェックi1項目中1項目に合格公開情報からチェック。コードはまだスキャンしていません
- 利用状況iとても新しい↓ 75/週 · ★ –
できること
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
- 接続方法: パソコンで動く
- トランスポート: stdio
- カテゴリ: デザイン・画像・音声
インストール
使っているAIアプリを選んで、設定をコピーしてください。
インストールの前に
- 基本チェック：1項目中1項目に合格
- あなたのパソコンで、あなたのユーザーと同じ権限（ファイル、ネットワーク、アプリ）で動きます。
- レジストリには、入力が必要なキーは載っていません。
必要なもの
- npmNode.jsのインストール（npxコマンドに必要）
どのアプリを使っていますか？
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"aigui": {
"command": "npx",
"args": [
"-y",
"@ai-gui/mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add aigui -- npx -y @ai-gui/mcpまたは、設定を自分でコピーする
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"aigui": {
"command": "npx",
"args": [
"-y",
"@ai-gui/mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
または、設定を自分でコピーする
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"aigui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ai-gui/mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
できること
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
基本チェックi
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月8日にチェック
- ✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント liliang-cn で確認済みです
- … 未チェック
今もメンテナンスされている
このリポジトリはまだGitHubから読み取っていません
- … 未チェック
ライセンスがある
このリポジトリはまだGitHubから読み取っていません
- – 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
- – 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
- … 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
デザイン・画像・音声のほかのサーバーとの比較i
- このカテゴリのほかの2792件のうち0%よりスターが多い
- このカテゴリのほかの2792件のうち48%より最近レジストリに公開
- 基本チェックの結果が、このカテゴリのほかの2792件のうち100%と同じかそれ以上
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
よくある質問
AIGUIは安全ですか？
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
どんなキーやコードが必要ですか？
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
パソコンで動きますか、それともクラウドですか？
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。
今もメンテナンスされていますか？
GitHubリポジトリの最終更新は–、最新バージョン（0.49.0）がレジストリに届いたのは29 日前です。
どのアプリで使えますか？
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
代わりに使えるものは？
同じカテゴリには：Figma Context MCP, Claude Real Video, Figma MCP Server
代わりの候補
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i
Claude Real Video
Let any LLM watch a video locally — and search everything it has ever watched.
パソコンで動く
Figma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
クラウドで動く✓ mcp.figma.com
作者のREADME
READMEを開く
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
@ai-gui/mcp
Let your coding agent draw. An MCP server — and the engine of the AIGUI plugin for Claude Code and Codex — that turns charts, diagrams, maths, 3D scenes, molecules, orbits, dashboards and step-by-step infrastructure topologies into PNGs the agent can check, or a live page in your browser.
Live demos · Source · All packages
Install
Claude Code — the plugin also brings the skills that tell the agent when a picture beats text:
/plugin marketplace add liliang-cn/aigui/plugin install aigui@aigui
Codex:
codex plugin marketplace add liliang-cn/aiguicodex plugin add aigui@aigui
Any MCP client — run aigui-mcp over stdio:
npm install -g @ai-gui/mcp@0.49.0claude mcp add aigui -- aigui-mcp
Requires Node.js 18.11+. The first drawing downloads a headless browser (about 100 MB, once); everything runs locally, with no account or API key.
What it draws
21 block types: ECharts charts (3D too), Mermaid, KaTeX, dashboards and data walls, 3D scenes, molecules from SMILES, orbits and collisions, topologies whose steps play, knowledge graphs, geometry, function plots, optics, mechanics, labelled figures, candlesticks, tables and more. Nine of them render straight to PNG; all of them draw in a page.
Tools
| Tool | What it does |
|---|---|
aigui_guide | Lists the blocks, or returns the exact syntax for the ones named — read before writing a block. |
aigui_render | Draws the blocks in a markdown string as PNGs, returned to the agent and saved to disk. |
aigui_open | Opens the whole answer as a live page: charts to hover, 3D to turn, topologies and walls that play. |
aigui_edit | Changes part of a page by find-and-replace, without sending the whole answer again. |
aigui_export | Saves a page as PNG, PDF, one self-contained HTML file, or a GIF / WebM of it playing. |
aigui_topology | Draws a system from its docker-compose file or Kubernetes manifests. |
aigui_feedback | Reads the comments the user left on a page's blocks. |
Why it can be trusted
- Numbers come from your files. Pass
data: {"sales": "/abs/path/sales.csv"}and write{"$data":"sales","column":"revenue"}in the chart — orpick,sum,count,max,min,avg. The figures are read from the file, never retyped by the model, and the result names the file behind each block. - Every drawing is checked. A headless browser looks for labels on top of each other, text cut off or under 9 px, poor contrast and crowded charts, and tells the agent to fix them before you see anything.
- Topologies from real config.
aigui_topologyreads what is actually deployed, not what the model remembers. - Local. Pictures go to
~/.cache/aigui/images, pages to~/.cache/aigui/pages, listed newest first inpages/index.html. A page loads nothing from the network.
Custom blocks
Add your own block type in three files — no build step, no fork:
npx @ai-gui/cli plugin new ticket # writes ~/.config/aigui/plugins/ticket/| File | What it is |
|---|---|
aigui.json | Name, fences, a one-line description, whether it may render to PNG |
plugin.js | A plain browser script registering an AIGuiPlugin: (globalThis.__aiguiPacks ??= {}).ticket = (theme, still) => [...]. Its HTML is sanitized like any plugin's. |
spec.md | The rules the model follows to write the block |
It then appears in aigui_guide as [custom] and draws in pages, PNGs and exports. Blocks installed when a session starts are named in the tool descriptions too: in a measured run, agents used a custom block in 9 of 9 sessions with that, against 5 of 9 without. A broken folder is skipped with its reason; a name that collides with a built-in block is refused.
Comments from the page
While the session runs, pages are served on 127.0.0.1 (a port the system picks) with a Comment button: pick a block, say what should change, send. The agent reads it with aigui_feedback and edits the page. Only the pages directory is served.
Configuration
| Variable | Effect |
|---|---|
AIGUI_OUT_DIR | Where pictures and pages go. Default ~/.cache/aigui (XDG_CACHE_HOME honoured). |
AIGUI_NO_OPEN=1 | Write pages without opening them. |
AIGUI_OPEN_IMAGES=1 | Also open aigui_render's PNGs in the image viewer — the plugins set it, since a terminal cannot show images. |
AIGUI_PLUGIN_DIR | Where custom blocks live. Default ~/.config/aigui/plugins. |
AIGUI_NO_BROWSER_DOWNLOAD=1 | Skip the headless-browser download; draw with an installed Chrome or Edge. |
AIGUI_BROWSER_CHANNEL | Pin a browser: chromium, chrome or msedge. |
Programmatic use
import { createServer, callTool, renderToContent, writePage } from "@ai-gui/mcp"createServer() returns the McpServer unconnected, for a host with its own transport; callTool(name, args) runs one tool directly.
License
MIT © Liang Li