scaffolding-from-figma

Provide a Figma file URL with node-id and a Personal Access Token. The pipeline extracts node metadata via the Figma REST API, maps values to your project's design tokens in a spec.md file, then dispatches a designer agent to generate Vue or React scaffold components.

The figma-to-spec.mjs script walks the Figma node tree and maps colors, spacing, radii, and font sizes to your SCSS variables like $color-main or $space-4. You adapt the COLOR_MAP and related maps to your project's _variables.scss file before running.

No. The skill explicitly requires a documented SCSS or CSS variables file and design system documentation. If the target project only uses inline hex values, you should establish tokens first, since the pipeline's core value is token-mapped output with zero hardcoded colors.

You need a Figma Personal Access Token with file_content:read and file_variables:read scopes, generated at figma.com/settings/security. The token is stored in a gitignored .env file and used for REST API calls to fetch node JSON and rendered PNGs.

Hallucination occurs when a monolithic design system document exceeds what the agent can reliably process. Splitting documentation into roughly 14 focused files (index, tokens, components) reduced invented tokens to zero and cut pixel drift from about 10% to 2.5% in measured experiments.

The output is a scaffold, not production code: expect 86-97% pixel match requiring 1-2 hours of publisher refinement. It does not handle complex interactive features like drag-and-drop, real-time updates, or charts, and is unsuitable for one-off prototypes where manual coding is faster.