design-to-component-translator
Translates design specifications from Figma into ready-to-deploy React components, extracting spacing, colors, typography, and responsive rules. Maps design values to token systems and generates Tailwind code with full interaction states (hover, focus, active, disabled) and accessibility features.
Design-to-Component Translator converts Figma specs into production-ready React components with token mapping and interaction states.
AI-generated summary based on this skill's SKILL.md
Install
patricio0312rev/skills/design-to-component-translator
git clone https://github.com/patricio0312rev/skills
cp -r skills/frontend/design-to-component-translator ~/.claude/skills/design-to-component-translatornpx skillfed install patricio0312rev/skills/design-to-component-translatorFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does design-to-component-translator convert Figma design to React component?
design-to-component-translator extracts spacing, colors, typography, and responsive rules directly from your Figma specifications and generates production-ready React components. It maps design values to design tokens and Tailwind CSS classes, ensuring your components match the design system exactly while including all interaction states and accessibility features.
Can design-to-component-translator map design values to Tailwind CSS?
Yes. design-to-component-translator automatically maps design values—including spacing, colors, and typography—to Tailwind CSS classes and design tokens. This ensures consistency between your design system and code, eliminating manual translation errors and speeding up component generation.
What does design-to-component-translator generate for interaction states?
design-to-component-translator implements all interaction states from your design specs: hover, focus, active, and disabled states. It also handles responsive breakpoints defined in your design, ensuring components adapt correctly across devices while maintaining pixel-perfect accuracy and full accessibility compliance.
Does design-to-component-translator support design system implementation?
design-to-component-translator translates complete design system specifications into React code. It processes design tokens, component patterns, and styling rules from Figma, generating a cohesive set of components that follow your design system's architecture and can be deployed immediately to production.
How does design-to-component-translator ensure accessibility?
design-to-component-translator generates pixel-perfect components with built-in accessibility features. It includes semantic HTML, ARIA attributes where needed, and proper focus management across all interaction states, ensuring your translated components meet accessibility standards without additional manual work.
What license does design-to-component-translator use?
design-to-component-translator is released under the MIT license, allowing you to use, modify, and distribute it freely in both personal and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
Design-to-Component Translator
Convert design specifications into pixel-perfect, production-ready React components.
Core Workflow
- Analyze design specs: Extract spacing, colors, typography, dimensions
- Map to tokens: Convert design values to design system tokens
- Generate structure: Create semantic HTML structure
- Apply styles: Implement Tailwind/CSS with exact measurements
- Add states: Include hover, focus, active, disabled states
- Handle responsive: Implement breakpoint-specific rules
- Ensure accessibility: Add ARIA labels, keyboard navigation
- Document variants: List all visual states and props
Design Spec Analysis
Extract from Figma/Design
Spacing & Layout:
- Padding:
p-4(16px),px-6(24px
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
frontend/design-to-component-translator/SKILL.md