Bessere Prompts für KI-Website-Design: Lernen am fertigen Beispiel
Statt abstrakter Tipps hilft der schnellste Weg zur besseren Website-Generierung mit Lovable, Bolt, Cursor oder Claude: ein funktionierender Prompt, der bereits ein gutes Ergebnis geliefert hat, dient als Vorlage zum Nachbauen und Anpassen.
Die meisten Ratschläge zu AI-Prompts fuer Website-Design sind abstrakt: "Sei konkret", "beschreibe den Stil", "gib ihm Vorgaben". Das ist alles richtig, und trotzdem ist es schwer umzusetzen. Der schnellste Weg, den ich kenne, um besser darin zu werden, Prompts fuer Lovable, Bolt, Cursor oder Claude zu schreiben, ist, einen Prompt zu nehmen, der bereits eine ansprechend aussehende Seite hervorgebracht hat, diesen laufen zu lassen und ihn anschliessend zu zerlegen.
Dieser Beitrag fuehrt durch diese Uebung anhand kostenloser Prompts, sodass du sie noch heute ohne jegliche Kosten durchfuehren kannst.
MotionSites bietet ein kostenloses Regal unter motionsites.org/free an. Dabei handelt es sich um Designrichtungen, die man ohne bezahlten Plan uebernehmen kann. Zum Zeitpunkt des Verfassens mischt es zwei Arten von Dingen:
Offenlegung: Ich arbeite an MotionSites. Die folgende Uebung funktioniert genauso gut mit jedem detaillierten Prompt, dem du vertraust.
Fuege den Prompt unverändert in deinen Builder ein. Fuege deinen Produktnamen noch nicht hinzu. Du moechtest eine Basislinie, die zeigt, was der Prompt allein erzeugt, damit du spaeter erkennen kannst, welche deiner Aenderungen geholfen haben und welche geschadet haben.
Lies nun den Prompt mit vier Textmarkern (oder vier Kommentar-Tags) und markiere jede Zeile, die eine der folgenden Entscheidungen trifft:
Dir wird auffallen, dass ein guter Prompt nur sehr wenige Zeilen enthaelt, die reine Stimmung sind ("premium", "sleek", "modern"). Fast jeder Satz legt eine Entscheidung fest, die das Modell sonst selbst treffen wuerde, und die Standardentscheidung des Modells ist genau die, die dafuer sorgt, dass jede AI-Website gleich aussieht.
Ersetze die Marke durch deine eigene, aber immer nur eine Kategorie pro Durchlauf:
Behalte Layout, Typografie und Motion exakt wie vorgegeben bei. Ersetze das Farbsystem durch: ink #111316 (Text), paper #F6F4EF (Hintergrund), line #DAD6CC (Rahmen), accent #2F6BFF. Verwende die Akzentfarbe nur beim primaeren Button und bei einem hervorgehobenen Wort in der Headline. Lass es laufen, vergleiche mit der Basislinie, mache dasselbe dann mit der Typografie und anschliessend mit dem Copy. Sollte die Seite ploetzlich wieder generisch wirken, weisst du genau, welche Aenderung das verursacht hat.
Der eigentliche Erkenntnisgewinn ist nicht die Seite, sondern die Struktur des Prompts. Verwandle ihn in ein Skelett, das du wiederverwendest:
Layout: [Grid, Ausrichtung, was wo steht, was sich ueberlappt] Type: [Display-Schrift + Groesse/Gewicht] / [Textschrift + Groesse/Zeilenabstand] Color: [4-5 benannte Farben] + [eine Regel fuer die Akzentfarbe] Motion: [ein Element, Dauer, Easing]; alles andere statisch Do not: [die 3-4 Standardentscheidungen, die du verbieten willst] Fuelle es fuer dein naechstes Projekt aus und du wirst mit demselben Builder deutlich durchdachtere Ergebnisse erzielen, sogar ohne mit einer Vorlage zu starten.
Die CSS-Effekte auf dem kostenlosen Regal sind einen Blick wert, selbst wenn du alles andere selbst schreibst. Die Bitte um "smooth animations" fuehrt meist zu einem Fade-up in jeder Sektion. Die Bitte um einen einzigen benannten Effekt an einem einzigen Element, etwa einen Sweep-to-top-Hover am primaeren Button, wirkt dagegen gezielt.
Kopiere einen fertigen Prompt, fuehre ihn unveraendert aus, markiere seine Entscheidungen, aendere jeweils nur eine Kategorie und behalte das Skelett. Das ist die gesamte Methode.
Wenn du weitere Ausgangspunkte moechtest, findest du die kostenlosen unter motionsites.org/free, und der komplette MotionSites-Katalog enthaelt ueber 550 Website-Prompts in Kategorien wie Landing, SaaS, AI-Produkte und Portfolio.
Automatisch übersetzt. Das Original auf Englisch ist unten aufklappbar.
Original (Englisch) anzeigen
Most advice about AI website design prompts is abstract: "be specific", "describe the style", "give it constraints". It's all true, and it's still hard to act on. The fastest way I know to get better at writing prompts for Lovable, Bolt, Cursor or Claude is to take a prompt that already produced a good-looking page, run it, and then take it apart.
This post walks through that exercise using free prompts, so you can do it today without paying for anything.
MotionSites keeps a free shelf at motionsites.org/free. These are design directions you can copy without a paid plan. At the time of writing it mixes two kinds of things:
Disclosure: I work on MotionSites. The exercise below works just as well with any detailed prompt you trust.
Paste the prompt into your builder exactly as it is. Don't add your product name yet. You want a baseline that shows what the prompt alone produces, so you can tell later which of your edits helped and which hurt.
Now read the prompt with four highlighters (or four comment tags) and mark every line that decides one of these:
You'll notice that a good prompt has very few lines that are just mood ("premium", "sleek", "modern"). Almost every sentence pins a decision the model would otherwise make for you, and the model's default decision is the one that makes every AI site look the same.
Swap in your own brand, but only one category per run:
Keep layout, type and motion exactly as written. Replace the color system with: ink #111316 (text), paper #F6F4EF (background), line #DAD6CC (borders), accent #2F6BFF. Use the accent only on the primary button and one highlighted word in the headline. Enter fullscreen mode Exit fullscreen mode Run it, compare with the baseline, then do the same for type, then for copy. If the page suddenly looks generic again, you know exactly which change caused it.
The real takeaway isn't the page. It's the shape of the prompt. Turn it into a skeleton you reuse:
Layout: [grid, alignment, what sits where, what overlaps] Type: [display face + size/weight] / [body face + size/line-height] Color: [4-5 named colors] + [one rule for the accent] Motion: [one element, duration, easing]; everything else static Do not: [the 3-4 defaults you want to ban] Enter fullscreen mode Exit fullscreen mode Fill it in for your next project and you'll get noticeably more deliberate results from the same builder, even without starting from a template.
The CSS effects on the free shelf are worth a look even if you write everything else yourself. Asking for "smooth animations" usually gets a fade-up on every section. Asking for one named effect on one element, like a sweep-to-top hover on the primary button, reads as intentional instead.
Copy a finished prompt, run it unchanged, mark its decisions, change one category at a time, and keep the skeleton. That's the whole method.
If you want more starting points, the free ones are at motionsites.org/free, and the full MotionSites catalog has 550+ website prompts across categories like landing, SaaS, AI products and portfolio.