compare-figma-to-impl
Prototype Claude Code plugin for automated UI work breakdown and verification
Cutting down the manual squinting & comparing between Firefox and Figma while working on UI code with a rough draft visual diff report.
A single dropdown has lots of visual properties. Manually checking each one against Figma is slow, painful and error prone — font weight 700 instead of 590, gradient angle off by 34 degrees, padding short by 2.5px. Claude
Point it at a Figma URL and a running UI in Firefox:
| Property | Figma | Implementation | Match? |
|---|
| Bold highlight weight | 590 (Semibold) | 700 (Bold) | Different |
| Action text color | rgba(21,20,26,0.69) | rgb(0,0,0) | Different |
| Button gradient | linear-gradient(201deg, ...) | linear-gradient(235deg, ...) | Different angle |
| Container border | 1px solid #321bfd | Gradient border via ::after | Different |
| Row inner padding | 10px | 7.5px | Different |
| Selected row background | #efe9ff | oklch(0.9 0.13 290) | Close |
| Border radius | 16px | 16px | Match |
Excerpt from a real report — the full comparison found 2 critical, 12 minor, and 8 non-issue discrepancies in a single dropdown component.
| Figma | Implementation |
|---|
 |  |
Use it before you code
Run the comparison before you start implementing and the output is your rough draft work breakdown, with specifics and visuals.
/compare-figma-to-impl https://www.figma.com/design/FILE_KEY/File-Name?node-id=1-42 to the smartbar dropdown
Run it after implementation to see a rough draft report of how close your changes are. Each discrepancy is classified as Critical (visually broken), Minor (measurable difference), or Non-issue (numerically different but visually identical). The report includes side-by-side screenshots for each finding.
See example reports: toolbar button | smartbar dropdown
Alpha — This plugin has sharp edges and is still very much under construction. Expect rough edges and issues. Issue reports are appreciated.
Prerequisites
-
Supported OS
- MacOS
- Linux? (Not yet working on Apple Silicon. Might be better on x86. Expect issues either way.)
-
Recommended: a sandboxed Firefox development environment (e.g. virtual machine with an HTTP network proxy
-
Claude Code (tested with terminal version)
-
This plugin and the main plugin marketplace installed into Claude Code:
claude plugin marketplace add dmose/compare-figma-to-impl
claude plugin install compare-figma-to-impl@dmose-compare-figma-to-impl
-
After install, enable auto-update for this marketplace through the UI to receive future updates (third-party marketplaces are opted out by default):
- Start
claude
- Run
/plugin to open the plugin manager
- Select
Marketplaces
- Choose
dmose-compare-figma-to-impl from the list
- Select
Enable auto-update
If you have issues see the Claude Code Docs Page for more details.
-
A Firefox tree/worktree that has been built and run at least once
-
Firefox DevTools MCP server configured to use the binary and profile in the current Firefox tree/worktree
