Vom Briefing zum prüfbaren Bildschirmaufbau
Welche Inhalte gehören wohin? Erstellen Sie aus Ihren Anforderungen zunächst einen statischen SVG-Wireframe. Prüfen Sie die Struktur und verfeinern Sie anschließend das UI-Design – direkt mit Ihrem Coding-Assistenten, ohne kostenpflichtiges Szenenpaket.
Download ohne Anmeldung. Statische SVG-Dateien; Assistent und Modellnutzung werden separat abgerechnet.
Erst die Struktur, dann die Details
Klären Sie Eingaben, Hauptaktion und Ergebnisbereich, bevor Sie Farben und Typografie abstimmen.
Das Beispiel eines Produktposter-Tools zeigt denselben Aufbau als Wireframe und farbigen Entwurf. Beide SVGs lassen sich öffnen. So sehen Sie den kostenlosen Ablauf ohne zusätzliches Szenenpaket.
Nutze den Skill ai-ui-designer. Entwirf ein Produktposter-Tool mit Produktname, Verkaufsargumenten, Größenauswahl, Generieren-Schaltfläche und Ergebnisraster.
Beschreiben Sie die Aufgabe und die benötigten Bedienelemente.
ZIP herunterladen und entpacken. Legen Sie den Ordner ai-ui-designer im Skill-Verzeichnis Ihrer bestehenden Codex- oder Claude-Code-Umgebung ab.
SKILL.md muss direkt im Ordner ai-ui-designer liegen. Enthalten sind Design-Anweisungen, Referenzen und Hilfsskripte.
Achten Sie auf einen zusätzlichen Unterordner beim Entpacken.
Rufen Sie den Skill auf und beschreiben Sie Seite, Zielgruppe und gewünschte Aktion.
Codex: $ai-ui-designer Claude Code: /ai-ui-designer Entwirf einen SVG-Wireframe für meine Produktstartseite mit Nutzenversprechen, Funktionen und Registrierung.
Öffnen Sie die Datei im Browser oder SVG-Viewer. Fordern Sie konkrete Änderungen an, etwa deutlichere Überschriften oder mehr Abstand zur Hauptaktion.
Falls der Skill fehlt: Pfad und SKILL.md prüfen. Codex erkennt Änderungen automatisch; gegebenenfalls neu starten. In Claude Code das /-Menü prüfen.
Assistent und Modellzugang sind selbst bereitzustellen. Lokale Paket-Hilfsskripte benötigen Python 3.9 oder neuer. Downloads optionaler Szenenpakete auf dieser Website erfordern ein aktives Bezahlabo.
Ordnen Sie Inhalte, Formularfelder und Aktionen zunächst in einem grauen Wireframe.
Verfeinern Sie Typografie, Abstände, Farben und Bilder auf Basis des bestätigten Layouts.
Speichern Sie die SVGs im Projekt und geben Sie konkrete Änderungswünsche an den Assistenten weiter.
Der Skill umfasst Wireframes, farbige UI-Entwürfe, Themenanwendung und lokale Paketverwaltung.
Szenenpakete sind optionale Designreferenzen. Für den kostenlosen Ablauf sind sie nicht erforderlich.
Das Ergebnis sind SVG-Dateien und Designhinweise. Gezeichnete Login-, Zahlungs- oder Generieren-Schaltflächen führen keine Funktionen aus.
Die Anwendung wird separat entwickelt. Verfügbarkeit und Modellkosten richten sich nach den Bedingungen Ihres Assistenten.
Entdecken Sie Seiten, Themen und Designressourcen auf der Detailseite.
Optionales Paket mit Download per aktivem Bezahlabo. Der Skill selbst bleibt kostenlos.
Installieren Sie den kostenlosen UI-Design-Skill und machen Sie aus Anforderungen einen SVG-Entwurf, den Sie vor der Entwicklung prüfen und verbessern können.
