Lovable Prompts für Design: Was funktioniert, was driftet und warum

Die populären Lovable-Prompt-Kollektionen werden an Features getestet, bei denen Erfolg binär ist: Der Auth-Flow existiert oder er existiert nicht. Design-Prompts werden nach demselben Schema beurteilt („Hat sich die Seite verändert?“), und diesen Test besteht „nutze ein modernes Dark-Theme mit lebendigen Akzenten“. Die Seite hat sich verändert. Was niemand erneut prüft, ist Screen fünf, wo der lebendige Akzent wieder Richtung indigo-500 gerutscht ist und das Dark-Theme die Standard-Slate-Rampe zurückerhalten hat, weil die Anweisung in einer Konversation stand, die immer weiter wuchs. Dieses Abrutschen hat einen Namen, Design Drift, und Adjektiv-Prompts sind seine Hauptnahrungsquelle.

Hier lohnt es sich, präzise zu sein: Lovable ignoriert Style-Anweisungen nicht, es *approximiert* sie, und Approximationen summieren sich. „Warm“ wird mit jeder Generation zu einem leicht anderen Warm. Ein Hex-Wert kann nicht driften: Er ist entweder #b45309 oder nicht. Das ist der gesamte Trick hinter Prompts, die halten: Ersetzen Sie jedes Adjektiv durch einen Wert.

Ein dauerhafter Lovable-Design-Prompt besteht aus fünf Teilen. Fehlt einer, füllt das Modell die Lücke mit Defaults. So entstehen Apps, die nur halbwegs distinktiv sind, was schlechter wirkt als jedes der beiden Extreme.

1. Authority Line. Ein Satz, der das folgende System als einzige Quelle der Wahrheit (Single Source of Truth) erklärt und erfundene Farben oder Schriftarten verbietet. Ohne diese Zeile überschreiben spätere Feature-Prompts den Design-Kontext.
2. Vollständige Design-Tokens für beide Modi. Semantische Rollen (background, primary, muted-foreground…) mit exakten Werten für Light *und* Dark. Das Weglassen des Dark-Modes delegiert das gesamte zweite Theme zurück an die Defaults.
3. Ein benanntes Font-Pairing mit Zuweisung. Welche Familie wird für Überschriften genutzt, welche für den Fließtext, welche Schriftschnitte existieren. „Nutze schöne Fonts“ produziert Inter.
4. Skalenwerte. Typografie-Skala, Spacing, Radius. Dies sind die Merkmale, an denen man eine Default-App schneller erkennt als an der Farbe.
5. Regeln: Do's und Don'ts. Eine Handvoll Verbote („keine lila Verläufe, keine Emoji-Icons, kein einheitlicher Radius“) plus die Motive, die das Design erkennbar machen.

Make the app look modern and premium, with a dark theme
and vibrant accent colors. Less generic please.

Use #0c0a09 as the app background and #fbbf24 as the primary
accent. Headings in Fraunces (600), body in Inter. Border
radius 2px everywhere. No gradients.

Use the design system below for everything you build in this
project. It is the single source of truth for color, typography,
spacing, and visual style. Do not invent your own palette,
fonts, or component styling.

[ …the kit's full DESIGN.md: 28 semantic tokens in light and
dark, the font pairing, type scale, spacing, radius, shadows,
motifs, do's and don'ts… ]

Die dritte Form ist nicht praktikabel händisch zu schreiben: Ein echtes System umfasst mehrere hundert Entscheidungen. Das ist der eigentliche Grund, warum Design-by-Prompting oft stagniert. Ein dauerhafter Design-Prompt entpuppt sich als Dokument, und niemand möchte ein Dokument in ein Chat-Fenster tippen. Deshalb liefern wir jedes Kit als dieses Dokument aus: Durchsuchen Sie die Lovable Themes Gallery, wählen Sie ein Kit, kopieren Sie den Prompt und fügen Sie ihn einmalig ein.

1. 1

   Neustart: Als erste Nachricht einfügen

   Fügen Sie den vollständigen Design-Prompt ein, bevor Sie ein Feature beschreiben, damit bereits die allererste Generation systemkonform ist. Ein System nachträglich in eine auf Defaults basierende App einzufügen, kostet mehrere Korrekturrunden.

2. 2

   Für langfristige Projekte: In Knowledge verschieben

   Settings → Knowledge ist permanenter Kontext: Er gilt für jede Generation, ohne erneut gesendet werden zu müssen, was ihn zum drift-resistenten Speicherort macht. Chat-Kontext altert; Knowledge nicht.

3. 3

   Wenn Drift trotzdem auftritt: Auf das System verweisen, nicht auf das Symptom

   Sagen Sie „folgen Sie dem Designsystem für das Card-Styling“, anstatt die Card erneut zu beschreiben. Eine erneute Beschreibung erzeugt eine zweite, leicht abweichende Wahrheit; ein Verweis verankert die ursprüngliche Wahrheit neu.