Skills
.Work. You
Rest

figma-design-system-to-tailwind

Community

Figma to Tailwind CSS v4 converter

Design & Creative#design system#figma#tailwind css#ui development#component mapping#css tokens
AuthorRonnasayd
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the tedious and error-prone process of manually translating design tokens and component styles from Figma into a functional Tailwind CSS v4 configuration, ensuring design-to-code consistency.

Core Features & Use Cases

  • Design Token Extraction: Automatically extracts colors, spacing, typography, shadows, and border-radius values from Figma variables and styles.
  • Component Mapping: Maps Figma components to semantic Tailwind class patterns, generating tailwind.config.js or app/globals.css and a component-mapping.json for future automation.
  • Use Case: A UI/UX designer has just finalized a design system in Figma. A developer needs to implement this system in a new React project using Tailwind CSS v4. This Skill bridges that gap, providing ready-to-use configuration files and component mappings.

Quick Start

Use the figma-design-system-to-tailwind skill to convert the Figma design system found at file key 'your-figma-file-key' into a Tailwind CSS v4 configuration.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-design-system-to-tailwind
Download link: https://github.com/Ronnasayd/AI-pair-programming/archive/main.zip#figma-design-system-to-tailwind

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.