KI UI-Prompts: 300+ Templates, die wirklich funktionieren (2026)

Du gibst „erstelle eine Landing Page" in dein KI Tool ein. Was dabei herauskommt, wirkt, als hätte ein Ausschuss aus dem Jahr 2015 daran gearbeitet. Kommt dir das bekannt vor? Hier ist die unbequeme Wahrheit: Die meisten nutzen KI gestützte

0xMinds Team

Jan 25, 2026·12 min read

KI UI-Prompts: 300+ Templates, die wirklich funktionieren (2026) - Featured Image

Du gibst „erstelle eine Landing Page" in dein KI-Tool ein. Was dabei herauskommt, wirkt, als hätte ein Ausschuss aus dem Jahr 2015 daran gearbeitet. Kommt dir das bekannt vor?

Hier ist die unbequeme Wahrheit: Die meisten nutzen KI-gestützte UI-Generierung völlig falsch. Sie schieben dem Tool die Schuld zu, dabei liegt das Problem beim Prompt. Ein vager Prompt liefert vage Ergebnisse. Ein präziser Prompt liefert etwas, das du wirklich deployen kannst.

Ich habe das letzte Jahr damit verbracht, über 300 KI-Prompts für jede erdenkliche UI-Komponente zu testen, zu verfeinern und zu katalogisieren. Die Prompts in diesem Guide sind keine Theorie – sie sind praxiserprobt und liefern produktionsreifen Code beim ersten Versuch.

Das hier ist deine vollständige Referenz. Lesezeichen setzen. Teilen. Schluss damit, das Rad neu zu erfinden, wann immer du eine neue Komponente brauchst.

Die wichtigsten Punkte

Präzision schlägt alles: Prompts mit konkreten Layout-, Stil- und Verhaltensangaben liefern 10x bessere Ergebnisse als vage Anfragen

Die 5-Elemente-Formel: Komponente + Layout + Visueller Stil + Inhalt + Technische Spezifikationen = konsistente Ergebnisse

Sofort einsatzbereit: Jede Kategorie enthält Prompts, die du direkt mit 0xMinds, v0, Lovable oder Cursor verwenden kannst

300+ Templates: Deckt alle wichtigen UI-Muster ab – von Hero-Sections bis zu Dark-Mode-Toggles

Nach Anwendungsfall sortiert: Finde in Sekunden, was du brauchst – nicht in Stunden

