Wireframes
Benvenuto
Der Wireframe-Bereich ermöglicht es dir, deine UI-Layouts visuell zu entwerfen und zu prototypen. Erstelle Wireframes, um die Struktur deiner App zu planen, bevor du programmierst. Wenn du Wireframes zum ersten Mal öffnest, siehst du den Begrüßungsbildschirm mit einer Wireframe erstellen-Karte zum Starten, oder verwende die Schaltfläche + Neues Wireframe in der oberen rechten Ecke.
Funzionalita principali
Manuelles Design
Erstellen Sie Wireframes von Hand mit dem visuellen Canvas-Editor — ziehen Sie Komponenten per Drag & Drop, um Ihre Bildschirme zu gestalten.
KI-gestützte Generierung
Beschreiben Sie, was Sie möchten, und lassen Sie die KI automatisch Wireframe-Dokumentation und -Frames für Sie generieren.
Spracheingabe
Verwenden Sie die integrierte Mikrofon-Schaltfläche oder den Mittelklick, um Ihre Wireframe-Beschreibung per Sprache zu diktieren.
Wireframe zu Code
Sobald Ihr Wireframe fertig ist, senden Sie es direkt an die Codegenerierung — vom Design zum funktionierenden Code in einem nahtlosen Workflow.
Creare un wireframe
Klicke auf Wireframe erstellen oder + Neues Wireframe, um den Erstellungsdialog zu öffnen. Du gibst einen Titel ein, wählst die Zielplattform (Mobil, Desktop oder Web), schreibst eine Beschreibung deines Wireframes und wählst zwischen dem Modus Manuell oder KI-gestützt.
Campi di configurazione del progetto
Titel
Geben Sie Ihrem Wireframe-Projekt einen Namen, damit Sie es später in der Wireframe-Liste identifizieren können.
Plattform
Wählen Sie die Zielplattform — Mobil, Desktop oder Web — um das Wireframe-Layout und die Einschränkungen anzupassen.
Beschreibung
Beschreiben Sie, was Sie erstellen möchten. Dies wird vom KI-gestützten Modus verwendet, um Dokumentation und Frames zu generieren. Unterstützt Spracheingabe über die Mikrofon-Schaltfläche.
Modus
Wählen Sie Manuell, um direkt in den Canvas-Editor zu springen, oder KI-gestützt, damit die KI Dokumentation und Frames für Sie generiert.
Modalita manuale
Wenn du die Registerkarte Manuell auswählst und auf Erstellen klickst, wirst du direkt zum Wireframe-Leinwand-Editor weitergeleitet, wo du sofort mit dem Erstellen deiner Bildschirme beginnen kannst. Dies ist die beste Option, wenn du bereits eine klare Vorstellung von deinem Design hast und von Anfang an volle Kontrolle möchtest.
Quando usare la modalita manuale
Du hast ein bestimmtes Design im Kopf und möchtest es selbst erstellen.
Du möchtest schnell einen groben Entwurf skizzieren, bevor du ihn verfeinerst.
Du bevorzugst von Anfang an volle Kontrolle über jedes Element.
Modalita con IA
Wenn du die Registerkarte KI-gestützt auswählst, erscheinen zusätzliche Optionen. Du kannst deine Beschreibung eingeben oder diktieren, optional einzelne Rahmen definieren, dein bevorzugtes KI-Modell aus dem Dropdown oben auswählen und dann auf Generieren klicken, damit die KI die Wireframe-Dokumentation für dich erstellt.
So funktioniert es
Details eingeben
Füllen Sie den Titel aus, wählen Sie eine Plattform und schreiben Sie eine Beschreibung Ihres Projekts.
Frames definieren (optional)
Wechseln Sie zum Tab Frames definieren, um einzelne Bildschirme oder Ansichten anzugeben, die die KI generieren soll.
KI-Modell auswählen
Wählen Sie Ihr bevorzugtes KI-Modell aus dem Dropdown (z. B. Claude Code, Opus 4.6).
Generieren
Klicken Sie auf Generieren, um die KI-Dokumentationsgenerierung zu starten. Das Wireframe-Projekt erscheint in Ihrer Liste, während die Dokumentation erstellt wird.
Frames erstellen
Sobald die Dokumentation abgeschlossen ist, können Sie mit der Generierung jedes einzelnen Frames aus dem Wireframe-Editor beginnen.
Enhance with AI
Im KI-gestützten Modus öffnet ein Klick auf die Schaltfläche Mit KI verbessern einen Dialog, der es dir ermöglicht, deine Beschreibung mithilfe von KI zu verbessern. Dies nimmt das, was du im Beschreibungsfeld geschrieben hast, und verbessert es gemäß deinen Anweisungen — es wird detaillierter, strukturierter oder vollständiger, bevor das Wireframe generiert wird.
Opzioni di miglioramento
KI-Modell
Wählen Sie das KI-Modell, das für die Verbesserung Ihrer Beschreibung verwendet werden soll (z. B. Claude Code, Opus 4.6).
Verbesserungsanweisungen
Geben Sie optional spezifische Anweisungen an, wie die KI die Beschreibung verbessern soll. Unterstützt Spracheingabe.
Beschreibung verbessern
Klicken Sie, um die Verbesserung auszuführen. Die KI wird Ihre Beschreibung basierend auf Ihrer Eingabe und Ihren Anweisungen umschreiben und verbessern.
Generazione documentazione
Nachdem du im KI-gestützten Modus auf Generieren geklickt hast, erscheint dein Wireframe-Projekt in der Wireframe-Liste mit dem Status Dokumentation wird generiert.... Die KI erstellt eine strukturierte Dokumentation für dein Projekt basierend auf dem Titel, der Plattform, der Beschreibung und den Rahmen, die du definiert hast.
Cosa succede dopo
Dokumentationsgenerierung
Die KI erstellt ein strukturiertes Dokument, das jeden Bildschirm, jede Komponente und jedes Layout basierend auf Ihrer Beschreibung definiert.
Frame-Generierung
Sobald die Dokumentation abgeschlossen ist, können Sie das Wireframe öffnen und mit der Generierung jedes einzelnen Frames aus dem Editor beginnen.
Verfeinerung
Nach der Generierung der Frames können Sie Komponenten im Canvas-Editor manuell anpassen, hinzufügen oder entfernen, um das Design zu verfeinern.