So nutzt du das Design jeder Website in Lovable
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 Lovable, 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.
- Füge die Adresse der Website in Stylepack ein und lade das Paket herunter. Pakete in der Galerie sind sofort verfügbar.
- Entpacke das Paket.
- Hänge in einem neuen Projekt DESIGN.md und die Screenshots des sichtbaren Bereichs für Desktop und Phone an deine erste Nachricht an.
- Füge den Prompt unten ein und ergänze, was gebaut werden soll. Wenn das Tool nach einem Theme fragt, füge den Inhalt von tokens.css ein.
Der Prompt
Der Prompt bleibt auf Englisch: Er nennt die Dateien im Paket, und deine KI liest ihn in jeder Sprache.
Use the attached design pack files as the visual reference for how the UI looks and behaves. It was extracted from https://example.com/; distinguish measurements from values explicitly marked as inferred or fallback.
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 the attached desktop and phone screenshots and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Start with the variables in tokens.css (or the Tailwind v4 theme in tailwind.css). Preserve observed values. Resolve inferred roles and fallback values against the screenshots; follow measured component recipes before turning a candidate accent into a filled button. Adapt unmeasured details to the requested content.
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.