figma

Generates React and Tailwind UI code from Figma designs via MCP.

1|Updated Feb 12, 2026

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

Ready to run

npx skills add https://github.com/applewave/claude.skill --skill figma-applewave

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Translates Figma designs into production-ready UI code by orchestrating design-data extraction, asset handling, and code generation via the Figma MCP server.

Core Features & Use Cases

Fetch design context, metadata, and screenshots from Figma MCP to drive implementation.
Manage assets and references to ensure 1:1 parity with the design.
Produce production-ready UI code (React + Tailwind) aligned with project conventions and validate against Figma.

Quick Start

Provide a Figma URL or node ID to start the MCP flow and generate production-ready UI code from the retrieved design context.

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 code?▼

To convert Figma designs to React code, you provide a Figma URL or node ID to extract design context and generate production-ready UI components using Tailwind CSS.

How does Figma MCP server translate design data into UI?▼

The Figma MCP server orchestrates design-data extraction, fetches metadata and screenshots, and drives code generation to produce UI components that match the original design.

Can I use the Figma MCP to get design assets and references?▼

Yes, the Figma MCP flow includes asset handling and reference management to ensure 1:1 parity with your design when generating production-ready UI code.

What is the best way to implement UI from a Figma URL?▼

The best way to implement UI from a Figma URL is passing it to the MCP flow to fetch visual context, generate React and Tailwind code, and validate the output against the design.

Does Figma design-to-code generation support visual verification?▼

Yes, visual verification is a core step in the design-to-code workflow, validating the generated React and Tailwind UI against the retrieved Figma design screenshots.

Why is my Figma node ID not generating the correct UI code?▼

If a Figma node ID fails to generate correct UI code, the MCP setup or metadata fetch may need troubleshooting to ensure the extracted design context and assets align properly.