design-to-code

Solid

Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.

AI & Automation 495 stars 41 forks Updated 1 months ago MIT

Install

Quality Score: 86/100

Stars 20%

90

Recency 20%

75

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

50

License 10%

100

Description 5%

100

Skill Content

# 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', }, shadow: { ...

Details

Author: vibeeval
Repository: vibeeval/vibecosystem
Created: 2 months ago
Last Updated: 1 months ago
Language: C#
License: MIT

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-system-creation

Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency. Keywords: design-tokens, typography, spacing, color-palette, components, patterns, variables, dark-mode, theming, CSS-variables, accessibility, WCAG, responsive, grid-system, breakpoints, design-scale, semantic-tokens, component-library, style-guide, documentation, Figma, Storybook, brand-consistency, design-principles

160 Updated 2 weeks ago

AI & Automation Solid

figma-to-code

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.

140 Updated today

Web & Frontend Listed

ux-design-systems

Build consistent design systems with tokens, components, and theming. Use when creating component libraries, implementing design tokens, building theme systems, or ensuring design consistency. Triggers on design system, design tokens, component library, theming, dark mode.

2 Updated today

Web & Frontend Solid

design-to-code

Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.

27,681 Updated today

Web & Frontend Listed

design-to-code

Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.

335 Updated today