🧭 Lernpfad. Schritt für Schritt.

1. Planen, bevor du promptest

Lege fest, was du baust, bevor du Lovable öffnest. Beantworte vier Fragen: Was ist das Produkt/Feature? Für wen ist es? Warum wird man es nutzen? Was ist die EINE Schlüssel-Aktion des Nutzers? Du schreibst keine Spec – du gibst Richtung. Klares Denken führt zu klaren Ergebnissen.

Vage Ideen erzeugen vage Ergebnisse. Klares Denken führt zu klaren Resultaten.

Build a one-page site for a budgeting app targeted at Gen Z freelancers. The main CTA should be 'Start Saving Smarter.' Focus on a bold, expressive aesthetic with large text and punchy colors.

# Projekt: Brand Agent „Rocket"

## Was (Produkt & Zweck)
Internes Tool: Marken-Wissen an einem Ort —
plus KI-Agent, der Fragen zur Marke beantwortet.

## Für wen
Das Team von Silberball (Brand-Agentur) — intern.

## Ton & Design
Premium internes Tool — clean & ruhig.
Stil-Referenz: Linear / Notion.

## Aufbau (in 3 Schritten)
1. Brand Hub: Logos, Farben, Typo & Assets
   durchsuchen, ansehen, laden (Platzhalter)
2. Seite „Brand Agent" — Chat-Oberfläche
   wie ChatGPT für Fragen zur Marke
3. KI anbinden: Agent kennt die Guidelines,
   prüft Screenshots „on-brand?", findet Assets

## So prüfst du (Akzeptanz)
- Assets durchsuchbar & ladbar · Chat antwortet
- Screenshot-Check sagt on-/off-brand + Begründung

## Auftrag
Erst das Frontend (Hub + Chat-UI) bauen & prüfen,
dann das Backend (KI + Daten) anbinden — Schritt für Schritt.

2. Die User Journey visuell denken

Design heißt nicht Einzel-Screens, sondern was zwischen ihnen passiert. Skizziere den Weg des Nutzers von der Landung bis zur Schlüssel-Aktion. Denke in Übergängen: Was sieht man zuerst? Was schafft Vertrauen? Was gibt Sicherheit zu handeln? Wohin führt die Aktion? Schon eine 3-Schritt-Skizze (Hero → Features → CTA) macht deine Prompts deutlich wirksamer.

Du stapelst keine Blöcke – du lenkst Verhalten. Jede Sektion braucht einen Grund zu existieren.

3. Zuerst das Design festlegen

Deine visuelle Sprache ist Fundament, nicht Politur. Entscheide Look & Feel früh, sonst funktioniert das Interface vielleicht, fühlt sich aber falsch an. Wähle eine Richtung (ruhig & elegant? laut & disruptiv? premium & schlank?) und füttere sie über Buzzwords, Tonbeschreibungen und UI-Muster direkt in den Prompt. Tipp: Lege einen 'Starter-Style-Prompt' an und wiederverwende ihn überall für Konsistenz.

Du promptest dich nicht zu gutem Design – du promptest aus ihm heraus.

Use a calm, wellness-inspired design. Soft gradients, muted earth tones, round corners, and generous padding. Font is 'Inter'. Overall tone should feel gentle and reassuring.

4. Pro Komponente prompten, nicht pro Seite

Lovable arbeitet am besten in modularen Teilen. Eine ganze Landingpage auf einmal zu verlangen ist, als würdest du ein Rezept in den Mixer kippen. Bau wie mit Lego: Hero, Feature-Grid, Testimonial-Slider, Pricing-Tabelle – einzeln bauen, prüfen, verfeinern, weiter. So behältst du Kontrolle und kannst gezielt einzelne Blöcke fixen.

Ein Ganzseiten-Prompt liefert Rauschen. Ein Sektions-Prompt liefert Signal.

Create a floating menu bar with glassmorphism effect. Include Home, Search, Music, Favorites, Add, Profile, and Settings icons. Add gentle floating animation and smooth hover interactions.

5. Mit echten Inhalten designen

Lovable arbeitet schlecht mit 'Lorem ipsum' oder 'Feature 1 / Feature 2'. Nutze echte Worte, die deine Botschaft widerspiegeln – auch wenn die finale Copy noch fehlt. Echte Inhalte erzeugen die richtigen Constraints: Eine echte Headline braucht vielleicht 2 Zeilen, ein CTA wirkt als Verb besser. Platzhalter verstecken genau diese Probleme.

