/pix: The Pixel-Perfect Autonomous Loop

Note: This skill requires Figma MCP and Claude Chrome extension. Tool names may vary based on your MCP configuration (e.g., figma__get_screenshot or mcp__figma__get_screenshot). Run /mcp to see available tools.

Phase 0: Project Discovery

Before anything else, analyze the project to understand its stack:

1. Package Manager Detection

Check which lockfile exists: package-lock.json (npm), yarn.lock (yarn), pnpm-lock.yaml (pnpm), bun.lockb (bun). Use the corresponding command for all package operations.

2. Dev Server & Port Detection

Read package.json scripts to find the dev command
Check for port configuration in: vite.config.*, next.config.*, nuxt.config.*, webpack.config.*, .env*, or the dev script itself
Common patterns: --port, -p, PORT=, server.port
Default fallback order: 5173 (Vite), 3000 (Next/CRA), 8080 (Vue CLI)

3. Design System Detection

Scan package.json dependencies for styling approach:

Tailwind: tailwindcss → config in tailwind.config.*
CSS-in-JS: styled-components, @emotion/*, stitches
Component Libraries: @chakra-ui/*, @mui/*, @mantine/*, antd, @radix-ui/*
CSS Modules: check for *.module.css files
Vanilla CSS/SCSS: check for global stylesheets

4. Icon Library Detection

Scan package.json and imports for icon libraries:

lucide-react → Lucide
@heroicons/react → Heroicons
react-icons → React Icons (multi-library)
@radix-ui/react-icons → Radix Icons
@fortawesome/* → FontAwesome
@phosphor-icons/react → Phosphor
@tabler/icons-react → Tabler Icons
If none found, ask user which to install or use inline SVGs

5. System Verification

MCP Check: Verify Figma MCP is connected and authenticated:
- Call whoami to check authentication status
- If not connected: alert user to configure Figma MCP
- If not authenticated: guide user to authenticate via Figma OAuth
- Display the authenticated user info to confirm correct account
Chrome Check: Ensure Claude Chrome extension is active and connected.
Dev Server: Using detected port, run lsof -i :<PORT> to check if server is already running. If running, leave it alone. If not running, start dev server in background using detected package manager and script.

Phase 1: Context Gathering

Chrome Setup

Open Chrome with localhost:<DETECTED_PORT>:

Navigate to the page/route where the component will live
This tab is used for visual comparison and interaction testing (hover, click, focus states)
Zoom in on the component area for more detailed screenshots

User Input

Stop and Ask:

"Paste the Figma link to the component you want to build"
(Use 'Copy link to selection' in Figma)

Note: No need to open Figma in Chrome — Figma MCP handles screenshots via get_screenshot.

Phase 2: The Magic Prompt (Deep Execution)

Once the link is provided, you must execute this EXACT sequence. Do not skip details:

1. Hard Data Extraction (Figma MCP)

Use these Figma MCP tools in sequence:

Structure: Use get_metadata to understand the component hierarchy and layer structure.
Design Context: Use get_design_context to get the full design specification including layout, spacing, and styles.
Tokens: Use get_variable_defs to extract hex codes, corner-radius, shadows, and typography tokens.
Existing Components: Use get_code_connect_map to check if any Figma components already map to code components in the codebase. Reuse existing components instead of recreating them.
Typography: Get numeric font-weight (e.g., 600 vs 700), line-height, and letter-spacing.
Icon Colors: Extract icon stroke/fill colors separately from text colors. Check --stroke-0, fill, or style definitions. Never assume icons inherit text color.
Container Layout Analysis: Before implementing, identify:
- Which elements share a common background vs have distinct backgrounds
- Where borders/dividers separate sections
- Whether sections extend edge-to-edge within their parent or are visually inset

2. Exhaustive Property Verification

Rule: Before writing code for ANY element, call get_design_context and verify ALL applicable properties. Never assume inheritance or defaults. Extract each value explicitly.

Text: font-family, font-size, font-weight, line-height, letter-spacing, color, opacity, text-align, text-decoration, text-transform

Container/Block: width, height, min-width, max-width, padding (all 4 sides), margin, background-color, border-radius, border-width, border-color, border-style, box-shadow, opacity, overflow

Icon: size (width/height), fill, stroke, stroke-width, color (independent from parent text)

Button/Link: All text properties + all container properties + cursor, hover-state, active-state, disabled-state

Image: width, height, object-fit, border-radius, border, aspect-ratio

Spacing: gap, row-gap, column-gap, space-between elements

Layout Principle: Avoid hardcoded sizes (max-w-[140px], w-[200px], etc.). With correct font-size, line-height, padding, and parent container width, elements should naturally render correctly. Hardcoded dimensions are a symptom of incorrect upstream layout — fix the root cause instead.

Responsive Design: Keep responsiveness in mind as a big plus. Even if only one breakpoint is provided in Figma, consider how the component should adapt to different screen sizes. When possible, implement both desktop and mobile-friendly styles using the project's responsive approach (Tailwind breakpoints, CSS media queries, container queries).

Never use approximate Tailwind classes (like text-zinc-500) when exact hex values are available from MCP.

3. Design System Sync

NEVER hardcode values. Always sync to the project's design system:

If Tailwind: Check tailwind.config.*. If a Figma value is missing, update the config. NEVER hardcode arbitrary hex values like text-[#f3f3f3] if they should be tokens.
If CSS-in-JS: Add tokens to the theme object/file. NEVER use inline hex values.
If Component Library: Map to existing theme tokens, extend theme if needed. NEVER bypass the theme.
If CSS/SCSS: Add CSS custom properties to :root. NEVER scatter magic values.

4. Icons

Map Figma layer names to the project's detected icon library. Match the stroke-width and size (px) to the design exactly. If no icon library exists, ask user preference or use inline SVG from Figma.

5. Implementation & "Building Brick" QA

Implement the code using the project's existing patterns, then start the Comparison Loop:

Screenshot App: Use Chrome to capture the rendered component at localhost:<DETECTED_PORT>.
Screenshot Figma: Use get_screenshot to get the high-res reference from Figma.
The "Brick" Checklist: Compare the following with 1:1 scrutiny:
- Titles: Is the font boldness and vertical alignment identical?
- Icon Shapes: Does the icon look exactly like the Figma version? Check the stroke thickness.
- Icon Colors: Are icon colors identical to or different from adjacent text?
- Distances: Measure the gaps/margins. If Figma says 24px and the app looks like 20px, refactor.
- Borders: Verify 1px vs 2px lines and the exact curve of border-radius.
- Edge-to-Edge vs Inset: Does each section extend to its parent container's edges, or does it appear "floating" with visible gaps?
- Background Continuity: Does the background of a section touch its parent's boundaries, or is there a gap revealing the parent's background?
- Padding Ownership: Is the spacing between content and edges created by the parent container or the child? This affects whether backgrounds extend correctly.

Phase 3: Recursive Refinement

If you find ANY discrepancy (even 1px):

Explain what is wrong.
Fix the code.
Repeat Phase 2, Step 5 (Screenshot QA).

Success Condition: Only finished when side-by-side screenshots prove local app and Figma design are indistinguishable.

Phase 4: User Review

Once you're satisfied with the result, stop and ask:

"Here's the final result. Are you happy with it?"
"If something looks off, paste a Figma 'Link to Selection' for the specific area you'd like me to focus on."

If the user provides a new link, re-run Phase 2 scoped to that specific selection. This allows targeted refinement of individual building blocks without restarting the full component.

ULTRA-THINK MODE ENABLED: Take your time. Perfection over speed.

Examples

Good invocation:

/pix
> Paste Figma link: https://figma.com/design/abc123/MyApp?node-id=42-100

What Claude does:

Detects: Vite + Tailwind + Lucide icons
Extracts: colors, typography, spacing from Figma
Updates: tailwind.config.js with missing tokens
Implements: component with exact values
Screenshots: both app and Figma
Compares: finds 2px gap difference
Fixes: adjusts padding
Repeats: until pixel-perfect match

Bad patterns to avoid:

❌ text-[#f3f3f3] — hardcoded hex in Tailwind
❌ w-[247px] — magic width number
❌ Assuming icon color matches text
❌ Skipping screenshot comparison