Figma to Tailwind Component Generator

ממיר פריימים מ־Figma לקוד React + Tailwind נקי תוך שימוש ב־design tokens קיימים בפרויקט.

תחום: עיצוב

מתי להשתמש

בכל פעם שמקבלים מקטע עיצוב חדש מ־Figma וצריך לתרגם אותו לקומפוננטה ב־React.

תגיות: figma, tailwind, components

SKILL.md

--- name: figma-to-tailwind description: Convert Figma designs to React + Tailwind components using existing project tokens --- ## Overview Generates pixel-perfect React components from Figma frames while respecting your existing design system. ## When to use - New feature mockup needs to be implemented - Migrating designs from Figma into a Tailwind codebase - Component-by-component handoff ## How it works 1. Extract structure from Figma frame (via MCP or screenshot description) 2. Map Figma styles to existing Tailwind tokens 3. Generate semantic, accessible JSX 4. Suggest where the component fits in the file structure ## Example usage ``` Convert this Figma frame into a React component using our tokens. ``` ## References - See references/sources.md