skillFrontend Skills1 min read
figma-to-code
Created by EnpitechFor those striving for pixel-perfect UI implementation.
A structured skill that converts Figma designs into almost pixel perfect, production-ready, responsive code using MCP tools and design system tokens.
Install
npx skills add enpitech/skills --skill figma-to-code -g -ySummary
Gives your agent a structured process: pull the design via MCP, classify nodes as assets or UI elements, use your existing tokens, and screenshot every breakpoint until it matches. If something can't be resolved, it stops and tells you rather than guessing. This closes the gap between raw Figma MCP data and production output, so agents follow an explicit process instead of improvising spacing, breakpoints, and token usage.
More in Frontend Skills
- 1 min readvercel-react-best-practices70 performance rules for React and Next.js, written by the Vercel team that ships it to production.Read
- 1 min readreact-view-transitionsNative browser transitions for React UIs, without a motion library.Read
- 1 min readcomposition-patternsKill the boolean-prop explosion before your component library becomes unmaintainable.Read