Cómo usar esta herramienta para desarrolladores
- Pega o edita el JSON de tokens.
- Configura el prefijo y los valores que necesites.
- Activa el modo oscuro automático si procede.
- Pulsa «Generar CSS» y adapta las reglas al diseño real.
CSS Generator
Genera una base CSS a partir de tokens de diseño definidos en JSON. Crea variables para color principal, superficie, texto, radio, espaciado y tipografía, además de estilos de body, tarjeta y botón con un prefijo configurable. Opcionalmente añade una variante para prefers-color-scheme: dark.
Datos de entrada
Texto o códigoEspacio publicitario
Qué hace esta herramienta para desarrolladores
Convierte tokens de diseño en CSS reutilizable con custom properties y componentes base. La salida está pensada como punto de partida coherente, no como un framework cerrado.
El JSON se valida y sus valores se asignan a variables CSS con un prefijo sanitizado. Después se generan reglas que consumen esos tokens y, si se activa, una media query de modo oscuro.
Los valores de los tokens se insertan como valores CSS; revisa que provengan de una fuente confiable y que sean compatibles con tus navegadores objetivo.
Ejemplo
{
"prefix": "site",
"primary": "#7c3aed",
"surface": "#ffffff",
"text": "#1f2937",
"radius": "14px",
"space": "1rem",
"font": "system-ui, sans-serif"
}Casos de uso
- Crear una hoja base para prototipos.
- Convertir tokens de una guía visual en variables CSS.
- Preparar componentes simples con una nomenclatura coherente.
Consejos para obtener resultados fiables
- Usa prefijos cortos y estables para evitar colisiones.
- Define escalas adicionales de espacio y tipografía en proyectos grandes.
- Comprueba el contraste de colores antes de publicar.
- Revisa el soporte de color-mix si necesitas compatibilidad con navegadores antiguos.
Detalles del procesamiento
El generador usa JSON.parse para validar la entrada y construye el CSS como texto. El prefijo se limita a letras, números, guiones y guiones bajos.
No comprueba contraste WCAG, validez completa de cada valor CSS ni compatibilidad de navegador de funciones modernas.
Preguntas frecuentes
¿Qué formato de entrada necesita el CSS Generator?
Necesita un objeto JSON con tokens como prefix, primary, surface, text, radius, space y font.
¿Puedo cambiar el prefijo de las variables y clases generadas?
Sí. El valor prefix se sanitiza y se usa tanto en custom properties como en las clases de tarjeta y botón.
¿Cómo genero una variante CSS para modo oscuro?
Activa la opción de modo oscuro; se añadirá una media query prefers-color-scheme con valores de superficie y texto alternativos.
¿El generador comprueba automáticamente el contraste entre texto y fondo?
No. Debes evaluar el contraste con una herramienta específica antes de usar los colores en producción.
¿Puedo editar las variables CSS después de generar el archivo?
Sí. La salida es CSS normal y los tokens quedan centralizados en :root para facilitar cambios posteriores.
Herramientas relacionadas para desarrolladores
Módulos del análisis
| Módulo | Función |
|---|---|
| Entrada JSON | Valida y lee tokens de diseño. |
| Variables CSS | Centraliza colores, espaciado, radio y tipografía. |
| Componentes base | Genera body, tarjeta, botón y modo oscuro opcional. |