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.

Installs
655
GitHub Stars
723
First Seen
Jun 19, 2026
figma-codegen — awdr74100/figwright