Koskamo

Figma CodeKit MCP

An MCP server that converts Figma frames into deterministic HTML/React code. It closes the design-to-code loop by rendering the generated code in Chromium, performing pixel-diff verification against the original design, and providing detailed feedback on layout mismatches, bounding box errors, and stacking issues to ensure pixel-perfect convergence.

Package and access

Local package with source-attributed installation metadata. Koskamo does not execute packages during review.

Figma CodeKit MCP logo, by MehmoodqureshiCommunity listingLocal stdioSource reviewed; not executedPublished by Mehmoodqureshi
Vendor documentation

Checks and signals

Each line is separate evidence, not a trust score.

  • Popularity 1 GitHub star

What you can do with it

  • Convert Figma frames to deterministic HTML/React code
  • Render generated code in Chromium for visual verification
  • Perform pixel-diff analysis to measure layout accuracy
  • Identify specific element mismatches like missing buttons or incorrect stacking

Source and maintenance

Community listingRegistry 0.2.4MIT
mcp-registry: io.github.Mehmoodqureshi/figma-codekit-mcp@0.2.4Source repository
Last repository push
Latest release
v0.2.4
Maintenance checked

Packages and installation

Source-provided package data. Koskamo has not executed or live-probed this package.

figma-codekit-mcp 0.2.4

npm
figma-codekit-mcp package definition
{
  "version": "0.2.4",
  "transport": "stdio",
  "identifier": "figma-codekit-mcp",
  "registryType": "npm",
  "environmentVariables": [
    {
      "name": "FIGMA_TOKEN",
      "format": "string",
      "isRequired": true,
      "description": "Figma personal access token (Settings -> Security -> Personal access tokens, scope \"File content: read\"). May instead be placed in a .figma-token file in the project directory. FIGMA_API_KEY is accepted as an alias."
    },
    {
      "name": "FIGMA_MCP_CACHE_DIR",
      "format": "filepath",
      "description": "Where converted frames are cached. Defaults to .figma-cache/ in the directory the server starts from."
    }
  ]
}

Tools

Reported by the attributed source; not independently observed by Koskamo.

No tool definitions available.

Maintenance history

Public check and source-refresh events. Editorial and ownership records remain private.

  • · repository · passed · metadata changed · updated
  • · backfill · recorded · Pre-expansion baseline; unobserved rich metadata remains unknown

Connect from your client

Each snippet configures the same source-provided package; replace placeholders before use.

This server is operated by the named third party. Listing and endpoint checks are not an endorsement or a security audit. Review the operator's permissions, terms, and data handling before connecting. How listings are checked and corrected.

Cursor

Merge this local stdio configuration, replace every placeholder environment value, and restart Cursor. Koskamo has not executed this package.
Cursor configuration
{
  "mcpServers": {
    "figma-codekit-mcp-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp@0.2.4"
      ],
      "env": {
        "FIGMA_TOKEN": "<YOUR_FIGMA_TOKEN>",
        "FIGMA_MCP_CACHE_DIR": "<YOUR_FIGMA_MCP_CACHE_DIR>"
      }
    }
  }
}

Cline

Merge this local stdio configuration, replace every placeholder environment value, and restart Cline. Koskamo has not executed this package.
Cline configuration
{
  "mcpServers": {
    "figma-codekit-mcp-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp@0.2.4"
      ],
      "env": {
        "FIGMA_TOKEN": "<YOUR_FIGMA_TOKEN>",
        "FIGMA_MCP_CACHE_DIR": "<YOUR_FIGMA_MCP_CACHE_DIR>"
      }
    }
  }
}

VS Code

Merge this local stdio configuration, replace every placeholder environment value, and restart VS Code. Koskamo has not executed this package.
VS Code configuration
{
  "servers": {
    "figma-codekit-mcp-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp@0.2.4"
      ],
      "env": {
        "FIGMA_TOKEN": "<YOUR_FIGMA_TOKEN>",
        "FIGMA_MCP_CACHE_DIR": "<YOUR_FIGMA_MCP_CACHE_DIR>"
      }
    }
  }
}

Claude Desktop

Merge this local stdio configuration, replace every placeholder environment value, and restart Claude Desktop. Koskamo has not executed this package.
Claude Desktop configuration
{
  "mcpServers": {
    "figma-codekit-mcp-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp@0.2.4"
      ],
      "env": {
        "FIGMA_TOKEN": "<YOUR_FIGMA_TOKEN>",
        "FIGMA_MCP_CACHE_DIR": "<YOUR_FIGMA_MCP_CACHE_DIR>"
      }
    }
  }
}

Let your agent find its tools

Find servers like Figma CodeKit MCP from your agent. Add Koskamo once to search the index for endpoints, access requirements, and client setup. Public discovery needs no key.

Connect Koskamo Explore workflows
See all 532