How do I install the Vibefigma skill?

Run npx skillmds@latest add vibeflowing-inc/vibefigma in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vibefigma safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vibefigma?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vibefigma free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vibefigma?

vibeflowing-inc (@vibeflowing-inc) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vibefigma by vibeflowing-inc — Agent Skill

Name: Vibefigma
Author: vibeflowing-inc

Vibefigma

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).

vibeflowing-inc 74c18e6 2 files · 7.1 KB Updated Sep 17, 2026

File contents

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

---name: vibefigmadescription: 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).---# VibeFigma - Figma to React ConverterConvert Figma designs into React components with Tailwind CSS using the `vibefigma` CLI.## Usage### Interactive Mode (Recommended for first-time users)```bashnpx vibefigma --interactive```Prompts for Figma URL, access token, and output paths.### Direct Command```bashnpx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y" --token FIGMA_TOKEN```### With Environment Variable```bashexport FIGMA_TOKEN=your_tokennpx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"```### Using .env FileThe user can add their Figma access token to a `.env` file in their project root:```envFIGMA_TOKEN=your_token_here```Then run:```bashnpx 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 Token1. Go to [Figma Account Settings](https://www.figma.com/settings)2. Scroll to **Personal Access Tokens**3. Click **Generate new token** → name it → copy immediately4. Store it securely in a `.env` file or pass via `--token` flag## Workflow1. Get Figma URL with specific node selected (frame/component to convert)2. **Check if output file already exists** at the target path (default: `./src/components/[Name].tsx` or user-specified path)3. If file exists, ask the user for confirmation before overwriting, then use the `--force` flag4. Run: `npx vibefigma "<URL>" -c <output-path>` (add `--force` if overwriting confirmed) - User configures token in .env or via --token flag5. If vibefigma throws a token error, inform the user about the token requirement6. Review generated component7. If code needs cleanup, see `references/responsive-cleanup.md` for making code responsive and production-ready## OutputVibeFigma 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

Frequently asked questions