extract-design-system: Design-Tokens von einer öffentlichen Website ziehen

Für wen

Diese Skill installieren, wenn Design-Tokens von einer öffentlichen Website zurückgewonnen und Starter-JSON plus CSS-Custom-Properties für ein lokales Projekt erzeugt werden sollen. Offizielle Abdeckung: colors, typography, spacing, border radius, shadows. Nutzbar als AI agent skill (Claude, Cursor, Codex) oder standalone CLI.

Passt zu allen, die schnell starter tokens wollen, nicht eine ganze Komponentenbibliothek. Der Text nennt diese drei Agenten und eine eigenständige CLI; das nicht als Unterstützung nur eines davon lesen. Ist die Zielseite nicht öffentlich erreichbar, oder erwartest du Framework-Konfigurationsänderungen oder automatische App-Umschreibungen, passt die Skill nicht.

Seite: https://github.com/arvindrk/extract-design-system

Erster Versuch in 3 Minuten

Nur diesen Installationsbefehl:

npx skills add arvindrk/extract-design-system

Voraussetzungen: Ein lokales Projekt ist da, Tokens sollen von „einer öffentlich erreichbaren Einzelseite“ kommen; du akzeptierst, dass die offiziell genannten Dateien geschrieben werden. Kein nicht genanntes Verzeichnis angeben.

Zuerst den Umfang prüfen, nicht sofort Dateien schreiben. Den Agenten fragen: welche Tokens, welche Dateien, was er nicht tut. Erfolgssignal: colors / typography / spacing / border radius / shadows, plus .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, design-system/tokens.css; und Wiederholung von Public websites only, Single-page extraction workflow, Starter tokens, not a full component library, No framework config patching or automatic app rewrites.

Danach mit dem offiziellen Beispiel extrahieren lassen: https://stripe.com and generate starter token files for this project. Erfolgssignal: diese vier Dateien erscheinen, Framework-Konfiguration unverändert. Die Seite nennt eine standalone CLI, aber keinen Startbefehl; nichts erfinden.

Anwendungsfälle

Fall 1: Stripe nach dem offiziellen Beispiel. Original: Extract the design system from https://stripe.com and generate starter token files for this project. Dateischreiben und öffentliches Netz; Projektverzeichnis vor dem Lauf prüfen. Prüfbar sind Starter-Token-Dateien, kein Komponenten-Set.

Fall 2: Eine andere öffentliche Einzelseite, weiterhin nur Starter-Tokens. Eine öffentlich öffnenbare Seite übergeben, nur Tokens ziehen, App nicht ändern. Erfolgssignal weiter jene vier offiziellen Dateien, und der Agent lehnt Framework-Patches ab. Eine Mehrseiten-Site nicht als voll gecrawlt annehmen; der Text sagt single-page.

Nutzungsgrenzen

Nur öffentliche Websites. Private oder anmeldepflichtige Seiten liegen außerhalb.

Eine Seite pro Lauf. Das Produkt sind starter tokens, keine vollständige Komponentenbibliothek.

Kein framework config patching, keine automatic app rewrites.

Ausgabepfade folgen dem Text; nicht umbenennen oder an ungeschriebene Orte speichern.

Claude, Cursor, Codex und standalone CLI stehen im Original; keine Exklusivunterstützung schreiben. CLI-Start ist ungeschrieben; nicht erfinden. Ungeschriebene Selektoren, angemeldete Sitzungen und Domain-Stapel nicht ergänzen.