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
Использование

После установки вы можете использовать этот skill, выполнив следующую команду в терминале:

skills use design-to-component-translator