Produktwebsites und SaaS-Landingpages mit KI-Agenten gestalten
Wenn du einen KI-Agenten ohne Designmethode um eine Landingpage bittest, erhältst du fast immer dieselbe Vorlage: ein leuchtendes Pillen-Label, ein Slogan mit Farbverlauf und drei gleich breite Karten für Funktionen. Überzeugende Produktwebsites machen den tatsächlichen Unterschied des Produkts auf dem ersten Bildschirm direkt erlebbar und vergleichen unterschiedliche visuelle Richtungen, bevor sie sich auf eine Implementierung festlegen.
Die wichtigsten Punkte
- Der erste Bildschirm muss drei Fragen sofort beantworten: Was ist das Produkt, wodurch unterscheidet es sich und was können Besucher jetzt ausprobieren oder anklicken?
- Ein Briefing kann völlig unterschiedliche Stimmungen tragen. Die neun Orvo-Landingpages in der Galerie zeigen, wie identische Preise und Funktionen jeweils eine eigene redaktionelle Stimme bekommen.
- Wenn keine Produktfotos vorhanden sind, verzichte auf Archivbilder und schaffe Glaubwürdigkeit mit interaktiven Konfiguratoren, Klang- oder Schriftmustern und Zeitverläufen des Herstellungsprozesses, wie bei Atelier Volders und Fonderie Mercier.
- Gestalte den Erzählrhythmus für 1440×900 auf dem Desktop und prüfe anschließend bei 390 px auf Mobilgeräten Zeilenumbrüche der Überschriften, Lesbarkeit der Preistabellen und Touch-Ziele.
npx skills add oil-oil/oil-uiMehr als 40 funktionierende Websites und Prompts findest du in der Sammlung /de/inspiration/web-design/.
Warum standardmäßige KI-Landingpages austauschbar wirken
Wenn ein Prompt nur „Erstelle eine moderne Landingpage für mein KI-Startup“ verlangt, fehlen dem Modell fachliche Inhalte als Grundlage für das Layout. Es greift auf vermeintlich sichere Standards zurück: dunkelviolette Verläufe, schwebende Pillen-Badges, drei Karten mit „Schnell / Intelligent / Sicher“ und erfundene Prozentwerte.
Die Websites in der Oil-UI-Galerie gehen einen anderen Weg. Fieldwork Type platziert einen live bearbeitbaren Schrifttester und Lizenzrechner direkt im Hero. Bei Fonderie Mercier können Besucher Bronzeglocken mit unterschiedlichen Durchmessern anschlagen und die Abklingkurven der Obertöne beobachten, bevor sie einen Gießtermin reservieren. Orvo baut die Seite um zwei konkrete Fakten auf: Begleitung durch Gründer mit Erfahrung in veröffentlichten Produkten und ein fester Monatspreis statt Abrechnung nach Tokens.
| Bereich | Standardmuster einer KI-Vorlage | Vorgehen mit Oil UI und Beispielen aus der Galerie |
|---|---|---|
| Hero | Pillen-Label + vager Slogan + zwei Buttons + abstrakte Grafik | Klare Positionierung + funktionierende Produktfläche oder live nutzbares interaktives Exponat |
| Funktionen | Drei identische abgerundete Karten mit generischen Liniensymbolen | Erläuterungen entlang realer Aufgaben, etwa ein 6-wöchiger Zeitverlauf der Holzverarbeitung oder eine akustische Stimmtafel |
| Preise und Buchung | Lange Häkchenliste mit unklaren Unterschieden zwischen den Paketen | Konkrete Pakete ($0 / $24.99 / $34.99 mit funktionierendem Abrechnungsumschalter) oder verfügbare Chargen |
| Fehlende Fotos | Unpassende Archivbilder oder stilistisch fremde KI-Illustrationen | Starke Typografie, technische Diagramme, Auswahl der Oberflächen und haptisch wirkende Farbpaletten |
Mehrere Richtungen aus einem einzigen Briefing entwickeln
Die Galerie bewahrt mehrere fertige Richtungen, die aus exakt demselben Briefing entstanden sind. Alle Orvo-Landingpages verwenden dieselben Fakten: App-Erstellung im Dialog, Begleitung durch menschliche Experten, über 100 Vorlagen und die Preise Starter $0 / Pro $24.99 / Unlimited $34.99 mit 20 % Rabatt bei jährlicher Zahlung.
Dennoch inszeniert Orvo · Launch Garden das Produkt als hellen, modularen Gestaltungsraum; Orvo · Tandem stellt die partnerschaftliche Zusammenarbeit mit Menschen in den Mittelpunkt; Orvo · Coastal Workshop und Open Creative Studio erkunden völlig andere typografische und räumliche Rhythmen. Mit Oil UI erstellt dein Agent zuerst eine Vergleichsseite, damit du die passende Richtung für deine Marke wählen kannst, bevor Details ausgearbeitet werden.
Eine Prompt-Vorlage für sorgfältig gestaltete Landingpages
Nutze deinen Prompt dazu, zu erklären, wie das Produkt funktioniert, wie die Preise aufgebaut sind und womit Besucher auf der Seite interagieren können:
Verwende Oil UI, um die offizielle Landingpage für [Produktname] zu gestalten und zu implementieren (Desktop-Viewport 1440×900, responsiv bis 390 px Breite).
- Produkt und Zielgruppe: [1–2 Sätze dazu, wer es verwendet und welche Aufgabe damit erledigt wird]
- Zwei echte Unterscheidungsmerkmale: [z. B. 1) festes Monatsabonnement statt Abrechnung über Guthaben; 2) interaktive Live-Vorschau oder Prüfung durch Experten]
- Erforderliche Bereiche und echte Zahlen:
1. Hero: Klare Positionierung plus interaktiver [Tester / Rechner / Live-Vorschau des Arbeitsablaufs];
2. Funktionen: Zeige [3 konkrete Anwendungsfälle oder Vorlagenkategorien];
3. Preise: [Genaue Paketnamen und Preise mit funktionierendem Umschalter für monatliche/jährliche Zahlung];
4. Abschließender Call-to-Action.
- Vorgaben für Assets: [Gib an, ob Produktfotos vorhanden sind; falls nicht, verwende Typografie, Layout und eigene Vektor-/Canvas-Grafiken].
Schlage 3 klar unterschiedliche visuelle Richtungen nebeneinander vor, bevor du die finale Seite erstellst.Geeignet für SaaS-Produkte, Entwicklerwerkzeuge, Hardware-Launches und unabhängige Studios.
Funktionierende Beispiele und Prompts aus der Galerie
Öffne die Live-Demos bei 1440 px oder 390 px und untersuche, wie Modell und Prompt die fertige Oberfläche geprägt haben.
Fieldwork Type
Unabhängige Schriftgießerei
Die Website einer unabhängigen Schriftgießerei (ab 1440×900, responsiv bis 390 Pixel Breite). Der erste Bildschirm stellt eine Hauptschrift in den Mittelpunkt: Besucher können eigenen Text eingeben und Schriftgrad, Strichstärke und Schriftbreite anpassen. Weiter unten folgen die Tabelle der Strichstärken, der Zeichensatz, Anwendungsbeispiele und Lizenzen nach Verwendungszweck (Desktop, Web, App), die in den Warenkorb gelegt werden können. Der Schrifttester und die Lizenzauswahl sind das Herzstück: Die Darstellung ändert sich während der Eingabe, und der Lizenzpreis wird mit jeder Option aktualisiert. Entwirf drei Zustände: den ersten Bildschirm, das geöffnete Tester-Panel und die Lizenzauswahl.
Arbeit und Prompt ansehen →
Atelier Volders · Maserung & Zapfen
Website einer Möbelwerkstatt
Die Website von Atelier Volders, einer zweiköpfigen Holzwerkstatt an der Korenlei 14 in Gent, Belgien (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Die Werkstatt fertigt nur ein Objekt: De Drievoet, einen dreibeinigen Hocker aus massiver Eiche, der aus drei Jahre luftgetrocknetem Holz von Hand gedrechselt und verkeilt wird. Er entsteht in einer einzigen Charge pro Monat mit 24 Hockern. Er ist in drei Höhen erhältlich (32 cm niedriger Kaminhocker €240, 45 cm Ess- und Schreibtischhocker €270, 62 cm Tresenhocker mit Eschenfußring €310) und drei Oberflächen (mit Seife geschrubbte rohe Eiche, geräucherte dunkle Eiche, gekochtes Leinöl & Bienenwachs). Besucher können Höhe und Oberfläche in Echtzeit wechseln, den sechswöchigen Herstellungsprozess, den Brennstempel mit Chargennummer auf der Unterseite und die Samstagsöffnungszeiten erkunden sowie einen Hocker aus der aktuellen Charge reservieren. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Fonderie Mercier · Bronze mit Stimme
Website einer familiengeführten Glockengießerei
Die Website von Fonderie Mercier, einer familiengeführten Glockengießerei in dritter Generation am Quai Saint-Vincent 28 am Saône-Ufer in Lyon (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Sie gießt ein einziges charakteristisches Objekt aus Glockenbronze mit 78% Kupfer / 22% Zinn in verdichteten Flusssandformen: Le Bourdon de Table, auf der Drehbank auf einen präzisen Ton gestimmt und einmal im Monat in einer festen Charge von 18 Glocken gegossen. Die Glocke ist in drei Größen und Tonhöhen erhältlich (Ø 72 mm Tischglocke A4 440Hz €180, Ø 96 mm Hofglocke F#4 370Hz €240, Ø 124 mm Wandglocke mit geschmiedeter Eisenhalterung D4 293.7Hz €340) und drei Patinas (rohe auf der Drehbank bearbeitete Bronze, geräucherte Bronze, Grünspan). Besucher können jede Tonhöhe anhören, Größe und Patina wechseln, den fünfstufigen Gussprozess, das kaltgestempelte Kronenregister und die Freitagsöffnungszeiten erkunden sowie einen Reservierungsschein für den nächsten monatlichen Guss vorbereiten. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Routewise
Website einer KI-API-Plattform
Die Website einer Aggregationsplattform für KI-Modell-APIs ähnlich OpenRouter (ab 1440×900, responsiv bis 390 Pixel Breite), mit chinesischsprachiger Oberfläche für Entwickler in China: Ein API-Schlüssel gibt Zugriff auf Hunderte Modelle von Dutzenden Anbietern, mit einheitlicher Abrechnung, automatischem Failover und Routing nach Preis oder Latenz. Anbieter- und Modellnamen sollen fiktiv, aber glaubwürdig sein. Kreativität hat oberste Priorität. Erstelle nicht noch eine KI-Website mit dunklem Gradient und Codeblock. Der Kern ist sichtbares Routing: Eine Anfrage verlässt deinen Code und wird zu einem Anbieter geleitet; fällt dieser aus, wechselt sie automatisch zu einem Backup, wobei Preis und Latenz sofort sichtbar sind. Der Modellmarktplatz unterstützt Filter und Vergleiche nach Anbieter, Kontextlänge und Preis. Entwirf drei Zustände: den ersten Bildschirm; Filtern und Vergleichen auf dem Modellmarktplatz; sowie Routing und Failover einer Anfrage.
Arbeit und Prompt ansehen →Oil UI Pro für ausdrucksstarke Flächen und Prüfungen bei starker Vergrößerung
Wechsle zu Oil UI Pro, wenn deine Website eigene SVG-Lichtspuren, Punktraster oder fließende Verläufe, 19 spezialisierte Karten- und räumliche Erweiterungsprototypen sowie mehrere Blindreview-Runden bei 100 % und 200 % Vergrößerung benötigt.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Wie wirkt eine Landingpage ohne Produktfotos überzeugend?
Verwandle einen echten Teil der Fachlogik in ein interaktives Exponat auf der Seite. Bei Atelier Volders wechseln Besucher zwischen Eichenhockern von 32 cm, 45 cm und 62 cm sowie drei Holzoberflächen; bei Fonderie Mercier hören sie Glockenfrequenzen probe. Beide kommen ohne Archivfotografie aus.
Sollte meine Landingpage einen Dark Mode oder Light Mode verwenden?
Richte dich nach Medium und Thema. Low-Level-Laufzeitumgebungen (Archon) oder astronomische Uhrmacherkunst (Chronos) passen zu dunklen Flächen, während sich die meisten SaaS-Produkte, Schriftgießereien und Handwerksläden auf warmem Papier oder hellen Hintergründen angenehmer lesen.
Wie prüfe ich die mobile Version einer Landingpage?
Öffne die Seite in einem echten Browser bei 390×844. Achte darauf, dass große Überschriften keine ungünstigen einzelnen Wörter in einer neuen Zeile hinterlassen, interaktive Bedienelemente im Hero per Touch nutzbar bleiben und Preispakete sauber untereinanderstehen, ohne horizontal abgeschnitten zu werden.
Kann ich in der Oil-UI-Galerie zwischen Desktop- und Smartphone-Viewport wechseln?
Ja. Jede Web-Arbeit in der Galerie enthält unten eine Viewport-Umschaltung, mit der du das Desktop-Layout bei 1440 px und das mobile Layout bei 390 px live untersuchen kannst.