Tools
Design-Tokens einer Website als CSS-Variablen
Gib eine Website-Adresse ein und erhalte ihre Design-Tokens als CSS Custom Properties: Farben, Textstile, Abstände, Radien, Schatten und Inhaltsbreite, gemessen an der Seite, wie sie gerendert wird.
So funktioniert es
Stylepack öffnet die Website in einem echten Browser, misst, was gerendert wird (nicht, was im Stylesheet steht), in vier Breiten und in beiden Themes, und speichert das Ergebnis als Designpaket. Eine bereits gemessene Website antwortet sofort; eine neue braucht unter einer Minute. Jeder Wert auf dieser Seite stammt aus diesem Paket.
Fragen
Was ist ein Design-Token?
Ein benannter Designwert (eine Farbe, eine Schriftgröße, ein Abstandsschritt), der im ganzen Produkt verwendet wird. Als CSS-Variablen lassen dich Tokens eine ganze Website umgestalten, indem du eine einzige Deklaration änderst.
Woher kommen die Namen?
Aus der Rolle, die jeder Wert auf der gemessenen Seite spielt: --color-primary ist der Akzent, --text-headline-lg ein Überschriftenstil, --space-4 ein Abstandsschritt. Die tokens.json des Pakets trägt dieselben Namen im W3C-Format.
Ist das das ganze Designsystem?
Es sind die Werte. Das Designpaket ergänzt das Verhalten (hover, focus, Menüs, Motion, responsives Layout, Dark Mode), die Komponentenrezepte und Screenshots, in der Form, aus der KI-Coding-Agenten bauen.