skills.rest
guidodinello
guidodinelloCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-to-tailwind

Generate semantic HTML and Tailwind components from Figma design specs.

1|Updated Feb 27, 2026
Search Tags:#figma#tailwind#design-to-code#ui-components#semantic-html#tv()
One-click install
npx skills add https://github.com/guidodinello/claude-dotfiles --skill figma-to-tailwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-tailwind
Source: https://github.com/guidodinello/claude-dotfiles/tree/main/.claude/skills/figma-to-tailwind
Command: npx skills add https://github.com/guidodinello/claude-dotfiles --skill figma-to-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating visual Figma designs into production-ready HTML and Tailwind-based components is error-prone and time-consuming. This skill provides a repeatable approach to transform design specs into accessible, semantic markup and consistent styling.

Core Features & Use Cases

  • Semantic HTML guidance and production-ready structure aligned with design systems.
  • Tailwind 4 integration with tv() patterns for reusable components and scalable styling.
  • Use Case: convert a Figma header, card, and modal into accessible, responsive UI components with clean HTML semantics.

Quick Start

Provide a Figma design reference and request Tailwind-ready, semantic HTML components that implement the design system.

Frequently Asked Questions about figma-to-tailwind

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

FAQPage Schema
How do I convert Figma designs to Tailwind UI components?▼

Tailwind 4 integration with tv() patterns for Figma designs enables reusable, scalable styling by generating semantic HTML components. This approach applies consistent design system tokens to produce accessible, production-ready UI elements.

What is the best way to generate semantic HTML from Figma design specs?▼

Figma to Tailwind conversion requires providing design specs from your Figma files and requesting Tailwind-ready components. The process outputs semantic HTML and reusable styling patterns, bridging the gap between visual design and production code.

Does this approach support Tailwind 4 and tv() patterns for reusable components?▼

To use this design-to-code approach, provide Figma design references containing your visual layouts and design system specs. No additional dependencies are required to generate the semantic HTML and Tailwind components.

Can I turn Figma headers, cards, and modals into responsive UI components?▼

Figma to Tailwind conversion produces semantic HTML and Tailwind-based components ready for direct integration into front-end projects. The output focuses on accessible structure and reusable styling, leaving application logic for subsequent implementation.

Related Skills

Explore More Design & Creative Skills→
xlelibertyxleliberty

figma-implement-design

Translate Figma design nodes into React or Tailwind application code.

Community
Advanced
walbucwalbuc

epic-ui-guidelines

Enforce accessibility and consistency guidelines for Epic Stack UI components.

Community
Intermediate
ClaudioCeppi83ClaudioCeppi83

tailwind-design-system

Create reusable UI components and theme variables with Tailwind CSS.

Community
Advanced
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate