Dmose Compare Figma To Impl Marketplace
- Updated May 25, 2026
- dmose/compare-figma-to-impl
compare-figma-to-impl is an alpha Claude Code plugin that compares a live Firefox UI element to a Figma node and writes a structured visual discrepancy report with side-by-side screenshots for developers doing design QA.
About
compare-figma-to-impl is Dan Mosedale's alpha Claude Code marketplace plugin for Firefox engineers who manually squint at Figma versus live UI. Run `/compare-figma-to-impl <figma-url> ...` with firefox-devtools MCP and the official Figma plugin connected; the forked general-purpose agent captures Figma and implementation screenshots, compares layout and styling, and saves `comparison/report.md` at the Firefox tree root. Sample smartbar dropdown eval logged 2 critical, 12 minor, and 8 non-issue discrepancies. The forked agent compares font weight, color, gradient angle, padding, and border treatments in property tables with Match or Different columns. Eval samples include a simple toolbar button and an AI window smartbar dropdown under evals/samples/. Install with `claude plugin marketplace add dmose/compare-figma-to-impl` and enable marketplace auto-updates because third-party catalogs opt out by default. Prerequisites include a built Firefox tree, FIGMA_TOKEN, Node v22+, and macOS support. Use before coding for a work breakdown or after patches to verify fidelity—not for Chrome-only apps or teams without a Firefox devtools MCP setup.
- Slash command /compare-figma-to-impl writes comparison/report.md via Bash heredoc
- Classifies discrepancies as Critical, Minor, or Non-issue with property tables
- Sample dropdown eval found 2 critical, 12 minor, and 8 non-issue items
- Uses Figma MCP plus firefox-devtools MCP and FIGMA_TOKEN REST downloads
- Alpha plugin; typical run takes 5-10+ minutes per comparison
Dmose Compare Figma To Impl by the numbers
- Data as of Aug 10, 2026 (Skillselion catalog sync)
/plugin marketplace add dmose/compare-figma-to-implAdd your badge
Show developers this marketplace is listed on Skillselion. Paste this into your README.
| Last updated | May 25, 2026 |
|---|---|
| Repository | dmose/compare-figma-to-impl ↗ |
How do you diff a Firefox UI implementation against Figma automatically?
Compare a Figma node to a live Firefox UI and write comparison/report.md with Critical, Minor, and Non-issue discrepancies.
Who is it for?
Firefox platform developers with firefox-devtools MCP and Figma access who need repeatable visual design QA reports.
Skip if: Chrome-only web apps, designers without a local Firefox build, or teams unwilling to configure FIGMA_TOKEN and dual MCP servers.
What you get
comparison/report.md with side-by-side screenshots, property tables, and Critical, Minor, or Non-issue discrepancy classifications.
- comparison/report.md
- Embedded screenshot pairs
- Discrepancy classification tables
By the numbers
- Sample smartbar dropdown report logged 2 critical, 12 minor, and 8 non-issue discrepancies
- Typical comparison runs 5-10+ minutes per README guidance
Plugins in this marketplace
1 plugin - install individually after you add the marketplace.
Recommended Marketplaces
Beast Modeaaronstatic is a Claude Code marketplace for testing.6
Ai Skill Test Bddai-skill-test-bdd is a Claude Code marketplace for testing.
Ai Test Failure AnalyzerAI Test Failure Analyzer is a Claude Code plugin that diagnoses failing tests by gathering evidence from git history, logs, and config rather than guessing at fixes.
Android Test Pilotandroid-test-pilot is a Claude Code plugin marketplace from panicgit/android-test-pilot that automates Android app testing with a text-first strategy cheaper and faster than screenshot-per-step mobile-mcp loops.1
Anti Hallanti-hall is a Claude Code plugin marketplace centered on a single verify-first discipline plugin for developers who ship with agents daily.1
Askqa Marketplaceaskqa-marketplace is a Claude Code marketplace for testing.How it compares
Use this for Firefox-plus-Figma visual diffs; general web teams should use Playwright screenshot compare plugins instead of this Gecko-specific alpha tool.
FAQ
What does compare-figma-to-impl produce?
compare-figma-to-impl saves comparison/report.md at the Firefox source tree root with side-by-side Figma and implementation screenshots plus Critical, Minor, and Non-issue discrepancy tables.
Which MCP servers does compare-figma-to-impl require?
compare-figma-to-impl needs firefox-devtools MCP connected to a local Firefox build and the official Figma plugin MCP, plus FIGMA_TOKEN for REST image downloads.
Can compare-figma-to-impl run before coding?
Yes—compare-figma-to-impl can run pre-implementation to generate a rough work breakdown from Figma specs, or post-implementation to score how close the live UI matches the design.