Farben
Die Palette der Seite, nach Verwendung gruppiert: Hintergründe, Texte, Rahmen, Akzente
Export Pro
Extrahieren Sie das Designsystem jeder Website
Smart Design Inspector geht eine Seite durch, liest ihre Design-Tokens aus (Farben, Schriftgrößen-Skala und Abstände) und exportiert sie als Tailwind v4 @theme, als CSS-Variablen oder als DESIGN_SPECS.md – bereit für Ihr Projekt oder Ihren KI-Assistenten.
Pro-Funktion, im Vorabzugang kostenlos bis zum Start der Pro (Datum folgt)
tucliente.example
/* Tailwind v4 */
@theme {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--text-h1--line-height: 1.1;
--spacing-section: 96px;
}/* CSS-Variablen */
:root {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--spacing-section: 96px;
}# Designsystem · tucliente.example
## Farben
- primary #2563eb · Buttons und Links
- ink #0b0b0b · Text
## Typografie
- H1 · Inter 600 · 48 px / 1,1
## Abstände
- Abschnitt · 96 px01
Die Arbeit, die es Ihnen erspart
Das ProblemDer Kunde schickt Ihnen eine Referenz-Website: „So etwas in der Art.“ Um den Stil nachzubauen, brauchen Sie Farben, Schriftgrößen und Abstände. Die mit Pipette und DevTools herauszuholen, kostet Dutzende Klicks – und am Ende haben Sie eine lose Liste von Werten, kein System, mit dem Sie arbeiten können.
02
Was es exportiert
3 TokensTypografie
Jeder Stil (H1–H6, Fließtext, Buttons) mit Schriftfamilie, Größe, Gewicht, Zeilenhöhe und Laufweite, dazu das @font-face oder der Google-Fonts-Link
Abstände
Die Skala der Margins und Paddings, die sich auf der Seite wiederholt
03
Drei Ausgabeformate
Kopieren oder herunterladenTailwind v4 @theme
Zum Einfügen in Ihr CSS:
@theme {
--color-primary: …;
--font-heading: …;
--spacing-section: …;
}CSS-Variablen
In :root, für jedes Projekt ohne Tailwind.
DESIGN_SPECS.md
Ein Dokument, das das gesamte System erklärt. Für Ihr Team – und für Claude, Cursor oder jeden anderen KI-Assistenten, wenn Sie ihn in diesem Stil bauen lassen.
04
So geht’s
3 Schritte- 01
Öffnen Sie die Referenz-Website.
- 02
Wählen Sie Design → System exportieren.
- 03 Pro
Wählen Sie das Format und kopieren oder laden Sie es herunter.
| Kostenlos0 €für immer | Pro49 €Einmalzahlung | |
|---|---|---|
| Palette, Schriften und Schriftgrößen-Skala der Seite ansehen | ||
| Designsystem exportieren: Tailwind v4 @theme, CSS-Variablen oder DESIGN_SPECS.md | — | Im Vorabzugang kostenlos |
06
Ethik und Lizenzen
Lassen Sie sich inspirierenDer Stil einer Website (Farben, Größen, Abstände) ist nicht geschützt. Texte, Bilder, Logos und kommerzielle Schriften schon. Die Erweiterung exportiert Werte, keine Inhalte, und weist Sie auf die Lizenz jeder Schrift hin. Nutzen Sie sie als Inspiration, nicht um eine Marke zu kopieren.
Ist das kostenlos?
Das ist eine Pro-Funktion. Bis zum Start der Pro (Datum folgt) ist sie im kostenlosen Vorabzugang für alle verfügbar. Danach ist sie in der Pro für 49 € als Einmalzahlung enthalten.
Welche Tailwind-Version wird verwendet?
Tailwind v4 mit der @theme-Direktive. Wenn Sie eine andere Version nutzen, exportieren Sie als CSS-Variablen.
Wird das System der ganzen Website oder einer Seite ausgelesen?
Das der geöffneten Seite. Nutzen die anderen Seiten dasselbe System, ist das Ergebnis dasselbe.
Funktioniert es mit einer KI wie Claude oder Cursor?
Ja. Die DESIGN_SPECS.md ist so geschrieben, dass ein KI-Assistent sie lesen und in diesem Stil bauen kann.
Exportiert es Komponenten?
Nein. Es exportiert Tokens. Um einen Abschnitt als Komponente zu kopieren, gibt es „Website zu Tailwind“.
In welchen Browsern und auf welchen Systemen läuft sie?
In Chrome, Edge, Brave, Arc, Opera und Vivaldi, unter Windows, Mac und Linux, ab Version 1.0. Sie läuft überall gleich, weil der Browser die Erweiterung ausführt, nicht das Betriebssystem. Der Code ist so vorbereitet, dass sie ohne Neuschreiben auf Firefox und Safari kommen kann. Während der Entwicklung kann sich noch etwas ändern.
08
Weiter mit
Verwandte FunktionenFarben
Die Palette der Seite, Pipette und WCAG-Kontrast für jedes Text-Hintergrund-Paar.
Farben einer Website →Schriften
Schriftfamilie, Gewichte, Herkunft, Lizenz und Schriftgrößen-Skala der ganzen Seite.
Schriften einer Website →Website zu Tailwind
Kopieren Sie einen Abschnitt als JSX + Tailwind oder als HTML/CSS.
Eine Website in Tailwind umwandeln →Preise
Für immer kostenlos. Pro: 49 €, einmalig.
Preise ansehen →Warteliste
Gehören Sie zu den Ersten, die es testen
Smart Design Inspector ist in Entwicklung. Hinterlassen Sie Ihre E-Mail-Adresse, und wir benachrichtigen Sie am Tag der Veröffentlichung im Chrome Web Store – mit den 7 Pro-Funktionen kostenlos im Vorabzugang.
Eine E-Mail am Starttag und nur wenige weitere · Abmeldung mit einem Klick