vibefigma_skill

Overview

This skill converts Figma designs into production-ready React components styled with Tailwind CSS. It runs as a CLI tool that accepts a Figma file URL and a Figma access token, then exports .tsx components and asset files. The output is scaffolded for easy review and manual refinement for production use.

How this skill works

You provide a Figma URL that targets a specific node or frame and supply a Figma access token (via --token flag, FIGMA_TOKEN env var, or a .env file). The tool fetches the Figma node, extracts layout and assets, and generates a React .tsx component with Tailwind classes plus image/icon assets in the configured assets directory. Options let you set output paths, disable Tailwind for plain CSS, and control where components and assets are written.

When to use it

• You have a Figma frame or component URL and want a fast React + Tailwind starting point.
• You need to extract reusable components and assets from a Figma file into code.
• You want to speed up UI implementation by generating initial component markup and styles.
• You are preparing design handoffs and want a code scaffold for developers to refine.
• You prefer CLI workflows and want to integrate Figma-to-code generation into a build step.

Best practices

• Select a specific node or frame in Figma before copying the URL for best results.
• Provide a Figma access token via --token, FIGMA_TOKEN env var, or a .env file to avoid runtime errors.
• Review and manually clean generated code for accessibility, responsiveness, and edge cases.
• Place assets directory in your public/static folder and adjust paths to match your project structure.
• Use the interactive mode (npx vibefigma --interactive) for guided setup and first-time runs.

Example use cases

• Convert a button, card, or entire page frame from Figma into a reusable React component.
• Generate a set of UI primitives from a design system file to bootstrap a component library.
• Export image and icon assets from a Figma frame into your project's public assets folder.
• Quickly scaffold pages for prototyping where visuals must match the designer's Figma layout.
• Integrate into scripting or CI to produce code previews for design reviews.