Does it handle accessibility?

Yes, it includes an accessibility checklist during the validation phase, ensuring semantic HTML, ARIA labels, and appropriate color contrast.

How does it interpret Figma layouts?

It uses get_design_context() and get_metadata() to analyze Figma's auto-layout properties, mapping them directly to CSS Flexbox and Grid structures.

Does this skill require a Figma account?

Yes, you must have access to the Figma file you wish to convert, and you need to set up the Figma MCP server with your Figma API credentials.

Which Tailwind version does it support?

The skill defaults to Tailwind CSS v4 patterns, utilizing modern features like @theme variables and auto-calculated spacing units.

Can I switch between React and Astro outputs?

Yes, the skill automatically detects your project context, but you can override this using the --react or --astro flags in your command.

Figma to Code

Name: Figma to Code
Author: StyleList94

byStyleList94

0•

Design Tools

Converts Figma designs into production-ready React or Astro components using Tailwind CSS and a structured 6-step workflow.

Figma to Code is a specialized Claude Code skill that streamlines the transition from design to development by automating the conversion of Figma files into high-quality code. By leveraging the Figma MCP server, it extracts precise layout properties, typography, and color tokens to generate semantically correct JSX or Astro components styled with Tailwind CSS v4. The skill follows a rigorous process—covering context detection, design extraction, verification, code generation, styling, and validation—to ensure the final output is responsive, accessible, and aligned with modern frontend best practices.

Key Features

01Structured verification workflow to confirm layout and styling before generation

02Multi-framework support for React (.tsx) and Astro (.astro) components

03Accessibility-first code generation including semantic HTML and ARIA labels

04Deep integration with Figma MCP for direct design data and token extraction

05Automatic mapping of Figma properties to Tailwind CSS v4 utility classes

060 GitHub stars

Use Cases

01Rapidly prototyping landing pages from high-fidelity Figma mockups

02Building reusable component libraries based on a central design system

03Converting complex visual designs into responsive, accessible frontend code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stylelist94/claude-plugins figma-to-code

For use in Claude.ai and ChatGPT

Download Skill