Figma Loop - Iterative Design Verification

Drill on Figma designs until pixel-perfect. Compare screenshots, fix one thing at a time, repeat until 3 consecutive checks pass with no changes needed.

When to Use

• Implementing UI from Figma designs
• Refining existing UI to match Figma
• Verifying a component matches its design spec
• User says "make it match Figma" or "pixel-perfect"

Prerequisites

At least one of these Figma MCP tools must be available:

Plus browser automation for implementation screenshots (close the tabs you opened when the loop ends; see the last step):

Or for React Native:

CLI Helper

Track iteration progress with check.sh:

SCRIPT="$HOME/.claude/skills/figma-loop/scripts/check.sh"

$SCRIPT init "WelcomeScreen" "95:72"   # Start session
$SCRIPT pass                            # Record passing check (increments counter)
$SCRIPT fail "spacing off by 8px"       # Record fail (resets counter to 0)
$SCRIPT status                          # Show progress (X/3 passes)

Quick Actions

The 3-Check Rule

A component is only "done" when 3 consecutive checks pass with zero changes needed.

Check 1: Fix spacing  → FAIL (made change) → counter resets to 0
Check 2: Fix color    → FAIL (made change) → counter resets to 0
Check 3: All good     → PASS → counter = 1
Check 4: All good     → PASS → counter = 2
Check 5: All good     → PASS → counter = 3 → DONE

Why 3? One pass could be lucky. Two could miss something. Three consecutive passes with fresh eyes each time gives confidence.

Check Criteria

For each element, verify ALL of these:

Common Figma-to-Tailwind Mappings

gap-[16px] → gap-4
p-[8px]    → p-2
p-[12px]   → p-3
p-[16px]   → p-4
p-[24px]   → p-6

rounded-[8px]  → rounded-lg
rounded-[12px] → rounded-xl
rounded-[16px] → rounded-2xl
rounded-[24px] → rounded-3xl

text-[14px] → text-sm
text-[16px] → text-base
text-[18px] → text-lg
text-[20px] → text-xl
text-[24px] → text-2xl
text-[28px] → text-3xl

RTL Quick Reference for Figma

Button icons in RTL:

// Icon on LEFT visually (after text in RTL)
<Button rightIcon={<Phone />}>Call</Button>

// Icon on RIGHT visually (before text in RTL)
<Button leftIcon={<Phone />}>Call</Button>

Anti-Patterns

When done

When you're done, close the browser you opened (Etan, 2026-11-01: no background reaper; the skill closes it). Close your own tabs and quit any browser you started: agent browser → page.close() then agent-browser release <lease>; a headless or Playwright browser → browser.close(); T3 preview → t3_preview_close; a cmux browser pane → close_surface; a temporary browser profile → quit that instance. Never leave a window open on Etan's screen.

Shut down any simulator or emulator you booted (Etan, 2026-11-02, via orc, on a leftover iOS Simulator: "just like the chrome beta but much worse"). T3 device tools → device_close with shutdown: true for the device you opened (the default only removes it from the panel); iOS → xcrun simctl shutdown <udid> for the device you booted (check with xcrun simctl list devices booted); Android → adb -s <your emulator serial> emu kill (find it with adb devices). Leave a simulator you found already running alone.