figma-to-code
This skill handles pixel-perfect Figma design conversion to React/Next.js/Tailwind code using Pixelbyte Figma MCP Server. It should be used when a Figma URL or design selection needs to be converted to production-ready code. The skill employs a 5-phase workflow targeting 85%+ accuracy with Code Connect support for component mapping. Use cases include (1) generating code from Figma files, (2) design implementation with design tokens, (3) creating design system components with Code Connect, (4) pixel-perfect UI development, and (5) responsive web components. Automatic QA is performed via Claude in Chrome MCP for visual validation.
Installation and usage
This skill handles pixel-perfect Figma design conversion to React/Next.js/Tailwind code using Pixelbyte Figma MCP Server. It should be used when a Figma URL or design selection needs to be converted to production-ready code. The skill employs a 5-phase workflow targeting 85%+ accuracy with Code Connect support for component mapping. Use cases include (1) generating code from Figma files, (2) design implementation with design tokens, (3) creating design system components with Code Connect, (4) pixel-perfect UI development, and (5) responsive web components. Automatic QA is performed via Claude in Chrome MCP for visual validation.
Après l'installation, vous pouvez utiliser ce skill en exécutant la commande suivante dans votre terminal :
skills use figma-to-code