figma

Translate Figma frames into React and Tailwind UI code.

3|Updated Feb 13, 2026

Search Tags:#react #figma #mcp #tailwind #design-to-code #ui-automation

Ready to run

npx skills add https://github.com/bl1nk-bot/skills-cli --skill figma-bl1nk-bot

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/bl1nk-bot/skills-cli/tree/main/skills/figma
Command: npx skills add https://github.com/bl1nk-bot/skills-cli --skill figma-bl1nk-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Figma MCP-driven workflow that translates design context, assets, and screenshots from Figma into production-ready UI code following project conventions.

Core Features & Use Cases

Fetch design context with get_design_context to derive a structured UI representation.
Retrieve metadata and screenshots for visual parity and asset handling, then generate React + Tailwind components aligned with tokens.
Use references for setup, config, and troubleshooting to enable end-to-end design-to-code delivery.

Quick Start

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Figma designs to React components with Tailwind?▼

To convert Figma designs to React, this Skill extracts design context and screenshots, then translates them into production-ready UI code using Tailwind CSS tokens.

What is the Figma MCP server used for in design-to-code workflows?▼

The Figma MCP server enables this Skill to fetch design context, retrieve metadata, and capture screenshots, providing the structured data needed for accurate design-to-code translation.

Do I need bearer tokens to extract design context from Figma?▼

Yes, you need environment-based bearer tokens to authenticate with the Figma MCP server and extract structured design context for translating frames into production UI.

Can I verify visual parity when translating Figma frames to web apps?▼

Yes, you can retrieve screenshots via the Figma MCP server to perform visual verification, ensuring the generated React components match the original Figma designs.

What is the process for handling assets when converting Figma to UI code?▼

Asset handling involves downloading assets after retrieving metadata and screenshots, ensuring all visual elements are correctly integrated into the generated React and Tailwind components.