AI UI Designer Logo
AI UI Designer

Oberflächen für KI-Bilddienste · SVG-Designpaket

UI-Vorlagen für KI-Bildgeneratoren: erst den Ablauf planen

Diese UI-Vorlagen richten sich an Entwickler und Produktteams, die einen KI-Bilddienst aufbauen. Prüfen Sie Prompt-Eingabe, Bildverlauf und Tarifauswahl gemeinsam, bevor Sie die Oberfläche umsetzen. Die SVG-Entwürfe lassen sich mit dem kostenlosen AI UI Designer Skill in Codex oder Claude Code an Ihre Anforderungen anpassen.

Im aktiven kostenpflichtigen Abo enthalten. Es werden keine Credits abgezogen.

Alle Seitenentwürfe ansehen

Statische SVG-Entwürfe · Chinesische Beispieltexte · Kein Anwendungscode

Heller Entwurf der Generierungsansicht mit Prompt-Eingabe, Parametern und Bildkarten
Enthaltener Entwurf der Generierungsansicht · Helles Thema
Desktop-Seiten
6
Farbthemen
2
Mobile Referenzen
2
Editierbare Quellen
SVG

Was passiert vor und nach der Bildgenerierung?

Prüfen Sie den Weg von der Startseite zur Generierung und weiter zu gespeicherten Bildern, Tarifen und Kontoeinstellungen. Jede Desktop-Seite liegt als Graustufen-Wireframe sowie als heller und dunkler Entwurf vor.

Heller Startseitenentwurf mit Produkteinstieg, Bildergalerie und Nutzungsschritten

Startseite

Produktnutzen, Beispielbilder und Einstieg in die Generierung gemeinsam anordnen.

Entwurf der Anmeldeansicht mit Formularfeldern und Registrierungshinweis

Anmeldung und Registrierung

Anmeldefelder prüfen und Registrierung sowie Fehlerhinweise auf der Zustandstafel abgleichen.

SVG-Entwurf mit Prompt-Bereich, Generierungsparametern und Ergebniskarten

Generierungsansicht

Prompt, Modell, Seitenverhältnis, Bildanzahl, Credit-Kosten und Ergebnisse aufeinander abstimmen.

Verlaufsentwurf mit Suchfeld, Bildkarten und Detailansicht eines Bildes

Bildverlauf

Suche, Bilddetails, Parameterübernahme und Löschbestätigung im Ablauf prüfen.

Heller Tarifentwurf mit Credit-Guthaben und drei fiktiven Tarifstufen

Tarife und Credits

Guthaben, fiktive Beispieltarife und Ansichten zum Kaufergebnis betrachten.

Kontoeinstellungen als Entwurf mit Profilformular und Speicherbestätigung

Kontoeinstellungen

Profilfelder, Rückmeldung nach dem Speichern und Abmeldung anordnen.

Die Vorschauen zeigen chinesische Beispieltexte und fiktive Produktdaten. Formulare, Schaltflächen und Kaufansichten sind statisch.

Nicht nur Seiten, sondern auch Zustände durchdenken

Das ZIP bündelt editierbare Seiten, Komponenten und Szenariohinweise. So können Sie Änderungen an einer Ansicht mit den übrigen Entwürfen abgleichen.

SVG-Quelldateien bearbeiten

Ändern Sie Texte, Formen und Anordnung. Arbeiten Sie an einer Kopie, damit das Originalpaket als Referenz erhalten bleibt.

Struktur und Farbthema getrennt prüfen

2 Themen-JSON-Dateien ergänzen die Entwürfe. Prüfen Sie zunächst die Informationshierarchie im Wireframe und wählen Sie dann ein helles oder dunkles Design.

Leer-, Lade- und Fehlerzustände

Referenzen für Buttons, Eingaben, Auswahlfelder, Karten und Dialoge sowie Zustände für laufende Generierung, leeren Verlauf, fehlende Credits, Anmeldefehler und fehlgeschlagene Zahlungen.

Mobile Referenzen mit klarem Umfang

Generierungsansicht und Verlauf sind mit 390px Breite gezeichnet. Für die übrigen Seiten beschreibt das Szenario das mobile Verhalten; separate mobile Zeichnungen sind nicht enthalten.

ZIP importieren und an Ihr Produkt anpassen

Die Importhilfen des kostenlosen Skills benötigen Python 3.9 oder neuer.

  1. 1

    Mit aktivem Abo herunterladen

    Melden Sie sich mit einem aktiven kostenpflichtigen AI UI Designer Abo an. Der Paketdownload verbraucht keine Generierungs-Credits.

  2. 2

    Den lokalen ZIP-Pfad angeben

    Installieren Sie AI UI Designer Skill in Codex oder Claude Code und bitten Sie den Assistenten, das Paket über den Dateipfad zu importieren.

  3. 3

    Änderungen beschreiben und prüfen

    Geben Sie Thema, Felder und Layoutwünsche an. Kontrollieren Sie das SVG und überarbeiten Sie die Arbeitskopie, während die Originale erhalten bleiben.

Beispiel: eine Arbeitsfläche für Produktbilder

Verwende das helle Thema des Bildgenerierungs-Pakets. Gestalte die Arbeitsfläche für Produktbilder mit Eingaben für Produktname und Bildbeschreibung sowie einer Auswahl des Seitenverhältnisses. Behalte den Hinweis zum Credit-Verbrauch und die Ergebniskarten bei. Gib den Entwurf als editierbares SVG aus.

Kostenlos entwerfen oder mit vorhandenen Seiten starten?

Eigene Anforderungen, Paketimport und Themenanwendung unterstützt der kostenlose Skill. Für den Download dieses zusätzlichen Seitensets von der Website ist ein aktives kostenpflichtiges Abo nötig.

Aus eigenen Anforderungen entwerfen
Kostenloser Skill · Kostenlos
Pakete importieren und Themen anwenden
Kostenloser Skill · Kostenlos
Dieses Seitenset herunterladen
Szenenpaket · Aktives kostenpflichtiges Abo
Heruntergeladene Dateien lokal nutzen
Szenenpaket · Auch nach Aboende
FAQ

Dateien, Umsetzung und Downloadrechte

Prüfen Sie, welche Gestaltungshilfen enthalten sind und was Sie selbst entwickeln müssen.

Die passenden Seiten prüfen, dann Ihren Entwurf ausarbeiten

Sehen Sie sich die UI-Vorlagen für Generierung, Verlauf und Tarife an. Passt der Ablauf zu Ihrem Produkt, laden Sie das SVG-Paket mit aktivem kostenpflichtigem Abo herunter und passen Sie es mit dem kostenlosen Skill an.

SVG-Designpaket herunterladen

Im aktiven kostenpflichtigen Abo enthalten. Es werden keine Credits abgezogen.