Design-System-Extraktion für Claude Code

Jedes Design-System wird zum Claude-Skill.

skillui crawlt jede Website, jedes Repo, jeden Code. Farben, Typografie, Spacing, Animationen und Komponenten landen in einem Ordner, den Claude Code automatisch liest. Rein statisch. Keine KI. Keine API-Keys.

Jetzt loslegen Auf GitHub ansehen

API-Keys nötig

100 %

statische Analyse

Extraktions-Modi

Notions Landingpage, in Minuten aus einem einzigen Prompt erzeugt.

$npm install -g npxskillui

Das Feature, das den Unterschied macht

Cookie-Banner? Weg, bevor der Screenshot fällt.

Ein Consent-Overlay verfälscht jede Extraktion: Es verdeckt die echte Seite, kippt die Farb-Tokens und ruiniert die Scroll-Journey. skillui entfernt bekannte CMP-Banner automatisch, bevor überhaupt ein Pixel erfasst wird.

Cookiebot OneTrust Osano TrustArc + generische GDPR-Overlays

Reines DOM-Pruning: kein Klick auf „Akzeptieren", kein „Ablehnen", kein Netzwerk-Call. Ein persistenter MutationObserver räumt das Banner erneut weg, sobald das CMP-Skript es nachlädt. Ihre Tokens spiegeln die echte Seite, nicht den Consent-Layer.

https://ihre-referenz-seite.de

✓ banner node removed · sweep clean

Banner sichtbar · bereit zur Extraktion

Vier Wege zur Extraktion

Egal, wo Ihr Design-System lebt.

URL, lokaler Ordner oder Git-Repo: skillui liefert jedes Mal denselben Claude-fertigen Skill-Ordner.

default

Statische Analyse

HTML, CSS, Fonts, Farb-Tokens, Spacing und Typografie, von jeder Seite, ganz ohne Browser.

skillui --url notion.so

ultra

Cinematic-Capture

Playwright erfasst Scroll-Screenshots, Interaktions-Diffs, Keyframes & DOM-Komponenten. Inkl. Cookie-Dismiss.

skillui --url linear.app --mode ultra

dir

Lokaler Scan

Durchsucht .css/.scss/.ts/.tsx nach Tokens, Tailwind-Config & CSS-Variablen.

skillui --dir ./my-app

repo

Klonen & Scannen

Klont jedes öffentliche Git-Repository und führt den Dir-Modus automatisch aus.

skillui --repo github.com/org/repo

Der Output

Ein Ordner, den Claude sofort versteht.

Öffnen, claude tippen, bauen lassen. CLAUDE.md und SKILL.md werden automatisch gelesen, kein manuelles Setup.

Farb-Tokens

Als CSS-Variablen und JSON, sauber benannt.

Typografie-Skala & Fonts

Google-Fonts werden lokal mitgebündelt.

Spacing-Grid

Abstände und Rhythmus als konsistente Skala.

7 Scroll-Journey-Screenshots

Die echte Seite, ohne Consent-Overlay (Ultra).

Animationen & Keyframes

CSS-Keyframes und Interaktions-Diffs (Ultra).

DOM-Komponenten-Fingerprints

Flex/Grid-Layout und Komponentenmuster (Ultra).

CLAUDE.md + SKILL.md

Automatisch generiert, sofort einsatzbereit.

.skill-ZIP

Fertig verpackt zum Teilen und Wiederverwenden.

In drei Schritten

Von der URL zum fertigen UI.

Extrahieren

Ziehen Sie ein Design-System aus jeder beliebigen URL.

# Design-System holen
skillui --url https://notion.so

Öffnen

Den Output-Ordner in Claude Code öffnen.

cd notion-design && claude

Bauen lassen

Claude kennt das Design-System bereits. Einfach beschreiben.

„Bau mir eine Landingpage im Stil dieses Systems."

Bereit, jedes Design-System zu klonen?

Ein Befehl installiert skillui. Ab da liest Claude Code die exakte visuelle Sprache jeder Seite, Consent-Banner inklusive entfernt.

$ npm install -g npxskillui
$ skillui --url https://linear.app --mode ultra

Dokumentation auf GitHub