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)
A UI design library and skill for agents, with a page review for AI giveaways, SEO, AEO, and GEO.
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.
DESIGN_LOUNGE_SKILL_INSTALL, DESIGN_LOUNGE_HISTORYDu brauchst
Welche App nutzt du?
Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.
Funktioniert in Claude im Web, auf dem Desktop und auf dem Handy:
https://www.designlounge.live/api/mcpÖffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein
{
"mcpServers": {
"design-lounge": {
"command": "npx",
"args": [
"-y",
"design-lounge-mcp"
],
"env": {
"DESIGN_LOUNGE_SKILL_INSTALL": "your-value",
"DESIGN_LOUNGE_HISTORY": "your-value"
}
}
}
}Führe das in deinem Terminal aus
claude mcp add --transport http design-lounge https://www.designlounge.live/api/mcpclaude mcp add design-lounge --env DESIGN_LOUNGE_SKILL_INSTALL=your-value --env DESIGN_LOUNGE_HISTORY=your-value -- npx -y design-lounge-mcpTrag die leeren Werte ein, bevor du ihn startest.
In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen
{
"mcpServers": {
"design-lounge": {
"url": "https://www.designlounge.live/api/mcp"
}
}
}In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen
{
"mcpServers": {
"design-lounge": {
"command": "npx",
"args": [
"-y",
"design-lounge-mcp"
],
"env": {
"DESIGN_LOUNGE_SKILL_INSTALL": "your-value",
"DESIGN_LOUNGE_HISTORY": "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": {
"design-lounge": {
"type": "http",
"url": "https://www.designlounge.live/api/mcp"
}
}
}In .vscode/mcp.json in deinem Projekt einfügen
{
"servers": {
"design-lounge": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"design-lounge-mcp"
],
"env": {
"DESIGN_LOUNGE_SKILL_INSTALL": "your-value",
"DESIGN_LOUNGE_HISTORY": "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.
ChatGPT verbindet sich nur mit Servern im Internet:
https://www.designlounge.live/api/mcpMenünamen können sich je nach Tarif und mit der Zeit leicht unterscheiden.
Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.
DESIGN_LOUNGE_SKILL_INSTALL envDESIGN_LOUNGE_HISTORY envDiese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.
Tool-Namen und -Beschreibungen genau so, wie der Server sie am 7. Nov. 2026 gemeldet hat. Geschrieben hat sie der Entwickler, nicht wir; wir zeigen sie als reinen Text.
start_designCall first for any new website, app, screen, or UI. Reads their request the way the method does (flow, mode, named style, calm words), ranks the recipes, reads the project folder and the recent picks, and returns the brief to fill and the steps, each naming the tool to use.
get_recipeA recipe (start) with its directions: each a complete look (theme, pairing, family, hero, effect, work, footer). Each direction says whether the recent history blocks it.
pick_directionApply rules 3 to 5 of Pick a direction and the Recent picks check: calm words narrow to quiet, editorial, or sharp families; the history blocks recent directions, heroes, and effects; the group check blocks two-of-three matches; the name number breaks the tie. You judge which dir
check_pickThe uniqueness check from Recent picks: direction, hero, and effect against this recipe; two of hero, work, footer against the related group; hero shape against the last two; frame against the last three. Returns problems and the Unlike line for the sheet.
search_piecesSearch 600+ piece briefs by words (job, component, style, tag) and filters. Returns ids, summaries, and demo links. Then get_piece for the brief.
get_pieceThe spec for one piece, with a picture of its demo: structure, counts, sizes, motion timing, states, hit targets, acceptance checklist. By default stops at "Optional below this line"; full=true adds the demo's exact paint and motion notes. demo=true adds the demo's HTML source, t
browse_libraryList themes, pairings, families, recipes, piece categories, collections, or kinds. Themes and pairings can be ranked by a mood ("warm craft", "editorial serif", "dark technical").
get_themeA theme's full CSS (primary, secondary, tertiary, feedback, surfaces, link) and its pair for the other mode. Colour only: fonts come from the pairing, radius and shadow from the family.
get_pairingA pairing's CSS (Google Fonts import, --font-display, --font-text, mono if any), its numbers face, and any caution to say before you write.
get_familyA family's rules: radius, button style, density, shadow, and the sentences that lock them. The family wins over a brief for radius, shadow, button, and density.
get_iconsSVG for Lounge Icons by name (24px, stroke 1.75). With no names, lists them by group. Missing names come back as missing: then follow Icon and nav in components.md, never an emoji.
search_wadaSanzo Wada's 348 combinations, by colour or material word (russet, slate, "dark warm") or nearest to a hex. Only for Free colour, a brand board no theme fits, or colours they asked for. Take one line whole; the header says how to map it to roles.
read_guideRead a method file or one section of it. Files: SKILL.md, app.md, brief.md, components.md, examples.md, flows.md, locale.md, native.md, practice.md, reference.md, search.md, show.md, styles.md, taste.md, website.md. Give a heading ("Look", "Write the idea", "Recent picks") to get
name_numberThe tie-break from rule 5 of Pick a direction: the sum of each letter's place in the alphabet, mod the number of fitting directions.
review_pageThe all-in-one check for a built page: AI giveaways and kit drift (the Look fails), SEO, AEO, GEO, and, when Chromium is available, a rendered pass at 1280×800 and 390×844 with axe accessibility, measured labels, faces, primaries, tap targets, and saved screenshots. Returns score
audit_slopDesign only: the tells of a generated page (stock copy, em dashes, buzzwords, icon-card trios, gradients, the indigo palette, emoji icons, numbered eyebrows, placeholder copy, made-up numbers) and drift from the locked kit (faces, colours, radius, shadow). Static by default; rend
audit_searchWhether search engines can index the page and show it well (SEO), answer engines can lift a direct answer (AEO), and AI engines can reach it, read it without JavaScript, and name the entity (GEO): title, description, headings, alt, share card and its 1200×630 image, canonical, ro
suggest_schemaJSON-LD for the page built only from facts on it: the entity (Organization, LocalBusiness subtypes, Person, Product, SoftwareApplication) with name, url, description, image, phone, email, address, sameAs; and FAQPage from its own questions. Lists the fields it could not find. Nev
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 SusanAcharya 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
Antwort in 188 ms (HTTP 200)
Keine Anmeldung nötig
Wir haben 18 Tool-Beschreibungen gelesen und keine versteckten Anweisungen an die KI gefunden
Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.
Er hat 3 von 3 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.
Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.
Beides geht: Installiere ihn auf deinem Computer oder verbinde dich mit der Cloud-Version.
Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (0.2.7) kam gestern in die Registry.
Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Er verbindet sich per URL, also funktionieren auch Apps, die Remote-MCP-Server akzeptieren, zum Beispiel ChatGPT im Entwicklermodus.
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.
Design Lounge as an MCP server. Your agent can:
The server reads the same skills/design-lounge folder as the skill, so the rules live in one place. The skill is the method. The server does the parts that prose cannot: search, deterministic picks against the history, pictures of every piece, theme, and pairing, and checks that read and render the page.
Installing the server installs the skill. When the server starts, it puts the skill in ~/.agents/skills/design-lounge and links it into the skills folder of each client on the machine: Claude Code (~/.claude/skills), Cursor (~/.cursor/skills), and Codex (~/.codex/skills). That is the same layout the skills CLI uses. Clients that load skills then have the whole method before they design. Reload the client once after the first start.
npx skills add or a hand edit, and says so. install_skill with replace: true swaps it for the server's copy.install_skill with project_path also copies it into a project's .claude/skills, .cursor/skills, and .agents/skills, for clients that only read project skills.start_design returns the rules that must hold (their words win, the Rules list, and the Look fails), read from the same files, and read_guide serves the rest.DESIGN_LOUNGE_SKILL_INSTALL=off turns the install off.Claude Code
claude mcp add design-lounge --scope user -- npx -y design-lounge-mcp@latest
Cursor (~/.cursor/mcp.json), Windsurf, Claude Desktop (claude_desktop_config.json), and other clients that take this shape:
{
"mcpServers": { "design-lounge": { "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] } } }
VS Code (.vscode/mcp.json):
{ "servers": { "design-lounge": { "type": "stdio", "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] } } }
Codex (~/.codex/config.toml):
[mcp_servers.design-lounge]
command = "npx" args = ["-y", "design-lounge-mcp@latest"]
@latest makes each start check for a new release, so library updates reach you without reinstalling. Reload the client once after the first start, so it picks up the skill the server installs.
The rendered checks (screenshots, axe, measured labels and buttons, theme boards and type specimens) need a headless Chromium. Ask your agent to run install_browser once (about 100 MB), or run npx playwright install chromium --only-shell. Without it, every other check still runs, and the report says it did not look.
Hosted, for Claude.ai, ChatGPT, and other clients that cannot run a local program: add https://www.designlounge.live/api/mcp as a custom connector (Streamable HTTP, no sign-in). It has the library, start_design, the picks, and the static review of public URLs or pasted HTML. It leaves out what needs your machine: file paths, the history file, the skill and browser installs, and the rendered checks. It fetches only public addresses and allows 60 requests a minute per address. Pass your own recent picks as history if you keep them.
To run it from a clone of the repo instead: cd mcp && pnpm install, then use node /path/to/designs/mcp/src/server.mjs as the command.
| Tool | What it does |
|---|---|
start_design | Call first. Reads their words (flow, mode, named style, calm words), ranks recipes, reads the project folder and the recent picks, and returns the brief and the steps |
get_recipe | A recipe's directions, each marked when the history blocks it |
pick_direction | Calm-word filter, the history, the group check, then the name number. You pass the directions that fit |
check_pick | The uniqueness check for hero, work, footer, shape, and frame. Returns the Unlike line |
record_pick | Appends a claimed or finished line to ~/.design-lounge/history.jsonl and reports an earlier claim |
search_pieces / get_piece | Find a piece and read its brief. get_piece attaches the demo's thumbnail, and demo: true adds its HTML source. search_pieces with images: true attaches the first six thumbnails |
browse_library | Themes and pairings by mood, plus families, recipes, categories, collections, kinds, motion, and scales |
get_theme / get_pairing / get_family | The locked tokens and rules, as CSS. A theme comes with a board of its roles, and a pairing with a type specimen |
get_icons / search_wada | Lounge Icons as SVG. Wada's combinations by word or by nearest hex |
read_guide | Any method file, or one section of it |
review_page | Everything at once: design, accessibility, SEO, AEO, GEO. Fails come first, each with its evidence and fix. The web and phone frames come back as images |
match_reference | They show a site or a screenshot and want that feel. Measures its colour roles, type, corners, shadows, density, hero shape, sections, and motion, and names the closest theme, pairing, family, and pieces. It matches the feel; it never copies the site |
install_skill | Install the skill in a project, or replace a user copy installed another way |
install_browser | Download the headless Chromium the rendered checks use, once |
audit_slop | Design only: AI giveaways and kit drift |
audit_search | SEO, AEO, and GEO only |
suggest_schema | JSON-LD built only from facts on the page, with the missing fields listed |
Every review tool takes path (a file, or a folder with index.html), url (live or localhost), or html. For a path, it reads DESIGN.md beside the page or above it to learn the locked theme, pairing, family, Free mode, and Named aesthetic. A Named aesthetic lifts the bans it lists.
The server also offers three prompts, design, review, and deslop, and the method files as resources at lounge://guide/ .
~/.agents/skills/design-lounge and links it into ~/.claude/skills, ~/.cursor/skills, and ~/.codex/skills for the clients you have. A copy it did not make is never replaced. DESIGN_LOUNGE_SKILL_INSTALL=off turns this off. To remove it, delete those folders.record_pick appends a line to ~/.design-lounge/history.jsonl, so two sites you make do not come out alike. Nothing else reads it.~/.cache/design-lounge/boards. Screenshots go to your temp folder, or to out_dir.| Variable | Default |
|---|---|
DESIGN_LOUNGE_SKILL | The bundled skill/, then ../skills/design-lounge |
DESIGN_LOUNGE_HISTORY | ~/.design-lounge/history.jsonl |
DESIGN_LOUNGE_SKILL_INSTALL | on. Set off to skip installing the skill |
DESIGN_LOUNGE_ASSETS | The bundled assets/, then the repo's public/thumbs and src/demos, then the live site |
DESIGN_LOUNGE_CACHE | ~/.cache/design-lounge/boards, for rendered theme boards and specimens |
pnpm test # unit tests and a stdio round trip
pnpm release patch --dry-run # sync the skill, test, and pack, without publishing node test/client.mjs # list the tools node test/client.mjs review_page '{"path":"test/fixtures/slop.html"}'
pnpm release patch (or minor, major, x.y.z, with --otp for npm 2FA) syncs the skill from the library, runs the tests, bumps package.json and server.json together, publishes to npm and the MCP Registry, then commits and tags. It never pushes.
pnpm pack first copies the skill folder into skill/, and the thumbnails and demos into assets/ (scripts/bundle.mjs), so the published package carries the library and the pictures. About 12 MB packed.
Designed using Design Lounge by Susan Acharya.