Figma CodeKit — Pixel-Verified Figma to Code
Related Servers
Alternatives to Figma CodeKit — Pixel-Verified Figma to Code
- AlicenseBqualityBmaintenanceUse your signed-in Chrome through a local MCP server and companion extension. Supports tabs, navigation, forms, screenshots, and page reading, with a deny-all domain allowlist. Install: npx -y mcp-browser-extension@latest.22684 npm6MIT
Related Servers
- AlicenseNot gradedqualityBmaintenanceEnables agents to compare a live web page against a Figma frame and receive a bounded JSON verdict of design deviations, without sending screenshots or mockups through the model context.MIT
- AlicenseNot gradedqualityCmaintenanceEnables AI coding agents to read Figma designs through a local plugin and then verify the sections they build in a headless browser, comparing layer-by-layer numbers and screenshots, plus responsive widths, motion and accessibility, until the build matches the design. Works on Figma's free Starter plan with no API key or monthly read limit.MIT
- AlicenseAqualityCmaintenanceEnables agents to read Figma designs through the REST API as normalised, agent-friendly IR with Tailwind themes and CSS variables, render reference PNGs, and verify generated HTML against the original design via visual diff.9MIT
- AlicenseAqualityAmaintenanceEnables coding agents to capture a live website's rendered frontend, export it as an editable Next.js or Astro project, and re-verify the result pixel by pixel to confirm visual fidelity held.3310 npm46MIT
- AlicenseNot gradedqualityDmaintenanceEnables HTML page analysis, verification, and automated correction using Playwright for rendering and Mistral AI for visual inspection. Captures screenshots, analyzes renders against specifications, and generates fixes for HTML issues.2ISC
- AlicenseAqualityDmaintenanceEnables AI agents to interact with Figma to create, read, and manage designs using the Figma REST API and a dedicated plugin. It supports advanced features like UI generation from text, webpage reconstruction in Figma, and design token synchronization with codebases.20MIT
TDQS
Scored across 3 tools
Each tool targets a clearly distinct stage of a linear pipeline: convert (Figma→HTML), verify (pixel-diff render against reference), and inspect (read the IR tree). The descriptions explicitly state ordering ('use after figma_convert', 'follow with figma_verify'), so an agent cannot reasonably confuse them.
All three tools follow the same figma_<verb> pattern (figma_convert, figma_verify, figma_inspect) with short, single-word verbs. Fully predictable and consistent.
Three tools is exactly the minimal surface for a convert → inspect → verify iteration loop, and each one has a non-overlapping job. There is no filler or redundant tool in the set.
The core lifecycle (convert, inspect structure, verify/fix loop, output artifacts) is covered with no dead ends. The main gap is discovery: there is no tool to list files/frames or resolve a Figma URL to a node ID, so the agent must already know the target node before calling figma_convert.