UI-Mockups mit KI erstellen.
Ein KI-Agent macht aus einem Satz in wenigen Minuten ein klickbares UI-Mockup. Der Trick ist, die passende Detailtiefe für deine Frage zu wählen: ein Wireframe, um das Layout zu klären, ein High-Fidelity-Mockup in HTML, um den Look zu beurteilen, oder ein Mockup-Bild, um eine Stimmung auszuloten.
Aktualisiert am 6. November 2026 · 7 Min. Lesezeit
Drei Arten von KI-Mockups
| Art | Erstellt als | Ideal für | Grenzen |
|---|---|---|---|
| Wireframe | Graues HTML | Einigung auf Layout und Inhalt | Sagt nichts über den visuellen Stil |
| High-Fidelity-Mockup | Gestaltetes HTML und CSS | Den echten Look beurteilen, in echter Größe testen | Überarbeiten dauert länger als beim Wireframe |
| Mockup-Bild | Generiertes Bild | Eine Stimmung ausloten, bevor es ein Layout gibt | Nicht klickbar, nicht skalierbar, nicht bearbeitbar |
HTML-Mockups sind meist die bessere Standardwahl, wenn du mit einem Coding-Agenten arbeitest: Sie öffnen sich in jedem Browser, reagieren auf echte Bildschirmgrößen und sind schon halb Produktionscode. Bilder sind früher nützlich, wenn du noch entscheidest, wie sich das Produkt anfühlen soll.
Schritt 1: Den Screen beschreiben
Beginne damit, wofür der Screen da ist, wer ihn nutzt und was darauf stehen muss. Konkrete Inhalte ergeben ein konkretes Layout.
Wir brauchen das Haupt-Dashboard für [eine Kaffeerösterei, die Abos verkauft]. Nutzer ist [der Chefröster, der es jeden Morgen prüft]. Es muss zeigen: [aktive Abos, diese Woche versandte Packungen, Abwanderung, Umsatz im Vergleich zum Ziel, wöchentliche Lieferungen über 8 Wochen und die für diese Woche geplanten Röstungen mit ihrem Status]. Desktop, 1440×900.
Schritt 2: Das Layout mit einem Wireframe klären
Ein Wireframe beantwortet eine einzige Frage: Bringt das Layout die Inhalte in die richtige Reihenfolge? Halte es grau, damit noch niemand über Farben diskutiert.
Erstelle ein Low-Fidelity-Wireframe dieses Dashboards als eine eigenständige HTML-Datei in 1440×900: graue Boxen mit gestrichelten Rahmen, in jeder Box ein Label, was dort hinkommt, keine Farben, kein echtes Styling. Stell die wichtigsten Informationen an den Anfang.
Verschieb die Boxen, bis die Hierarchie stimmt. Änderungen kosten in dieser Phase fast nichts.
Schritt 3: Daraus ein High-Fidelity-Mockup machen
Sobald das Layout steht, behältst du es und ergänzt das visuelle Design. Gib dem Agenten eine Richtung, echte Zahlen und, falls vorhanden, deine Markenregeln.
Mach aus dem abgenommenen Wireframe ein High-Fidelity-Mockup in einer neuen HTML-Datei. Behalte das Layout exakt bei. Stil: [warm und ruhig, cremefarbener Hintergrund, dunkelbraune Seitenleiste, ein Rostrot als Akzent für die Hauptaktion und die aktuelle Woche]. Verwende realistische Daten: Namen, Zahlen, Daten und Status. Zeichne das Diagramm mit HTML und CSS.
Wenn du ein Designsystem hast, hält eine DESIGN.md-Datei jedes Mockup auf Markenlinie, ohne dass du die Regeln in jedem Prompt wiederholen musst.
Schritt 4: Eine Stimmung mit Bildern ausloten (optional)
Bevor du dich auf einen Stil festlegst, sind Mockup-Bilder ein schneller Weg, mehrere auszuprobieren. Schreib in Codex $imagegen in den Prompt, um den Skill für die Bildgenerierung aufzurufen.
$imagegen Erstelle drei Mockup-Bilder dieses Dashboards in unterschiedlichen Stilen: warm und editorial, dunkel und technisch sowie hell und freundlich. Desktop-Screen, realistische UI-Texte und Zahlen, kein Geräterahmen.
Wähle eine Richtung und häng dann das Bild, das dir gefällt, an den High-Fidelity-Prompt aus Schritt 3. Behandle Bilder als Referenz: Kleine Texte und exakte Abstände musst du trotzdem prüfen.
Schritt 5: Varianten erstellen und vergleichen
Bitte um zwei oder drei Versionen desselben Screens, die sich bewusst unterscheiden, und sieh sie dir nebeneinander an. Auf einem Codex Design-Canvas erscheint jede Version als Live-HTML neben den anderen und neben deinem Wireframe, sodass du auf einen Blick siehst, was sich geändert hat.
Erstelle zwei weitere Versionen des Mockups mit demselben Inhalt: eine dichtere für Power-User und eine mit größeren Zahlen und weniger Details für den schnellen Blick am Morgen. Jede in einer eigenen Datei.
Schritt 6: Übergeben
- An Stakeholder: Teile die HTML-Datei oder einen Screenshot. HTML-Dateien öffnen sich in jedem Browser und zeigen das echte Layout in echter Größe.
- An die Entwicklung: Bitte den Agenten, das abgenommene Mockup in deiner App nachzubauen, mit deinem Framework und deinen Komponenten. Das Mockup wird zur Spezifikation, wie in UI-Design mit Codex beschrieben.
Tipps
- Ein Screen pro Datei. Kleine Dateien sind schnell überarbeitet und leicht zu vergleichen.
- Erst das Layout, dann der Stil. Ein Wireframe änderst du in Sekunden; drei Mockups neu zu gestalten dauert länger.
- Echte Größen und echte Daten. 1440×900 für Desktop, 390×844 fürs Smartphone und glaubwürdige Zahlen.
- Achte auf generische Muster. Was du vermeiden solltest, steht in Der KI-Look im UI-Design.
Häufige Fragen
Kann eine KI aus einer Textbeschreibung ein Wireframe erstellen?
Ja. Beschreib den Screen und seine Inhalte und bitte um ein Low-Fidelity-Wireframe in HTML, wie in Schritt 2. Codex liefert eine Datei, die du öffnen, bearbeiten und zu einem High-Fidelity-Mockup ausbauen kannst.
Sollte ich Mockups als Bilder oder als HTML erstellen?
Nutze Bilder, um schnell eine Stimmung auszuloten, und HTML für alles, was du in echter Größe beurteilen oder bauen willst. HTML-Mockups lassen sich anklicken, skalieren und bearbeiten und wandern direkt in den Code.
Brauche ich noch Figma?
Nicht, um Richtungen zu erkunden und zu testen. Teams, die ihr Designsystem in Figma pflegen, nutzen es oft weiterhin für gemeinsame Bibliotheken und die Übergabe.