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)
AI image generation and editing with Google Gemini. Structured JSON editing.
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.
GEMINI_API_KEYAls 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": {
"gemini-image-studio": {
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}Führe das in deinem Terminal aus
claude mcp add gemini-image-studio --env GEMINI_API_KEY=your-value -- npx -y gemini-image-studio-mcpTrag die leeren Werte ein, bevor du ihn startest.
In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen
{
"mcpServers": {
"gemini-image-studio": {
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "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": {
"gemini-image-studio": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "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.
Diese 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 8. Nov. 2026
Der Registry-Name wurde mit dem GitHub-Konto udhaykumarbala 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: GEMINI_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 (1.0.2) kam vor 8 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:↓ Downloads pro Wochei★ 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.
MCP server for AI image generation and editing with Google Gemini. Create web assets, ad creatives, and brand visuals — with structured JSON editing for precise, repeatable control.
Most Gemini image MCP servers are basic text-to-image wrappers. This one adds a structured editing pipeline:
subject[0].hair.color: "platinum_blonde" — and regeneratingThis means precise, isolated changes without affecting the rest of the image. Change a hair color without touching the background. Swap clothing without altering the pose. All through dot-notation JSON paths.
Get one free at Google AI Studio.
npm install -g gemini-image-studio-mcp
claude mcp add gemini-image-studio-mcp -e GEMINI_API_KEY=your-key-here -- gemini-image-studio-mcp
Or add to your project's .claude/mcp.json:
{
"mcpServers": { "gemini-image-studio-mcp": { "command": "npx", "args": ["-y", "gemini-image-studio-mcp"], "env": { "GEMINI_API_KEY": "your-key-here" } } } }
Ask Claude to generate images:
"Create a Facebook ad for a coffee shop with warm lighting"
"Generate a hero image for a tech startup landing page"
"Edit the hero image — change the background to a sunset beach"
generate_imageCreate a new image from text or structured JSON prompts.
| Parameter | Type | Required | Description | ||
|---|---|---|---|---|---|
prompt | string | Yes | Text description or JSON prompt | ||
prompt_format | "text" \ | "json" | No | Prompt format (default: "text") | |
preset | string | No | Asset preset (e.g., "facebook_ad", "hero_image") | ||
aspect_ratio | string | No | Override ratio ("1:1", "16:9", "9:16", etc.) | ||
image_size | "1K" \ | "2K" \ | "4K" | No | Resolution (default: "1K") |
model | "flash" \ | "pro" | No | Gemini model (default: "flash") | |
reference_images | string[] | No | Paths to reference images for consistency | ||
output_name | string | No | Custom filename | ||
enable_search_grounding | boolean | No | Use Google Search for accuracy |
decompose_imageAnalyze an image into a structured JSON blueprint — the first step of the edit workflow.
| Parameter | Type | Required | Description | ||
|---|---|---|---|---|---|
image_path | string | Yes | Path to the image | ||
detail_level | "basic" \ | "detailed" \ | "exhaustive" | No | Granularity (default: "detailed") |
Returns a full blueprint with subject, scene, technical, composition, text_rendering, style_modifiers, and meta sections — each field precisely describing the image's visual components.
edit_imageEdit an image using JSON changes or natural language.
| Parameter | Type | Required | Description | |
|---|---|---|---|---|
image_path | string | Yes | Path to the image | |
edit_type | "json" \ | "natural_language" | Yes | Edit mode |
changes | object | For JSON edits | Dot-notation paths to change | |
instruction | string | For NL edits | Natural language instruction | |
blueprint | object | No | Blueprint (auto-loaded from cache if omitted) | |
model | "flash" \ | "pro" | No | Model (default: "flash") |
output_name | string | No | Custom filename |
JSON edit example — change hair color and add sunglasses:
{
"image_path": "/output/portrait.png", "edit_type": "json", "changes": { "subject[0].hair.color": "platinum_blonde", "subject[0].accessories": [ { "item": "sunglasses", "material": "metal", "color": "#C0C0C0" } ] } }
Natural language edit example:
{
"image_path": "/output/portrait.png", "edit_type": "natural_language", "instruction": "Change the background to a tropical beach at sunset. Keep the person exactly the same." }
get_presetsList available asset presets with dimensions, tips, and conventions.
| Parameter | Type | Required | Description | |||
|---|---|---|---|---|---|---|
category | "ad" \ | "web" \ | "social" \ | "all" | No | Filter (default: "all") |
list_generatedBrowse previously generated images.
| Parameter | Type | Required | Description |
|---|---|---|---|
filter | string | No | Search by filename |
limit | number | No | Max results (default: 20) |
include_blueprints | boolean | No | Include cached blueprints |
The key differentiator — precise, field-level image editing:
Step 1: Generate
generate_image(prompt: "Professional headshot, navy blazer", preset: "linkedin_post") → /output/headshot.png
Step 2: Decompose decompose_image(image_path: "/output/headshot.png") → JSON blueprint with every visual component mapped
Step 3: Edit (precise) edit_image( image_path: "/output/headshot.png", edit_type: "json", changes: { "subject[0].clothing[0].color": "#8B0000", "scene.lighting.type": "studio_softbox" } ) → /output/headshot-edit-1.png (blazer changed to dark red, lighting adjusted)
Step 4: Edit (creative) edit_image( image_path: "/output/headshot-edit-1.png", edit_type: "natural_language", instruction: "Add warm bokeh to the background" ) → /output/headshot-edit-1-edit-1.png
subject[0].hair.color → Hair color
subject[0].hair.style → Hair style subject[0].clothing[0].color → First clothing item color subject[0].accessories → Add/change accessories scene.lighting.type → Lighting type scene.location → Location/background text_rendering.text_content → Text in image technical.lens → Camera lens composition.framing → Shot framing style_modifiers.aesthetic → Aesthetic style
| Preset | Category | Aspect Ratio | Dimensions | Best For |
|---|---|---|---|---|
facebook_ad | Ad | 1:1 | 1080x1080 | Facebook/Instagram feed ads |
instagram_story_ad | Ad | 9:16 | 1080x1920 | Instagram/Facebook story ads |
google_display_banner | Ad | 16:9 | 1200x628 | Google Display Network |
hero_image | Web | 21:9 | 2560x1080 | Above-the-fold hero sections |
og_image | Web | 16:9 | 1200x630 | Social share / link previews |
product_card | Web | 4:5 | 800x1000 | E-commerce product grids |
email_header | Web | 3:1 | 600x200 | Email marketing headers |
linkedin_post | Social | 1:1 | 1080x1080 | LinkedIn feed posts |
twitter_post | Social | 16:9 | 1200x675 | Twitter/X posts |
youtube_thumbnail | Social | 16:9 | 1280x720 | YouTube thumbnails |
| Variable | Required | Default | Description |
|---|---|---|---|
GEMINI_API_KEY | Yes | — | Google AI Studio API key |
OUTPUT_DIR | No | ./output | Where generated images are saved |
claude mcp add gemini-image-studio-mcp -e GEMINI_API_KEY=your-key -- gemini-image-studio-mcp
Add to .cursor/mcp.json:
{
"mcpServers": { "gemini-image-studio-mcp": { "command": "npx", "args": ["-y", "gemini-image-studio-mcp"], "env": { "GEMINI_API_KEY": "your-key-here" } } } }
GEMINI_API_KEY=your-key npx gemini-image-studio-mcp
The server communicates over stdio using the Model Context Protocol.
This server also exposes:
| Model | ID | Best For |
|---|---|---|
| Flash (default) | gemini-3.1-flash-image-preview | Fast generation, high volume, cost-effective |
| Pro | gemini-3-pro-image-preview | Best quality, complex scenes, professional assets |
Contributions welcome! Please:
git checkout -b feature/my-feature)npm test)MIT