skills.rest
applewave
applewaveCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/applewave/claude.skill --skill figma-applewave
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
viably-labsviably-labs

figma

Fetch Figma design context, assets, and variables via MCP server.

Official
Advanced
bzellmanbzellman

figma

Translate Figma frames into React and Tailwind UI code.

Community
Advanced
DevattomDevattom

ui-styling

Create responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
tdiminotdimino
41

figma-mcp

Convert Figma designs into HTML, CSS, React, or Vue code.

Community
Advanced