Figma Context MCP
von GLips
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Läuft auf deinem Computer★ 16.165MITAktualisiert vor 5 Monaten
Installieren
Uxloom
Überblick
Beschreibung vom Entwickler (englisches Original)
Agent-native UI/UX design validation: journey completeness, state coverage, and WCAG checks.
Die drei Säulen von PopNx MCP
Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.
- Stimmen der NutzeriNoch keine BewertungenBewertungen starten in einem späteren Schritt zusammen mit Benutzerkonten
- Unsere Basischecksi1 von 1 bestandenAnhand öffentlicher Informationen geprüft; Code noch nicht gescannt
- NutzungiNoch nicht gemessen★ –
Was du damit machen kannst
Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.
- Verbindung: Läuft auf deinem Computer
- Transport: stdio
- Kategorie: Design, Bilder & Audio
Installation
Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.
Bevor du installierst
- Basischecks: 1 von 1 bestanden
- Läuft auf deinem Computer mit den Rechten deines Benutzerkontos (Dateien, Netzwerk, Apps).
- Das trägst du selbst ein:
UXLOOM_PROJECT
Du brauchst
- npmNode.js installiert (für den Befehl npx)
Welche App nutzt du?
Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.
Öffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein
{
"mcpServers": {
"uxloom": {
"command": "npx",
"args": [
"-y",
"uxloom"
],
"env": {
"UXLOOM_PROJECT": "your-value"
}
}
}
}Führe das in deinem Terminal aus
claude mcp add uxloom --env UXLOOM_PROJECT=your-value -- npx -y uxloomTrag die leeren Werte ein, bevor du ihn startest.
Oder kopier die Einstellungen selbst
In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen
{
"mcpServers": {
"uxloom": {
"command": "npx",
"args": [
"-y",
"uxloom"
],
"env": {
"UXLOOM_PROJECT": "your-value"
}
}
}
}Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.
Oder kopier die Einstellungen selbst
In .vscode/mcp.json in deinem Projekt einfügen
{
"servers": {
"uxloom": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"uxloom"
],
"env": {
"UXLOOM_PROJECT": "your-value"
}
}
}
}Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.
Dieser Server läuft auf deinem Computer, und ChatGPT kann sich nur mit Servern im Internet verbinden. Wähle eine andere App.
Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.
Werte, die du selbst einträgst
UXLOOM_PROJECTenvPath to the project file (default: ./uxloom.project.json in the working directory)
Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.
Was er kann
Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.
Basischecksi
Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 6. Nov. 2026
- ✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto uxloom-dev bestätigt, dem das Repo gehört
- … Noch nicht geprüft
Wird noch gepflegt
Dieses Repo haben wir noch nicht von GitHub gelesen
- … Noch nicht geprüft
Hat eine Lizenz
Dieses Repo haben wir noch nicht von GitHub gelesen
- – Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
- – Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
- … Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen
Im Vergleich mit anderen in Design, Bilder & Audioi
- Mehr Sterne als 0 % der anderen 2171 Server in dieser Kategorie
- Neuer in der Registry veröffentlicht als 22 % der anderen 2171 Server in dieser Kategorie
- Basischecks gleich gut wie oder besser als bei 100 % der anderen 2171 Server in dieser Kategorie
Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.
Häufige Fragen
Ist Uxloom sicher?
Er hat 1 von 1 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.
Welche Schlüssel oder Codes braucht er?
Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.
Läuft er auf meinem Computer oder in der Cloud?
Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).
Wird er noch gepflegt?
Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (0.14.0) kam vor 3 Monaten in die Registry.
Welche Apps können ihn nutzen?
Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.
Was kann ich stattdessen nutzen?
In derselben Kategorie: Figma Context MCP, Claude Real Video, Figma MCP Server
Alternativen
Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.
So liest du eine Karte:★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti
Claude Real Video
von HUANGCHIHHUNGLeo
Let any LLM watch a video locally — and search everything it has ever watched.
Läuft auf deinem Computer★ 2.284MITAktualisiert vor 2 Monaten
Installieren
Figma MCP Server
von figma
The Figma MCP server brings Figma design context directly into your AI workflow.
Läuft in der Cloud★ 2.152Aktualisiert vor 13 Monaten
Installieren
README vom Entwickler
README öffnen
Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.
UXLoom
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 ·
Packages
| 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.
Quick start (agents)
# Claude Codeclaude mcp add uxloom -- npx -y uxloom
Codex CLI
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.
Quick start (humans & CI)
npx uxloom init # one-command setup: MCP config + agent skill + starter filenpx uxloom preview # live mocks (themed, commentable, EDITABLE in the browser) npx uxloom export # shareable HTML — plus --svg (Figma/Penpot import; add
--manifest for the round-trip key) and --png (playwright)
npx uxloom check # design completeness — exit 1 on errors, CI-ready npx uxloom audit # implementation drift — web AND native (Swift/Kotlin/
Dart/Java markers); --live verifies the real DOM;
--design audits a Figma/Penpot export vs the contract
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.jsonWorkflow (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.
Does it actually catch things?
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.
Development
npm installnpm run typecheck npm test
Status
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.
License
MIT