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
Analysieren Sie das Design-System einer Inspirations- oder Wettbewerber-Website in Sekunden, statt von Hand zu messen.
Statt CSS-Variablen mühsam aus den DevTools zusammenzusuchen, starten Sie direkt mit einer fertigen DESIGN.md.
Prüfen Sie die Markenkonsistenz von Kundenwebsites schnell, bevor Sie liefern.
Durchsuchen Sie die Community-Galerie und importieren Sie die Tokens einer beliebigen Website mit einem Klick als Figma-Variablen.
Funktionen
Statt CSS aus den DevTools zu kratzen, macht StyleKit die Design-DNA jeder Seite, die Sie sehen, strukturiert nutzbar.
Farbpalette, Typografie, Abstandsraster, Schatten und Border-Radius — im aktiven Tab, mit einem Klick, vollautomatisch.
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.
Lesbares, strukturiertes Markdown für Entwickler; committen Sie es ins Repo oder schicken Sie es an Ihr Team.
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.
Teilen Sie die Tokens einer Website, die Ihnen gefällt, in der Community-Galerie; sichtbar mit Quell-URL, komplett optional.
Datenschutz
Eine optionale Community-Funktion ist bewusst zuschaltbar — alles andere bleibt in Ihrem Browser.
Preis
Chrome-Erweiterung und Companion-Figma-Plugin, für immer kostenlos.
Free
Chrome-Erweiterung und Figma-Plugin, ohne Konto
$0 — für immer
Das Figma-Plugin können Sie zusätzlich kostenlos über die Figma Community herunterladen: In der Figma Community öffnen
FAQ
Ja, komplett kostenlos und ohne Konto. Installieren Sie die Chrome-Erweiterung und legen Sie direkt los; das Companion-Figma-Plugin ist ebenso kostenlos.
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.
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".
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.
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.
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.
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
