Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
Agent-native UI/UX design validation: journey completeness, state coverage, and WCAG checks.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
UXLOOM_PROJECT必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"uxloom": {
"command": "npx",
"args": [
"-y",
"uxloom"
],
"env": {
"UXLOOM_PROJECT": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add uxloom --env UXLOOM_PROJECT=your-value -- npx -y uxloom動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"uxloom": {
"command": "npx",
"args": [
"-y",
"uxloom"
],
"env": {
"UXLOOM_PROJECT": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"uxloom": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"uxloom"
],
"env": {
"UXLOOM_PROJECT": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
UXLOOM_PROJECT envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月6日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント uxloom-dev で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.14.0)がレジストリに届いたのは3 か月前です。
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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Your generator gave you 6 screens. UXLoom proves you're missing 9 states.
AI generators (v0, Lovable, Figma Make, Claude) produce happy-path screens. UXLoom is the critic layer: it models user journeys as state machines, treats screens as nodes with state contracts, and mechanically proves what's missing before a line of production code exists — unreachable screens, dead ends, missing error/empty/loading states, WCAG contrast failures, undersized touch targets, and labels that will overflow under localization.
Agent-native by design: the interface is an MCP server (works with Claude Code, Codex, and any MCP client), with Agent Skills included.
Deterministic by design: same input, byte-identical report — benchmarked (packages/bench) at 1.000 precision/recall on a seeded defect catalog, SHA-256-stable across processes, 1000 screens in under 5ms. That's what lets design completeness gate CI, where an LLM opinion can't.
Website: uxloom.dev · npm: uxloom · MCP registry: io.github.uxloom-dev/uxloom ·
| Package | What it is |
|---|---|
@uxloom/journeygraph | The open design-as-data format: journeys as state machines, screens as nodes with required states |
@uxloom/critics | The validators: journey completeness, state coverage, WCAG contrast, touch targets, text expansion |
uxloom | The MCP server + Agent Skills — the interface agents use |
New here? Start with the [Quickstart](QUICKSTART.md) — prerequisites, the Claude Code walkthrough, what to say to your agent, and troubleshooting.
# Claude Code
claude mcp add uxloom -- npx -y uxloom
codex mcp add uxloom -- npx -y uxloom
The project file (uxloom.project.json) lives in your workspace and belongs in git — the design is data, versioned next to the code it specifies.
npx uxloom init # one-command setup: MCP config + agent skill + starter file
npx uxloom preview # live mocks (themed, commentable, EDITABLE in the browser) npx uxloom export # shareable HTML — plus --svg (Figma/Penpot import; add
npx uxloom check # design completeness — exit 1 on errors, CI-ready npx uxloom audit # implementation drift — web AND native (Swift/Kotlin/
npx uxloom diff # human-readable design diffs for PR review
Evidence-based design: every decision in the contract can carry its rationale — reasoning, rejected alternatives with pros/cons, sources, confidence — enforced by the critics once adopted, iterated through a bounded design_review loop (max 3 rounds), and shown to stakeholders in the preview's evidence panel (ⓘ) and exports. The design doesn't just validate; it argues its case.
Agent-addressable comments: a reviewer drops a pinned comment in the preview and clicks "→ agent". The comment becomes a work item any Gen-AI model can read with full context — comment_context returns the pinned layout block, the screen contract, the journey references, and the current findings for that screen — act on, and resolve back into the preview with a note. One click from feedback to addressed.
CI-native: check and audit take --json, --sarif (GitHub code scanning), and --github (inline PR annotations). Brownfield-ready: --update-baseline freezes existing findings so only *new* drift blocks; uxloom.config.json tunes thresholds to your accessibility bar. Full documentation: uxloom.dev/docs.html.
Add it to CI and a happy-path-only design can never merge:
- run: npx uxloom check design/uxloom.project.json
Workflow (also shipped as a skill in packages/mcp-server/skills/): project_init → brief_start/brief_answer → journey_define → screen_register → project_validate → fix → repeat until zero errors → coverage_report.
tools/dogfood.mjs drives the real MCP server through three products, twice each: screens as a happy-path generator hands them over, then repaired using the validation report. Artifacts in examples/.
| Product | Generated (happy-path) | Repaired |
|---|---|---|
shopmweb — e-commerce checkout (mWeb + Android) | 9 errors, 6 warnings | 0 / 0 |
taskflow — SaaS signup/onboarding (web) | 1 error, 6 warnings | 0 / 0 |
ridenow — ride booking (iOS + Android, offline-heavy) | 3 errors, 7 warnings | 0 / 0 |
Caught: an unreachable promo screen, dead-end verification states, five undesigned payment/error states, a 2.4:1 contrast button, a 40px touch target on Android, a checkout label that breaks in German, and three products' worth of missing offline states. Zero errors *and zero warnings* is reachable honestly — screens declare documented exemptions where a baseline state genuinely cannot apply, and contradictory exemptions are flagged.
npm install
npm run typecheck npm test
Released and maintained: on npm and the official MCP registry, with the benchmark scorecard published in every GitHub release. The JourneyGraph format (formatVersion: "0.1") may evolve until 1.0; releases follow RELEASING.md — every surface is drift-checked in CI.
MIT