Skip to main content
Glama
Sign In
Figma CodeKit — Pixel-Verified Figma to Code

Figma CodeKit — Pixel-Verified Figma to Code

by Mehmoodqureshi
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Remote

Verify rendered code against the Figma design

figma_verify

Renders HTML or a running app in Chromium, pixel-diffs it against a Figma frame, and reports missing, misplaced, or clipped elements so you can iterate toward pixel-exact code.

Instructions

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.

Input Schema

NameRequiredDescriptionDefault
dirYesCache dir from figma_convert. Supplies reference.png and ir.json.
urlNoVerify a RUNNING page instead of the generated HTML — e.g. your own app at http://localhost:3000/pricing, built in any framework. The page is screenshotted at the frame size and pixel-diffed against the Figma reference. Element/layering checks need the converter's data-ir-id markers, so for a URL only the pixel diff runs.
widthNoViewport width. Defaults to the design frame width from the IR.
heightNoViewport height. Defaults to the design frame height from the IR.
fullPageNoCapture full scroll height rather than just the viewport.
htmlPathNoHTML file to verify. Defaults to <dir>/generated.html.
selectorNoWith url: CSS selector of the element to compare (e.g. "#pricing-card"). Default: the viewport.
thresholdNoDiff ratio considered "exact enough". Anti-aliasing puts a floor near 0.005-0.015.
includeImagesNoAttach 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.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.1.0

TDQS

A4.4/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description still discloses the rendering engine, the verification checks, the return payload (diff ratio plus categorized fixes), and the side effects of writing render.png and diff.png. It also flags the read-diff.png follow-up, giving enough behavioral context for an agent to operate it.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is front-loaded with the core action, followed by outputs, iteration, and a reading tip. Every sentence adds useful operational detail without repetition.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a nine-parameter tool with no output schema, the description explains what is returned, what files are written, and how to iterate. It omits the schema-documented URL/running-page mode and its pixel-diff-only limitation, which keeps it from being fully complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage for all nine parameters, so the schema already explains dir, url, selector, threshold, includeImages, and the rest. The prose adds no parameter-level details beyond the workflow, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses specific verbs and resources: render an HTML file in Chromium, pixel-diff it against the Figma reference, and check element positions with IoU, paint order, and clipping. That clearly separates it from figma_convert and figma_inspect, which handle conversion and inspection rather than rendered verification.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It gives a clear iterative workflow: edit the HTML based on the correction and call again, and read diff.png when the numbers alone are insufficient. It does not explicitly name when not to use it or point to sibling tools, so it stops short of full when/when-not guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools