# pix

Converts Figma designs into frontend code and iteratively fixes layout mismatches using browser screenshots. Helpful when building UI components from design specs.

- plugin · `type=plugin` · Claude Code · ★ 96
- Author: skobak
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/skobak/pix
- Updated: 2026-02-04
- HTML: https://affpapa.org/en/nevibecode/plugins/pix

## What it does

The plugin inspects project settings to determine the framework, such as Next or Vite. It also identifies your styling setup, whether Tailwind or styled-components, along with your icon packages. Through Figma MCP, it pulls tokens and design specs, then drafts the code while preserving existing components mapped with Code Connect.

Visual validation runs via Chrome. After starting your local development server, pix captures the rendered page alongside the Figma reference image. It checks both screenshots for differences and rewrites styling or markup until the output matches the design.

The workflow fails immediately without a configured Figma MCP server. You will also need a paid Claude subscription (Pro, Team, or Enterprise), Claude Code v2.0.73+ launched with the `--chrome` option, and the Claude in Chrome extension v1.0.36 or higher.

## Install

### Claude Code (native platform)

**Plugin marketplace**
In the agent chat (not a shell):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
In the agent chat (not a shell):
```text
/plugin install pix@claude-community
```

## When to use it
- generate frontend code directly from a Figma link
- align local theme tokens with Figma variables
- eliminate visual layout discrepancies against reference designs
- reuse existing design system components via Code Connect

## Example prompts
- /pix
- Run `/pix` to implement the hero section from my Figma link

## Similar
- [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · 1300 installs
- [build-design](https://affpapa.org/en/nevibecode/skills/build-design.md) — skill · 3600 installs
- [daisyui](https://affpapa.org/en/nevibecode/skills/daisyui.md) — skill · 12100 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/julianoczkowski-frontend-design.md) — skill · 5500 installs
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [implement-from-figma](https://affpapa.org/en/nevibecode/commands/implement-from-figma.md) — command · ★ 7604

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md