design-to-component-translator

SKILLWorkflowcommunity
v0.0.0patricio0312revMITUpdated 7mo agoSource →

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

Community-submitted skill. Not yet reviewed by the Forge team. Full prompt content may not be available.Request review →
56Repo stars
1Clients
1Formats
7mo agoLast update
Skill
Authorpatricio0312rev
Version0.0.0
LicenseMIT
CategoryWorkflow
Formatsskill.md
PromptNot published
Compatibility
Claude✓ Supported
Cursor
Copilot
ChatGPT
Gemini
About

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

Keywords
skillclaude