skills.rest
furrycolombia-sys
furrycolombia-sysCOMMUNITY
Explore all skills by this author →
GitHub

figma

Convert Figma design specs into React UI code with shadcn/ui, Tailwind, and i18n.

1|Updated Mar 18, 2026
Search Tags:#workflow#ui#frontend#figma#i18n#design-to-code
One-click install
npx skills add https://github.com/furrycolombia-sys/candyshop --skill figma-furrycolombia-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/furrycolombia-sys/candyshop/tree/main/.agents/skills/figma
Command: npx skills add https://github.com/furrycolombia-sys/candyshop --skill figma-furrycolombia-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts design specs from Figma into production-ready UI code, bridging designers and developers and reducing handoff guesswork.

Core Features & Use Cases

  • Automates translation of Figma components into React UI code using shadcn/ui, Tailwind, and i18n.
  • Ensures consistency with the Claude workflow by referencing the canonical SKILL.md at .claude/skills/figma/SKILL.md.
  • Use Case: When you have a Figma design kit, this skill outputs ready-to-implement UI components and layouts.

Quick Start

Convert the provided Figma design into production-ready UI components using shadcn/ui, Tailwind, and i18n.

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

To convert Figma designs to React UI code, this skill translates Figma design specs into production-ready components using shadcn/ui, Tailwind, and i18n. It bridges designers and developers by automating the translation of design tokens and components.

Can I generate Tailwind and shadcn/ui components from a Figma file?▼

Yes, you can generate Tailwind and shadcn/ui components from a Figma file. This skill outputs ready-to-implement React UI components and layouts by applying design tokens extracted from your Figma design kit.

What is the best way to automate Figma to frontend workflow?▼

The best way to automate a Figma to frontend workflow is using a skill that reads canonical SKILL.md configurations to translate design specs into React code. It reduces handoff guesswork by following established Claude workflows.

Does this Figma design-to-code conversion support i18n?▼

Yes, this Figma design-to-code conversion supports i18n. It automates the translation of Figma components into React UI code using shadcn/ui, Tailwind, and i18n to ensure localized production-ready outputs.

Do I need a specific environment setup to translate Figma specs into production-ready code?▼

You need a frontend environment using React, shadcn/ui, Tailwind, and i18n to translate Figma specs into production-ready code. The skill follows the Claude workflow by reading the canonical `.claude/skills/figma/SKILL.md` file as its source of truth.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

design-to-component-translator

Translate Figma design specs into React components with Tailwind/shadcn styling.

Community
Advanced
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
yairbedermanyairbederman

figma-to-code

Translate Figma designs into React and Vue UI components with token-driven styling.

Community
Advanced