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".
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