pix

Convert Figma links into pixel-perfect frontend implementations with token synchronization.

96|8|Updated Jan 23, 2026

Search Tags:#frontend #design tokens #UI implementation #pixel-perfect #Figma MCP #component mapping

Ready to run

npx skills add https://github.com/skobak/pix --skill pix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pix
Source: https://github.com/skobak/pix/tree/main/skills/pix
Command: npx skills add https://github.com/skobak/pix --skill pix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the end-to-end process of turning a Figma design into a pixel-accurate frontend implementation by orchestrating Figma MCP calls and Chrome-based rendering.

Core Features & Use Cases

Autonomous UI implementation: Converts a Figma link into a working frontend loop with token synchronization and pixel checks.
Design-system alignment: Reuses design tokens and maps components to your library, ensuring consistent styling.
Use Case: As a frontend engineer, drop a Figma link and receive a pixel-perfect render with automated refinement until parity is achieved.

Quick Start

Use the pix skill to start from a Figma link and let Claude drive the UI implementation loop.

Frequently Asked Questions about pix

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate pixel-perfect UI implementation from a Figma link?▼

Automating pixel-perfect UI implementation from a Figma link uses Figma MCP and Chrome to orchestrate an autonomous rendering loop. It applies staged MCP calls for metadata and screenshots, synchronizing design tokens and mapping components to ensure visual parity.

How does Figma MCP convert design tokens into frontend code?▼

Figma MCP converts design tokens by fetching variable definitions and code connect maps before extracting detailed design context. This staged approach ensures accurate token synchronization and component mapping during the frontend implementation process.

Can I use this autonomous UI loop with my existing component library?▼

Yes, the autonomous UI loop integrates with your existing component library by retrieving code connect maps and applying design-system alignment. This ensures that mapped components reuse your library's styling and tokens for consistent frontend implementation.

What's the best way to achieve visual parity between Figma designs and frontend code?▼

Achieving visual parity between Figma and frontend code is best done through an automated refinement loop using Chrome-based rendering and Figma MCP screenshots. This process continuously compares the rendered UI against the design until pixel-perfect parity is reached.

Why does the Figma to code workflow call get_metadata before get_design_context?▼

Calling get_metadata before get_design_context optimizes the Figma to code workflow by using cheap MCP calls first to gather structural data and screenshots. Expensive context extraction is then targeted only at the smallest necessary nodes to reduce overhead.

Do I need a non-root context to map Figma components to my design system?▼

Using a non-root context is enforced when mapping Figma components to your design system to ensure accurate design-system integration. This approach restricts the scope of component mapping and token synchronization to the relevant UI nodes.