Recast vs Figma Dev Mode MCP and pixel-overlay tools
Three ways to get a build to match a design: hand your coding agent the Figma file, overlay the design on your page and compare by eye, or start from the visual itself. They solve different parts of the problem.
Figma Dev Mode MCP
Figma’s MCP server gives coding agents design context straight from a Figma file: components, variables, layout. It’s excellent when the design lives in Figma and you have access to it. It can’t help with a live site you admire, a screenshot, a video, or a reference someone sent you.
Pixel-overlay tools
Browser extensions such as PerfectPixel lay a translucent image of the design over your page so you can spot offsets by eye. Precise, but manual: you align the overlay and judge each screen yourself, and it doesn’t tell the builder how to fix anything.
Recast
- Input: any screenshot, hero video, or screen recording. No Figma file needed.
- Gives your build: a prompt that names every style, plus a DESIGN.md, Tailwind theme, CSS variables, and tokens.json.
- Checks the result: paste the build’s link for a match score out of 100 and a fix prompt.
When to use which
Design in Figma and your own file? Use the MCP server. Need a final pixel pass on one screen? An overlay works. Starting from anything you can see, or checking an AI build without a design file? That’s what Recast is for, and they combine well.
DESIGN.md
## Colors | Token | Value | Use | |---|---|---| | `--color-ink` | #14233A | headline, nav text, icon fill, underline, arrow border | | `--color-ink-muted` | #5B6676 | tagline text | | `--color-line` | #14233A | active nav underline and arrow button border | | `--color-sky` | #E6EAEF | fallback background behind photo, menu overlay background | | `--color-mist` | #F2F4F7 | brightest cloud tone / news dot ring color | | `--color-rock` | #7C8799 | mid-tone mountain shadows | ## Fonts | Role | Family | Weights |
Common questions
Is Recast an alternative to Figma Dev Mode?
For designs outside Figma, yes: Recast works from screenshots and videos. If your design is in Figma, Dev Mode and Recast complement each other.
Do I need a design file to check my build?
No. Recast compares your build with the original screenshot or video you started from, from a link or an uploaded screenshot.
Which coding agents can use the spec?
Any that read project files, such as Claude Code, Cursor, Windsurf, and GitHub Copilot.
More guides
- How to turn a screenshot into a prompt for v0 →
- Screenshot to Lovable: getting exact colors, fonts, and spacing →
- How to recreate a website animation from a video with AI →
- Why pasting a screenshot into your AI builder doesn’t match (and how to fix it) →
- How to give Claude Code or Cursor a DESIGN.md from a screenshot →
- Screenshot to Tailwind v4 theme: exact colors, fonts, and spacing →
- How to check if your AI-built site matches the design →
- How to export design tokens from any screenshot (no Figma needed) →
- Recast vs pasting a screenshot straight into v0, Lovable, or Bolt →
Try it on your own design.
Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.
Start free