A Working Reference original

Your Figma file, 98% the same in code

“The mock is already perfect. Why does the build look like another screen?” — we made this skill out of that exact frustration. We’ll show you the same mock, built two ways: the usual route and pix.

Original Figma mock — home screen of a coffee-order app — We ran this ourselves. The middle one is the usual route (Figma MCP hooked up) — **icons vanished, type slipped, and the banner design fell apart**. Every green mark is a miss. pix writes the code, then **pixel-diffs it against the original (Pixelmatch)** and keeps fixing until it’s 98%+ the same.

Screen built with MCP — missing icons, with font and banner drift marked in green — We ran this ourselves. The middle one is the usual route (Figma MCP hooked up) — **icons vanished, type slipped, and the banner design fell apart**. Every green mark is a miss. pix writes the code, then **pixel-diffs it against the original (Pixelmatch)** and keeps fixing until it’s 98%+ the same.

Desktop landing Figma original — Same story on desktop. It’s hard to tell which side is the mock and which side is code.

Desktop landing pix built in code — matches the original — Same story on desktop. It’s hard to tell which side is the mock and which side is code.

Install is two clicks

No terminal. No command-line homework. Hand the file to your AI, and it walks you through the rest.

1
Download the pix skill file
Download pix.md
2
Paste this with the file into your AI, word for word
Install this file as a skill. Then walk me through any setup I need, one step at a time.
3
After that, it’s actually two clicks
In Figma, right-click the frame you want built → “Copy link to selection”. Then just say:
/pix [복사한 피그마 링크]

We built this around Claude Code. Figma tokens and MCP setup happen once, and your AI walks you through that too.

In three lines

Use it when

The Figma is locked, and you need the same screen — not a cousin of it. Landings, campaigns, pages the mock already finished.

What’s inside

Asset extraction so icons and images come out separately, a Pixelmatch loop that checks section by section, and a Plan B that jumps to Chrome when the Figma API stalls. The pass line is 98% match.

What it won’t do

The last 2% is still yours. Logos and icons need one pass with your eyes. It runs on HTML/CSS projects.

Three things we learned while making it

We built this skill ourselves. Instead of other people’s reviews, we’re leaving the notes from bumping into the walls.

01
Copy MCP’s code as-is and you can hit 99.38% match — and still watch every icon vanish. The eye beat the number. That’s why pix extracts assets apart from the code.
02
Compare the whole screen at once and you stall at 70%. Split it by section, run Pixelmatch, and that’s when it finally crossed 98%.
03
When the Figma API locked up, we sat there for tens of minutes. Now we bail out through Chrome and wait time is zero.

Members only

← AI Skills