So nutzt du diese Prompt-Sammlung {#how-to-use-this-prompt-collection}

Das ist kein Guide, den du von A bis Z durchliest. Es ist eine Referenz, zu der du immer wieder zurückkehrst.

Inhaltsverzeichnis der Prompt-Sammlung

So holst du das Maximum heraus:

Für schnelle Erfolge: Spring direkt zu dem Abschnitt, der zu deiner aktuellen Aufgabe passt. Jede Kategorie enthält Prompts zum sofortigen Einsatz.

Zum Lernen: Lies zuerst „Anatomie eines guten KI-Prompts". Wenn du verstehst, warum diese Prompts funktionieren, kannst du sie besser auf deine spezifischen Anforderungen anpassen.

Für vollständige Seiten: Starte mit den Seiten-Komponenten, dann schichte Navigation, Formulare und Datenanzeige darüber. Jeder Abschnitt verweist auf weiterführende Guides mit mehr Details.

Tipp: Die Prompts in diesem Guide funktionieren mit allen gängigen KI-Tools – 0xMinds, v0, Lovable, Cursor und mehr. Das universelle Prinzip ist Präzision: Je mehr Kontext du angibst, desto besser das Ergebnis.

Anatomie eines guten KI-Prompts {#the-anatomy-of-a-good-ai-prompt}

Bevor wir uns in 300+ Templates stürzen, lass uns verstehen, was einen KI-Prompt wirklich erfolgreich macht.

Die meisten gescheiterten Prompts haben dasselbe Problem: Sie sind zu vage. „Erstelle eine Hero-Section" gibt der KI keinerlei Richtung. Sie greift auf zufällige Standardwerte zurück, die wahrscheinlich nicht deiner Vorstellung entsprechen.

Effektive Prompts enthalten fünf Schlüsselelemente:

Element	Was es abdeckt	Beispiel
Komponententyp	Was du baust	Hero-Section, Kontaktformular, Preistabelle
Layout	Räumliche Anordnung	Split-Screen, zentriert, Grid-Layout
Visueller Stil	Farben, Typografie, Stimmung	Dark Mode, Verlaufshintergrund, minimalistisch
Inhalt	Text, Daten, Interaktionen	Headlines, CTAs, Platzhalterdaten
Technische Spezifikationen	Framework, Bibliotheken	React, Tailwind, shadcn/ui

So sieht die Formel in der Praxis aus:

[KOMPONENTENTYP] für [KONTEXT/BRANCHE].
Layout: [KONKRETE ANORDNUNG]
Visuell: [FARBEN, TYPOGRAFIE, STIMMUNG]
Inhalt: [HEADLINES, CTAS, DATEN]
Technisch: [FRAMEWORK + BIBLIOTHEKEN]

Schlechter Prompt:

Create a dashboard

Guter Prompt:

Create an analytics dashboard for a SaaS product.
Layout: Left sidebar navigation, main content area with 4 metric cards at top,
        large line chart below, and recent activity table at bottom.
Visual: Dark mode (#0a0a0a background), purple accent color, clean shadows.
Content: Metric cards show Users, Revenue, Conversion, Churn with sample data.
         Chart shows last 30 days. Activity table has 10 rows.
Technical: React, Tailwind CSS, Recharts for visualization, shadcn/ui components.

Der zweite Prompt lässt keinen Raum für Interpretation. Die KI weiß genau, was zu bauen ist.

Jetzt wenden wir diese Formel auf alle wichtigen UI-Komponenten an.

Seiten-Komponenten (Hero, Landing Page, Preise) {#page-level-components-hero-landing-pricing}

Seiten-Komponenten sind die großen Bausteine: Hero-Sections, Feature-Grids, Preistabellen und vollständige Landing Pages. Sie setzen den Ton für alles andere.

So nutzt du diese Prompt-Sammlung

Hero-Sections

Die Hero-Section hat etwa 3 Sekunden, um Besucher zu überzeugen zu bleiben. Generische Prompts liefern generische Ergebnisse – und die werden schlicht ignoriert.

Für ausführliche Templates und 25+ Variationen, schau dir unseren vollständigen Leitfaden für KI-Hero-Section-Prompts an.

SaaS-Hero-Template:

Create a SaaS hero section for a project management tool.
Layout: Split-screen, headline + CTAs on left, product mockup on right.
Visual: White background, blue accent (#2563eb), clean shadows on mockup.
Content: Bold headline about team productivity, "Start Free" primary CTA,
         "Watch Demo" secondary button. Trust badge showing "10k+ teams".
Technical: React + Tailwind CSS, fully responsive (stack on mobile).

Startup-Launch-Hero:

Build a pre-launch hero for a fintech startup.
Layout: Centered content, email capture prominent, waitlist counter.
Visual: Dark mode with gradient mesh background (purple to blue), minimal.
Content: Bold claim headline, single email input, "Join X others" counter.
Technical: React, Tailwind, animate counter on load.

E-Commerce-Hero:

Fashion brand hero section, editorial style.
Layout: Full-bleed product image with minimal text overlay.
Visual: High contrast, magazine aesthetic, no clutter.
Content: Brand name top-left, "Shop Collection" bottom-center.
Technical: React + Tailwind, image lazy loading, responsive.

Hero-Typ	Ideal für	Schlüsselelemente
Split-Screen	SaaS, B2B	Produkt-Mockup + Headline
Zentriert	Startups, Launches	E-Mail-Erfassung, Social Proof
Full-Bleed	E-Commerce, Portfolios	Visuell orientiert, minimaler Text
Video-Hintergrund	Agenturen, Premium-Marken	Atmosphäre vor Information

Landing-Page-Sektionen

Über den Hero hinaus brauchen Landing Pages Feature-Bereiche, Social Proof und Handlungsaufforderungen. Unser Leitfaden für KI-Landing-Page-Prompts enthält 50+ Templates für jeden Seitenabschnitt.

Bento-Grid-Features:

Create a bento grid feature section with 6 cards.
Layout: Asymmetric grid (2 large cards, 4 small).
Visual: Muted backgrounds, purple accent on icons, subtle hover lift.
Content: Icon + headline + one-line description per card. Features:
         Real-time sync, Team collaboration, Custom workflows,
         Analytics, API access, Priority support.
Technical: React, Tailwind, CSS grid.

Testimonial-Bereich:

Build a testimonial carousel with 3 visible cards.
Layout: Horizontal scroll on mobile, cards side-by-side on desktop.
Visual: Light background, large quotation marks as background element.
Content: Quote, name, title, company, avatar for each. Auto-rotate.
Technical: React, Tailwind, pause on hover.

Für dedizierte Testimonial-Templates, die echtes Vertrauen aufbauen, schau dir unseren Leitfaden für KI-Testimonial-Prompts an.

Preistabellen

Preisseiten sind echte Conversion-Schlachtfelder. Der richtige Prompt kann den Unterschied machen zwischen „Ich denk noch mal drüber nach" und „Nimm mein Geld."

Dreistufige Preisgestaltung:

Design a pricing section with 3 tiers: Free, Pro, Enterprise.
Layout: Three cards side-by-side, middle tier highlighted.
Visual: Middle card elevated with shadow, "Most Popular" badge.
Content: Plan name, price/month, feature list with checkmarks, CTA.
         Monthly/yearly toggle at top with "Save 20%" for yearly.
Technical: React + Tailwind + shadcn/ui.

Vergleichstabelle:

Create a pricing comparison table.
Layout: Feature rows, plan columns, sticky header.
Visual: Clean lines, checkmarks for included, X for excluded.
Content: 10 feature rows, 3 plan columns with specific values.
Technical: React, Tailwind, convert to accordion on mobile.

Unser Leitfaden für KI-Preistabellen-Prompts enthält 20+ Templates, die konvertieren – nicht nur anzeigen.

Navigation entscheidet über Usability. Nutzer sollen finden, was sie suchen – ohne nachzudenken.

Navbars

Standard-SaaS-Navbar:

Create a navbar for a SaaS product.
Layout: Logo left, links center, CTA button right.
Visual: White background, subtle bottom border, fixed on scroll.
Content: Links: Features, Pricing, Docs, Blog. CTA: "Get Started".
Mobile: Hamburger menu with slide-in drawer.
Technical: React, Tailwind, useState for mobile menu.

Mega-Menü:

Build a navbar with mega menu dropdown.
Layout: Standard navbar with Products dropdown showing categories.
Visual: Mega menu opens to full-width with 3 columns of links.
Content: Product categories with icons and descriptions.
Technical: React, Tailwind, hover to open, click on mobile.

Für 40+ Navigations-Templates einschließlich komplexer Mega-Menüs, schau dir unseren Leitfaden für KI-Navbar- und Footer-Prompts an.

Sidebars

Sidebars sind unverzichtbar für Dashboards und Admin-Panels. Falsch umgesetzt fühlt sich die App wie ein Labyrinth an.

Einklappbare Dashboard-Sidebar:

Create a collapsible sidebar for a SaaS dashboard.
Layout: Icons when collapsed, icons + labels when expanded.
Visual: Dark background, active state highlight, smooth transition.
Content: 8 navigation items with icons, grouped into sections.
         Collapse button at bottom. User avatar at top.
Technical: React, Tailwind, persist state in localStorage.

Admin-Panel-Sidebar:

Build an admin sidebar with nested navigation.
Layout: Multi-level menu with expandable sections.
Visual: Light mode, indented sub-items, arrow indicators.
Content: Top-level: Dashboard, Users, Products, Settings.
         Each has 3-4 sub-items.
Technical: React, Tailwind, recursive component for nesting.

Unser Leitfaden für KI-Sidebar- und Drawer-Prompts enthält 30+ Muster für SaaS-Navigation.

Footer werden oft vernachlässigt – dabei sind sie wertvolle Fläche für Links, Social Proof und Conversions.

Standard-Footer:

Create a footer with 4 link columns and newsletter signup.
Layout: Link columns left, newsletter form right, legal at bottom.
Visual: Dark background, organized, social icons included.
Content: Columns: Product, Company, Resources, Legal.
         Newsletter with email input and "Subscribe" button.
Technical: React, Tailwind, mobile-responsive grid.

Formular-Komponenten (Eingaben, Validierung, Mehrschrittformulare) {#form-components-inputs-validation-multi-step}

Formulare sind tückischer als sie aussehen. Ein paar Eingabefelder und ein Button – klingt simpel. Aber Randfälle können dich kalt erwischen, wenn du nicht präzise genug bist.

Unser Leitfaden für KI-Formular-Prompts enthält 35+ Templates für jeden Formulartyp. Hier sind die Grundlagen:

Kontakt- und Registrierungsformulare

Kontaktformular mit Validierung:

Create a contact form with name, email, and message.
Validation: All required, email format check, 500 char limit on message.
States: Loading on submit, success toast, inline error messages.
Technical: React Hook Form, Tailwind, accessible labels + ARIA.

Registrierungsformular:

Build a signup form with name, email, password.
Validation: Email format + "already exists" check, password strength meter.
Content: Requirements checklist for password, terms checkbox.
States: Loading, success redirect, error handling.
Technical: React Hook Form, Zod validation, Tailwind.

Mehrschrittassistenten

Onboarding-Wizard:

Create a 3-step onboarding wizard.

Step 1 - Personal: Name, email, avatar upload.
Step 2 - Preferences: Industry dropdown, company size, use cases.
Step 3 - Setup: Username with availability check, notification toggles.

Include: Progress bar, Previous/Next buttons, validation per step,
         data persists between steps.
Technical: React, Tailwind, form state management.

Für vollständige Onboarding-Flow-Muster, schau dir unseren Leitfaden für KI-Onboarding-Flow-Prompts an.

Datei-Uploads

Datei-Uploads versagen regelmäßig, wenn Prompts zu vage sind. Sei explizit beim Beschreiben aller Verhaltensweisen.

Drag-and-Drop-Uploader:

Create a file upload component with drag-and-drop.
Features: Dropzone area, file preview, progress bar, file type validation.
Limits: 5MB max, images only (jpg, png, webp).
States: Idle, dragging over, uploading, complete, error.
Technical: React, Tailwind, mock upload progress.

Unser Leitfaden für KI-Datei-Upload-Prompts deckt Drag-Drop, Mehrfach-Upload und Bildzuschnitt-Muster ab.

Formular-Vergleich

Formulartyp	Hauptherausforderung	Muss im Prompt stehen
Kontakt	Spam-Prävention	Validierungsregeln, Erfolgszustände
Registrierung	Passwortkomplexität	Stärkemesser, Bestätigung
Mehrschritt	Datenpersistenz	Fortschrittsanzeige, Navigation
Datei-Upload	Fehlerbehandlung	Größenlimits, Typvalidierung
Zahlung	Sicherheitswahrnehmung	Kartenformatierung, Vertrauenssignale

Datenanzeige (Tabellen, Diagramme, Karten) {#data-display-tables-charts-cards}

Dashboards stehen und fallen mit der Datenanzeige. Tabellen müssen sortierbar sein. Diagramme müssen informieren. Karten müssen strukturieren.

Datentabellen

Tabellen sind notorisch schwierig umzusetzen – Sortierung, Filterung und Pagination brauchen explizite Anweisungen.

Sortierbare Datentabelle:

Create a data table with sorting and filtering.
Layout: Table with header row, 10 data rows, pagination at bottom.
Features: Click header to sort (asc/desc indicators), search input above,
          column filters, row selection checkboxes.
Visual: Clean borders, hover state, alternating row colors.
Technical: React, Tailwind, TanStack Table patterns.

Admin-Benutzertabelle:

Build a user management table for an admin panel.
Columns: Avatar, Name, Email, Role (badge), Status (badge), Actions.
Actions: Edit button, delete with confirmation, status toggle.
Features: Search, role filter dropdown, bulk actions.
Technical: React, Tailwind, shadcn/ui Table components.

Unser KI-Datentabellen-Prompts-Tutorial enthält 15+ Templates für komplexe Tabellen.

Diagramme & Visualisierungen

Diagramme erfordern Bibliotheksspezifität – Recharts, Chart.js und D3 erzeugen grundlegend unterschiedlichen Code.

Dashboard-Liniendiagramm:

Create a line chart showing revenue over time.
Data: Last 30 days, mock data with upward trend.
Features: Hover tooltip with exact values, axis labels, responsive.
Visual: Single line in brand color, grid lines, clean labels.
Technical: React, Recharts, Tailwind wrapper.

Multi-Diagramm-Dashboard:

Build a dashboard section with 4 charts.
Layout: 2x2 grid of chart cards.
Charts: Line (revenue), Bar (users by region), Pie (traffic sources),
        Area (daily active users).
Visual: Consistent color palette, chart titles, legends.
Technical: React, Recharts, Tailwind grid.

Für 25+ Diagramm-Templates und Datenvisualisierungsmuster, schau dir unseren Leitfaden für KI-Diagramm-Prompts an.

Dashboard-Layouts

SaaS-Dashboard:

Create a SaaS analytics dashboard.
Layout: 4 metric cards top, large chart middle, activity table bottom.
Metrics: Users, Revenue, Conversion %, Churn % with trend arrows.
Chart: 30-day line chart, toggleable between metrics.
Table: Recent activities with timestamp, user, action columns.
Technical: React, Tailwind, Recharts.

Unser Leitfaden für KI-Dashboard-Prompts enthält 40+ Templates für Admin-Panels und Analyse-Ansichten.

Feedback-Komponenten (Modals, Toasts, Alerts) {#feedback-components-modals-toasts-alerts}

Feedback-Komponenten informieren Nutzer über den aktuellen Stand. Modals erregen Aufmerksamkeit. Toasts bestätigen Aktionen. Alerts warnen vor Problemen.

Modals & Dialoge

Bestätigungs-Modal:

Create a confirmation dialog for delete actions.
Layout: Centered modal with overlay, icon at top.
Content: Warning icon (red), title "Are you sure?", description,
         Cancel and Delete buttons.
Visual: Red accent for danger, subtle animation on open.
Technical: React, Tailwind, focus trap, escape to close.

Formular-Modal:

Build a modal containing a contact form.
Layout: Modal with header, form body, footer with buttons.
Content: Name, email, message fields. Cancel + Submit buttons.
Behavior: Validate before submit, close on success, show errors inline.
Technical: React, Tailwind, shadcn/ui Dialog, React Hook Form.

Unser Leitfaden für KI-Modal- und Popup-Prompts enthält 30+ Templates für jeden Modal-Typ.

Toast-Benachrichtigungen

Toast-System:

Create a toast notification system with 4 variants.
Types: Success (green), error (red), warning (yellow), info (blue).
Features: Auto-dismiss after 4s, dismiss button, stacks multiple,
          position in top-right corner.
Technical: React, Tailwind, context for global state.

Alert-Komponenten

Inline-Alert:

Build alert components for 4 states.
Types: Success, error, warning, info.
Layout: Icon left, text right, optional dismiss button.
Visual: Colored left border, muted background matching type.
Technical: React, Tailwind, polymorphic component.

Erweiterte Komponenten (Animationen, Dark Mode, Barrierefreiheit) {#advanced-animations-dark-mode-accessibility}

Erweiterte Komponenten trennen professionelle von amateurhaften UIs. Diese Muster verleihen deiner App den Feinschliff, den Nutzer spüren – auch wenn sie ihn nicht benennen können.

Animationen & Micro-Interactions

Schlecht umgesetzte Animationen wirken ruckartig. Gut gemacht fühlen sie sich magisch an.

Hover-Effekte:

Create a card component with polished hover animations.
Default: Subtle shadow, normal scale.
Hover: Lifts (translateY -4px), shadow deepens, content shifts slightly.
Transition: Smooth 200ms ease, no jank.
Technical: React, Tailwind transitions, or Framer Motion.

Ladezustände:

Build a loading skeleton system for a card grid.
Layout: 3x3 grid of skeleton cards.
Animation: Pulse/shimmer effect on each skeleton.
Match: Same dimensions as actual content cards.
Technical: React, Tailwind animate-pulse.

Seitenübergänge:

Create page transition animations.
Behavior: Fade out current page, fade in new page.
Duration: 300ms, easing curve ease-in-out.
Technical: Framer Motion AnimatePresence, React Router.

Für umfassende Animationsmuster, schau dir unser KI-Animations- und Micro-Interactions-Tutorial an.

Dark Mode

Dark Mode ist kein optionales Extra mehr – aber falsch implementiert schafft er Albträume für die Barrierefreiheit.

Theme-Umschalter:

Build a dark mode toggle with system preference detection.
Features: Toggle button, persists preference in localStorage,
          respects system preference on first visit.
Visual: Sun/moon icon, smooth transition between themes.
Technical: React, Tailwind dark: classes, useEffect for detection.

Hinweis für DSGVO-bewusste Projekte: Das Speichern von Theme-Präferenzen im localStorage gilt in der Regel als technisch notwendige Funktion und erfordert keine gesonderte Einwilligung – prüfe das aber mit deinem Datenschutzbeauftragten, wenn du für Nutzer im DACH-Raum entwickelst und weitere Daten zusammengeführt werden könnten.

Dark-Mode-Farbsystem:

Create a component that demonstrates dark mode theming.
Light: White backgrounds, dark text, colored accents.
Dark: Near-black backgrounds (#0a0a0a), light text, adjusted accents.
Ensure: Proper contrast ratios (4.5:1 minimum).
Technical: Tailwind CSS dark mode, CSS custom properties.

Unser Leitfaden für KI-Dark-Mode-Prompts deckt vollständige Theme-Systeme ab, die zuverlässig funktionieren.

Barrierefreiheit

96 % der KI-generierten UIs bestehen grundlegende Barrierefreiheitsprüfungen nicht. Diese Prompts ändern das.

Barrierefreies Formular:

Create a contact form following WCAG 2.1 AA standards.
Requirements:
- Labels associated with inputs (not placeholders only)
- aria-required on required fields
- aria-describedby linking errors to fields
- Focus visible on all interactive elements
- Error states not color-only
- 44x44px minimum touch targets
Technical: React, Tailwind, proper semantic HTML.

Tastaturnavigation:

Build a dropdown menu with full keyboard support.
Keyboard: Arrow keys navigate, Enter selects, Escape closes,
          Tab moves to next focusable element.
Visual: Clear focus indicator on active item.
Technical: React, Tailwind, useRef for focus management.

Screenreader-Optimierung:

Create an accordion component optimized for screen readers.
Requirements:
- Button triggers with aria-expanded
- aria-controls linking to content panels
- Content hidden with proper aria-hidden
- Announce state changes
Technical: React, Tailwind, semantic HTML.

Der Prompt-Formel-Spickzettel {#the-prompt-formula-cheat-sheet}

Hier ist eine Schnellreferenz für das Schreiben von Prompts, die wirklich funktionieren:

Wesentliche Elemente

1. KOMPONENTENTYP: Was baust du?
2. LAYOUT: Wie ist es räumlich angeordnet?
3. VISUELLER STIL: Farben, Typografie, Stimmung
4. INHALT: Text, Daten, Interaktionen
5. TECHNISCH: Framework, Bibliotheken, Einschränkungen

Template nach Komponententyp

Hero-Section:

[Branche] hero section.
Layout: [split/centered/full-bleed]
Headline: [Thema oder Text]
CTA: [Button-Text]
Visual: [Hintergrund, Farben, Stimmung]
Technical: [Framework]

Formular:

[Formulartyp] form with [fields].
Validation: [rules per field]
States: [loading, success, error handling]
Technical: [form library, styling]

Datentabelle:

[Kontext] data table.
Columns: [list with types]
Features: [sort, filter, pagination, selection]
Visual: [styling details]
Technical: [table library, framework]

Modal:

[Zweck] modal/dialog.
Layout: [structure]
Content: [elements inside]
Behavior: [open/close, keyboard, focus]
Technical: [component library]

Schnelle Qualitäts-Checkliste

Vor dem Absenden jedes Prompts:

Komponententyp und Kontext angegeben
Layout-Details eingeschlossen (nicht nur „schönes Layout")
Farben oder Design-System erwähnt
Alle Zustände beschrieben (laden, Erfolg, Fehler)
Technische Anforderungen aufgelistet (Framework, Bibliotheken)
Mobile/Responsive-Anforderungen ergänzt
Barrierefreiheit erwähnt, wenn relevant

Häufig gestellte Fragen {#frequently-asked-questions}

Wie lang sollte ein KI-UI-Prompt idealerweise sein?

3–7 Sätze, die die fünf Schlüsselelemente abdecken: Komponente, Layout, Visuell, Inhalt und technische Spezifikationen. Mehr Details helfen, aber schreibe keine Romane. Wenn du über 200 Wörter kommst, verkomplizierst du es wahrscheinlich zu sehr.

Welches KI-Tool eignet sich am besten für diese Prompts?

Diese Prompts sind tool-agnostisch – sie funktionieren mit Mit Fardino bauen →, v0, Lovable, Cursor und den meisten KI-Code-Generatoren. Das Prinzip (Präzision) ist universell. Manche Tools interpretieren bestimmte Keywords etwas anders, aber der Kernansatz gilt überall.

Wie erhalte ich konsistente Ergebnisse über mehrere Generierungen hinweg?

Füge deine Design-System-Einschränkungen in jeden Prompt ein: „Verwende Tailwind CSS, shadcn/ui-Komponenten, Inter-Schriftart, rounded-lg-Ränder." Konsistenz entsteht durch Einschränkungen. Ohne sie ist jede Generierung ein Glücksspiel.

Kann ich Prompts aus verschiedenen Abschnitten kombinieren?

Absolut. „Nehme die Sidebar aus dem Navigations-Abschnitt und kombiniere sie mit der Datentabelle aus dem Datenanzeige-Abschnitt" funktioniert hervorragend. Stell dir diese Prompts wie LEGO-Steine vor – sie sind darauf ausgelegt, zusammenzuarbeiten.

Warum sieht mein Output manchmal immer noch generisch aus?

Dir fehlen wahrscheinlich spezifische visuelle Details. Füge ein unerwartetes Element hinzu: eine bestimmte Animation, ein ungewöhnliches Typografie-Gewicht, eine markante Farbkombination oder eine benannte Design-Inspiration („inspiriert von Linears minimalistischer Ästhetik"). Generische Prompts liefern generische Ergebnisse.

Wie gehe ich mit komplexen Mehrkomponenten-Seiten um?

Teile sie in Abschnitte auf. Generiere jeden Abschnitt separat, dann füge zusammen. Der Versuch, eine gesamte komplexe Seite in einem Prompt zu generieren, liefert oft schlechtere Qualität als das schrittweise Aufbauen.

Was, wenn das Ergebnis nah dran ist, aber nicht perfekt?

Iteriere. Füge die spezifische Korrektur deinem Prompt hinzu: „Wie zuvor, aber mach die Buttons rounded-full statt rounded-lg." Kleine Verbesserungen summieren sich zu genau dem Ergebnis, das du brauchst.

Wie oft sollte ich meine Prompt-Bibliothek aktualisieren?

Immer wenn du einen Prompt findest, der gut für deinen spezifischen Anwendungsfall funktioniert, speichere ihn. Die Templates hier sind Ausgangspunkte – deine personalisierten Versionen mit deinen Markenfarben, deiner bevorzugten Komponentenbibliothek und deinen typischen Mustern werden noch wertvoller sein.

Häufige Fehler, die du vermeiden solltest

Nach der Durchsicht tausender KI-generierter UIs sind das die Muster, die verlässlich zu schlechten Ergebnissen führen:

Fehler 1: Die vage Ästhetik

So nicht:

Create a modern, clean dashboard

„Modern" und „clean" sind für eine KI bedeutungslos. Jeder Entwickler interpretiert diese Begriffe anders. Die KI greift auf zufällige Standardwerte zurück, die wahrscheinlich nicht deinem mentalen Bild entsprechen.

Stattdessen so:

Create a dashboard with:
- White background, 4px border radius, subtle shadows
- Inter or system font, 14px base size
- Purple (#7c3aed) accent color
- Inspired by Linear's minimal aesthetic

Fehler 2: Fehlende Zustände

Formulare ohne Fehlerzustände. Buttons ohne Ladeanzeigen. Karten ohne Hover-Effekte. Wenn du keine Zustände spezifizierst, bekommst du sie auch nicht.

Immer einschließen:

Ladezustände für jede asynchrone Aktion
Fehlerzustände für Validierung
Leerzustände für Listen und Tabellen
Hover-/Fokuszustände für interaktive Elemente
Erfolgsbestätigung für Formularabgaben

Fehler 3: Mobile ignorieren

„Mach es responsive" ist besser als nichts, aber immer noch vage. Spezifiziere, was bei jedem Breakpoint passiert.

Sei explizit:

Responsive behavior:
- Desktop: 3 cards per row
- Tablet: 2 cards per row
- Mobile: 1 card per row, stacked

Fehler 4: Barrierefreiheit vergessen

Die meisten KI-Outputs lassen Barrierefreiheit komplett weg. Wenn du barrierefreie Komponenten brauchst (und das tust du), fordere explizit an:

Korrekte Überschriftenhierarchie
ARIA-Labels und -Rollen
Tastaturnavigation
Fokus-Management
Farbkontrast-Anforderungen
Screenreader-Überlegungen

Fehler 5: Generischer Inhalt

Platzhaltertext wie „Lorem ipsum" erzeugt generisch aussehenden Output. Verwende realistischen Inhalt:

Content: Real headlines about productivity gains.
         Actual feature names: "Smart Search", "Team Workspaces".
         Realistic metrics: "2.5x faster", "10k+ users".

Prompt-Iterations-Workflow

Beim ersten Versuch perfekte Ergebnisse zu erzielen ist eher die Ausnahme. Hier ist ein Ablauf zur effizienten Verfeinerung von Prompts:

Schritt 1: Breit beginnen

Dein erster Prompt sollte die Grundlagen abdecken: Komponententyp, grundlegendes Layout und Tech-Stack. Überingenieuriere den ersten Versuch nicht.

Schritt 2: Strukturell bewerten

Stimmt das Layout? Sind die Hauptabschnitte dort, wo du sie erwartest? Wenn die Struktur falsch ist, korrigiere das zuerst – bevor du dich um Farben kümmerst.

Schritt 3: Visuell verfeinern

Sobald die Struktur stimmt, füge visuelle Verfeinerungen hinzu: Farben, Typografie, Abstände, Schatten. Diese sind einfacher anzupassen als grundlegende Layout-Änderungen.

Schritt 4: Feinschliff hinzufügen

Letzter Durchgang: Animationen, Hover-Zustände, Micro-Interactions. Das sind die Details, die gut von großartig unterscheiden.

Schritt 5: Dokumentieren, was funktioniert

Wenn du einen überzeugenden Prompt gefunden hast, speichere ihn. Baue deine eigene Bibliothek von Templates auf, die für deinen Tech-Stack und dein Design-System angepasst sind.

Deine eigene Prompt-Bibliothek aufbauen

Die Templates in diesem Guide sind Ausgangspunkte. Deine personalisierte Bibliothek wird noch wertvoller sein.

Was du speichern solltest

Prompts, die beim ersten Versuch funktioniert haben
Deine Markenfarben und Design-System-Einschränkungen
Häufige Komponentenmuster für deine App
Technische Anforderungen (Bibliotheken, Frameworks)
Barrierefreiheits-Anforderungen

Template-Struktur

Erstelle ein Template für jeden Komponententyp, den du regelmäßig verwendest:

## [Komponentenname]

### Kontext
- Verwendet für: [Anwendungsfall beschreiben]
- Design-System: [deine Einschränkungen]
- Framework: [dein Stack]

### Basis-Prompt
[Dein getesteter Prompt hier]

### Variationen
- Dark-Mode-Version: [Prompt]
- Kompakte Version: [Prompt]
- Mobile-first-Version: [Prompt]

Teilen und Zusammenarbeiten

Wenn du im Team arbeitest, pflege eine gemeinsame Prompt-Bibliothek. Konsistenz zwischen Teammitgliedern bedeutet konsistenten UI-Output. Deine Junior-Entwickler können dieselbe Komponentenqualität liefern wie deine Senior-Entwickler.

Diese Pillar-Page gibt dir den Überblick. Diese Guides gehen tiefer auf spezifische Komponententypen ein:

Seiten-Komponenten

KI-Landing-Page-Prompts: 50+ Templates — Vollständige Seiten-Templates von Hero bis Footer
KI-Hero-Section-Prompts: 25+ Templates — Hero-Sections, die Besucher stoppen
KI-Preistabellen-Prompts — Tabellen, die wirklich konvertieren
KI-Testimonial-Section-Prompts — Vertrauen durch Social Proof aufbauen

KI-Navbar- und Footer-Prompts: 40+ Templates — Professionelle Navigationsmuster
KI-Sidebar- und Drawer-Prompts: 30+ Templates — SaaS- und Admin-Navigation

Formulare & Eingaben

KI-Formular-Prompts: 35+ Templates — Von Kontaktformularen bis zu Mehrschritt-Wizards
KI-Datei-Upload-Prompts — Drag-Drop, Fortschritt, Validierung
KI-Onboarding-Flow-Prompts — Nutzer-Journeys, die konvertieren

Daten & Dashboards

KI-Dashboard-Prompts: 40+ Templates — Admin-Panels und Analysen
KI-Datentabellen-Prompts: 15+ Templates — Sortierbare, filterbare Tabellen
KI-Diagramm-Prompts: 25+ Templates — Datenvisualisierung richtig gemacht

Feedback & Interaktion

KI-Modal- und Popup-Prompts: 30+ Templates — Dialoge, Bestätigungen, Alerts

Erweitert

KI-Animations-Prompts — Micro-Interactions und Übergänge
KI-Dark-Mode-Prompts — Theme-Systeme, die zuverlässig funktionieren

Jetzt loslegen

Du hast jetzt das vollständige Playbook für KI-gestützte UI-Generierung. 300+ Templates, nach Anwendungsfall geordnet. Eine Formel, die mit jedem Tool funktioniert. Ausführliche Guides für jede wichtige Komponente.

Aber Prompts sind nur so gut wie das, was du damit baust.

Wähle ein Template. Pass es für dein Projekt an. Generiere etwas Echtes. Die beste UI-Komponente ist die, die live ist – nicht die, die du noch perfektionierst.

Bereit, diese Prompts auszuprobieren? Mit Fardino bauen →

Verfasst vom 0xMinds Team. Wir bauen KI-Tools für Frontend-Entwickler, die shippen.

#pillar-page#KI-Prompts#UI-Generierung#Vibe-Coding#Templates

Build with Fardino

Got an idea? Build it now.

Describe the site or app you want — Fardino turns it into a live website.

⌘+Enterto launch