The Figma-to-code handoff is where design quality disappears. The solution: ten Claude Code skills that turn a Figma design system into a production React + Tailwind repo with typed props, accessibility, and tokens. Tested on a live fintech build.

AppSignal — Get full visibility into app health, errors, and performance

Get full visibility into app health, errors, and performance

Hey all, Piotr from Properly Studio here.

For the last month I've been quietly building these in the margins of client work, trying to crack a problem every agency knows: the design-to-code handoff is where about 20% of the design quietly disappears.

The skills take a Figma design system and turn it into a production React + Tailwind repo, with typed props, accessibility, semantic tokens, and a claude.md any future AI agent can read. First real test was on Eterna, one of our fintech clients - the Figma file became a working React repo in a single afternoon.

Full write-up is on the blog: https://www.properly.studio/blog/how-we-ship-figma-to-production-react-with-claude-code

MIT licensed and on GitHub. Would love feedback, contributions, or just to hear what you'd point it at. Around all day to answer questions.