Herramientas
Tema shadcn/ui de cualquier web
Escribe la dirección de una web y obtén su diseño como las variables CSS que lee shadcn/ui: background, foreground, primary, secondary, muted, accent, border, ring y radius.
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
¿Cómo se rellenan las variables de shadcn?
Cada color medido tiene un rol (background, foreground, primary, on-primary, surface, muted-foreground, border); las variables se rellenan a partir de esos roles, con el acento como --primary y --ring y el radio de los botones como --radius.
¿Tengo que convertir los valores?
No. El CSS de shadcn/ui acepta valores hex tal cual. Si tu configuración usa oklch o hsl, conviértelos con tu herramienta habitual o quédate con el hex.
¿Y el tema oscuro?
Cuando el sitio tiene tema oscuro, el resultado añade un bloque .dark con los valores oscuros medidos para fondo, texto, superficies y bordes.