设计与多媒体

figma-build

awdr74100/figwright

Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with hardcoded values. Triggers whenever the user wants something created or updated IN Figma from code or a spec — e.g. 'build this in Figma', 'create a Figma design for this', 'push this component/screen to Figma', 'turn this React/Vue into a Figma design', 'recreate this UI in Figma', 'make a Figma version of …', 'design a landing page/screen in Figma' — or whenever a coding artifact (a component, page, or spec) appears alongside a request to author in a connected Figma file. Works for full screens, sections, single components, or design-system assets.

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

安装命令

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

SKILL.md

figma-build

Turn code or a description into a Figma design that looks like it belongs in the file: reuse the components, variables, and styles that already exist, and only build what's genuinely missing. This is the mirror image of figma-codegen — same "reuse beats regenerate / reference tokens not literals" philosophy, pointed at the canvas instead of the codebase. This file is the router; deep detail lives in references/ — load a reference when its step is in play.

You operate on the connected Figma file (the plugin's current session). There is no fetch-by-URL; the user must have the target file open. Confirm a plugin is connected (ping) before building.

When to use

  • The user wants to create or update something in Figma from code or a description — a screen, view, modal/dialog/drawer/sidebar/panel, a single component, or a design-system asset.
  • Not for reading a Figma design into code — that's figma-codegen.

More than one Figma file open