home/categories/productivity-tools/patricio0312rev-skills-frontend-design-to-component-translator-skill-md
productivity-toolstools

design-to-component-translator

Converts Figma/design specifications into production-ready UI components with accurate spacing, typography, color tokens, responsive rules, and interaction states (hover, focus, disabled, active). Generates Tailwind/shadcn code with design system tokens mapping. Use when translating "Figma to code", "design specs to components", or "implement design system".

patricio0312rev
maintainer
patricio0312rev
আপডেট হয়েছে 1/12/2026
স্টার
6
ফর্ক
0
quick start

Installation and usage

Converts Figma/design specifications into production-ready UI components with accurate spacing, typography, color tokens, responsive rules, and interaction states (hover, focus, disabled, active). Generates Tailwind/shadcn code with design system tokens mapping. Use when translating "Figma to code", "design specs to components", or "implement design system".

ইনস্টলেশন
$ install --globalskills.sh
ব্যবহার

ইনস্টল করার পর, টার্মিনালে নিচের কমান্ড চালিয়ে আপনি এই স্কিল ব্যবহার করতে পারবেন:

skills use design-to-component-translator