Herramientas
Tokens de diseño de cualquier web como variables CSS
Escribe la dirección de una web y obtén sus tokens de diseño como propiedades personalizadas de CSS: colores, estilos de texto, espaciado, radios, sombras y ancho del contenido, medidos en la página tal como se renderiza.
Prueba constripe.comlinear.appairbnb.com
Cómo funciona
Stylepack abre el sitio en un navegador real, mide lo que se renderiza (no lo que dice la hoja de estilos) en cuatro anchos y en ambos temas, y guarda el resultado como un paquete de diseño. Un sitio ya medido responde al instante; uno nuevo tarda menos de un minuto. Cada valor de esta página sale de ese paquete.
Preguntas
¿Qué es un token de diseño?
Un valor de diseño con nombre (un color, un tamaño de fuente, un paso de espaciado) que se usa en todo un producto. Como variables CSS, los tokens te permiten cambiar el estilo de todo un sitio modificando una sola declaración.
¿De dónde salen los nombres?
Del rol que cada valor tiene en la página medida: --color-primary es el acento, --text-headline-lg un estilo de titular, --space-4 un paso de espaciado. El tokens.json del paquete lleva los mismos nombres en el formato del W3C.
¿Es esto el sistema de diseño completo?
Son los valores. El paquete de diseño añade el comportamiento (hover, focus, menús, animaciones, maquetación responsive, modo oscuro), las recetas de los componentes y las capturas, en la forma con la que construyen los agentes de programación con IA.