Stylepack
Kostenlos: 3 Pakete pro Tag, 10 mit kostenlosem Konto

Mach aus jeder Website ein Design-Paket, aus dem deine KI baut

Füge eine URL ein. Stylepack misst die Seite so, wie sie gerendert wird (Farben, Typografie, Abstände, Radien, Schatten, Komponenten), und wie sie sich verhält: Hover und Fokus, Menüs und Tooltips, das andere Theme und vier Bildschirmbreiten. Du bekommst DESIGN.md, BEHAVIOR.md, Tokens, ein Tailwind-Theme, eine SKILL.md und Screenshots in einer Zip-Datei.

Gemessen, nicht geraten

Jeder Wert stammt von der Live-Seite, gewichtet danach, was tatsächlich auf dem Bildschirm zu sehen ist. Kein Raten anhand eines Screenshots, kein Modell, das sich einen Hex-Code ausdenkt.

Verhalten, nicht nur Farben

Hover- und Fokus-Zustände, Platzierung und Fade-Timing von Tooltips, Menüs, Scroll-Reveal, Sticky-Elemente, Tabellen, Formulare, Textumbruch, Dark Mode und jeder Breakpoint.

Formate für KI-Agenten

Googles DESIGN.md, eine SKILL.md, W3C-Tokens, CSS-Variablen und ein Theme für Tailwind v4. Ordner ins Projekt legen und deinen Agenten darauf verweisen.

Designsystem aus jeder Website extrahieren

  1. URL einfügen

    Jede öffentliche Website, zum Beispiel stripe.com. Subdomains wie docs.stripe.com zählen als eigene Website.

  2. Vermessen lassen

    Die Seite öffnet sich in einem echten Browser, in vier Bildschirmbreiten und in beiden Themes. Weniger als eine Minute später ist das Paket fertig.

  3. An deine KI übergeben

    Lade die Zip-Datei herunter, lege den Ordner in dein Projekt und bitte deinen Agenten, DESIGN.md und BEHAVIOR.md zu lesen, bevor er Code schreibt.

Was im Paket steckt

Ein Ordner, bereit für jeden KI-Coding-Agenten und jede Chat-App.

DESIGN.md
Das Designsystem im DESIGN.md-Format von Google: Farben, Typografie, Abstände, Radien, Schatten und Komponenten.
BEHAVIOR.md
Hover, Fokus, Tooltips, Menüs, Animationen, Scrollen, Tabellen, Formulare, Textumbruch, Responsive-Regeln und Dark Mode.
SKILL.md
Ein Skill für Claude Code und Cursor, der den Agenten in der richtigen Reihenfolge durch das Paket führt.
tokens.json
W3C-Design-Tokens (DTCG) für Style Dictionary und Figma-Token-Plugins.
tokens.css
Alle Werte als CSS Custom Properties.
tailwind.css
Dieselben Werte als @theme-Block für Tailwind v4.
screenshots/
Die Website bei 1440, 1024, 768 und 390 Pixeln Breite, dazu das andere Theme, falls es eines gibt.
README.md, PROMPT.md
Wie du das Paket an jedes KI-Tool übergibst, und der Prompt zum Einfügen.

Funktioniert mit den KI-Tools, die du schon nutzt

Zu jedem eine Schritt-für-Schritt-Anleitung:

Beispiel-Designpakete

Ganze Galerie ansehen
Startseite von linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS & ProduktivitätDark + Light
Startseite von resend.com
resend.com
domaine + aBCFavorit
Developer ToolsDark + Light
Startseite von figma.com
figma.com
figmaSans + figmaMono
Design-ToolsLight
Startseite von framer.com
framer.com
GT Walsheim Medium + Inter Variable
Design-ToolsDark
Startseite von apple.com
apple.com
SF Pro Text + SF Pro Display
Consumer TechDark + Light
Startseite von arc.net
arc.net
Marlin Soft SQ + -apple-system
Consumer TechLight

Häufige Fragen

Was ist Stylepack?

Stylepack (stylepack.ai) ist ein kostenloses Web-Tool, das jede öffentliche Website in ein Design-Paket für KI-Coding-Agenten verwandelt: DESIGN.md, BEHAVIOR.md, SKILL.md, Design-Tokens, ein Tailwind-Theme und Screenshots, in einer Zip-Datei.

Wie übernehme ich das Design einer Website in Cursor oder Claude Code?

Füge die Adresse der Website in Stylepack ein und lade das Paket herunter. Lege den Ordner in dein Projekt und bitte den Agenten, DESIGN.md und BEHAVIOR.md zu lesen und sich die Screenshots anzusehen, bevor er etwas baut. Jede Paketseite enthält die genauen Schritte und einen Prompt zum Kopieren.

Was ist DESIGN.md?

DESIGN.md ist das offene Format von Google, um Coding-Agenten eine visuelle Identität in einer einzigen Markdown-Datei zu beschreiben: Farben, Typografie, Abstände, Radien, Schatten und Komponenten. Stylepack schreibt eine für jede öffentliche Website.

Wie extrahiere ich Design-Tokens aus einer Website?

Füge ihre Adresse in Stylepack ein. Das Paket enthält tokens.json im Format der W3C-Design-Tokens (DTCG), dieselben Werte als CSS Custom Properties in tokens.css und ein Theme für Tailwind v4 in tailwind.css.

Was deckt BEHAVIOR.md ab?

Wie sich die Website verhält, nicht nur, wie sie aussieht: Hover- und Fokus-Zustände, Tooltips, Menüs, Animationen, Scrollen, Tabellen, Formulare, Textumbruch, das Layout bei 1440, 1024, 768 und 390 Pixeln Breite sowie Dark Mode.

Ist es kostenlos?

Ja. Du bekommst 3 Pakete pro Tag ohne Konto und 10 pro Tag mit einem kostenlosen Konto. Pakete, die schon in der Galerie sind, zählen nicht mit.

Mit welchen KI-Tools funktioniert es?

Mit Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable und Bolt oder mit allem anderen, das Markdown und CSS liest.

Ist Stylepack mit den Websites in der Galerie verbunden?

Nein. Ein Paket beschreibt das öffentliche Design einer Website als Referenz. Logos, Schriften, Bilder und Texte gehören ihren jeweiligen Inhabern, und die Prüfung der Schriftlizenzen liegt bei dir.