From Figma to production code, checked against the design.
figma-to-code turns a Figma section into responsive, accessible code on your design tokens and primitives, then screenshots it with Playwright and compares it to the Figma baseline at mobile, tablet and desktop.
Needs the Figma MCP and Playwright MCP servers.
/enpitech:figma-to-code- mobilepass
- tabletpass
- desktoppass
A schematic of the verification step: the Figma baseline beside the rendered section, checked at each breakpoint.
Six steps, design to verified code.
Run /enpitech:figma-to-code with the Figma MCP and Playwright MCP servers running. It is interactive, so it starts by asking for what it needs.
- 01 · VARIABLES
It asks before it builds
The section name, the route, the Figma file URL, a node for each of mobile, tablet and desktop, and the selector the section is rooted at.
- 02 · BASELINES
Pulls the design
Figma MCP returns an image of each breakpoint’s node. Those images are what the result is checked against.
- 03 · BREAKPOINTS AND TOKENS
Maps it to your system
It discovers your breakpoints from the repo, writes an explicit design state for each one, and maps every value to an existing token.
- 04 · ASSETS
Sorts assets from elements
Each node is classified. An ASSET is exported and placed as-is. A UI ELEMENT is built with your design system primitives.
- 05 · SCAFFOLD
Writes the code
Responsive, accessible code on your primitives and tokens, with one DOM and explicit overrides per breakpoint.
- 06 · VERIFICATION
Checks it against Figma
Playwright MCP screenshots the section at mobile, tablet and desktop and compares each to its baseline. It fixes and repeats, up to five iterations by default.
It stops before it guesses.
Pixel-perfect only means something if the code stays inside your system. These are the skill’s stop conditions.
No invention
Never content or styles that are not in the design.
No new breakpoints
If the design needs one, it stops with
BREAKPOINT_CHANGE_REQUEST.No custom sizes
A value within 2px of a token snaps to it, by default. Anything further becomes a new token or a scoped CSS variable, and every snap is logged.
Assets as-is
Images and vectors are exported, never redrawn in CSS. If one cannot be exported, it stops with
MISSING.
The code, and the reasoning behind it
- Production-ready, responsive, accessible code
- A plan of subtasks and the chosen approach
- A Breakpoint Design Matrix of every screen
- An asset classification table
- Token decisions, with every snap and proposal
- A verification summary, pass or fail per width
- Accessibility and performance notes, and residual deviations
Three commands in Claude Code.
The toolkit ships as a Claude Code plugin. The same skills install into other agents with the skills CLI.
Claude Code plugin
- 01 · ADD THE MARKETPLACE
/plugin marketplace add enpitech/ai-tools - 02 · INSTALL THE PLUGIN
/plugin install enpitech@enpitech - 03 · ACTIVATE THE SKILLS
/reload-plugins
Skills then run as /enpitech:<skill-name>, for example /enpitech:figma-to-code.
Cursor, Copilot and other agents
Install the skills with the skills CLI. The review criteria are plain Markdown, so any agent that reads files can follow them.
npx skills add enpitech/ai-tools -g -yOne toolkit, one install.
Every skill below comes with the same plugin.
Your next section is one command away.
Free and open source under the MIT license. Read the criteria, change a threshold, send a pull request.
/plugin marketplace add enpitech/ai-toolsReady to shift?
We accelerate Frontend delivery. The Frontend Delivery Factory installs the system that lets everyone in your org ship production Frontend.
Senior engineers, AI-native by default, shipping production code in your repo. Fast onboarding. Honest work.
- 01
You send the form.
A few lines on your product and timeline.
- 02
We reply within a day.
Usually faster. No forms after that.
- 03
We meet and plan.
Scope, team fit, start date. Then engineers.