Website Prompt Generator
Dieses Skill wandelt eine Idee eines Benutzers – oder eine Reihe hochgeladener Referenzbilder – in einen hochdetaillierten, umfassenden Build-Prompt um, der in einen KI-Coding-Assistenten (Cursor, Lovable, Bolt, v0 usw.) eingespeist werden kann, um die Website zu erstellen.
⚡ Modusauswahl: Zuerst lesen
Bevor Sie etwas unternehmen, entscheiden Sie, welcher Modus zutrifft:
| Situation | Modus |
|---|---|
| Benutzer beschreibt eine Idee nur mit Worten | [Textmodus] – aus Beschreibung generieren |
| Benutzer lädt 1+ Bilder / Screenshots / Mockups hoch | [Bild-Blaupausen-Modus] – zuerst Bilder analysieren, dann generieren |
| Benutzer lädt Bilder hoch UND gibt eine Beschreibung | [Bild-Blaupausen-Modus] – Bilder haben Priorität; Beschreibung als Kontext verwenden |
Wenn Bilder vorhanden sind, Sie sie aber nicht anzeigen können, bitten Sie den Benutzer, sie vor dem Fortfahren erneut hochzuladen oder einzufügen. Erstellen Sie keine Blaupause aus der Vorstellungskraft, wenn Bilder bereitgestellt wurden.
💬 Schritt 0A: Fragebogen vor der Generierung (Nur interaktive Sitzungen)
In aktiven Gesprächen (interaktiven Sitzungen) MÜSSEN Sie vor der Ausführung des UI/UX-Skripts oder der Generierung des Build-Prompts/Blaupause einen kurzen, benutzerfreundlichen Multiple-Choice-Fragebogen präsentieren, um die Projektanforderungen zu klären. Dies hilft dabei, das Designsystem und den Technologie-Stack genau an die Bedürfnisse des Benutzers anzupassen.
Bitten Sie den Benutzer, die folgenden Fragen zu beantworten (z. B. durch Antworten mit "1A, 2B, 3C, 4A, 5F, 6C"):
-
Welche Art von Website bauen Sie?
- Option A: Portfolio / Persönliche Website (Präsentation von Projekten, Lebenslauf, Fähigkeiten und Kontakt)
- Option B: SaaS / Produkt-Landingpage (Vermarktung eines Softwareprodukts, Funktionen, Preise, Testimonials)
- Option C: Unternehmens-/Agentur-Website (Geschäftsdienstleistungen, Team, Kundenlogos, Kontakt)
- Option D: E-Commerce / Online-Shop (Produktlisten, Warenkorb, Checkout-Erlebnis)
- Option E: Kreative / immersive Präsentation (stark visuell, 3D-Elemente, interaktive Animationen oder 3D-Displays)
- Option F: Sonstiges (Bitte angeben)
-
Was ist Ihr Ziel-Technologie-Stack?
- Option A: HTML + CSS (Vanilla mit Tailwind CSS, leichtgewichtige Einzelseite)
- Option B: React + Vite + Tailwind CSS + Framer Motion (Moderne dynamische SPA)
- Option C: Next.js (App Router) + Tailwind CSS + shadcn/ui (Full-Stack-fähige Vorlage)
- Option D: SvelteKit oder Vue / Nuxt + Tailwind CSS
- Option E: Sonstiges (Bitte angeben, z. B. Astro, mobiles Framework)
-
Was ist die primäre Layout- und Strukturpräferenz?
- Option A: Einseitige, scrollbare Landingpage (am besten für schnelle Konversionen/einfache Produkte geeignet)
- Option B: Mehrseitige Website (Startseite, Über uns, Dienstleistungen, Kontakt, Blog usw.)
- Option C: Dashboard / Webanwendungsschnittstelle (interaktive Diagramme, Tabellen, Seitenleisten-Navigation, Profile)
- Option D: Dokumentation / Ressourcenzentrum (Suchleiste, verschachteltes Seitenmenü, Artikelraster, Dokumentationslayout)
- Option E: Minimalistische "Im Bau"- / Link-in-Bio-Seite (einzelscreen Hero mit schnellem CTA/Links)
-
Welcher Typografiestil passt am besten zur Marke?
- Option A: Moderne serifenlose Schrift (Inter, Roboto, Outfit – sauber, neutral, Standard-Tech/SaaS)
- Option B: Elegante Serifenschrift (Instrument Serif, Playfair Display – redaktionell, Luxus, Mode, Boutique)
- Option C: Technische Mono-Schrift (JetBrains Mono, Fira Code – Entwicklertools, Web3, Datenbankportale)
- Option D: Geometrisch & freundlich (Lexend, Montserrat, Poppins – Marketing, SaaS, Startups, Bildung)
- Option E: Display / Stilisiert (Syne, Clash Display – Kreativagentur, High-End-Design, künstlerisch, fette Überschriften)
-
Sind Integrationen von Drittanbietern in der Blaupause erforderlich?
- Option A: Einfache Lead-Erfassung (E-Mail-Kontaktformulare, Newsletter-Anmeldungsintegrationen über Resend/Mailchimp)
- Option B: E-Commerce & Zahlungen (Stripe-Checkout, Produktzahlungen, Preisseiten-Weiterleitungen)
- Option C: Authentifizierung & Datenbank (Clerk / Supabase-Login, Benutzerprofile, Backend-Speicher)
- Option D: Headless CMS (Sanity, Strapi, Contentful für Blogbeiträge/Artikel/Portfolio-Items)
- Option E: Interaktive Daten / Analysen (Recharts/Chart.js-Diagramme, Google Analytics-Tracking)
- Option F: Keine / Nur statischer Build (reine Frontend-Komponenten/Layouts)
-
Welches Theme-/Modus-Verhalten möchten Sie implementieren?
- Option A: Nur erzwungener Dark Mode (schlank, entwicklerorientiert, Gaming, Unterhaltung, kreativ)
- Option B: Nur erzwungener Light Mode (sauber, medizinisch, Unternehmen, hohe WCAG-Barrierefreiheit)
- Option C: Dynamischer Modus-Umschalter (Benutzer kann mit einem Button/Schalter zwischen Light- und Dark-Modus wechseln)
- Option D: Automatische Systemstandard-Umschaltung (passt sich automatisch an das Farbschema des Betriebssystems des Benutzers an)
🎨 Schritt 0B: UI/UX-Design-Intelligenz – Abruf & Anwendung (ERFORDERLICH)
Bevor Sie einen Build-Prompt oder eine Blaupause schreiben, führen Sie das gebündelte Suchskript in diesem Skill aus, um Layout-, Typografie- und Farbempfehlungen abzurufen. Die Verwendung dieser kuratierten Datenbank stellt sicher, dass das generierte Designsystem branchenerprobt, barrierefrei und perfekt auf die Geschäftsdomäne des Produkts abgestimmt ist, anstatt auf geratenen oder generischen Farbwahlen zu basieren.
1. Schlüsselattribute extrahieren
Identifizieren Sie aus der Beschreibung des Benutzers oder den Referenzbildern:
- Produkttyp / Branche: (z. B. SaaS, Fintech, Beauty/Spa, Bildung, Portfolio, Medizin, E-Commerce)
- Visuelle Schlüsselwörter / Stimmung: (z. B. minimalistisch, Glas-Effekt, Dark Mode, Brutalismus, Soft UI, Luxus)
- Ziel-Stack: (z. B.
html-tailwind(Standard),react,nextjs,vue,svelte,swiftui,react-native,flutter,shadcn,jetpack-compose,astro,nuxt-ui,nuxtjs)
2. UI/UX Pro Max CLI-Befehle ausführen
Führen Sie die folgenden Terminalbefehle im Arbeitsbereich mit dem Tool run_command aus, um Designsystemparameter und Stack-Richtlinien abzurufen:
-
Vollständiges Designsystem generieren:
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<produkttyp> <branche> <visuelle Schlüsselwörter>" --design-system -p "Projektname"Tipp: Wenn es sich um eine mehrseitige Web-App handelt oder Persistenz erforderlich ist, hängen Sie
--persistan, um das Designsystem global indesign-system/MASTER.md(Globale Quelle der Wahrheit) und seitenübergreifende Überschreibungen indesign-system/pages/[seiten-slug].mdzu speichern. Weisen Sie im generierten Build-Prompt das Entwicklertool explizit an, diese Markdown-Dateien zu überprüfen und zu befolgen. -
Stack-Richtlinien abrufen (führen Sie dies aus, wenn ein bestimmter Technologie-Stack angefordert oder ausgewählt wurde):
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<layout/komponente/responsive Schlüsselwörter>" --stack <stack_name> -
Domain-Richtlinien abrufen (wenn Sie spezifische Richtlinien zu
ux,zugänglichkeit,animation,landingoderdiagrammbenötigen):py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<Themen-Schlüsselwörter>" --domain <domain_name>
3. Ergebnisse parsen und kombinieren
Parsen Sie die Konsolenausgabe dieser Skripte und wenden Sie sie wie folgt an:
- Palette: Ordnen Sie die genauen Primär-, Sekundär-, Hintergrund-, Text- und CTA-HEX/HSL-Farben aus der Skriptausgabe direkt der CSS-Variablenvorlage zu.
- Typografie: Wenden Sie die empfohlenen Google Fonts-Paarungen (einschließlich spezifischer Schriftgewichte und CSS-Importlinks) auf die Überschriften- und Textschriftarten an.
- Wichtige Effekte: Implementieren Sie spezifische Effekte, die von der Datenbank zurückgegeben werden (z. B. "Milchglas", "subtile Tiefenschatten", "klare 3px Fokusringe").
- Einschränkungen / Anti-Patterns: Extrahieren Sie die "VERMEIDEN"-Warnungen (z. B. "keine Neonfarben", "keine verwirrenden Buchungsabläufe", "keine Scale-Transformationen, die Layout-Verschiebungen verursachen") und listen Sie sie in einem Abschnitt Einschränkungen auf.
4. Visuelle Qualitätsrichtlinien durchsetzen
Ihr Ausgabe-Prompt/Blaupause muss das Entwicklertool explizit anweisen, sich an diese Kernregeln aus der Checkliste ui-ux-pro-max zu halten, die für ein erstklassiges visuelles Design entscheidend sind:
- Symbole und visuelle Elemente: Verwenden Sie Lucide, Heroicons oder offizielle Marken-SVGs von Simple Icons. Emojis dürfen nicht als UI-Symbole verwendet werden, da sie in einem erstklassigen Design unprofessionell und unfertig wirken.
- Übergänge und Hover: Standardisieren Sie Übergangsgeschwindigkeiten zwischen 150ms und 300ms (z. B.
transition-colors duration-200). Übergänge außerhalb dieses Bereichs wirken entweder träge oder zu aggressiv. Stellen Sie sicher, dass jedes hoverbare oder klickbare Elementcursor-pointerhat, um dem Benutzer die Interaktivität anzuzeigen. Hover-Effekte sollten Skalierungstransformationen vermeiden, die andere Elemente im Layout verschieben. - Hell-/Dunkel-Kontrast: Stellen Sie ein Mindestkontrastverhältnis von 4,5:1 für normalen Fließtext sicher, um die Lesbarkeit zu gewährleisten. Verwenden Sie für Glaselemente im hellen Modus eine Schicht mit hoher Deckkraft (
bg-white/80oder höher) und einen sichtbaren hellgrauen Rand (border-gray-200), um zu verhindern, dass die Karte vor einem hellen Hintergrund ausbleicht. - Layout und Abstände: Floating-Navbars sollten versetzte Ränder haben (z. B.
top-4 left-4 right-4), um zu verhindern, dass sie sich eingeengt an den Fensterrändern anfühlen. Vermeiden Sie überlappende Elemente, es sei denn, sie werden absichtlich mit expliziten z-index-Werten geschichtet. Halten Sie eine konsistente Containerbreite ein (z. B.max-w-6xlodermax-w-7xl). - Barrierefreiheit: Stellen Sie sicher, dass Tastatur-Fokusringe sichtbar sind, um eine reine Tastaturnavigation zu ermöglichen. Alle Formularfelder müssen beschreibende Beschriftungen haben, alle Bilder müssen Alternativtexte haben und Übergänge sollten die
prefers-reduced-motion-Einstellungen des Benutzers respektieren. - Keine Sci-Fi / Cyberpunk-HUD-Drahtgittermodelle: Verwenden Sie keine dekorativen Node/Konstellationsgraphen, gestrichelten Polygon-Drahtgitter-Verbindungslinien oder futuristische HUD-artige Diagramme. Diese Elemente wirken ungepflegt und veraltet. Verwenden Sie stattdessen saubere typografische Hierarchien, strukturierte Diagramme, echte UI-Mockups oder erstklassige Farbverlaufs-/Schimmeroberflächen.
- Geräte-Responsivität: JEDES einzelne Layout, jeder Abschnitt und jede Komponente MUSS vollständig responsiv und für eine außergewöhnliche Darstellung auf allen Bildschirmen (Mobil, Tablet, Desktop) optimiert sein. Das Layout muss Mobile-First aufgebaut sein, mit relativen/flüssigen Einheiten (wie
clamp(),vw,%,dvh) anstelle von festen Pixelbreiten, CSS Grid und Flexbox für adaptive Skalierung nutzen und Container Queries (@container) für komponentenbezogene Responsivität implementieren. Stellen Sie sicher, dass es keinen horizontalen Überlauf gibt, Schriftgrößen sich elegant skalieren und Touch-Ziele auf Mobilgeräten mindestens 44 x 44 Pixel groß sind.
5. Interaktive Auswahl & Vorschau (Nur interaktive Sitzungen)
Präsentieren Sie in aktiven Gesprächen eine kurze Zusammenfassung der Design-Token (abgerufene Primär-/Sekundär-/CTA-Farben, Typografie-Paarung, Layout-Muster und eine Checkliste) zur Genehmigung oder Anpassung durch den Benutzer, bevor Sie den endgültigen vollständigen Build-Prompt/die Blaupause generieren. Dies stellt die Übereinstimmung mit dem Benutzer sicher.
📝 Textmodus
Verwenden Sie dies, wenn keine Bilder hochgeladen werden.
Vorgehensweise
Agieren Sie als erfahrener technischer UI/UX-Designer und Frontend-Architekt. Der resultierende Prompt darf nichts der Fantasie überlassen – geben Sie den genauen Tech-Stack, Farben, Typografie, Layout, Animationen und Inhaltsstruktur an. Integrieren Sie alle Erkenntnisse aus Schritt 0B: UI/UX-Design-Intelligenz – Abruf.
KRITISCHER SCHRITT: Dieses Skill wird mit einer universellen Komponenten-Prompt-Bibliothek in references/core/animated-web-prompts.md ausgeliefert. Verwenden Sie vor der Generierung grep_search oder view_file, um 1–3 Einträge zu finden, die zum angeforderten Stil oder zur Domäne des Benutzers passen. Analysieren Sie sie – studieren Sie ihre Struktur, das Niveau der technischen Spezifität, die Klammer-/Platzhalter-Konvention und die Animationstechniken – und generieren Sie dann einen völlig neuen Prompt mit Ihren eigenen Komponenten und Animationen. Kopieren Sie KEIN Beispiel wörtlich und geben Sie den Bibliothekstext nicht als Ausgabe zurück: Die Beispiele setzen die Qualitätslatte und demonstrieren das Format, sie sind nicht das Lieferobjekt. Überspringen Sie diesen Schritt nicht!
Wenn zusätzlich Anime.js angefordert wird oder optimal für die Animationsanforderungen ist (z. B. SVG-Morphing/-Zeichnung, komplexe Stagger-Grids oder benutzerdefinierte Timelines), laden Sie references/animations/animejs/animejs-api-reference.md und references/animations/animejs/animejs-examples.md, um eine korrekte Syntax, baumschüttelbare Imports und saubere React-Komponentenstrukturen (unter Verwendung von createScope für die Lebenszyklusbereinigung von Komponenten) sicherzustellen.
Wenn GSAP ScrollTrigger angefordert wird oder optimal für erweiterte scrollgesteuerte Aktionen ist (z. B. Anheften, komplexe Scroll-Timelines, Scroll-Scrubbing oder Callback-Batching), laden Sie references/animations/gsap/gsap-scrolltrigger-reference.md, um eine korrekte Plugin-Registrierung und ordnungsgemäße Bereinigung mit @gsap/react / useGSAP()-Hooks sicherzustellen.
Ausgabeformat (Textmodus)
Umbrechen Sie Ihre gesamte Ausgabe in einen einzelnen ```markdown-Block, damit sie einfach kopiert und eingefügt werden kann:
```
Build Prompt: [Eingängiger Titel der Website]
Erstellen Sie eine [Art der Website] mit [wichtigen visuellen Merkmalen].
## Globales Designsystem-Referenz
- Hinweis: Falls persistiert, MUSS das Entwicklertool `design-system/MASTER.md` und Seitenüberschreibungen unter `design-system/pages/` als einzige Quelle der Wahrheit für Design-Token überprüfen.
## UI/UX-Designbegründung & Barrierefreiheit
- Erklären Sie die kognitive Logik hinter der ausgewählten Farbpalette (z. B. "Tiefes Blau kommuniziert Fintech-Sicherheit; WCAG-Kontrast beträgt 5,2:1").
- Erläutern Sie, warum die Typografie-Paarung zur Produktdomäne passt (z. B. "Instrument Serif verleiht einen luxuriösen redaktionellen Touch, ausgeglichen durch sauberen Barlow-Fließtext").
- Erklären Sie den Abstandsrhythmus und die Wahl der interaktiven Übergänge (z. B. "200ms Ease-Out auf Karten, damit Reaktionen schnell, aber flüssig wirken").
Tech-Stack
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion, Anime.js (v4), GSAP + ScrollTrigger, Spline 3D / React Three Fiber / 3D WebGL und React Spring. Hinweis: Der generierte Prompt MUSS alle diese Animations- und 3D-Technologien enthalten, mit mindestens 2 oder mehr Komponenten, Abschnitten oder Animationssequenzen pro Technologie.
- Lucide React
Schriftarten
- Geben Sie die genauen Google Fonts an (z. B. Instrument Serif + Barlow:300;400;500;600). Fügen Sie die Schriftgewichtsverwendung ein.
Farbsystem / Theme
- Definieren Sie CSS-Variablen oder Tailwind-Token mit präzisen HEX/HSL-Werten für bg, fg, accent, muted.
G
…
[für die Übersetzung gekürzt]
```