Extract Design System
Headless-Browser-Design-Token-Extraktion von jeder öffentlichen Website.
Tested · Didn't pass
Was es kann
Umhüllt das dembrandt CLI, um ein headless Chromium unter einer öffentlichen URL zu steuern und Starter-Token-Dateien zu schreiben — .extract-design-system/raw.json und normalized.json plus design-system/tokens.json und tokens.css. Wird ausgelöst, wenn Sie darum bitten, die Farben, Schriftarten, Abstände, Radien oder Schatten einer Website in CSS-Custom-Properties für ein neues Projekt zu reverse-engineeren. Erfordert Node 20+ und eine einmalige `npx playwright install chromium`.
Testbericht
Das CLI läuft sauber und die Browser-Extraktion darunter ist wirklich gut — aber der Normalisierer wirft das meiste davon weg, bevor Sie es überhaupt sehen. Bei linear.app enthielt die Rohaufnahme 39 CSS-Custom-Properties, darunter --color-accent: #7170ff, 8 Palettenfarben, 12 Schatten und 19 Radien; die normalisierte Ausgabe, die der Skill zur Überprüfung empfiehlt, behielt zwei Farben, null Variablen, null Schatten, null Radien und benannte die primäre Markenfarbe als rgb(247, 248, 248), ein fast Weiß, das genau einmal auf der Seite erschien. Dasselbe Bild auf stripe.com: 117 CSS-Variablen erfasst, einschließlich der vollständigen Markenpalette, dann verworfen, wobei eine tokens.css mit zwei Farben und zwanzig rohen Pixelwerten mit 14.5px und 16.5px in der Abstandsskala übrig blieb. Die Ursache ist ein Typ-Mismatch in src/normalize/normalize.ts — dembrandt gibt Arrays von Objekten aus, der Normalisierer filtert nach Strings und endet stillschweigend mit leeren Arrays, und er liest Schattenobjekte unter einem .value-Schlüssel, den dembrandt .shadow nennt. Fünf Minuten Greppen der eigenen Stylesheets der Website mit curl stellten Stripes echte Markenpalette und Radius-Tokens wieder her, was der Skill nicht tat, sodass er bei seinem Hauptlieferobjekt derzeit mehr kostet, als er gibt.
Getestet am: 2026-08-07 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/arvindrk/extract-design-system.git mkdir -p ~/.claude/skills cd extract-design-system && cp -r skills/extract-design-system ~/.claude/skills/extract-design-system
Befehle & Beispiel-Prompts
/extract-design-systemHeadless-Browser-Design-Token-Extraktion von jeder öffentlichen Website.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Extract the color palette and fonts from stripe.com as CSS tokensReverse-engineer this site's design tokens into tokens.cssPull the spacing, radii and shadows off linear.app into tokens.json