# Pix

> Launches an autonomous, pixel-perfect UI implementation loop using Figma MCP and Chrome.

- Skill: `corlab-tech/pix` (Agent Skill)
- Install (CLI): `npx skillmds@latest add corlab-tech/pix`
- Raw SKILL.md: https://api.skillmd.com/api/skills/corlab-tech/pix/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: corlab-tech (https://skillmd.com/u/corlab-tech)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/corlab-tech/pix

---


# /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
1. **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
2. **Chrome Check**: Ensure Claude Chrome extension is active and connected.
3. **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**:

1. **Screenshot App**: Use Chrome to capture the rendered component at `localhost:<DETECTED_PORT>`.
2. **Screenshot Figma**: Use `get_screenshot` to get the high-res reference from Figma.
3. **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):
1. Explain what is wrong.
2. Fix the code.
3. **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:**
1. Detects: Vite + Tailwind + Lucide icons
2. Extracts: colors, typography, spacing from Figma
3. Updates: `tailwind.config.js` with missing tokens
4. Implements: component with exact values
5. Screenshots: both app and Figma
6. Compares: finds 2px gap difference
7. Fixes: adjusts padding
8. 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