← Volver al catálogo
Branding y diseñoGeneraciónIntermedioEn el pase

Sistema de Diseño y Tokens UI

Genera sistemas completos de design tokens (colores, tipografia, espaciado, sombras) a partir de un color de marca, con exportacion en CSS, SCSS o JSON y documentacion de componentes lista para handoff al equipo de desarrollo.

Comprobando acceso…

Incluida en el Pase · para Figma, React, Tailwind CSS

// resultado_de_ejemplo
Abrir en una pestaña nueva ↗

// qué_hace

Convierte un color de marca en un sistema de design tokens completo (colores, tipografia, espaciado, bordes, sombras, breakpoints) con verificacion WCAG y exportacion a multiples formatos.

// cómo_lo_hace

Ejecuta un script Python que genera paletas de color por pasos HSV, escalas tipograficas con ratio 1.25x, grid de 8pt y tokens de animacion, exportando en CSS custom properties, variables SCSS o JSON para Figma/Tailwind/styled-components.

// ejemplo_de_uso

Ideal al inicio de un proyecto cuando necesitas convertir el color principal de tu marca en un sistema de diseño completo y coherente. Ej.: partes del azul de tu logo y obtienes en minutos toda la paleta, escala tipográfica y tokens CSS/Tailwind listos para importar.

// plataformas

FigmaReactTailwind CSSstyled-componentsSCSSCSS
Categoría
Branding y diseño
Tipo
Generación
Nivel
Intermedio
Licencia
MIT
Seguridad
seguro · riesgo bajo
Versión
1.0.0

// opiniones_de_la_comunidad

Opiniones

Cargando opiniones…