Der perfekte Website Prompt
robinDer Prompt ist das Herzstück deiner KI-generierten Website. Ein gut geschriebener Prompt kann den Unterschied zwischen einer mittelmäßigen und einer professionellen Website ausmachen. In diesem Guide lernst du, wie du den perfekten Website-Prompt erstellst.
- Die Anatomie eines perfekten Website-Prompts
- Welche Informationen du unbedingt angeben musst
- Wie du Design-Wünsche klar kommunizierst
- Typische Fehler und wie du sie vermeidest
- Fertige Prompt-Templates für verschiedene Website-Typen
Warum der Prompt so entscheidend ist
Wenn du mit KI-Tools wie Cursor oder Lovable arbeitest, ist der Prompt deine einzige Möglichkeit, der KI mitzuteilen, was du willst. Je präziser und strukturierter dein Prompt, desto besser das Ergebnis.
❌ Schlechter Prompt
"Erstelle mir eine Website für mein Unternehmen"
Ergebnis: Generische, nichtssagende Website ohne Persönlichkeit
✅ Guter Prompt
"Erstelle eine moderne Landing Page für eine Marketing-Agentur mit dunklem Design, Neon-Akzenten, Hero-Section mit Video-Background..."
Ergebnis: Maßgeschneiderte Website, die deiner Vision entspricht
Die 7 Bausteine eines perfekten Prompts
Jeder gute Website-Prompt sollte diese sieben Elemente enthalten:
Geschäftskontext
Beschreibe dein Unternehmen, deine Branche und was du anbietest. Je mehr Kontext, desto passender die Texte und das Design.
Zielgruppe
Wer sind deine Kunden? B2B oder B2C? Altersgruppe? Technisch versiert oder nicht? Das beeinflusst Tonalität und Komplexität.
Hauptziel der Website
Was sollen Besucher tun? Kontaktformular ausfüllen? Produkt kaufen? Newsletter abonnieren? Definiere ein klares Conversion-Ziel.
Seitenstruktur
Welche Seiten brauchst du? Home, About, Services, Kontakt? Beschreibe jede Seite und ihren Zweck.
Design-Richtung
Modern, minimalistisch, verspielt, seriös? Welche Farben? Hell oder dunkel? Nenne Referenz-Websites wenn möglich.
Technische Anforderungen
Welches Framework? Brauchst du ein CMS, Formulare, Zahlungsintegration, Newsletter-Anbindung?
Besondere Features
Animationen, Dark Mode, Mehrsprachigkeit, Blog-Funktion? Liste alle gewünschten Features auf.
Prompt-Template für Landing Pages
Hier ist ein bewährtes Template für Landing Pages, das du an deine Bedürfnisse anpassen kannst:
Erstelle eine moderne Landing Page für [UNTERNEHMENSART]:Über das Unternehmen:
- Name: [NAME]
- Branche: [BRANCHE]
- Angebot: [WAS BIETEST DU AN]
- USP: [WAS MACHT DICH BESONDERS]
Zielgruppe:
- [BESCHREIBUNG DER ZIELGRUPPE]
- Hauptprobleme: [WELCHE PROBLEME LÖST DU]
Seitenstruktur:
Hero-Section mit [BESCHREIBUNG]
Problem/Lösung Section
Features/Vorteile (3-4 Hauptpunkte)
Social Proof (Testimonials/Logos)
CTA-Section
FAQ (optional)
Footer mit Kontaktinfos Design:
- Stil: [modern/minimalistisch/verspielt/etc.]
- Farbschema: [Hauptfarbe, Akzentfarbe]
- Hell/Dunkel: [Präferenz]
- Referenz-Websites: [URLS FALLS VORHANDEN]
Technisch:
- Framework: Next.js mit TypeScript
- Styling: Tailwind CSS
- Komponenten: shadcn/ui
- Responsive: Mobile-first
Besondere Anforderungen:
- [LISTE SPEZIELLE FEATURES]
Prompt-Template für Unternehmenswebsites
Für mehrseitige Unternehmenswebsites brauchst du einen detaillierteren Prompt:
Erstelle eine professionelle Unternehmenswebsite:Unternehmen:
- [VOLLSTÄNDIGE BESCHREIBUNG]
- Gründungsjahr: [JAHR]
- Team-Größe: [ANZAHL]
- Standort: [ORT]
Seiten:
Homepage:
- Hero mit [BESCHREIBUNG]
- Leistungsübersicht
- Über uns Teaser
- Aktuelle Projekte/News
- Kontakt-CTA
Über uns:
- Unternehmensgeschichte
- Team-Vorstellung
- Werte/Mission
- Meilensteine
Leistungen:
- [LEISTUNG 1] mit Beschreibung
- [LEISTUNG 2] mit Beschreibung
- [WEITERE LEISTUNGEN]
Referenzen/Portfolio:
- Projekt-Galerie
- Case Studies
- Kundenstimmen
Kontakt:
- Kontaktformular
- Karte
- Öffnungszeiten
- Social Media Links
Design-System:
- Primärfarbe: [HEX]
- Sekundärfarbe: [HEX]
- Akzentfarbe: [HEX]
- Schriften: [VORSCHLÄGE]
- Stil: [BESCHREIBUNG]
Features:
- Kontaktformular mit E-Mail-Versand
- Cookie-Banner (DSGVO)
- Blog-Integration (optional)
- Newsletter-Anmeldung
Design-Beschreibungen die funktionieren
Viele Prompts scheitern an vagen Design-Beschreibungen. Hier sind Beispiele für präzise Formulierungen:
Statt "modernes Design"
"Minimalistisches Design mit viel Whitespace, großer Typografie (Headlines mind. 48px), subtilen Hover-Animationen und einem Farbschema aus Weiß, Schwarz und einem warmen Akzentton (#FF6B35)"
Statt "professionell"
"Seriöses Corporate Design mit gedeckten Farben (Dunkelblau #1a365d als Hauptfarbe), klarer Struktur, dezenten Schatten für Tiefe und einer serifenlosen Schrift wie Inter oder Plus Jakarta Sans"
Nützliche Design-Begriffe
- Minimalistisch: "viel Whitespace, reduzierte Elemente, Fokus auf Typografie"
- Bold/Mutig: "große, kontrastreiche Elemente, starke Farben, oversized Headlines"
- Elegant: "Serifenschrift, dezente Animationen, gedämpfte Farbpalette"
- Tech/Modern: "geometrische Formen, Gradient-Akzente, Glassmorphism-Effekte"
- Verspielt: "Illustrationen, abgerundete Formen, bunte Akzente, Micro-Interactions"
Technische Spezifikationen angeben
Je klarer du die technischen Anforderungen definierst, desto weniger Nacharbeit hast du:
Framework wählen
Next.js ist der Standard für moderne Websites. Für einfachere Seiten reicht auch Astro oder sogar reines HTML/CSS.
Styling definieren
Tailwind CSS ist die beste Wahl für KI-generierte Websites. Es ist lesbar, konsistent und gut dokumentiert.
Komponenten-Bibliothek
shadcn/ui bietet hochwertige, anpassbare Komponenten. Radix UI ist eine gute Alternative.
Datenbank & Auth
Für dynamische Features: Supabase für Datenbank und Authentifizierung. Für einfache Kontaktformulare reicht oft ein Service wie Formspree.
Häufige Prompt-Fehler
- Zu vage sein: "Mach es schön" sagt der KI nichts. Sei spezifisch!
- Zu viel auf einmal: Starte mit dem Grundgerüst, füge Features iterativ hinzu
- Widersprüchliche Angaben: "Minimalistisch aber mit vielen Animationen und Elementen"
- Keine Beispiele: Referenz-Websites helfen der KI enorm
- Texte vergessen: Gib Beispieltexte oder beschreibe den gewünschten Ton
- Mobile ignorieren: Immer "responsive" und "mobile-first" angeben
Iteration ist der Schlüssel
Erwarte nicht, dass der erste Prompt perfekte Ergebnisse liefert. Der Prozess sieht typischerweise so aus:
Grundgerüst erstellen
Starte mit einem umfassenden Initial-Prompt für die Grundstruktur der Website.
Review & Feedback
Schau dir das Ergebnis an und notiere, was dir nicht gefällt oder fehlt.
Gezielte Anpassungen
"Ändere die Hero-Section: Mach den Hintergrund dunkler und füge ein Gradient-Overlay hinzu"
Features hinzufügen
Füge nach und nach weitere Funktionen hinzu: "Erstelle jetzt das Kontaktformular mit..."
Beispiel-Prompts für verschiedene Branchen
Für eine Agentur/Dienstleister:
"Erstelle eine Premium-Website für eine Branding-Agentur:
- Dunkles, elegantes Design mit viel Schwarzraum
- Große Portfolio-Bilder mit Hover-Effekten
- Smooth Scroll-Animationen
- Case Study Detailseiten
- Team-Section mit kreativen Hover-States
- Kontaktseite mit animierter Karte"
Für einen Online-Shop:
"Erstelle einen modernen E-Commerce Shop für handgemachte Kerzen:
- Warme, einladende Farbpalette (Creme, Terracotta, Sage)
- Produkt-Grid mit Quick-View Funktion
- Filterbare Kategorien
- Warenkorb mit Slide-out Panel
- Checkout-Prozess über 3 Schritte
- Bestseller und Sale-Badges"
Für einen Coach/Berater:
"Erstelle eine vertrauenswürdige Website für einen Business Coach:
- Helles, freundliches Design mit Blau als Vertrauensfarbe
- Prominente Testimonials und Erfolgsgeschichten
- Buchungs-Integration für Discovery Calls
- Blog-Section für Thought Leadership
- Newsletter-Anmeldung mit Lead Magnet
- Persönliches Foto im Hero, nicht Stock"
Fazit: Dein Prompt-Workflow
Ein guter Prompt ist keine einmalige Sache, sondern ein Prozess:
- Vorbereitung: Sammle alle Informationen über dein Business, Zielgruppe und Ziele
- Strukturieren: Nutze die 7 Bausteine als Checkliste
- Konkretisieren: Sei bei Design und Technik so spezifisch wie möglich
- Testen: Führe den Prompt aus und evaluiere das Ergebnis
- Iterieren: Verfeinere mit gezielten Follow-up-Prompts
Mit diesem Wissen bist du bestens vorbereitet, um mit KI-Tools professionelle Websites zu erstellen. Im nächsten Guide zeigen wir dir, wie du diese Prompts in Cursor oder Lovable einsetzt.
