Stylepack

So nutzt du das Design jeder Website in Claude Code

Stylepack verwandelt jede öffentliche Website in ein Design-Paket: DESIGN.md, BEHAVIOR.md, Design-Tokens, ein Tailwind-Theme und Screenshots. So übergibst du eines an Claude Code, damit das Gebaute so aussieht und sich so verhält wie die Website, die du gewählt hast.

Schritte

Die Pfade unten verwenden example.com. Auf einer Paketseite nennen sie die Website, die du gewählt hast.

  1. Füge die Adresse der Website in Stylepack ein und lade das Paket herunter. Pakete in der Galerie sind sofort verfügbar.
  2. Entpacke das Paket in dein Projekt, sodass der Ordner unter design/example.com-design-pack/ liegt.
  3. Optional: Kopiere den Ordner zusätzlich nach .claude/skills/example-com-design/. Die SKILL.md darin sorgt dafür, dass Claude Code das Paket von selbst lädt, sobald es UI baut.
  4. Füge den Prompt unten in Claude Code ein und ergänze, was gebaut werden soll.

Der Prompt

Der Prompt bleibt auf Englisch: Er nennt die Dateien im Paket, und deine KI liest ihn in jeder Sprache.

Use the design pack in `design/example.com-design-pack/` as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.

1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every image in `design/example.com-design-pack/screenshots/` and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with `design/example.com-design-pack/tokens.css` (or `tailwind.css` if this project uses Tailwind v4). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.

Now build: [describe the page or app you want]

When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.
Design extrahieren

Anleitungen für andere Tools