Deine Lovable-Seite sieht aus wie ein Template, 3 Tweaks, die das ändern

Ich habe letzte Woche eine funktionierende Landing Page in unter fünf Minuten gebaut.

Kein Mockup. Kein Figma-Prototyp. Eine echte, deployte Seite mit Hero-Section, FAQ und CTA, live im Internet. Die Tools: Claude für das Briefing, Lovable für den Bau.

Und was mich überrascht hat: Der Teil, der am meisten zählte, war gar nicht Lovable.

Warum die meisten Lovable-Seiten gleich aussehen

Wenn du mit Lovable gearbeitet hast, ist dir wahrscheinlich etwas aufgefallen. Viele damit gebaute Seiten sehen... ähnlich aus. Gleicher Layout-Rhythmus. Gleiche Komponentenwahl. Gleiches vage Startup-Gefühl.

Das ist kein Lovable-Problem. Das ist ein Briefing-Problem.

Wenn du einen vagen Prompt in irgendeinen AI-Builder wirfst, „mach mir eine Landing Page für mein Consulting-Business", bekommst du eine vage Seite. Das Tool füllt die Lücken mit Defaults. Und Defaults sehen aus wie Templates.

Die Lösung ist nicht, danach an Farben herumzuschrauben. Es geht darum, dem Tool etwas Echtes zu geben, bevor es anfängt zu generieren.

Der 3-Schritte-Workflow, den ich tatsächlich nutze

Schritt 1: Ein PRD mit Claude schreiben (2 Min)

PRD steht für Product Requirements Document. Es klingt formaler als es ist.

Was ich eigentlich mache: Mit Claude das Briefing durchdenken, bevor ich Lovable anfasse. Hier ist der Prompt, den ich nutze:

*„Schreib ein kurzes PRD für eine [Art von Website]. Zielgruppe: [X]. Benötigte Kernseiten: [Liste]. Ziel: [was es für Besucher tun soll]. Design-System: [z.B. Minimalismus, Brutalismus, Material Design]."*

Die Design-System-Zeile ist die, die die meisten überspringen. Tu das nicht. Sie leistet enorm viel Arbeit. „Material Design" vs. „Brutalismus" vs. „Minimalismus" generiert komplett unterschiedliche visuelle Logik downstream, und Lovable reagiert tatsächlich gut auf diese Unterscheidung.

Was du von Claude bekommst: ein strukturiertes Briefing mit klarer Hierarchie, Copy-Richtung und Design-Intent. Zwei Minuten Nachdenken, die zwanzig Minuten Iteration sparen.

Schritt 2: Das PRD in Lovable einfügen (30 Sek)

Einfügen. Zugucken, wie es baut.

Lovable liest das PRD und generiert eine echte, funktionierende Seite, kein Wireframe, kein Platzhalter. Du siehst echte Komponenten, echtes Copy-Scaffolding, echte Layout-Entscheidungen, die dein Briefing widerspiegeln.

Kein Code nötig. Wenn du das noch nie probiert hast, ist das erste Mal ehrlich gesagt etwas schockierend.

Schritt 3: In Alltagssprache iterieren (2 Min)

Hier feinjustierst du. Ich schicke Dinge wie:

• „Mach die Hero-Section direkter."
• „Füge eine FAQ unter den Testimonials hinzu."
• „Ändere den CTA-Text zu ‚Kostenloses Gespräch buchen.'"

Lovable aktualisiert in Echtzeit. Du debuggst kein CSS. Du editierst einfach.

Wo Leute Abkürzungen nehmen (und warum das nach hinten losgeht)

Der PRD-Schritt. Jedes Mal.

Leute sehen eine 30-Sekunden-Bauzeit und denken, das Briefing sei egal. Sie pasten drei Zeilen in Lovable und wundern sich, warum das Ergebnis generisch aussieht.

Aber AI-Tools, ob Lovable, Claude oder was auch immer, können nur mit dem arbeiten, was du ihnen gibst. Die Intelligenz, die du reinsteckst, formt den Output, den du rausbekommst. Müll-Briefing, Template-Seite. Strukturiertes Briefing, wirklich nutzbarer Output.

Ich habe diesen Workflow verwendet für:

• Client Landing Pages
• Interne Tool-Prototypen
• Lead-Gen-Funnels
• Schnelle Microsites für Kampagnen

Er hält bei allen stand. Was variiert, ist die Qualität des Denkens, die ich in Schritt 1 investiert habe.

Ist das tatsächlich „Vibe Coding"?

Irgendwie schon. Aber mit mehr Struktur, als der Name vermuten lässt.

Vibe Coding wird oft so dargestellt, als würde man einfach... mit einer AI viben und schauen, was passiert. Und ja, davon gibt es etwas. Aber die besten Ergebnisse habe ich erzielt, wenn ich die Spontaneität des AI-Bauens mit etwas Vorab-Rigorosität kombiniert habe.

Stell es dir so vor: PRD = das Gehirn, Lovable = die Hände. Claude übernimmt das Denken, damit Lovable nicht raten muss.

Wenn du das noch nicht ausprobiert hast, es ist wirklich einfach. Überspring nur nicht das Briefing.

Was ich meinem früheren Ich sagen würde

Die Output-Decke ist dein Input-Boden.

Jede Lovable-Seite, die wie ein Template aussieht, ist ein Briefing, das wie ein Platzhalter aussah. Fix zuerst das Briefing, und der Rest ergibt sich größtenteils von selbst.