Summary

Convert Figma designs to production-ready React components with Tailwind CSS.
Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma".
Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 2,935 B

docs SUMMARY.md 325 B

History

Apr 2, 2026 First seen on skills.sh

Sep 9, 2026 First recorded snapshot · 1 installs

SKILL.md

VibeFigma - Figma to React Converter

Convert Figma designs into React components with Tailwind CSS using the vibefigma CLI.

Usage

Interactive Mode (Recommended for first-time users)

npx vibefigma --interactive

Prompts for Figma URL, access token, and output paths.

Direct Command

npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y" --token FIGMA_TOKEN

With Environment Variable

export FIGMA_TOKEN=your_token
npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"

Using .env File

The user can add their Figma access token to a .env file in their project root:

FIGMA_TOKEN=your_token_here

Then run:

npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"

Note: If the token is not configured, vibefigma will throw an error. Only then inform the user about the token requirement.

Common Options

Option	Description
`-t, --token <token>`	Figma access token
`-c, --component <path>`	Output path (default: `./src/components/[Name].tsx`)
`-a, --assets <dir>`	Assets directory (default: `./public`)
`-f, --force`	Overwrite existing files without confirmation
`--no-tailwind`	Generate regular CSS instead

Getting a Figma Access Token

Go to Figma Account Settings
Scroll to Personal Access Tokens
Click Generate new token → name it → copy immediately
Store it securely in a .env file or pass via --token flag

Workflow

Get Figma URL with specific node selected (frame/component to convert)
Check if output file already exists at the target path (default: ./src/components/[Name].tsx or user-specified path)
If file exists, ask the user for confirmation before overwriting, then use the --force flag
Run: npx vibefigma "<URL>" -c <output-path> (add --force if overwriting confirmed)

- User configures token in .env or via --token flag

If vibefigma throws a token error, inform the user about the token requirement
Review generated component
If code needs cleanup, see references/responsive-cleanup.md for making code responsive and production-ready

Output

VibeFigma generates:

React component (.tsx) with Tailwind CSS classes
Assets (images/icons) in the assets directory

Notes

Always select a specific node/frame in Figma URL for best results
Generated code may need manual cleanup for production use
See references/responsive-cleanup.md for responsive design patterns

vibefigma

Installation