figma-generate-component_skill

This skill converts Figma frames into production-ready React, Vue, or HTML/CSS components using MCP mappings and design tokens.

TypeScript

88

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill thebushidocollective/han --skill figma-generate-component

SKILL.md3.9 KB

Overview

This skill generates production-ready UI code from a Figma component or frame using a local Figma MCP (Desktop) server. It converts selected frames or node IDs into semantic, accessible components for frameworks like React, Vue, or plain HTML/CSS. The output favors design system mappings (Code Connect) and extracts design tokens to keep results consistent with your system.

How this skill works

The skill connects to the Figma MCP server (http://127.0.0.1:3845/mcp) to read the selected frame or a node referenced in a Figma URL. It analyzes the frame hierarchy, styles, layout, and any Code Connect mappings, then generates framework-specific component code with comments and design-token references. If MCP is unavailable or no node is provided, it guides the user to select a frame or supply a Figma link.

When to use it

You need a production-ready component from an existing Figma frame.
Migrating Figma designs into a design system or codebase while preserving tokens.
Prototyping accessible, semantic components quickly for React, Vue, or HTML/CSS.
When Code Connect mappings exist and you want mapped design system components instead of raw element generation.
Breaking large designs into reusable, framework-friendly components.

Best practices

Always request the target framework and preferred folder/namespace before generating code.
Prefer Code Connect mapped components to reuse your design system rather than generating primitives.
Use design tokens (variables) for colors, spacing, and typography instead of hard-coded values.
Verify MCP server connectivity; provide setup instructions if the server is not running.
Split very complex frames into smaller components to improve maintainability and testability.

Example use cases

Generate a React component from a selected Figma frame, with props derived from Figma variants and accessible markup.
Convert a Figma header/footer frame into reusable Vue components using Code Connect mappings for navigation items.
Produce HTML/CSS prototypes for handoff to backend teams, including responsive breakpoints and token references.
Extract a dialog/modal component from Figma and generate accessible markup with ARIA attributes and keyboard handling notes.
Identify design tokens used in a card component and output token suggestions for your design system.

FAQ

If MCP is unavailable the skill will provide step-by-step setup instructions to run the Figma Desktop MCP server locally and retry the request.

How do I tell the skill which framework to use?

Before code generation the skill prompts for the target framework (React, Vue, HTML/CSS, etc.) and any preferences such as TypeScript vs JavaScript or folder structure.

Can it use existing design system components?

Yes. When Code Connect mappings are present the generator prefers mapped design system components instead of creating low-level primitives.