@tank/figma-to-code - Pixel-Perfect Figma to Code
Extract Figma design specs and translate to pixel-perfect code with exact CSS values
Tags
Updated: 2026-03-26Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Extract design context
- Capture screenshots
- Extract design tokens
- Translate visual properties to CSS
- Build design token systems
- Map layouts to Flexbox
- Convert component variants to props
- Validate visual parity
Inputs
- Figma design file
- Figma node ID
- Figma design screenshot
- Design variable definitions
Outputs
- Pixel-perfect code implementation
- Exact CSS values
- Design token system
Requirements
- Figma desktop MCP (figma-desktop)
- TypeScript support
- React framework
- CSS styling