Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
An artificial artisan for UI design: agents build screens, a design system keeps them consistent.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"artisign": {
"command": "npx",
"args": [
"-y",
"artisign",
"mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add artisign -- npx -y artisign mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"artisign": {
"command": "npx",
"args": [
"-y",
"artisign",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"artisign": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"artisign",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月6日にチェック
レジストリ名はドメイン artisign.dev で確認済みです(レジストリがドメインの所有を確認しています)
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(2.2.0)がレジストリに届いたのは10 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには: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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
An artificial artisan for UI design: agents build screens, a design system keeps them consistent.
Local-first UX design tool for AI agents. Agents design through MCP, the human reviews in the browser, state lives in plain files.
One Node process on 127.0.0.1. No database, no accounts, no hosting.
Status: Stable (2.2.0) — CLI, store, parser/model, the 25-tool MCP surface, browser preview with live reload/flows/comments, screen variants with side-by-side compare, the design system (tokens, variants, drift warnings, promote_to_system), and packaging are all implemented. Artisign designs its own browser preview — see Designed with itself.
Requirements. Node.js ≥ 22.4 on macOS or Linux — Windows is not supported (the store's atomic writes and path handling have never been verified there, so package.json makes npm install refuse the platform). For screenshots, a browser that is already installed: Chrome, Edge, Brave, Chromium or Firefox — see Screenshots below.
npm install -g artisign
artisign
npm install -g artisign — once.artisign — starts Artisign's background process (the *daemon*), opens the preview in your browser and, on first run, offers to connect your AI tool. After connecting, quit and reopen the AI tool so it picks up the new entry.~ itself. Writes are committed to git automatically (autoCommit, on by default) — Artisign runs git init in the project on the first write, needs git installed for that, and skips the commit rather than fail when it is missing or the folder sits inside another repo. No git identity is required: on a machine where git has no user.name/user.email, Artisign's commits are made as Artisign ; an identity you have configured (git config, or GIT_AUTHOR_*/GIT_COMMITTER_* in the environment) is used as it is, and Artisign never writes to your git config.Check it works. Ask your AI tool *"List my Artisign projects"* — it calls list_projects and the project you just created appears, and in the preview's project picker too.
Two copies, one version. The global install is the artisign command you type. Your AI tool's entry runs the same version, pinned, through npx (downloaded once on its first launch) as a small stdio bridge; artisign update keeps the two in step. Whichever starts first — you with artisign, or the bridge when your AI tool connects — starts the daemon; both use the same ~/.artisign and port, so there is only ever one. The daemon inherits the environment of the process that started it: to make a variable such as ARTISIGN_BROWSER stick, run artisign from your shell before your AI tool does (artisign stop first if it is already running); putting it in the entry's env also works, but artisign setup rewrites entries, so add it again after an update.
Updating. Run artisign update (also artisign --update). It installs the latest version with npm install -g artisign@latest, re-pins the artisign entries in your AI tools to it and restarts a running Artisign of an older version with its open projects. Then quit and reopen your AI tool, so it launches the re-pinned entry. It does nothing when you are already on the latest version, and never uses sudo. Nothing is updated automatically: artisign checks the npm registry for a newer release at most once a day and prints one line (New version x.y.z — run artisign update) when there is one. Set ARTISIGN_NO_UPDATE_CHECK=1 to turn that off.
Troubleshooting.
sudo. Use a Node you own (for example through nvm), or point npm at a folder in your home: npm config set prefix ~/.npm-global, then add ~/.npm-global/bin to your PATH.npm install -g artisign and artisign setup again.pnpm add -g artisign, bun add -g artisign or yarn global add artisign; update with the same command and @latest (artisign update only *prints* that command for these installs, it does not run it). Then run artisign setup to connect your AI tool and re-pin its entries.Screenshots. get_screenshot and inspect_node render in a real browser — one that is already on your machine. Artisign finds Chrome, Edge, Brave, Chromium or Firefox by itself (in that order) and drives it headless through the browser's own remote protocol: the Chrome DevTools Protocol for the Chromium family, WebDriver BiDi for Firefox. Nothing to install, no Playwright, no browser download.
ARTISIGN_BROWSER=/path/to/browser in the environment of the process that runs the daemon. The name decides the protocol: a path containing firefox is driven over BiDi, anything else over CDP.browser input ("chrome", "edge", "brave", "chromium", "firefox"), and every result names the browser and version that rendered it — so an agent can check the same screen in a second installed browser before calling it done.~/artisign-browser-profiles/, removed when the browser closes. It lives under your home directory, not /tmp, because a Snap- or Flatpak-packaged Firefox cannot see /tmp.chromium or firefox-esr from the distribution's packages is enough.Privacy. Artisign collects nothing — no telemetry, no account, no server beyond the local one it runs. These requests reach the network, none of them about you, and that is the complete list: the update check (at most once a day) asks registry.npmjs.org for the latest version and sends nothing else; artisign update runs npm, and the npx in your AI tool's entry fetches the pinned version from npm, both talking to the npm registry; and the first render of a project in each Artisign run (and again when its typography tokens change) fetches the font families named in your tokens — plus the Material Symbols Rounded icon font, always (a copy shipped with the package is the fallback when that fails) — from Google Fonts, then caches them locally (see Fonts & icons). A remote https:// URL that a screen's own HTML references (an image, a stylesheet) is loaded by the browser that renders it, like any web page. Everything else stays on 127.0.0.1.
artisign on its own is artisign start. It starts the background process, opens http://127.0.0.1: / in your browser once it is healthy — also when it was already running — and, the first time, offers (once, in a terminal and outside CI) to connect the AI tools it finds. Answering no is remembered; artisign setup works any time. Pass --no-open (or set ARTISIGN_NO_OPEN=1) to skip the browser; it is skipped anyway when CI is set or stdout is not a terminal, and when no browser can be opened the URL is printed and that is all. serve, mcp, status, stop and init never open a browser.
Then ask your AI tool for a project. Or do it yourself:
artisign init ./my-project # scaffold an empty project
artisign start ./my-project # start (or reuse) the background process with it open artisign status # pid, port, open projects
The remaining commands, for reference — this block is a catalogue, not a sequence:
artisign serve ./my-project # foreground (development); opens the project on start
artisign stop # stop the background process artisign help [command] # also: artisign --help
Artisign is multi-project: one process on 127.0.0.1:4711 holds several projects open at once. Open or create projects from the browser UI (project picker in the topbar), or let agents address any project by name or path in the project input of each tool call — list_projects shows the names. No restart when you switch.
Connecting an AI tool. artisign setup connects Claude Code, Claude Desktop, Cursor, Codex CLI, VS Code and opencode. For each one it finds, it asks, then writes a user-level entry named artisign that runs npx -y artisign@ mcp, pinned to the version that ran setup; other entries and settings are left untouched. Claude Code is driven through its own claude mcp CLI and Codex CLI through codex mcp add/remove (it honours CODEX_HOME) when those are on your PATH; GUI clients (Claude Desktop, Cursor, VS Code) get the npx found on your PATH, as an absolute path, because they do not inherit your shell's. A config file that holds comments or trailing commas is never rewritten — setup prints the entry to add by hand instead — and a symlinked config is written through. --yes connects every tool found without asking (the only way to run without a terminal); artisign setup --remove removes exactly the artisign entries. Run it again after an update to re-pin (artisign update does so for you). Quit and reopen the AI tool after setup, so it picks up the entry.
Manual entry. If you don't run setup, add the same stdio server to your AI tool by hand, pinned to the version you installed (artisign --version). A terminal client (Claude Code, Codex CLI, opencode) can use plain npx:
claude mcp add --scope user --transport stdio artisign -- npx -y artisign@<version> mcp
A GUI client (Claude Desktop, Cursor, VS Code) does not inherit your shell's PATH, so give it the absolute path of your npx (which npx) and a PATH that starts with its directory — this is what setup writes. For Claude Desktop, in ~/Library/Application Support/Claude/claude_desktop_config.json (macOS):
{
"mcpServers": { "artisign": { "command": "/opt/homebrew/bin/npx", "args": ["-y", "artisign@ ", "mcp"], "env": { "PATH": "/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin" } } } }
Replace /opt/homebrew/bin with the directory which npx shows. Quit and reopen the client afterwards.
artisign mcp is a stdio bridge: it forwards every MCP message to the running background process and starts it if it is not running, so it is the same backend whichever client connects. It takes no project directory — the project is named in each tool call.
State and ports. The port comes from ~/.artisign/config.json or --port N on start and serve (a settings.port in a project's artisign.json is deprecated and ignored). Daemon-level state — that config plus the daemon.lock holding the running pid and port — lives in ~/.artisign. Set ARTISIGN_HOME to move it somewhere else; that, together with --port, is what lets a second daemon run fully isolated from the first, which is worth doing before you try anything destructive against projects you care about.
Just trying it. npx artisign runs it once without installing.
Every tool except list_projects, init_project and get_guide takes a required project input: a known project's name (as list_projects returns it) or an absol
冒頭だけを表示しています。続きはリポジトリで読めます