MCP.directory

vibefigma

by vibeflowing-inc
0
0
Source

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

Install

mkdir -p .claude/skills/vibefigma && curl -L -o skill.zip "https://mcp.directory/api/skills/download/9072" && unzip -o skill.zip -d .claude/skills/vibefigma && rm skill.zip

Installs to .claude/skills/vibefigma

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

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

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

1,4071,302

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

1,2201,024

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

9001,013

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

958658

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

970608

pdf-to-markdown

aliceisjustplaying

Convert entire PDF documents to clean, structured Markdown for full context loading. Use this skill when the user wants to extract ALL text from a PDF into context (not grep/search), when discussing or analyzing PDF content in full, when the user mentions "load the whole PDF", "bring the PDF into context", "read the entire PDF", or when partial extraction/grepping would miss important context. This is the preferred method for PDF text extraction over page-by-page or grep approaches.

1,033496

Related MCP Servers

Browse all servers
Figma to React NativeFigma to React Native

Easily convert Figma designs to code. Extract components from Figma files, generate hierarchies & metadata for smooth Fi

70 tools
Figma to CodeFigma to Code

Convert Figma designs into clean HTML & CSS with customizable file paths and organization—fast, accurate code generation

3662 tools
Feuse (Figma Design-to-Code)Feuse (Figma Design-to-Code)

Automate your figma to code workflow. Convert Figma designs to HTML, extract SVGs, analyze color, and generate CSS with

390 tools
Figma ContextFigma Context

Unlock seamless Figma to code: streamline Figma to HTML with Framelink MCP Server for fast, accurate design-to-code work

13,4900 tools
MagicMagic

Create modern React UI components instantly with Magic AI Agent. Integrates with top IDEs for fast, stunning design and

4,3850 tools
FigmaFigma

Transform Figma designs into high-quality code with AI. Seamless figma to code and figma to html workflows for efficient

3600 tools

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.