Beispiele für Web- und UI-Design-Prompts
Ein nützlicher UI-Prompt beschreibt zuerst die Aufgabe, dann den Stil. Vier Beispiele konkretisieren Aussage, Aktion, Fakten und mobiles Verhalten verschiedener Website-Bereiche.
Von Neruve · Aktualisiert am
Mit einer funktionierenden Seite starten
Sieh dir eine funktionierende HTML-Seite an und übe diese Techniken mit dem Quellcode und dem zugehörigen Prompt in deinem Coding-Agenten.
Framewise — HTML-Landingpage-Vorlage für KI-Produkte
Übe eine klare Produktgeschichte, visuelle Hierarchie und einen responsiven Einstieg.
Vorlage ansehenAster Hale — HTML-Portfolio-Vorlage für Produktdesigner
Passe Leistungen, Projektgeschichten und Kontaktablauf an deine Arbeit an.
Vorlage ansehenSkills bleiben ohne Anmeldung kostenlos lesbar und kopierbar. Vorlagenvorschauen sind öffentlich; Quellcode und zugehörige Prompts erfordern ein Konto und den entsprechenden Kauf oder Tarif. Quellcodezugriff und Preise ansehen
Aufgabe vor Stil beschreiben
Nennen Sie Zielgruppe, Seitenziel, erforderliche Inhalte und Aktionsziel. Legen Sie fest, ob ein Konzept, Prototyp oder Dateien für ein bestehendes Projekt entstehen sollen. Liefern Sie reale Fakten und kennzeichnen Sie fiktive Demodaten, damit keine Versprechen oder Funktionen erfunden werden.
Prompt an Seite und Zustände anpassen
Ein Hero braucht ein Angebot und den nächsten Schritt; Preise brauchen lesbare Unterschiede; Dashboards brauchen Filter sowie Leer- und Fehlerzustände; Produkte brauchen Material und Kaufverhalten. Wählen Sie das passende Beispiel und ersetzen Sie die Fakten, statt alle Funktionen zu kombinieren.
Stil als Richtung nutzen
Beschreiben Sie, wo Bauhaus-Geometrie, Schweizer Typografie, kräftige Konturen oder zurückhaltender Luxus eingesetzt werden. Kontrast, Hierarchie und mobile Lesbarkeit gehen vor Dekoration. Ein Stilname allein definiert keine Oberfläche.
Ergebnis öffnen und ein Problem korrigieren
Prüfen Sie Desktop sowie 390 und 320 Pixel. Testen Sie Hauptaktion und Tastaturfokus. Notieren Sie Element, Breite und erwartetes Verhalten, bevor Sie eine begrenzte Korrektur anfordern. Prüfungen, die das Werkzeug nicht durchführen kann, bleiben ausdrücklich offen.
Eigene Übungen zum Anpassen
Diese eigenen Neruve-Beispiele bleiben auf Englisch. Sie sind vorgeschlagene Eingaben, keine geprüften Tool-Ergebnisse oder kostenpflichtigen Template-Prompts. Ersetzen Sie die fiktiven Angaben vor der Verwendung.
Bauhaus-Hero: Aussage und Aktion
Design a Bauhaus-inspired hero for a fictional poster studio called Form Study.
Goal: help visitors understand the studio and follow “View the collection” to #collection.
Use one supplied poster placeholder, a compact geometric heading and a red accent.
Keep the offer readable before introducing decorative circles or rules.
At 390 px, stack the poster and text; keep the action visible and use readable contrast.
Use semantic headings, visible keyboard focus and a reduced-motion alternative.
Do not invent awards, customer logos, order counts or a working checkout.
Return the section structure and explain which parts still need implementation.Schweizer Preistabelle: lesbarer Vergleich
Design a Swiss-minimalist pricing comparison for a fictional planning app.
Use this labelled demonstration data only: Draft $12/month and Team $28/month,
both USD. These are fictional example prices, not Neruve prices.
Draft includes personal notes; Team adds shared notes and team comments.
Use aligned labels and a clear type scale; do not rely on color alone for differences.
At 320 px, stack cards and keep every price and feature readable.
Buttons link to #plan-details, not a real checkout. Do not invent discounts,
payment processing, trials or annual prices. Mark the entire section as a demo.Neobrutalistisches Dashboard: Bedienelemente und Zustände
Design a neo-brutalist task dashboard for a fictional studio project.
Use bold outlines and one accent without overwhelming the status information.
Include search, a status filter and a task list with title, owner and due date.
Label the data as fictional. Define loading, empty, filtered-empty and error states.
If this is a concept, annotate how each control should behave instead of claiming
it is connected to an API. If implementing, use the existing project contracts.
At 390 px, retain task names and status labels; do not hide necessary fields.
Check keyboard focus and readable contrast. Do not invent productivity metrics.Luxus-Produktseite: Fakten bewahren
Design a restrained luxury product page for a fictional ceramic lamp, Still One.
Use warm neutrals, generous spacing and a clearly labelled placeholder photo.
Demonstration facts: $180 USD, matte ceramic base, replaceable LED bulb,
30 cm height. These are fictional facts, not a real offer.
Show dimensions, materials and care near the main product image.
Represent the purchase area as a labelled concept; do not connect payments.
For an existing store, preserve its real price, stock, variants and cart contract.
At 390 px, keep product facts near the image and the action easy to reach.
Do not invent stock urgency, reviews, shipping promises or sustainability claims.Ein UI-Prompt-Beispiel zum Öffnen: Form Study
Wir haben die Hero-Übung in Codex umgesetzt und die echte Seite geprüft. Die Eingabe enthält den ursprünglichen Prompt und die anschließende Bitte um vollständiges HTML/CSS. Das geometrische Poster ist ein eigener, gekennzeichneter Platzhalter.
Was geprüft wurde
Bei 1280, 390 und 320 px bleiben Text und Poster innerhalb der Seitenbreite. „View the collection“ führt zur Sammlung. Der Tastaturfokus ist sichtbar; reduzierte Bewegung deaktiviert sanftes Scrollen.
Öffne die Demo oder lade das HTML herunter und öffne es lokal. Vergleiche dieselben Breiten, folge dem Hauptlink und prüfe die Tastaturbedienung. Dokumentiere bei einer Wiederholung mit der vollständigen Eingabe deine eigenen Ergebnisse.
Dies ist eine fiktive, eigenständige Hero-Umsetzung mit Browserprüfung. Die anderen drei Prompts bleiben vorgeschlagene Eingaben. Modellvergleich, echter Checkout und bessere Conversion sind nicht belegt.
Häufige Fragen
Sind das kostenlose Beispiele, getestete Ergebnisse oder Vorlagen-Prompts?
Die vier Prompts sind kostenlose eigene Eingabeübungen. Die Form-Study-Hero-Umsetzung unten wurde im Browser geprüft; die übrigen bleiben Vorschläge. Für Template-Prompts und Quellcode-Downloads gelten die angezeigten Bedingungen.
Designs und zugehörige Prompts entdecken
Neruves öffentlicher Katalog bietet Webdesigns, verfügbare zugehörige Prompts und ein Skills-Verzeichnis. Interaktive Vorschauen sind ohne Anmeldung verfügbar; Prompts unterliegen den Zugriffsrechten des Eintrags und Tarifs. Dieser Workflow nutzt dein eigenes Entwicklungstool und benötigt keinen öffentlichen Neruve-Website-Generator.
Offizielle Quellen
Externe Tools und Skills gehören ihren jeweiligen Autoren. Die Links dienen als Quellen und bedeuten weder eine Partnerschaft noch enthaltene Zugangsrechte.