Translate Figma designs into React and Tailwind components.
npx skills add https://github.com/YanCheng-go/danskprep --skill figma-to-code-yancheng-go
Please help me install this Agent Skill. Skill: figma-to-code Source: https://github.com/YanCheng-go/danskprep/tree/main/.claude/skills/figma-to-code Command: npx skills add https://github.com/YanCheng-go/danskprep --skill figma-to-code-yancheng-go
Translate Figma designs or UI specs into production-ready React + Tailwind components. Acts as the UI/UX Designer → Frontend Engineer handoff step.
Provide a Figma frame URL or screenshot, and I will generate production-ready React + Tailwind components.
High-intent search queries and answers about installing and using this skill.
To convert Figma designs to React components, provide a frame URL, screenshot, or UI spec to generate modular React + Tailwind code. This maps design tokens directly to Tailwind classes for a production-ready component output.
Yes, you can use Figma screenshots to generate Tailwind CSS code. The tool processes visual inputs like screenshots alongside frame URLs or written UI specs to output clean, accessible React components styled with Tailwind classes.
The best way to automate design-to-code handoff is translating Figma frames into reusable React and Tailwind components. This enforces accessible, well-structured output by mapping design tokens to shadcn primitives and Tailwind utility classes.
Yes, the generated React code includes accessible UI components. It enforces accessible, well-structured component output by mapping design tokens to Tailwind classes and shadcn primitives, ensuring frontend components are modular and reusable.
To map Figma design tokens to Tailwind classes, the tool translates design inputs into production-ready React components. It automatically applies these tokens to Tailwind utility classes and shadcn primitives during the UI component generation process.
You do not need a Figma URL to generate React and Tailwind code; you can use written UI specs. The tool accepts Figma frame URLs, screenshots, or written specifications to generate modular, reusable React components.
shawn-sandyExtract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.
tchiphuongCreate HeroUI v3 UI components with React 19 and Tailwind CSS v4.
Ben1821Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.
rakibulismTranslate Figma mockups, screenshots, and layout descriptions into React, Vue, or HTML/CSS component code.
