Schauen Sie sich eine Website an.
Extrahieren Sie ihr Design-System in Sekunden.
Farben, Typografie, Abstandsraster, Schatten und Border-Radius — StyleKit extrahiert sie mit einem Klick und speichert sie als strukturierte DESIGN.md-Datei. Arbeiten Sie in Figma? Mit dem Companion-Plugin importieren Sie dieselben Tokens direkt als native Styles und Variablen.
Nur activeTab- und scripting-Berechtigung · Kein Konto oder Kreditkarte nötig · Nichts läuft im Hintergrund
Extrahierte Tokens
# DESIGN.md
## Colors
--color-primary: #8b5cf6;
--color-accent: #10b981;
## Typography
font-family: Inter;
## Spacing
4px 8px 16px 24px 32px
0
Berechtigungen: activeTab + scripting
0 €
Konto oder Kreditkarte nötig
0
Token-Kategorien extrahiert
0 %
lokale Verarbeitung, Standard
Für wen
Für alle, die mit Design-Systemen arbeiten
UI/UX-Designer
Analysieren Sie das Design-System einer Inspirations- oder Wettbewerber-Website in Sekunden, statt von Hand zu messen.
Frontend-Entwickler
Statt CSS-Variablen mühsam aus den DevTools zusammenzusuchen, starten Sie direkt mit einer fertigen DESIGN.md.
Agenturen & Produktionsteams
Prüfen Sie die Markenkonsistenz von Kundenwebsites schnell, bevor Sie liefern.
Figma-Nutzer
Durchsuchen Sie die Community-Galerie und importieren Sie die Tokens einer beliebigen Website mit einem Klick als Figma-Variablen.
Funktionen
Ein Klick, eine vollständige Design-Analyse
Statt CSS aus den DevTools zu kratzen, macht StyleKit die Design-DNA jeder Seite, die Sie sehen, strukturiert nutzbar.
Design-Token-Extraktion
Farbpalette, Typografie, Abstandsraster, Schatten und Border-Radius — im aktiven Tab, mit einem Klick, vollautomatisch.
Minimale Berechtigungen, maximales Vertrauen
Fordert nur activeTab und scripting an; keine breiten Host-Berechtigungen, kein Zugriff auf Cookies oder Verlauf. Liest nur die Seite, die Sie gerade betrachten — sonst nichts, und nichts läuft im Hintergrund.
DESIGN.md-Export
Lesbares, strukturiertes Markdown für Entwickler; committen Sie es ins Repo oder schicken Sie es an Ihr Team.
Import via Figma-Plugin
Fügen Sie extrahierte Tokens in das Companion-Figma-Plugin ein, oder importieren Sie sie aus der Galerie mit einem Klick als native Styles/Variablen.
Publish to Gallery (optional)
Teilen Sie die Tokens einer Website, die Ihnen gefällt, in der Community-Galerie; sichtbar mit Quell-URL, komplett optional.
Datenschutz
Datenschutz als Standardeinstellung
Eine optionale Community-Funktion ist bewusst zuschaltbar — alles andere bleibt in Ihrem Browser.
Läuft lokal
- Die Extraktion findet vollständig in Ihrem Browser statt, keine Daten werden an einen Server gesendet
- Nur activeTab- und scripting-Berechtigung — keine breiten Host-Berechtigungen
- Kein Zugriff auf Cookies, Browserverlauf oder andere Tabs
- Nichts läuft im Hintergrund — nur wenn Sie es aktiv auslösen
Optional: In der Galerie veröffentlichen
- Klicken Sie auf "Publish to Gallery", werden die Tokens dieser Seite plus Quell-URL in einer öffentlichen Galerie geteilt
- Über das Figma-Plugin können Sie diese Galerie durchsuchen und das Design jeder veröffentlichten Website importieren
- Ohne Klick wird nichts geteilt — die Standardeinstellung ist vollständig lokal
Preis
Komplett kostenlos, kein Konto nötig
Chrome-Erweiterung und Companion-Figma-Plugin, für immer kostenlos.
Free
Chrome-Erweiterung und Figma-Plugin, ohne Konto
$0 — für immer
- Unbegrenzte Token-Extraktion
- Unbegrenzter DESIGN.md-Export
- Figma-Plugin inklusive (ebenfalls kostenlos)
- Teilnahme an der Community-Galerie via Publish to Gallery
- Kein Konto oder Kreditkarte nötig
- Automatische Updates über den Chrome Web Store
Das Figma-Plugin können Sie zusätzlich kostenlos über die Figma Community herunterladen: In der Figma Community öffnen
FAQ
Häufig gestellte Fragen
Ist StyleKit wirklich kostenlos, brauche ich ein Konto?
Ja, komplett kostenlos und ohne Konto. Installieren Sie die Chrome-Erweiterung und legen Sie direkt los; das Companion-Figma-Plugin ist ebenso kostenlos.
Warum fordert die Chrome-Erweiterung so wenige Berechtigungen an?
Im Manifest von StyleKit sind nur activeTab und scripting definiert. Keine breiten Host-Berechtigungen, kein Zugriff auf Cookies oder Browserverlauf — es liest ausschließlich die Seite, die Sie gerade aktiv betrachten, sonst nichts.
Wo landen meine Daten?
Die Extraktion läuft vollständig in Ihrem Browser; es werden keine Daten an einen Server gesendet. Die einzige Ausnahme ist die separate, ausdrücklich optionale Funktion "Publish to Gallery".
Was macht "Publish to Gallery", teilt es meine Daten?
Klicken Sie auf diesen Button, werden die extrahierten Tokens dieser Seite und die Quell-URL in einer öffentlichen Community-Galerie geteilt, die sich über das Figma-Plugin durchsuchen lässt. Ohne diesen Klick wird nichts geteilt — Standard ist vollständig lokal.
Wie benutze ich das Figma-Plugin?
Mit dem Figma-Plugin durchsuchen Sie die Community-Galerie und importieren die veröffentlichten Tokens jeder Website mit einem Klick als native Figma-Styles/Variablen. Sie können auch selbst mit der Chrome-Erweiterung extrahierte Tokens direkt in das Plugin einfügen.
Was genau enthält die DESIGN.md-Datei?
Die extrahierte Farbpalette, die Typografie-Skala, Abstandswerte, Schatten und Border-Radius-Werte im strukturierten Markdown-Format — eine lesbare Referenzdatei, die Entwickler direkt ins Repo aufnehmen können.
Extrahieren Sie noch heute das Design-System Ihres nächsten Projekts
Zu Chrome hinzufügen, auf jeder Website ausprobieren — kein Konto oder Kreditkarte nötig.
Feature-Wunsch oder Kooperationsanfrage? Schreiben Sie uns
Wir melden uns so schnell wie möglich per E-Mail.
Instagram: @digitalexpertde