Design liebt Constraints. Echte Inhalte schaffen die richtigen.

Hero section with headline: 'Design Calmly.' Subtext: 'Turn stress into structure with Lovable.' CTA: 'Start Building Free.' Use copy-centered layout with generous vertical spacing.

6. Atomar sprechen: Buttons, Cards, Modals

Lovable denkt in Atomen. Je kleiner und spezifischer deine UI-Sprache, desto besser. Statt 'Sektion mit Anmeldung' sag 'Formular mit E-Mail-Feld und abgerundetem CTA-Button'. Beschreibe Cards, Badges, Toggles, Chips, Dropdowns. So kannst du Komplexität schichtweise aufbauen: erst Card, dann Badge, dann Hover-States.

Je kleiner das Teil, desto klüger die Antwort.

Create a card with a user profile picture, name, and a follow button. Add a badge for verified users, and show a tooltip when hovering over the badge.

7. Mit Buzzwords den Look einstellen

Stil ist mehr als Layout – du musst den 'Vibe' steuern. Lovable versteht Begriffe wie 'minimal', 'expressive', 'cinematic', 'playful', 'premium', 'developer-focused'. Das sind promptbare Parameter, die Typo, Spacing, Schatten, Radius und Farbe beeinflussen. Setze sie früh und in jeder Sektion. Du kannst sie auch mischen (Hero 'bold', Pricing 'reassuring').

Design ist nicht nur Struktur. Es ist Ton. Buzzwords definieren ihn.

Design a landing page hero that feels premium and cinematic. Use layered depth, translucent surfaces, soft motion blur, and dramatic contrast between headline and background.

8. Prompt-Muster für Layouts nutzen

Prompts werden einfacher und wirksamer mit wiederholbaren Mustern – 'Layout-Rezepten'. Die meisten folgen 'Header → Content → Action'. Bau dir eine eigene Prompt-Bibliothek (Feature-Grid, Testimonial-Slider, Pricing-Tabelle) und remixe sie. Lovable reagiert am besten auf strukturierte, klar abgegrenzte, vorhersehbare Sprache.

Create a feature section with a centered headline, followed by three horizontally aligned cards. Each card includes an icon on top, a headline, and a short description. Cards should have soft shadows and lift on hover.

9. Visuals per URL einbinden

Damit dein Layout echt wirkt, binde Produkt-Demos oder Videos per URL ein – Lovable unterstützt Video-Embeds bei klarem Prompt. Beschreibe Platzierung (z. B. unter dem Hero), Stil (abgerundet, autoplay, muted) und Kontext (warum es da ist).

Embed a product demo video. Use this URL: [your-link.mp4]. Place it below the feature section in a full-width card with a soft shadow.

10. Mit dem Edit-Button Kontext schichten

Der Edit-Button ist eines der mächtigsten Features – richtig genutzt. Statt ganze Prompts neu zu schreiben, editiere gezielt einzelne Elemente. Edits sind keine Ersetzungen, sondern Anpassungen: z. B. nur die CTA-Copy ändern, ohne die Typo der Sektion zu berühren. Sei präzise: sag, was sich ändern soll UND was bleiben muss ('replace', 'update', 'adjust').

Change the CTA button text to 'Get Started' and increase the padding to 24px horizontal. Keep the existing background color and font.

11. Mit Supabase im Hinterkopf bauen

Ein gutes Layout ist nur ein Teil. Damit deine App mehr kann als gut aussehen, denke Supabase früh mit: Auth (was zeigt die UI eingeloggt vs. ausgeloggt?), dynamische Inhalte (Daten aus Tabellen) und Zustände (leer, lädt, Fehler). Du brauchst kein fertiges Backend beim Designen – aber forme die UI so, als wäre es schon da.

If the user is logged in via Supabase, show their profile image and name in the top right. If not, display a 'Log In' button and route them to the auth screen.

12. Versionskontrolle ist dein Freund

Lovable speichert automatisch – das heißt nicht, dass du planlos drauflos arbeiten solltest. Denke in Iterationen: eine sinnvolle Änderung pro Schritt, Ergebnis prüfen, weiter. Denke in Meilensteinen (Layout fixiert, Content ergänzt, Logik verdrahtet), notiere Änderungen im Prompt und dupliziere vor riskanten Sprüngen.

Autosave bedeutet nicht Auto-Ordnung. Baue bewusst. Iteriere mit Achtsamkeit.