figma-jev-console
Provides a two-way bridge between a running app and Figma, allowing screens to be pushed into Figma as auto-layout frames and Figma design edits to be written back to the app's source code in real time.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@figma-jev-consolePush the app's current screen into Figma as auto-layout frames."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Figma JEV Console MCP
A live, two-way bridge between your running app and Figma. Push the screens of a coded app into Figma as auto-layout frames. After that, a change you make in Figma is written into the code about 150 ms later, and a change in the code updates the same Figma frames in place.
Figma JEV Console MCP is a fork of Figma Console MCP by Southleft. It keeps the parts that made that project work well: an MCP server, a Figma Desktop plugin that talks to it over a local WebSocket, a stable plugin install path, and an escape hatch for raw Plugin API code. It adds one thing the original does not do: it treats the app's code and the Figma file as one design, and keeps them in sync while you work.
What is this?
It connects Claude (or any MCP client) to Figma and to your app's source code:
📥 Code → Figma push. Each route of a running app is rendered in headless Chrome and rebuilt in Figma: every container is an auto-layout frame, sizes are hug / fill / fixed as the CSS says, and coded components become Figma components with variants.
✏️ Figma → code, live. Change padding, gap, direction, alignment, sizing, fills, text, type, radius, borders, shadows or opacity in the Design panel, and the edit lands in the right file and line: a Tailwind class, a CSS declaration, an inline style, a JSX string or a component prop at its usage site. Your dev server's hot reload shows it.
🔁 Code → Figma, live. Edit the code (you or Claude) and the Figma screens update in place. Layer ids, comments, prototype links and layers the designer added survive.
🧱 New layers become code. Draw a frame, text, shape, vector or instance inside a pushed screen and it is written into the code; a component made in Figma gets its own file. Deleting, reordering and moving linked layers is written too.
💸 No Claude tokens for small edits. Rules write the edits. A small local model (Kev-0.8B, runs on your Mac) only settles ties, such as two code lines that match a layer equally well.
🤖 Fine-tune with LLM. Anything the rules cannot write is collected in a changelog. One button in the plugin hands it to the Claude session running the server, and the plugin shows Claude's progress.
🎨 Design-system build skill.
figma-system-buildbuilds or tidies screens in Figma with every color, text style, spacing, radius and icon bound to variables.
Related MCP server: Sunnyside Figma MCP
How it differs from Figma Console MCP
Figma Console MCP | Figma JEV Console MCP | |
Main job | Give AI full access to Figma: extraction, creation, tokens, audits, debugging | Keep a running app and its Figma screens in sync, both ways |
Source of truth | The Figma file | The app's code and the Figma screens, kept equal |
Code → Figma | Tokens and components via tools | Whole screens, rendered from the running app, as auto-layout frames |
Figma → code | Token export and sync | Every Design-panel edit written to the exact source line, live |
Figma plugin | Figma Desktop Bridge, ports 9223–9232 | Jev Bridge, ports 9340–9344 |
Stable plugin path |
|
|
Models | None needed | Optional local tie-breaker (Kev-0.8B, MLX); Claude only on request |
Tool count | 120+ | 12, focused on sync |
The two run side by side without conflict: different plugin, ports, server name and skills. Use Figma Console MCP to explore a file, manage variables or audit a design system; use Figma JEV Console MCP when the screens already exist as code and you want to design on top of them.
✅ Works with
Status | |
Vite + React + Tailwind CSS v3/v4 | Tested (end-to-end test suite) |
Plain HTML + CSS | Tested (end-to-end test suite) |
Vite + vanilla JS with CSS files | Used on a real app |
Next.js, Remix, Vue, Svelte, Angular | Not tested yet. The capture works on any page Chrome can render; writing edits back relies on finding the element in the source, which should work for JSX and HTML-like templates but is unproven. Reports welcome. |
CSS-in-JS (styled-components, Emotion), CSS Modules | Not tested. Edits the rules cannot place go to the changelog. |
macOS (Apple Silicon) | Tested, including the local model |
macOS (Intel), Windows, Linux | Server not tested; the local model does not run there (rules only). |
⚡ Quick start
Prerequisites
Node.js 20+ (
node --version)Figma Desktop (the plugin needs it; the web app cannot reach localhost)
Google Chrome (headless capture uses it; set
JEV_CHROME_CHANNELfor another channel)Claude Code or another MCP client
For the local model: a Mac with Apple Silicon, about 2 GB of disk and 1.5 GB of free memory. Without it, everything still works on rules; ties wait for your review instead.
Step 1: Get the code
Not on npm yet. Clone the repository:
git clone https://github.com/anuragfolio/figma-jev-console-mcp.gitcd figma-jev-console-mcp && npm installStep 2: Add it to Claude Code
As a Claude Code plugin (MCP server + both skills in one install):
claude plugin marketplace add anuragfolio/figma-jev-console-mcpclaude plugin install figma-jev-console@figma-jev-consoleOr as an MCP server only:
claude mcp add figma-jev-console -s user -- node "/path/to/figma-jev-console-mcp/bin/figma-jev-console-mcp.js"Cursor / Windsurf / Claude Desktop: add to your MCP config file:
{
"mcpServers": {
"figma-jev-console": {
"command": "node",
"args": ["/path/to/figma-jev-console-mcp/bin/figma-jev-console-mcp.js"]
}
}
}The launcher installs dependencies on its first run if node_modules is missing.
Step 3: Import the Figma plugin
Start your MCP client once, so the server runs and writes the plugin files.
In Figma Desktop: Plugins → Development → Import plugin from manifest…
Select
~/.figma-jev-console/plugin/manifest.json. The server refreshes this copy on every start, so the path never changes.Run Plugins → Development → Jev Bridge. It finds the server on ports 9340–9344.
Plugin updates. Figma caches plugin files. After updating the server, close and reopen Jev Bridge to load the new
code.jsandui.html. The panel says so when its version is behind the server's.
Step 4: Install the local model (optional, Apple Silicon)
The first time Jev Bridge opens, it offers to install Kev-0.8B (about 1.7 GB) next to the manifest, with a progress bar and log. After that the normal panel appears. The model starts only when an edit needs it and stops after 5 idle minutes.
Step 5: Try it
Start your app's dev server, then ask Claude:
Push this app to Figma→ The screens appear on the current page. Change a padding or a text in Figma and watch the app update.
🧭 Using it
The plugin panel
Header: the app URL of the selected screen (click to open it), the server port, and an arrow that collapses the panel to just the header.
LIVE: on by default. Edits are written about 150 ms after you stop changing a layer; the second line shows the last one, e.g.
✓ text → "Log in" in index.html:11 · 4 ms. Switch it off to pause; paused edits are written when you switch it back on.Local model: its state (off, starting, running) and how much memory it and the Mac use.
Screens: every pushed screen whose app is running, with its URL. Click one to jump to it in Figma. While a push or fine-tune runs, this area shows its progress.
Fine-tune with LLM: hands the leftovers to Claude (see below).
Live sync
Figma → code: every Design-panel field is read and written (
jev_contractlists the table). Tailwind v3/v4 utilities, CSS rules, inline styles, JSX text and component props at usage sites are all handled.Code → Figma: a code change redraws only what changed. A layer you are editing, or edited in the last 4 seconds, is left alone.
The screen is the truth. Sizes come from layers on the screen (instances in their real parent), never from main components sitting alone in the Components section. Style edits on a main component go to the component's file, so every instance follows.
Restarts are safe. Pushed frames store their app URL, project folder and viewport. When the plugin reconnects to a restarted server, live sync resumes by itself. An edit counts as synced only after the server confirms it, so an edit is never lost to a restart.
Git is your undo. Edits are written straight into your source files. When sync starts, the panel warns if the project is not a git repository, or has uncommitted changes, so you can commit first and undo any edit with git.
Several Claude sessions: each runs its own server. The plugin checks every port and uses the one with a live session, or else the newest.
Fine-tune with LLM
Whatever the rules cannot write goes to a changelog (layer code, Figma node id, file:line
hint, reason; jev_changelog). Fine-tune with LLM compares every linked layer with what
was last synced, adds the changelog, and sends that brief to the Claude Code session running
the server. Only then are Claude tokens spent. Claude reports each step with jev_progress,
and the plugin shows those lines; when it calls jev_progress { done: true }, the changelog
is cleared and Figma is redrawn from the code.
The hand-off uses Claude Code channels (a research preview). With the server added by
claude mcp add, start Claude Code like this:
claude --dangerously-load-development-channels server:figma-jev-consoleWithout it the brief does not reach Claude, and after 60 seconds the panel says so.
JEV_FINE_TUNE=headless uses a separate claude -p run instead.
🧩 Skills
Two skills ship in skills/. The Claude Code plugin installs both; to use them without the
plugin, copy the folders into ~/.claude/skills/.
Skill | Use it for |
| Pushing an app to Figma, live sync, and what to do when an edit did not reach the code |
| Building or tidying screens in Figma by hand, with every color, text style, spacing, radius and icon bound to variables; Phosphor icon set; a lint pass instead of screenshots |
figma-system-build runs its Plugin API scripts through jev_execute (or figma_execute from
Figma Console MCP). Pushed screens copy raw values from CSS; binding them to variables with
this skill is design work on top, and the sync compares values, so it writes nothing to the
code unless a value changes.
🛠️ Tools
Tool | Purpose |
| Plugin connection, model backend, live session |
| Push routes to Figma and start live sync |
| Write queued edits, then refresh screens from code |
| Edits that need a decision |
| What the rules could not write, with a ready prompt |
| Claude reports fine-tune steps to the plugin |
| Applied edits with file:line and who decided |
| Layer code → file:line |
| The CSS ↔ Figma property table |
| Stop watching and close the browser |
| Run raw Figma Plugin API code (escape hatch) |
⚙️ How it works
Step | Done by |
Render each route in headless Chrome, read layout and computed CSS | code ( |
Copy padding, gap, colors, type, radius, borders, shadows into Figma | code (fixed table in |
Direction (HORIZONTAL / VERTICAL / WRAP), hug / fill / fixed, components | rules from CSS and measured layout |
Find the source line or CSS rule for an edited layer | rules; the local model only on a tie |
Write the edit (Tailwind class, CSS declaration, inline style, text) | code ( |
Anything left over | the changelog, then Claude on request |
Layer names are short codes such as @a3.0.2.1: screen a3, then the element's index
among its parent's element children at each DOM level (base 36). :t is the text inside a
boxed element. The code is also stored in plugin data, so moving a layer does not change what
it points to. Screen frames keep their route name.
Updates are in place. Layers are matched to elements by a content fingerprint (tag, classes, text, component), then by code, then by position. Each update is one undo step.
New layers: a frame becomes a flex div, a text layer a text element, an instance of a
pushed component <Button variant="primary">…</Button> with its import, a component made in
Figma a new file in src/components/, and a frame wrapped around linked layers (Shift+A) a new
wrapper around the existing code.
Deletes, reorders, moves, vectors: a deleted layer's element (or data-list item) is
removed; reordered layers move their code blocks; a layer dragged into another linked frame
moves its code; vectors become inline <svg>; a variant swap driven by an expression maps to
its condition.
🧠 Local model
Ties go to Kev-0.8B (weights), a Jev-compatible decision model running on the Mac with MLX, installed from the plugin's setup screen.
Starts on demand (about 8 seconds the first time), stops after 5 idle minutes.
Will not start when less than 12% of memory is free, and is stopped if memory stays that low while the Mac starts swapping.
Memory use is logged every 10 seconds to
~/.figma-jev-console/sync.logwhile it runs.Any server that speaks the same
/v1/systemoneformat can replace it (JEV_LOCAL_URL), including TypeSafe's cloud Jev (TYPESAFE_API_KEY, optional).
🔧 Configuration
Set in .env next to package.json, in ~/.figma-jev-console/.env, or in your MCP client's
env. Keep keys out of version control.
Variable | Default | Meaning |
|
| WebSocket ports for Jev Bridge |
|
|
|
|
| Local Jev-compatible server |
| none | Optional cloud Jev key |
|
| Minimum confidence to write a tie-broken edit without review |
|
| Minutes before the idle local model stops |
|
| Memory floor for starting or keeping the local model |
|
| Chrome channel for headless capture |
| channel |
|
|
| Where the plugin files are kept |
|
| Where the local model is installed |
🧪 Tests
npm testRuns every end-to-end scenario: the real MCP server on a test port (JEV_PORTS=9390, so a
Jev Bridge open in Figma is not touched), a fake plugin, a push, Figma-style edits, and the
resulting source files. One scenario:
FIXTURE=fixture-react SCENARIO=scenario-react.mjs node test/e2e.mjstest/live-harness.mjs runs a fixture against real Figma.
🩺 Troubleshooting
The panel says "Looking for server…" or "Server offline". The MCP server is not running.
It starts with your MCP client: restart Claude Code (or your client) and check that
figma-jev-console is listed (claude mcp list). Ports 9340–9344 must be free for at least one
server; lsof -i :9340 shows what holds a port.
The plugin connected to the wrong server. Every Claude session starts its own server. The plugin prefers the one with a live session, else the newest, and re-checks every 15 seconds. If it still picks an old one, close the other Claude sessions or reopen the plugin.
"Jev Bridge is out of date". Figma is running a cached copy of the plugin. Close the
plugin and open it again (Plugins → Development → Jev Bridge). If the notice stays, re-import
~/.figma-jev-console/plugin/manifest.json.
"Could not start Chrome". Install Google Chrome, or point JEV_CHROME_CHANNEL at another
Chromium channel you have (chrome-beta, msedge).
A Figma edit did not reach the code. Ask Claude "why didn't my edit sync?": the skill
reads jev_list_pending. Common reasons are a design token (it asks whether to change the
token or just this element) or a value built from variables in the code. Anything left over
goes to Fine-tune with LLM.
Screens are missing from the panel's list. Only screens whose app answers at their URL are listed. Start the app's dev server; screens pushed by early versions store no URL and stay hidden until you push them again.
Fine-tune with LLM says "No reply from Claude". Claude Code must be started with
channels on: claude --dangerously-load-development-channels server:figma-jev-console. Or set
JEV_FINE_TUNE=headless to use a separate claude -p run.
The local model does not start. It needs Apple Silicon and at least 12% free memory.
The panel shows the reason; the log is ~/.figma-jev-console/sync.log. Start again
retries without downloading anything.
Undo an edit. Figma's undo changes the layer back, and the sync writes that like any
other edit. For the code itself, use git (git diff, git checkout -- <file>).
Known limits
One viewport per session; hover and focus states, animations and icon fonts are not pushed.
::before/::aftertext (such as a placeholder) is drawn but not written back.Showing a hidden data item again, and moves or reorders across files, go to the changelog.
Block layouts with uneven margins use the median spacing as the auto-layout gap, so a few pixels can shift.
Instances cannot change structure; a component rendered with different children becomes separate variants.
The local model needs Apple Silicon.
Credits and license
MIT, see LICENSE. A fork of Figma Console MCP
by Southleft and its contributors (MIT). Tie-breaking model: Kev
by Jared Palmer. Icons in figma-system-build: Phosphor.
Available Tools
12 toolsjev_changelogB
Figma changes that need an LLM to finish in code (deletes, moves, reorders, expression-driven variants, anything the rules and Jev could not write), with layer codes, Figma node ids, code hints and a ready prompt.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It does explain what the changelog contains and what data accompanies each item, but it never explicitly states whether this is a read-only retrieval operation, whether it returns a list, or what side effects, if any, might occur.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single dense sentence with no filler. The core subject is front-loaded, and the parenthetical list plus trailing data fields earn their place by conveying scope and expected content efficiently.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter tool, the description covers the main data categories well, but it omits an explicit action verb and any guidance on how the returned changelog relates to sibling workflows. Since there is no output schema, the description should more clearly state what invoking the tool returns.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters and the schema covers 100% of them, so the description does not need to explain parameter meaning. It adds value by describing the content fields that will come back, though that is more about output than parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the resource: Figma changes that need an LLM to finish in code, including specific categories and attached data. It does not use an explicit verb like 'list' or 'retrieve,' so it stops short of a fully specified action, but the intent is unambiguous from the name and content description.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no explicit guidance on when to use this tool versus alternatives such as jev_list_pending or jev_resolve_pending. The phrase 'anything the rules and Jev could not write' implies a boundary, but the description does not state when an agent should choose this changelog over sibling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_contractA
The CSS ↔ Figma property table the sync supports, and which direction each property syncs.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the behavioral burden. It clearly signals that this is an informational reference table rather than a mutating operation, but it does not explicitly state that invoking the tool causes no side effects or describe the return format.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, tightly written sentence that front-loads the resource and then specifies the key information about sync direction. Every word contributes useful meaning and there is no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (no parameters, no output schema), the description covers the core purpose and content well. It could be slightly more complete by explicitly stating what a caller receives upon invocation, but that is a minor gap for an informational reference tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so there is no parameter information the description needs to add. The baseline of 4 applies, and the description adequately explains the tool's focus without needing to compensate for schema gaps.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description identifies a specific resource: the CSS↔Figma property table, and states the content it exposes (which direction each property syncs). This makes it clearly distinct from sibling tools like jev_sync_now or jev_status, though it lacks an explicit action verb such as 'returns' or 'lists'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool is used to look up the supported property mapping and sync direction for the CSS↔Figma integration. It does not explicitly state when to use this tool versus alternatives, nor does it provide any exclusions or conditions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_executeA
Escape hatch: run Figma plugin API code inside the Jev Bridge plugin (async function body with figma in scope; return a JSON-serializable value).
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden of behavioral disclosure. It usefully explains that the input is an async function body with `figma` in scope and that the return value must be JSON-serializable, but it does not disclose potential side effects, destructive document changes, error behavior, or permission implications of executing arbitrary code.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single compact sentence that front-loads the core idea ('Escape hatch') and packs all necessary constraints into a small amount of text. Every clause earns its place, with no filler or redundant repetition of the tool name.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema, no annotations, and a single undocumented parameter, the description provides the essential invocation contract: input format, execution context, and return serialization. However, it omits error handling semantics, side-effect warnings, and any indication of what happens on invalid or non-serializable returns, leaving noticeable gaps for an arbitrary-code execution tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema only describes `code` as a string with 0% description coverage, so the description must compensate. It does by explaining that the code is an async function body, runs inside the plugin with `figma` available, and must return a JSON-serializable value, which adds meaningful meaning beyond the raw schema type.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific action ('run Figma plugin API code') and a specific resource/context ('inside the Jev Bridge plugin'). It also frames itself as an 'escape hatch', which clearly distinguishes it from the more specialized sibling tools by presenting it as the generic fallback for arbitrary code.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The term 'escape hatch' gives clear contextual guidance that this tool is for cases where the dedicated sibling tools do not apply. It does not explicitly name alternatives or exclude conditions, but the implication is strong enough for an agent to infer when to use it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_list_pendingA
Figma edits that were not written to code automatically (Jev was unsure where they go, or a design token is involved), with the reason for each.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the behavioral disclosure burden. It does convey what items appear and that each includes a reason, but it does not explicitly state that the operation is read-only or describe the output format. For a list tool this is a moderate gap rather than a serious one.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is short and front-loads the main subject while adding a meaningful qualifier about reasons. It would be slightly stronger with an explicit verb like 'Lists,' but there is no unnecessary content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a no-parameter read-oriented listing tool with no output schema, the description covers what is listed and why each item is pending. It omits output-structure details and sibling routing, but those are not essential at this complexity level.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the schema provides complete coverage and the description has no parameter-level burden. The description still usefully characterizes what domain concept the tool returns.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names the specific resource ('Figma edits that were not written to code automatically') and the key detail (the reason for each item). It is clear in meaning, but the noun-phrase structure relies on the tool name for the verb and it does not explicitly distinguish from siblings like jev_status or jev_changelog.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It implies the tool is the place to inspect unresolved Figma edits, especially those involving uncertain placement or design tokens. However, it never states when to choose this over jev_status, jev_progress, or jev_changelog, nor does it mention follow-up actions like jev_resolve_pending.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_locateA
Find the source file and line for a Figma layer code such as @a3.0.2.1.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of conveying the operation's behavior. 'Find' clearly signals a read-only lookup, and it names what is returned (source file and line). It does not explicitly mention error behavior when no match is found, but for a simple locate tool this is a reasonable level of disclosure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that front-loads the action and target, includes a helpful example, and contains no filler. Every word contributes to understanding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity—one required parameter, no output schema, no annotations—the description covers the essential facts: what it locates, the input format, and the kind of result. It is sufficiently complete for an agent to invoke it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate. It does by explaining that `code` is a 'Figma layer code' and providing a concrete format example (@a3.0.2.1). This adds meaning beyond the raw string type in the schema, though it could be more precise about allowed formats.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Find'), a precise resource ('source file and line'), and a clear input ('Figma layer code') with an illustrative example. This makes the tool's purpose unmistakable and distinguishes it from the sibling sync/execution tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use the tool: when you have a Figma layer code and need its source location. However, it does not explicitly contrast this with sibling tools like jev_execute or jev_sync_now, nor does it state when not to use this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_progressA
During a Fine-tune (sent to you through the figma-jev-console channel): report a step to the designer's Figma panel. Call with done: true when every item is fixed; Figma is then redrawn from the code and the changelog is cleared.
| Name | Required | Description | Default |
|---|---|---|---|
| done | No | ||
| text | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It discloses the key side effect for done:true (Figma redrawn, changelog cleared), but does not explain what happens when done:false or the nature of the progress report itself (e.g., whether it persists state or just displays text). Partial transparency, not complete.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences with zero filler. The first sentence establishes purpose and context; the second adds the critical done:true behavior and consequences. Information is front-loaded and every phrase earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple 2-parameter tool with no output schema and no annotations, the description covers the main flow but leaves 'text' semantics and the done:false behavior unexplained. An agent can call it correctly for the completion case, but may be unsure what to pass for intermediate steps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate. It gives clear semantics for 'done' (true means all items fixed) and the overall action implies 'text' is the step content, but it never explicitly describes what text should contain or how it is displayed. One of two parameters is adequately explained.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific action ('report a step') and target ('designer's Figma panel') with a clear trigger context ('During a Fine-tune'). It distinguishes the tool from siblings by its progress-reporting role, though it doesn't name any alternative explicitly.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives explicit when-to-use context ('During a Fine-tune') and a specific condition for done:true ('when every item is fixed'). It lacks explicit when-not-to-use guidance or named alternatives, but the context is clear enough for an agent to select this over status/sync tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_push_screensA
Push the app's screens into Figma as auto-layout frames and components, then keep them in live two-way sync. The app's dev server must be running. Call this when the user says 'push to Figma'.
| Name | Required | Description | Default |
|---|---|---|---|
| live | No | Write Figma edits into code as they happen (default true). False = wait for Sync now. | |
| routes | No | Screens to push. Omit to discover routes from the code. | |
| baseUrl | Yes | URL of the running dev server, e.g. http://localhost:5173 | |
| pageName | No | Figma page to put screens on. Default: the page open in Figma. A screen already in the file is moved to this page when given. | |
| viewport | No | Default 1440x900. Use 390x844 for mobile. | |
| projectDir | Yes | Absolute path to the app's project folder (where package.json is) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are present, so the description carries the full behavioral burden. It does add useful context: it creates auto-layout frames/components, enables live two-way sync, and requires a running dev server. However, it does not disclose side effects on existing Figma screens, whether the operation is reversible, or that live sync persists until stopped.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no filler. The main action and output format are front-loaded, and the prerequisite and trigger phrase are delivered efficiently. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a six-parameter tool with no output schema and no annotations, the description is adequate but thin. It covers purpose, trigger, and prerequisite, but omits what the tool returns, how live sync can be stopped, and how this tool relates to siblings like jev_sync_now and jev_stop_live.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and each parameter already has a meaningful description. The tool description adds no new parameter-level semantics beyond reinforcing the dev-server prerequisite, so the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific action ('Push the app's screens into Figma'), a concrete output shape ('auto-layout frames and components'), and a distinguishing behavioral feature ('live two-way sync'). The trigger phrase 'push to Figma' also makes it easy for an agent to recognize when this tool is intended.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives clear usage context: call it when the user says 'push to Figma' and only when the dev server is running. It does not explicitly mention when not to use it or name alternatives like jev_sync_now or jev_stop_live, so it falls short of a full 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_resolve_pendingA
Decide a pending item: 'apply' writes the best guess, 'reject' drops it, 'element' / 'token' choose the scope for a design-token color, 'llm' hands it to the LLM, 'done' marks it finished after you changed the code yourself (Figma is then redrawn).
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | ||
| action | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description discloses the behavior of each action: 'apply' writes, 'reject' drops, 'element/token' choose scope, 'llm' hands off, 'done' marks finished and triggers redraw. This is comprehensive for a decision tool, but it doesn't mention side effects like irreversibility or error conditions. Given no annotations, the description carries the full burden and does so adequately.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that front-loads the purpose and then lists each action compactly. Every part contributes to understanding, with no fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers all actions and their outcomes. It does not describe return values, but that is likely irrelevant for a decision tool. It doesn't mention prerequisites like whether the item must exist, but that is a minor omission. Overall, it is sufficiently complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has 0% description coverage, so the description must explain the parameters. It does explain the 'action' parameter by detailing each enum value's meaning. However, the 'id' parameter is not explicitly described, though it is implied as the pending item identifier. The description adds value over the schema by clarifying the semantics of the actions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Decide a pending item' and enumerates the actions with their outcomes. It is specific and unambiguous, though it doesn't explicitly differentiate from sibling tools like jev_list_pending, but the purpose is clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explains when to use each action (e.g., 'apply' when you want to write the best guess), but it doesn't explicitly state when to use this tool versus alternatives. The context of pending items is implied but not contrasted with other tools. It provides no exclusions or alternative references.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_statusA
Connection status: Jev Bridge plugin in Figma, Jev backend, and the live session (screens, pending reviews).
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It does name the components whose status is checked and implies a read-only observation, but it does not explicitly say it is non-mutating or describe possible outcomes, partial failures, or the shape of the status report. This is adequate for a status tool but not fully transparent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single compact sentence that front-loads the core concept ('Connection status') and then lists the relevant components. There is no filler, repetition, or unnecessary context; every phrase adds information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter status query, the description gives the essential context: what is being checked and at what level. However, since there is no output schema and no annotations, it leaves the return representation and failure behavior unspecified, so an agent cannot fully anticipate what the tool will return beyond a generic status indication.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the description has essentially no parameter-semantics burden. The empty schema already covers everything, and the description sensibly avoids inventing input details. This matches the baseline for parameterless tools.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the resource as 'connection status' and enumerates the exact scopes checked: the Figma plugin, the backend, and the live session with screens and pending reviews. It stops short of an explicit verb like 'get' or 'report,' but the intent is unambiguous and the specificity separates it from most sibling tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The intended use is implied: call this tool when you need to know whether the Jev Bridge plugin, backend, and live session are connected. However, there is no explicit when-to-use guidance, no mention of alternatives, and no note about whether it should be a first diagnostic step before other Jev operations.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_stop_liveA
Stop the live session: stop watching files and close the headless browser. Figma layers stay.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the behavioral burden, and it does disclose the main effects: it stops file watching and closes the headless browser, while explicitly noting that Figma layers are preserved. It does not mention idempotency, auth requirements, or what happens if no live session is active, so full transparency is lacking.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single focused sentence with the main action front-loaded and a useful clarification about Figma layers. Every phrase earns its place, with no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter, no-output-schema stop command, the description tells the agent what will stop and what will be preserved, which is the key context needed to decide to call it. It could add a note about whether calling it when no session is running is safe, but the core use case is covered.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the schema already fully covers parameter semantics; the 0-parameter baseline of 4 applies. The description appropriately adds no parameter details because there are none to document.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific action ('stop the live session') and immediately specifies what that entails: stop watching files and close the headless browser. This clearly distinguishes it from sibling tools like jev_sync_now or jev_status, which are not stop operations.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The intended use is clear: call this when the live session should be ended, since the description defines the live session's active behavior as watching files and running a headless browser. It does not explicitly name alternatives or when-not-to-use, but no other sibling tool performs this stop function.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_sync_logB
Recent Figma → code edits: what changed, which file and line, and whether Jev or a rule decided the location.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It conveys that the tool returns recent edits and identifies the deciding actor, which is useful, but it does not mention ordering, the default number of entries, or whether the operation is read-only. For a log-style tool this is adequate but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single compact sentence that front-loads the core purpose and enumerates the returned information with no filler. Every segment adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers the main return content and makes the tool's general purpose understandable. However, with no output schema and no annotation coverage, it omits practical details such as the meaning of limit, result ordering, and whether anything is modified, leaving a few gaps an agent would need to resolve.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The only parameter, limit, has 0% schema description coverage, and the description never mentions it. The word 'recent' hints at a limited window, but the description does not explain how limit controls the result set, so it fails to compensate for the missing schema guidance.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the resource as a log of recent Figma-to-code edits and lists the key output fields (what changed, file, line, decision maker). It lacks an explicit verb like 'retrieve' or 'list', and does not distinguish itself from the similarly named sibling jev_changelog, so it is clear but not fully differentiated.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is given for when to use this tool versus alternatives like jev_list_pending or jev_changelog. The description implies it is for checking recent edit history, but it does not state conditions, exclusions, or how it differs from sibling tools, leaving the agent to infer applicability.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
jev_sync_nowA
One-click sync: write all queued Figma edits into the code, then refresh every screen in Figma from the code.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description itself must disclose side effects, and it does: it states that writing all queued edits into code and refreshing every Figma screen from code both occur. It is transparent about scope ('all queued', 'every screen') and about the fact that both code and Figma are mutated. It does not mention reversibility, permission requirements, or failure modes, but for a zero-parameter action the core behavioral contract is clear.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The entire description is one sentence with a colon splitting the action into two understandable clauses. It is front-loaded with the key idea ('One-click sync') and contains no filler or repetition.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter action this is largely complete: it says what will be written and what will be refreshed, and there is no output schema to document. The main gaps are the lack of any indication whether the operation is asynchronous, how success is reported, or what happens if the queue is empty. These are minor for a one-click sync but prevent a perfect score.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema is empty, so the baseline for zero parameters is 4. The description reinforces the no-input nature with 'One-click' and uses 'all queued' and 'every screen' to make clear there is no subset selection. No additional parameter-level detail is needed.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with 'One-click sync' and then specifies the exact bidirectional effect: queued Figma edits are written into code, then every Figma screen is refreshed from code. This is a specific verb-plus-resource statement that differentiates it from one-way siblings like jev_push_screens or investigation tools like jev_list_pending.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no explicit 'use when' or 'do not use' language and no reference to alternatives, so an agent must infer that this is the catch-all synchronization command. The phrase 'one-click' implies it is the single command to reconcile Figma and code, but it does not say when a narrower tool such as jev_push_screens would be preferable. This is implied usage rather than explicit routing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
12 tool updates
v0.6.0- First observed
jev_changelog - First observed
jev_contract - First observed
jev_execute - First observed
jev_list_pending - First observed
jev_locate - First observed
jev_progress - First observed
jev_push_screens - First observed
jev_resolve_pending - First observed
jev_status - First observed
jev_stop_live - First observed
jev_sync_log - First observed
jev_sync_now
TDQS
Scored across 12 tools
While each tool has a specific name, several overlap in function and timing: jev_sync_now, jev_push_screens, and jev_resolve_pending all trigger writes to code or Figma, and jev_status, jev_sync_log, jev_progress, jev_changelog, and jev_list_pending all report state, making it hard to select the right one. Descriptions are detailed but the boundaries are blurred.
All tool names start with 'jev_' followed by a simple verb (status, sync_now, list_pending, changelog, push_screens, resolve_pending, sync_log, locate, progress, contract, stop_live, execute), following a consistent, predictable pattern. All are lowercase with underscores, no mixing of conventions.
With 12 tools, the set is well-scoped for the Figma-Jev integration console. Each tool addresses a distinct aspect of the workflow (status, sync, pending, changelog, push, resolve, log, locate, progress, contract, stop, execute), and the count is within the ideal 3-15 range, with no redundancy.
The set covers core lifecycle operations: status, sync, pending resolution, push, stop, and a progress reporting mechanism. However, there is a notable gap: no explicit tool to start or manage a live session (only stop_live exists), and the fine-tune workflow relies on an external channel rather than a dedicated tool. The escape hatch jev_execute partially mitigates gaps, but the surface feels incomplete for the stated purpose.
Maintenance
Related MCP Connectors
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Visual website builder synced with real code. Build, publish and maintain websites from any agent.
- WhoogyOAuthcom.whoogy
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
Connect AI coding agents to Anima Playground, Figma, and your design system.
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.1-
- AlicenseNot gradedqualityDmaintenanceConnects Figma designs to AI agents, enabling extraction of production-ready code, assets, and design tokens through natural language descriptions. Supports React, Vue, CSS, and Tailwind with real-time design system analysis.58,742 npm40MIT
- FlicenseNot gradedqualityDmaintenanceEnables AI assistants to read Figma design files and automatically map responsive relationships between mobile and desktop screens to generate accurate frontend code. Eliminates manual copy-pasting by providing direct access to design tokens, dimensions, and screen layouts within AI-powered IDEs.-
- AlicenseNot gradedqualityDmaintenanceConnects Figma designs to React components using your actual component library, enabling AI tools to generate production-ready code with proper imports.1MIT