pix — Claude Code plugin: what it does, how to install
Converts Figma designs into frontend code and iteratively fixes layout mismatches using browser screenshots. Helpful when building UI components from design specs.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install pix@claude-communityWhat pix 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.
What it helps with
- 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 for the agent
- /pix
- Run
/pixto implement the hero section from my Figma link
How to install pix
Plugin marketplace
/plugin marketplace add anthropics/claude-plugins-community/plugin install pix@claude-communityStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about pix
How to install pix in Claude Code?
Run /plugin marketplace add anthropics/claude-plugins-community inside Claude Code, then execute /plugin install pix@claude-community.
What does pix do?
It pulls UI metadata and tokens via Figma MCP, implements the component, and checks localhost against the original design inside Chrome. The plugin automatically revises the code until visual differences disappear.
What are the prerequisites for running pix?
You need a paid Claude plan, Claude Code v2.0.73+ with the --chrome flag, and the Claude in Chrome extension v1.0.36+. A working Figma MCP integration is also required.
