Figma Pixel

Overview

Use this skill when a user shares a Figma link and wants to build a page from that design or bring an existing implementation closer to it. Treat Figma as the source of truth.

This skill has two layers:

• Scripts — automated: parse Figma URLs, fetch API data, export reference images, render pages with Playwright, run pixelmatch/OpenCV comparison, and generate reports.
• Agent — guided: the LLM reads Figma API data and diff reports, then writes or edits HTML/CSS to fix mismatches. Layout fixes are made by the agent, not by the scripts.

The scripts do not auto-patch code. They produce the data and artifacts the agent needs to make accurate, Figma-grounded fixes.

This skill should behave in a production-ready way:

• require a valid FIGMA_TOKEN
• prefer stable scripted flows over ad-hoc commands
• never create working folders, scratch files, or runtime artifacts inside the implementation project directory — all run outputs go under the skill's own figma-pixel-runs/ directory (i.e. alongside this SKILL.md file)
• reuse shared Figma artifacts when possible
• stop clearly on real blockers instead of silently degrading