PantographPantograph is a pack of skills and scripts that help you get the most out of Figma's MCP server when turning designs into code. It helps your agent work from the file's data, use screenshots to check its work, and build with your components and conventions.
Agents tend to build from a design they only half understand, and you're left cleaning up after them. With Pantograph you stop pulling teeth. Your agents get the context, the depth and the vocabulary they need to get from Figma to code that fits your codebase.
With PantographGuess from screenshots
Work from the file's own data: text, sizes, variables
Go back to Figma for every detail and run out of reads
Pull each page once, thoroughly, and keep it on disk
Skim a huge export and miss things
Follow an ordered spec that a script distills from the export
Hard-code values to match the screenshot
Build with your components, tokens and conventions
Improvise, with redrawn icons and low-res images
Use the real assets from the file, at the resolution the web needs
Quietly decide when the design is unclear
Log conflicts, notes and placeholders as questions for the designer
Assume how the layout adapts
Read the other frames for what really changes
Trust the export, even where it differs from the design
Know what the export hides and how to build it for the web
Say they are done
Audit the build against the source and show Figma beside it
One read per page, saved to .figma/ in your repo.
A parser turns the export into a spec the agent can follow.
The agent builds from the saved files, never from a screenshot.
A second agent checks the copy. A review page shows Figma beside the build.
Figma limits how many times an agent can read a file, so Pantograph reads each page once and reads it thoroughly. All of it lands in .figma/ in your repo.
Everything after that reads the saved files. A rebuild costs no Figma reads, and a design change costs one.
Two skills, and the scripts they run to do the work.
figma-transposeskillThe build pipeline, from the Figma access check through to verification.
distill.mjsReads the saved Figma export and writes the spec: copy, image slots, icons, tokens.Local files onlyfetch-asset.shDownloads one Figma asset and names the file by its content hash.Downloads from Figma's CDNfigma-review-pageskillThe review page: Figma beside your build, section by section, with height differences and open questions.
sections.mjsScreenshots your build and records where each section sits.Opens the URL you give it in Chromeshot.mjs, shot2x.mjsFull-page screenshots at any viewport, at 1x or 2x.Opens the URL you give it in Chromebuild_page.mjsCrops the screenshots and assembles the review page as one HTML file.Local files onlyEvery run ends with a review page on one link. It reads the same at your desk or anywhere else, so you can check the work wherever you are.
git clone https://github.com/tonyseets/pantograph cd pantograph ./install.sh --harness claude # ~/.claude/skills ./install.sh --harness codex # ~/.agents/skills ./install.sh --harness cursor # ~/.cursor/skills ./install.sh --harness grok # ~/.grok/skills ./install.sh --harness project --target /path/to/repo
Then copy a link to a page frame in Figma and hand it to your agent:
Build this page with figma-transpose: <figma link> It goes at /pricing in this repo.
When the build is up, ask for a review page with figma-review-page.
Through Figma's official MCP server: the remote one you sign into, or the Dev Mode server in the Figma desktop app. Pantograph adds nothing of its own to that connection.
Marketing sites, mostly B2B. That is where Pantograph grew up and where it has worked well. Other kinds of projects may need some massaging, and your mileage may vary.
You need a coding agent, a code repo and a Figma file. You talk to the agent and it runs the steps. The "Copy Prompt" button at the top gives you the message to paste.
No. The design comes through Figma's own MCP server into a .figma/ folder in your repo and stays there. The only download the scripts make is image and icon files from Figma's CDN. There's no telemetry.
No, it's optional. The MCP server alone gives the agent the code, the copy and the original uploaded images. Add a personal access token and the agent can also export frames through Figma's API at 2x, the way you would by hand. The token stays in a locked file outside the repo, and the agent reminds you to revoke it after.
A Dev or Full seat on the plan that owns the file. On an Organization plan that's 200 reads a day. A View seat gets about six a month, which isn't enough for one page.
Yes. The skills work with any framework, and with any CMS or none. Anything specific to your project stays in your repo's own AGENTS.md.
It symlinks the two skill folders into your agent's skills directory, and moves any folder already there to a .bak copy first. Run it with --uninstall to remove the links.