Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Beschreibung vom Entwickler (englisches Original)
Catch bad animations before they ship. Deterministic motion audit + vision-LLM design review.
Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.
Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.
Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.
ANTHROPIC_API_KEY, OPENAI_API_KEY, GOOGLE_API_KEY, OPENAI_BASE_URLAls geheim markierte Werte sind Schlüssel zu deinem Konto. Gib sie nie weiter und füge sie nie in einen Chat ein.
Du brauchst
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": {
"motionlint": {
"command": "npx",
"args": [
"-y",
"motionlint",
"mcp"
],
"env": {
"ANTHROPIC_API_KEY": "your-value",
"OPENAI_API_KEY": "your-value",
"GOOGLE_API_KEY": "your-value",
"OPENAI_BASE_URL": "your-value"
}
}
}
}Führe das in deinem Terminal aus
claude mcp add motionlint --env ANTHROPIC_API_KEY=your-value --env OPENAI_API_KEY=your-value --env GOOGLE_API_KEY=your-value --env OPENAI_BASE_URL=your-value -- npx -y motionlint mcpTrag die leeren Werte ein, bevor du ihn startest.
In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen
{
"mcpServers": {
"motionlint": {
"command": "npx",
"args": [
"-y",
"motionlint",
"mcp"
],
"env": {
"ANTHROPIC_API_KEY": "your-value",
"OPENAI_API_KEY": "your-value",
"GOOGLE_API_KEY": "your-value",
"OPENAI_BASE_URL": "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.
In .vscode/mcp.json in deinem Projekt einfügen
{
"servers": {
"motionlint": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"motionlint",
"mcp"
],
"env": {
"ANTHROPIC_API_KEY": "your-value",
"OPENAI_API_KEY": "your-value",
"GOOGLE_API_KEY": "your-value",
"OPENAI_BASE_URL": "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.
OPENAI_BASE_URL envDiese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.
Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.
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 7. Nov. 2026
Der Registry-Name wurde mit dem GitHub-Konto bobaba99 bestätigt, dem das Repo gehört
Dieses Repo haben wir noch nicht von GitHub gelesen
Dieses Repo haben wir noch nicht von GitHub gelesen
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen
Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.
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.
Das musst du eintragen: ANTHROPIC_API_KEY, OPENAI_API_KEY, GOOGLE_API_KEY
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).
Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (0.2.1) kam vor 3 Monaten in die Registry.
Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.
In derselben Kategorie: Figma Context MCP, Claude Real Video, Figma MCP Server
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
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.
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.
Score any page's animation quality in one command. No API key, no config.
npx motionlint audit http://localhost:3000 --open
Deterministic — measured from the live page, no LLM involved. One-time prerequisite: npx playwright install chromium .
MotionLint measures the motion your app actually ships — durations, easing curves, stagger intervals, exit timing, reduced-motion support — and scores it against a published set of animation standards. Ease-in on a dropdown, a 600ms modal, a card that scales from 0, hover motion that fires on touch: all caught, all with the measured value and a concrete fix.
The audit is free and offline. Add an API key and MotionLint also does vision-LLM design review — multi-viewport screenshots and 50ms frame bursts of real user journeys, judged by a model and handed back to your coding agent as ranked findings. It runs as an MCP server inside Claude Code and Cursor.
AI coding agents read JSX, HTML, and CSS — they're blind to what the user actually sees, clicks, and watches animate. Rules in a prompt tell the agent what *should* happen; nothing checks what *did*. Modals that should slide in just pop; loading states get omitted; focus rings disappear. Code review can't catch any of this before merge, because none of it is visible in the diff.
MotionLint closes that loop: it measures the running app and feeds the verdict back.
| MotionLint | Visual regression tools (Percy, Chromatic, Playwright snapshots) | AI design generators (v0, Galileo, Claude Design, Stitch) | |
|---|---|---|---|
| Deterministic motion audit | 13 checks, measured from the live page — no API key, $0 | ✗ | ✗ |
| Multi-viewport UX review | ranked findings across 12 dimensions | pixel diffs only | generates new layouts from prompts |
| Animation review | 50ms frame bursts via CDP screencast → contact sheet → LLM | ✗ | ✗ |
| Live animation tuning | Shadow-DOM previews + sliders + Claude Code export | ✗ | generates new motion, doesn't tune what's there |
| Native MCP server | ✓ stdio MCP for Claude Code / Cursor | ✗ | varies |
| CI gate | ✓ SARIF + exit codes for code scanning | ✓ image diff thresholds | ✗ |
| Validated quality | 100% recall on a 24-fixture stress test, across 5 frontier models | n/a | n/a |
The conceptual gap MotionLint closes: visual-regression tools catch what *changed* but not whether the new pixels are *good*; AI design tools generate from scratch but don't review what's already running. MotionLint reviews live behavior with a vision LLM and feeds the verdict back into the coding loop.
npx playwright install chromium # one-time per machine (~300MB)
npx motionlint audit http://localhost:3000 --open
That's the whole setup for the audit. It's deterministic, runs offline, costs nothing, and works on any URL you can load — your dev server, a staging deploy, or someone else's site. Requires Node 18+.
The rules it checks are published in docs/STANDARDS.md — read them before you install anything.
Set one API key (ANTHROPIC_API_KEY, OPENAI_API_KEY, or GOOGLE_API_KEY — or run Ollama locally for free) and three more commands unlock:
npm install -g motionlint
motionlint review http://localhost:3000
motionlint flow --spec flows/signup.json
motionlint tune http://localhost:3000
claude mcp add motionlint -- npx -y motionlint mcp
Full flag surface — CI gates, route discovery, Storybook, dark mode, baselines
# CI mode — non-zero exit on critical issues, SARIF output for code scanning.
motionlint review https://staging.acme.dev --ci --threshold critical --format sarif -o ux.sarif
motionlint review http://localhost:3000 --format html -o review.html
motionlint review http://localhost:3000 --discover-routes
motionlint review http://localhost:6006 --storybook
motionlint review http://localhost:3000 --schemes --forced-colors --format html -o review.html
motionlint review http://localhost:3000 --state-grid
motionlint review http://localhost:3000 --max-findings 5 --new-only
motionlint review https://pr-123.preview.example.com --against https://prod.example.com
motionlint review https://staging.acme.dev --format sarif -o ux.sarif --max-pr-annotations 10
motionlint review http://localhost:3000 --provider anthropic --model claude-sonnet-5
motionlint eval --provider anthropic --evolve
Package on npm: motionlint.
Sample terminal output for a flow review:
$ motionlint flow --spec flows/signup.json --provider anthropic
→ Running flow "signup-happy-path" against http://localhost:3000/signup (11 steps, 50ms intervals × 750ms window) provider: anthropic (claude-sonnet-5) capturing flow… ✓ step 1: 16 frames ✓ step 2: 16 frames ✓ step 3: 16 frames … captured 176 frames in 31s contact sheet → .motionlint/flows/signup-happy-path-…png analyzing flow… report → .motionlint/flows/signup-happy-path.md
Score: 4/10 · 3 critical findings [critical] interaction — input focus rings missing across steps 2/4/6 [critical] interaction — submit button has no pressed state [critical] loading_state — 1.4s wait with no spinner during submit
A multi-route TS animation showcase ships in demo/ — covering Motion One, GSAP, anime.js, @formkit/auto-animate, and lottie-web — including a cat-themed one-pager that exercises every MotionLint capability in a single URL:
node demo/server.mjs # http://localhost:4173
motionlint review http://localhost:4173/cat --record --embed motionlint flow --spec flows/signup.json motionlint tune http://localhost:4173/dashboard
Routes available: /, /pricing, /signup, /dashboard, /loading, /cat. Reports go to .motionlint/reports/, screenshots to .motionlint/screenshots/, videos to .motionlint/videos/.
MotionLint auto-loads a .env file from the working directory at startup:
# .env (gitignored)
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...
GOOGLE_API_KEY=...
Real environment variables take precedence over .env. With no key set and no Ollama running, MotionLint falls back to a deterministic mock provider so the full pipeline (capture → analysis → report) still runs end-to-end for smoke tests.
MotionLint auto-detects in this order: Ollama (local) → Anthropic → OpenAI → Google. The first one with a working API key (or running service) wins. Override with --provider and --model . See Providers in depth for the per-provider quality scorecard and how to pick.
*Everything below is for readers who want to understand how MotionLint works under the hood, pick the right provider for their workflow, or wire it into CI.*
The flow-review pipeline was stress-tested across 12 popular web-app animation patterns × 2 variants (24 fixtures total) — staggered entrances, hover/press/focus, modal entrances, loading skeletons, form errors, toasts, counter ramps, multi-animation dashboards, modal-with-content stagger, rich form feedback (focus + press + spinner + success), and scroll-driven animations (progress bar + IntersectionObserver reveal + parallax).
Run on 2026-07-27 against the current flagship from each major provider:
| Provider · model | Recall (broken caught) | FPR (clean flagged) | Score gap | Wall time |
|---|---|---|---|---|
| OpenAI · gpt-5.6-sol | 100% (12/12) | 0% (0/12) | +3.3 | 10.9 min |
| OpenAI · gpt-5.5 | 100% (12/12) | 0% (0/12) | +3.3 | 11.5 min |
| Anthropic · claude-opus-5 | 100% (12/12) | 8% (1/12) | +4.1 | 21.0 min |
| Google · gemini-3.6-flash | 100% (12/12) | 17% (2/12) | +5.1 | 4.9 min |
| Anthropic · claude-sonnet-5 | 100% (12/12) | 33% (4/12) | +3.1 | 10.8 min |
Read this as: recall is no longer a differentiator. Every current flagship catches all 12 seeded faults. That is the finding — a year ago it wasn't true, and it means the model choice no longer decides whether MotionLint works. Pick on cost and latency.
Do not rank these models on the FPR column. A single 24-fixture run cannot resolve it. Across two clean runs of the identical suite, with nothing changed but sampling, FPR moved by 1–2 fixtures per model — gpt-5.5 1/12 → 0/12, gpt-5.6-sol 2/12 → 0/12, gemini-3.6-flash 3/12 → 2/12. One fixture is 8 percentage points, so the entire spread between "0%" and "17%" sits inside the noise floor. Treat the column as *"all of these occasionally flag something clean"*, not as a ranking.
Why the older numbers in this table's history were wrong
The first 2026-07-27 run of this suite put claude-opus-5 at 83% recall — last among all five models — and the 2026-04-29 edition of this table reported several models at 0% FPR. Both were artifacts of a MotionLint bug, not model behaviour.
Anthropic's max_tokens defaulted to 4096. Verbose responses hit the ceiling mid-JSON, and the unparseable result was scored as 0/10, no issues found — indistinguishable from a clean review. Two of Opus 5's three truncations landed on broken fixtures, which produced the entire 83% figure.
The same bug deflated FPR everywhere: a truncated review reports *nothing*, so it cannot raise a false positive. Any historical "0% FPR" was partly measuring broken parsing rather than model precision. Fixed 2026-07-27, along with the sibling paths that turned truncated, refused, and safety-blocked responses into clean-looking results.
Full per-provider scorecards in .motionlint/stress/ after running scripts/run-all-benchmarks.mjs. Use --only : to re-run a single model.
| Provider | Model | Setup | Quality (24 fixtures) | Cost per review¹ |
|---|
| google | gemini-3.6-flash | `GOOGLE_API
Nur der Anfang wird gezeigt; den Rest findest du im Repo