设计与多媒体

figma-codegen

awdr74100/figwright

Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a Figma design turned into code — e.g. 'code this design', 'implement this frame', 'build this screen/component', 'turn this Figma into React/Vue', 'convert this design to code' — or whenever a Figma URL or the current Figma selection appears alongside a coding request. Works for full screens, single sections, or one component.

  • 1378 次安装
  • 1200 星标
  • 收录于

安装命令

npx skills add https://github.com/awdr74100/figwright --skill figma-codegen

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.