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

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "vibefigma" with this command: npx skills add vibeflowing-inc/vibe_figma/vibeflowing-inc-vibe-figma-vibefigma

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

OptionDescription
-t, --token <token>Figma access token
-c, --component <path>Output path (default: ./src/components/[Name].tsx)
-a, --assets <dir>Assets directory (default: ./public)
-f, --forceOverwrite existing files without confirmation
--no-tailwindGenerate regular CSS instead

Getting a Figma Access Token

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

Workflow

  1. 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 flag
  4. Run: npx vibefigma "<URL>" -c <output-path> (add --force if overwriting confirmed)
    • User configures token in .env or via --token flag
  5. If vibefigma throws a token error, inform the user about the token requirement
  6. Review generated component
  7. 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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Coding

openclaw-version-monitor

监控 OpenClaw GitHub 版本更新，获取最新版本发布说明，翻译成中文， 并推送到 Telegram 和 Feishu。用于：(1) 定时检查版本更新 (2) 推送版本更新通知 (3) 生成中文版发布说明

Archived SourceRecently Updated
--00010110
Coding

ask-claude

Delegate a task to Claude Code CLI and immediately report the result back in chat. Supports persistent sessions with full context memory. Safe execution: no data exfiltration, no external calls, file operations confined to workspace. Use when the user asks to run Claude, delegate a coding task, continue a previous Claude session, or any task benefiting from Claude Code's tools (file editing, code analysis, bash, etc.).

Archived SourceRecently Updated
--0xmanel
Coding

ai-dating

This skill enables dating and matchmaking workflows. Use it when a user asks to make friends, find a partner, run matchmaking, or provide dating preferences/profile updates. The skill should execute `dating-cli` commands to complete profile setup, task creation/update, match checking, contact reveal, and review.

Archived SourceRecently Updated
--1asdwz
Coding

clawhub-rate-limited-publisher

Queue and publish local skills to ClawHub with a strict 5-per-hour cap using the local clawhub CLI and host scheduler.

Archived SourceRecently Updated
--52yuanchangxing