design-to-code
Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.
npx skills add vibeeval/vibecosystem --skill design-to-code --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design to Code Translating Figma designs to production-ready React/Tailwind code with consistent tokens. ## Design Token Structure ```typescript // tokens/index.ts — single source of truth export const tokens = { color: { // Primitive palette (don't use directly in components) blue: { 50: '#eff6ff', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }, red: { 50: '#fef2f2', 500: '#ef4444', 600: '#dc2626' }, gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 500: '#6b7280', 900: '#111827' }, // Semantic tokens (use these in components) semantic: { primary: '#2563eb', primaryHover: '#1d4ed8', primarySubtle: '#eff6ff', danger: '#dc2626', dangerSubtle: '#fef2f2', success: '#16a34a', successSubtle: '#f0fdf4', warning: '#d97706', text: '#111827', textSecondary: '#6b7280', textMuted: '#9ca3af', surface: '#ffffff', surfaceRaised: '#f9fafb', border: '#e5e7eb', }, }, spacing: { 1: '0.25rem', // 4px 2: '0.5rem', // 8px 3: '0.75rem', // 12px 4: '1rem', // 16px 5: '1.25rem', // 20px 6: '1.5rem', // 24px 8: '2rem', // 32px 10: '2.5rem', // 40px 12: '3rem', // 48px 16: '4rem', // 64px }, radius: { sm: '0.25rem', md: '0.375rem', lg: '0.5rem', xl: '0.75rem', '2xl': '1rem', full: '9999px', }, shad
- Design Token Structure
- Tailwind CSS Custom Theme from Design Tokens
- Spacing Scale (4px base)
- Typography Scale
- Responsive Breakpoint Mapping
- Component Anatomy
- Figma Auto-Layout → Flexbox/Grid Translation
- Color System (Semantic Tokens)
- Icon System Setup
- Accessibility Requirements per Component Type
- 3-Layer Token Architecture (Detay)
- Tailwind Token Mapping
- Dark Mode Token Strategy
- Referans
What does the design-to-code skill do?
Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill design-to-code --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.