Skip to content
Agentmart
Submit a tool

Figma CodeKit MCP

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

Connector by Mehmoodqureshi · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)★ 1
Write a review

Chalk Labs

Need help deploying Figma CodeKit MCP?

Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.

Book a call

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/mehmoodqureshi-figma-codekit-mcp

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 26, 2026.

Runs code on install

Its package runs an install script (such as npm postinstall or setup.py code) as soon as you install it, before any tool is called. Read the script first.

Tools
3 read · 0 write · 0 deleteRead-only
Secrets
1 (API keys, tokens or passwords)
Install scripts
Runs code on install
Runs as
Node.js package

Tools by what they do 3

Read from the source code; the running server may list different tools.

Read 3 · Look things up without changing anything.

  • figma_convert
  • figma_inspect
  • figma_verify

Secrets and settings it asks for

Secrets: values you paste in that let it act as you.

  • FIGMA_TOKEN

Other settings (environment variables or headers).

  • FIGMA_MCP_CACHE_DIR

Network hosts it talks to 6

  • api.figma.com · found in code
  • figma.com · found in code
  • fonts.googleapis.com · found in code
  • fonts.gstatic.com · found in code
  • generativelanguage.googleapis.com · found in code
  • github.com · found in code

Files it touches

  • Any path the agent passes to its tools

Tools (3)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

  • figma_convertConvert a Figma frame to code

    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.

  • figma_inspectInspect the design structure

    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.

  • figma_verifyVerify rendered code against the Figma design

    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.

Compare and alternatives

    Featured in

    Signals

    Stars
    1
    Forks
    0
    Open issues
    0
    Last commit
    Oct 15, 2026 (16 days ago)
    Last release
    Oct 15, 2026 (16 days ago)

    From GitHub (fetched Oct 24, 2026).

    Details

    Registry name
    io.github.Mehmoodqureshi/figma-codekit-mcp
    Version
    0.2.4
    Auth
    API key
    Packages
    npm figma-codekit-mcp
    License
    MIT
    Repository
    github.com/Mehmoodqureshi/figma-codekit-mcp
    First seen
    Oct 24, 2026
    Last checked
    Oct 24, 2026
    Source
    Official MCP Registrygithub-graphql

    More from Mehmoodqureshi

    Done for you

    Rather not set it up yourself?

    Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.

    See how we build AI agents →Read the case studies

    Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.

    launches shipped
    50+
    launches shipped
    media placements
    500+
    media placements
    founders on every account
    2
    founders on every account

    Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block

    Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.

    Get Figma CodeKit MCP running in your business

    Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.

    Goes to the Chalk Labs founders, not the newsletter. Privacy

    Need help deploying Figma CodeKit MCP?

    CallGet help
    Cite this page

    Figma CodeKit MCP. Agent Mart. https://agentmart.dev/connectors/mehmoodqureshi-figma-codekit-mcp (last updated 2026-10-24)