vibefigma
Translates Figma designs into functional React and Tailwind CSS code.
Install
mkdir -p .claude/skills/vibefigma && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9072" && unzip -o skill.zip -d .claude/skills/vibefigma && rm skill.zipInstalls to .claude/skills/vibefigma
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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).Key capabilities
- →Convert Figma designs to React components with Tailwind CSS
- →Generate React component files from a Figma URL
- →Extract assets like images and icons from Figma designs
- →Overwrite existing files with generated code when confirmed
- →Generate regular CSS instead of Tailwind CSS
- →Prompt for Figma URL, access token, and output paths in interactive mode
How it works
The `vibefigma` CLI tool converts Figma design data into React components and assets based on a provided Figma URL and access token.
Inputs & outputs
When to use vibefigma
- →Converting UI designs to code
- →Extracting components from Figma
- →Accelerating frontend implementation
About this skill
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
.envfile or pass via--tokenflag
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].tsxor user-specified path) - If file exists, ask the user for confirmation before overwriting, then use the
--forceflag - Run:
npx vibefigma "<URL>" -c <output-path>(add--forceif 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.mdfor 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.mdfor responsive design patterns
Prerequisites
Limitations
- →Always select a specific node/frame in Figma URL for best results
- →Generated code may need manual cleanup for production use
How it compares
This skill automates the conversion of Figma designs to functional React code, bypassing manual UI coding from design specifications.
Compared to similar skills
vibefigma side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vibefigma (this skill) | 0 | 6mo | Review | Beginner |
| visual-design-foundations | 5 | 5mo | No flags | Beginner |
| frontend-design-pro | 10 | 8mo | No flags | Intermediate |
| design | 0 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
design
dyeoman2
Design and restyle TanStack Start routes and React components in this repo using the March 2026 GPT-5.4 frontend guidance while preserving local conventions. Use when building or refining marketing pages, dashboards, admin surfaces, authenticated app views, page-level layouts, visual systems, or int
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
frontend-design
christophacham
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
design-principles
Saisagar7779
|