Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
AI image generation and editing with Google Gemini. Structured JSON editing.
选择你使用的 AI 应用,然后复制设置。
通过 2/3 项检查 · 在你的电脑上运行
第一步:你用哪个 AI?
选择你用的应用,步骤会显示在下方。
可连接 Claude,但需要先准备
需要 Gemini Image Studio 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次) · 仅限电脑上的 Claude 应用(Windows 或 Mac),网页和手机不可用
SettingsDeveloperEdit Config
正在检查命令 · 通过后才会显示复制按钮
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
用 Gemini Image Studio 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Claude 说正在使用 Gemini Image Studio,或回答中出现 Gemini Image Studio 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Anthropic 帮助页面核实 · 你的界面可能因版本略有不同
ChatGPT 暂时无法连接 Gemini Image Studio
Gemini Image Studio 需要安装在你的电脑上,而 ChatGPT 只能连接在网上运行的服务器
A · 使用能连接 Gemini Image Studio 的应用
B · 设计、图片与音频 类中能连接 ChatGPT 的其他服务器
从同类中使用较多的里挑选,仅限用地址即可连接、无需密钥的
可连接 Claude Code,但需要先准备
需要 Gemini Image Studio 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次)
打开开发者网站,注册账户并创建 API 密钥,下一步要用。价格和免费方案请看开发者网站。
获取密钥的方法见下方开发者的 README
Mac:按 Command+空格,输入 Terminal · Windows:打开 PowerShell
正在检查命令 · 通过后才会显示复制按钮
按 Enter 前,把“your-value”改成你的密钥
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
应能看到 Gemini Image Studio 在列表中并显示已连接
用 Gemini Image Studio 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Claude Code 说正在使用 Gemini Image Studio,或回答中出现 Gemini Image Studio 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Anthropic 帮助页面核实 · 你的界面可能因版本略有不同
可连接 Cursor,但需要先准备
需要 Gemini Image Studio 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次)
打开开发者网站,注册账户并创建 API 密钥,下一步要用。价格和免费方案请看开发者网站。
获取密钥的方法见下方开发者的 README
正在检查命令 · 通过后才会显示复制按钮
在 Gemini Image Studio 的设置中,GEMINI_API_KEY 还是空的,填入你的密钥并保存
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
用 Gemini Image Studio 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Cursor 说正在使用 Gemini Image Studio,或回答中出现 Gemini Image Studio 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Cursor 帮助页面核实 · 你的界面可能因版本略有不同
可连接 VS Code,但需要先准备
需要 Gemini Image Studio 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次)
打开开发者网站,注册账户并创建 API 密钥,下一步要用。价格和免费方案请看开发者网站。
获取密钥的方法见下方开发者的 README
正在检查命令 · 通过后才会显示复制按钮
在 Gemini Image Studio 的设置中,GEMINI_API_KEY 还是空的,填入你的密钥并保存
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
用 Gemini Image Studio 告诉我你能帮我做什么,然后做一件给我看✓ 如果 VS Code 说正在使用 Gemini Image Studio,或回答中出现 Gemini Image Studio 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 VS Code 帮助页面核实 · 你的界面可能因版本略有不同
Claude Code
正在检查命令 · 通过后才会显示复制按钮
Claude Desktop (claude_desktop_config.json)
正在检查命令 · 通过后才会显示复制按钮
Cursor (~/.cursor/mcp.json)
正在检查命令 · 通过后才会显示复制按钮
VS Code (mcp.json)
正在检查命令 · 通过后才会显示复制按钮
GEMINI_API_KEY 机密 必填 env这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
依据这个服务器的连接方式和各应用自己的文档,检查于 2026年11月10日。
在你的电脑上运行,适用于
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月13日
注册名称已通过 GitHub 账户 udhaykumarbala 验证,该账户拥有此仓库
代码最后更新于7个月前,已超过 6 个月
使用 MIT
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
提问、分享技巧或报告无法使用。按“有帮助”数量排序。
还没有评价
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 3 项适用的基础检查中通过了 2 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
你需要填写:GEMINI_API_KEY
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于7个月前,最新版本(1.0.2)于8个月前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Figma Context MCP, AutoClip, Next AI Draw.io
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。
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)