Figma CodeKit MCP
NPM · FIGMA-CODEKIT-MCP
Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.
Available components
Last scanned (2 hours ago)
Scores higher than 91% of npm servers
Category Developer Tools
How this component scores in each security and reliability category. Every signal is checked automatically from public evidence about the published package, including repeated runs of it in an isolated sandbox, and we only credit what we can confirm. How we score → Why this is hard to score →
Supply Chain Security92
- No malware found by supply-chain analysis.Pass
- No known CVEs affecting this package version or its production dependencies.Pass
- Declares code that runs automatically (postinstall) and that we could not recognise. It may be perfectly ordinary, but we have not established what it does. View diagnostics → Partial
- 33 of 100 dependencies flagged as unhealthy. View diagnostics → Partial
Provenance & Transparency97
- Source repository is publicly reachable at the declared URL. View diagnostics → Pass
- Cryptographically verified build provenance (signed, bound to Mehmoodqureshi/figma-codekit-mcp). View diagnostics → Pass
- Clear OSI-approved license (MIT).Pass
- Actively maintained (last published 20 days ago).Pass
- Disclosure check failed: no security disclosure policy was found in the source repository. See how to fix → Fail
Schema Quality & AI Usability69
- AI-judged instruction clarity (excellent).Pass
- Context-footprint check failed: tool/resource definitions use about 766 tokens (~255/item across 3 items; 3 tools + 0 resources), over budget; trim descriptions and params. See how to fix → Fail
- Usage-examples check failed: none of the tools include examples. See how to fix → Fail
Stability & Change Management70
- Stability observed for 21 of 30 days with no destabilising changes; credit accrues until the full window elapses.Partial
Tool Coverage100
- 100% of tools have a non-trivial description (not blank, and not just the tool's name).Pass
- 100% of tool parameters carry a description.Pass
Tool Safety100
- No prompt-injection markers were found in the server instructions, tool names or descriptions we captured.Pass
- We read all 3 captured tool definition(s), and no name or description among them implies an irreversible operation.Pass
- An AI judge read all 3 captured unit(s) of tool text and found none that tries to manipulate the model reading it.Pass
Capabilities100
- Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.Pass
Every change we have recorded for this component, newest first. Security-relevant changes are always shown. ▲ marks a change for the better, ▼ a change for the worse; unmarked changes are neutral.
- 4 Nov 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 63 to 67. That category is still filling its 30-day observation window: 19 days of observed history at the previous scan, 20 at this one. The score rises as the window fills, whether or not the server changes.
- 2 Nov 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 57 to 60. That category is still filling its 30-day observation window: 17 days of observed history at the previous scan, 18 at this one. The score rises as the window fills, whether or not the server changes.
- 31 Oct 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 50 to 53. That category is still filling its 30-day observation window: 15 days of observed history at the previous scan, 16 at this one. The score rises as the window fills, whether or not the server changes.
- 29 Oct 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 43 to 47. That category is still filling its 30-day observation window: 13 days of observed history at the previous scan, 14 at this one. The score rises as the window fills, whether or not the server changes.
- 26 Oct 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 33 to 37. That category is still filling its 30-day observation window: 10 days of observed history at the previous scan, 11 at this one. The score rises as the window fills, whether or not the server changes.
- 24 Oct 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 27 to 30. That category is still filling its 30-day observation window: 8 days of observed history at the previous scan, 9 at this one. The score rises as the window fills, whether or not the server changes.
- 23 Oct 26 +4
- Stability: unverified → 0.27 ▲ functional
- 15 Oct 26 77
First indexed and scored.
Diagnostic detail from the automated scan of this channel: what the scanner observed at each step, so you can see exactly where a check passed or failed. It is informational only and never changes the trust score.
Captured 5 Nov 2026 · Analysed npm/figma-codekit-mcp@0.2.4
Provenance Verified
A signed build attestation was found and verified, binding this exact artifact to the source repository it claims to come from.
| Result | Verified |
|---|---|
| Ecosystem | npm |
| Reason | Verified |
| Discovered via | Registry attestation endpoint |
| Source repo | Mehmoodqureshi/figma-codekit-mcp |
| Certificate issuer | https://token.actions.githubusercontent.com |
| Certificate SAN | https://github.com/Mehmoodqureshi/figma-codekit-mcp/.github/workflows/publish.yml@refs/tags/v0.2.4 |
| Rekor log index | 3265765085 |
| Predicate type | SLSA build provenance https://slsa.dev/provenance/v1 |
| Subject digest | sha512:faf57d32a8d0ae23aa73f8099373a19ee50ebd5966fbbcfbca35514c637f25e3ed1a5e073e833c3ac83714d24804e5e37bd5fd2a45d255657f4d12f82 |
Background: How many MCP packages publish verified provenance →
Install scripts 1 script
| Hook | Tier | Command |
|---|---|---|
| postinstall | unreviewed | node scripts/postinstall.js |
Background: Why install scripts are a supply-chain risk →
Dependencies 100 packages
| Packages resolved | 100 |
|---|---|
| Stale | 33 |
| Tree resolution | Complete |
Background: SBOMs and build attestations, explained →
The tools this component advertises to a client, with an estimated token cost for each. Expand a tool to see its parameters and schema. The per-tool counts are indicative and are not scored directly; the schema's total context footprint is one signal in Schema Quality & AI Usability. A tool's description is untrusted text the model reads on every call, which is what makes this list a security surface and not just an inventory: how tool poisoning works →
figma_convert Convert a Figma frame to code ~376
Fetch a Figma frame and deterministically convert it to self-contained HTML (no LLM). Writes generated.html, reference.png, ir.json and assets.json to a cache dir and returns the paths plus a summary. Pass react=true for a component file, or next=true for a runnable Next.js App Router project you can npm install && npm run dev. Figma responses are cached, so re-running is offline and free unless refresh=true. Follow with figma_verify to see how close the render is.
| Name | Type | Req | Description |
|---|---|---|---|
| next | boolean | – | Also emit next/ — a runnable Next.js App Router project (package.json, next.config.mjs, app/layout.jsx, app/page.jsx, app/globals.css and the component) that you can npm install && npm run dev as it… |
| outDir | string | – | Where to write output. Defaults to .figma-cache/<fileKey>-<nodeId>/ |
| react | boolean | – | Also emit generated.jsx (React with inline styles) alongside the HTML, plus components/<Name>.jsx for every Code Connect binding it imports. |
| refresh | boolean | – | Ignore the cache and re-fetch from the Figma API. |
| responsive | boolean | – | Emit the responsive variant (Figma FILL→flex/100%, HUG→fit-content, FIXED→px kept) instead of the exact-sizing variant. A frame with NO Auto Layout has no sizing intent to relax, so it keeps its exac… |
| url | string | yes | Figma frame URL, e.g. https://www.figma.com/design/KEY/Name?node-id=1-2 |
No output schema declared.
No examples provided.
figma_inspect Inspect the design structure ~108
Print the IR tree as an indented outline (role, name, box, layout, text, tokens) so you can understand the design structure and find a specific element without reading raw Figma JSON or the whole ir.json. Use after figma_convert.
| Name | Type | Req | Description |
|---|---|---|---|
| depth | number | – | Max tree depth to print. |
| dir | string | yes | Cache dir from figma_convert. |
| filter | string | – | Only show nodes whose name or text matches this (case-insensitive substring). |
No output schema declared.
No examples provided.
figma_verify Verify rendered code against the Figma design ~282
Render an HTML file in Chromium, pixel-diff it against the Figma reference, and check each element position with bounding-box IoU, paint order (z-index) and clipping. Returns the diff ratio plus specific instructions on what to fix (MISSING / MISPLACED / WRONG STACKING / OVER-CLIPPED elements, worst regions). Writes render.png and diff.png. Edit the HTML based on the correction and call this again to iterate toward pixel-exact. Read the returned diff.png to see the mismatches highlighted.
| Name | Type | Req | Description |
|---|---|---|---|
| dir | string | yes | Cache dir from figma_convert. Supplies reference.png and ir.json. |
| fullPage | boolean | – | Capture full scroll height rather than just the viewport. |
| height | number | – | Viewport height. Defaults to the design frame height from the IR. |
| htmlPath | string | – | HTML file to verify. Defaults to <dir>/generated.html. |
| includeImages | boolean | – | Attach reference/render/diff PNGs to the response. Costs a lot of context — prefer reading diff.png from disk only when the numbers alone are not enough. |
| threshold | number | – | Diff ratio considered "exact enough". Anti-aliasing puts a floor near 0.005-0.015. |
| width | number | – | Viewport width. Defaults to the design frame width from the IR. |
No output schema declared.
No examples provided.
How do I install the Figma CodeKit MCP server?
Figma CodeKit MCP runs locally as an npm package, launched with npx -y figma-codekit-mcp. Ready-made configuration for Claude, Cursor, VS Code, Codex and 5 more is on this page, copied from each client's own documentation.
npm · figma-codekit-mcp
claude mcp add mehmoodqureshi-figma-codekit-mcp -- npx -y figma-codekit-mcp
What is the Figma CodeKit MCP server?
Figma CodeKit MCP is listed in the public MCP registry as io.github.Mehmoodqureshi/figma-codekit-mcp. Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop. This page covers its npm package (figma-codekit-mcp).
Is the Figma CodeKit MCP server safe to use?
Figma CodeKit MCP scores 87 out of 100 on VerifyMCP. We found no known CVEs affecting it as of 5 November 2026. Its build provenance is signed and verified. That is a record of what we were able to check automatically, not an endorsement. The category breakdown on this page shows every signal behind the number, including the ones we could not confirm.
What tools does the Figma CodeKit MCP server expose?
Figma CodeKit MCP exposes 3 tools: figma_convert, figma_verify, figma_inspect. Their descriptions and schemas cost roughly 766 tokens of context every time the server is loaded.
Is the Figma CodeKit MCP server still maintained?
Figma CodeKit MCP is still listed as active in the MCP registry. We last reached this channel on 5 November 2026. Those dates come from our own scans of the registry and the channel itself, not from anything the publisher announced.
What licence is the Figma CodeKit MCP server under?
Figma CodeKit MCP declares the MIT licence, which is OSI-approved. That covers the source only, and says nothing about the cost of any service it calls.