figma-codegen
Installation
SKILL.md
figma-codegen
Turn a Figma selection into code that looks like the rest of the project: reuse the components and
tokens that already exist, only build what's genuinely missing. The grounded tools do the heavy
lifting so you are not guessing from a screenshot. This file is the router; deep detail lives in
references/ — load a reference when its step is in play.
When to use
- The user pastes a Figma URL/selection and asks for code ("code this", "build this component").
- The user wants to extend an existing component to match a Figma frame.
More than one Figma file open
Every tool result says so when it applies, so you do not have to check up front: with two or more
files connected and none claimed, results carry a MORE THAN ONE FIGMA FILE IS OPEN block naming
them. It matters because calls otherwise follow whichever file the user last touched, which changes
when they switch tabs — so a task can read one file and write to another and report success.