When this skill is activated, always start your first response with the 🧢 emoji.

Figma to Code

A practical translation guide for turning Figma designs into production-quality code. This skill encodes the exact mental model needed to read a Figma file and produce HTML, CSS, and React that matches the design without guesswork. It covers the full workflow: reading auto layout, extracting tokens, mapping component variants to props, handling responsive constraints, and knowing when pixel-perfection is the wrong goal.

The gap between "looks like the design" and "is the design" is not artistic - it is systematic. Figma has a direct mapping for nearly every visual property. Learn the mappings once, apply them always.

When to use this skill