Miro Prototypes

Verfügbar für: Alle Mitglieder mit Miro Prototypes Add-on
Preispläne: Starter, Business, Enterprise
Plattformen: Browser, Desktop

Miro Prototypes ermöglicht es dir, Benutzeroberflächen direkt auf dem Miro Canvas zu erstellen.

Dieser Artikel erklärt, wie man die Miro Prototyping Funktionen verwendet. Für allgemeine Informationen zu Miro Prototypes siehe Übersicht über Miro Prototypes. 

Du kannst Prototypes dazu auffordern, einzelne und mehrseitige Flows zu erstellen, deine Designs zu verfeinern und Stile anzuwenden sowie eine interaktive Simulation deines Prototyps zu betrachten.

✏️ Die Prototyping-Erfahrung ist zu den KI-Kollegen gewechselt. Jetzt in der öffentlichen Betaversion haben einige Nutzer bereits die aktualisierte Eingabe für von KI generierte Prototypen. Wenn du feststellst, dass deine Erfahrung nicht mit der Dokumentation übereinstimmt, siehe Prototyp mit KI-Kollegen erstellen (Beta). Inhalte, die erklären, wie du dein Ergebnis verfeinern und iterieren kannst, sind weiterhin anwendbar.

Baue dein Design in mehreren, spezifischen Prompts auf, die jedes Element deines Prototyps erstellen. Du kannst auch deine Prompts verfeinern, um einen Neustart zu vermeiden.

Mehr Informationen: Siehe häufige Fragen.

Prototyp mit Miro AI erstellen

In diesem Abschnitt wird beschrieben, wie du mit Miro AI mit dem Prototyping beginnen kannst. Um zu erfahren, wie du manuell starten kannst, siehe Prototyp-Bibliothek.

Neu anfangen

1. Klicke auf einem Miro-Canvas, oberhalb der Erstellungsleiste, auf Sidekicks.
   Das Sidekick-Feld öffnet sich.
2. Klicke auf KI-Kollege-Bibliothek.
   Prototyp in der KI-Kollege-Bibliothek aufrufen 
3. Klicke auf Formate > Prototyp.
4. Gib an, ob du mit einem Text-Prompt oder einem Screenshot beginnen möchtest.
5. Gib den Gerätetyp an.
6. Gib an, ob du einen Ein-Bildschirm- oder einen Multi-Bildschirm-Prototyp erstellen möchtest.
7. Folge den Anweisungen auf dem Bildschirm, um deinen Prompt zu schreiben oder einen Screenshot hochzuladen. Im Antwortfeld kannst du optional die Vorschlags-Tags verwenden, um deinen Prompt zu beginnen.
8. Beende deinen Prompt und klicke dann auf den Senden-Pfeil oder drücke ENTER auf deiner Tastatur.
   Miro AI erstellt einen Entwurf deines Prototyps auf dem Canvas.
9. (Optional) Um die Erstellung zu stoppen, klicke auf deinem Prototyp auf Stopp.
10. (Optional) Um an deinem Prototyp weiterzuarbeiten, fahre fort, im Feld Prototype zu prompten.
    Jede Iteration erstellt eine Version deines Entwurfsprototyps.
11. Wähle auf deinem Entwurf eines Prototyps eine der folgenden Optionen:
    • Auf Canvas anwenden
      Dein Prototyp ist jetzt auf dem Canvas bearbeitbar.
    • Alle verwerfen
      Dein Entwurf wird vom Canvas entfernt. Du kannst deinen Prompt verfeinern und die Schritte 7–9 wiederholen.

Erstelle einen Prototypen mit KI-Kollege (Betaversion)

Einige Nutzer haben möglicherweise bereits die aktualisierte Eingabemethode KI-Kollege für Prototypen. Dieser Abschnitt beschreibt, wie du mit KI-Kollege mit der Erstellung von Prototypen beginnst. Um zu erfahren, wie du manuell starten kannst, siehe Prototyping-Bibliothek.

✏️ Die KI-Kollege-Aktualisierung für Prototypen befindet sich derzeit in der öffentlichen Betaversion. Falls Ihre Erfahrung nicht mit der Dokumentation in diesem Abschnitt übereinstimmt, lesen Sie Einen Prototyp mit Miro AI erstellen.

Gehe dazu wie folgt vor:

1. Klicke auf einem Miro-Canvas über der Erstellung-Leiste auf KI-Kollege.
   Das seitliche Feld von KI-Kollege öffnet sich.

2. Klicke im Eingabefeld auf Prototyp erstellen.
   KI-Kollege ist bereit, dir beim Erstellen deines Prototyps zu helfen.
   Beginne deinen Prototyp im KI-Kollege-Feld.

   💡 Alternativ kannst du das KI-Kollege-Feld öffnen und direkt mit der Eingabe beginnen. Gib unbedingt explizit an, dass du einen Prototyp erstellen möchtest, z. B. "Erstelle einen Prototyp für einen Checkout-Flow."

   💡 Du kannst auch das Prototyp-Format über Tools, Medien und Integrationen (+) in der Erstellungsleiste öffnen.

3. Schreibe deinen Prompt, um den Prototyp zu beschreiben, den der KI-Kollege erstellen soll. 
4. Klicke auf den Aufwärtspfeil oder drücke ENTER auf deiner Tastatur.
5. (Optional) Um die Generierung zu stoppen, klicke auf deinem Prototypen auf Stopp.
6. (Optional) Um an deinem Prototypen zu iterieren, gib weitere Prompts im Prototype-Feld ein.
   Jede Iteration erstellt eine Version deines Entwurfsprototyps.
7. Wähle auf deinem Entwurfsprototypen eine der folgenden Optionen aus:
   • Auf die Canvas anwenden
     Dein Prototyp ist jetzt auf der Canvas bearbeitbar.
   • Alles verwerfen
     Dein Entwurf wird von der Canvas entfernt. Du kannst deinen Prompt verfeinern und die Schritte 3–6 wiederholen.

💡 Beginne klein und präzise. Weniger auf einmal generierte Screens führen zu genaueren Ergebnissen in kürzerer Zeit. Gib ausdrücklich die Schlüsselelemente an, die du für jeden Screen wünschst, wie Schaltflächen, Abschnitte oder Aktionen.

💡 Wende mehrere Entwurfsprototypen auf die Canvas an. Du kannst Designentscheidungen vergleichen und die beste Option weiter verfeinern.

💡 Ein Prototyp kann je nach Komplexität des Prompts und Umfang der Inhalte 1–3 Minuten zur Erstellung benötigen. Wenn die Erstellung deines Prototyps länger dauert, vereinfache das Prompt oder reduziere die Anzahl der Bildschirme.

Canvas als Prompt verwenden

Wähle Inhalte auf dem Canvas aus, die in deinem Prompt verwendet werden sollen. Zum Beispiel hast du ein Design-Briefing in einem Doc oder auf Notizen. Prototypen können den Inhalt als Kontext nutzen, um deinen Prototypen zu erstellen. 

Befolge diese Schritte:

1. Wähle Inhalte auf dem Canvas aus, zum Beispiel ein Dokument oder Notizen. Du kannst optional mehrere Objekte auswählen.
2. Klicke auf einem Miro-Canvas oberhalb der Erstellungsleiste auf Sidekicks.
   Das Sidekick-Feld öffnet sich.
   HINWEIS: Wenn du die aktualisierte Version hast...
3. Klicke auf KI-Kollege-Bibliothek
   Greife auf Prototyp in der KI-Kollege-Bibliothek zu 
4. Klicke auf Formate > Prototyp.
5. Wähle Ein Text-Prompt.
6. Gib den Gerätetyp an, dann wähle Ein- oder Mehrbildschirm.
   Das Antwortfeld zeigt die Anzahl der in Schritt 1 ausgewählten Objekte an.
7. Befolge die Anweisungen auf dem Bildschirm, um dein Prototype zu erstellen.
   Miro erstellt dein Prototype basierend auf deinen Spezifikationen und dem ausgewählten Canvas-Inhalt.

💡 Du kannst Miro AI dazu auffordern, bestimmte Canvas-Objekte zu nutzen, indem du sie auf dem Canvas auswählst. Zum Beispiel kannst du in deinem Prompt sagen: "Nutze Screenshots auf dem Canvas als Vorlage für den Aufbau des Prototypes." Wenn du viele ähnliche Objekte auf dem Canvas hast, beschreibe genau, welche Objekte Miro AI verwenden soll.

Dein Prototype iterieren

Dein erster Entwurf ist möglicherweise noch nicht das perfekte Ergebnis. Bevor du deinen Entwurf auf das Canvas überträgst, kannst du weiter iterieren und mehrere Versionen deines Prototypes erstellen.

1. Erstelle ein Prototyp mit Miro AI. Nicht auf dem Canvas anwenden.
   Der nächste Schritt im Prototyp-Panel ist Was möchten Sie als Nächstes tun?
2. Wähle Prototyp bearbeiten. 
3. Für ein Multi-Screen-Flow, wähle den Bildschirm, den Du iterieren möchtest.
4. Beschreibe im Antwortfeld die gewünschten Änderungen.
5. Klicke auf den Pfeil nach oben oder drücke Enter auf deiner Tastatur.
   Miro erstellt eine neue Version deines Prototyps.

✏️ Änderungen können nur an einem Bildschirm gleichzeitig vorgenommen werden.

💡 Verwende den Kontext des Canvas. Wähle Dokumente, Diagramme, Notizen oder andere Board-Inhalte, um Miro AI zu verwenden.

Mit einem Screenshot als visuellen Kontext iterieren

Bevor du deinen Prototyp auf das Canvas anwendest, kannst du einen Screenshot oder einen bereits auf dem Canvas befindlichen Prototyp als Kontext verwenden, um deinen Entwurf zu iterieren.

1. Erstelle einen Prototyp mit Miro AI. Nicht auf dem Canvas anwenden.
   Der nächste Schritt im Prototyp-Panel lautet Was möchtest du als Nächstes tun?
2. Klicke auf Prototyp bearbeiten.
3. Für einen Multiscreen-Flow wähle den Bildschirm aus, den du iterieren möchtest.
4. Wähle einen Screenshot auf dem Board aus.
5. Beschreibe im Antwortfeld die Änderungen, die du basierend auf dem ausgewählten Screenshot vornehmen möchtest.
6. Klicke auf den Pfeil nach oben oder drücke Enter auf deiner Tastatur.
   Miro erstellt eine neue Version deines Prototyps. 

💡 Du kannst bereits vorhandene Prototyp-Bildschirme auf dem Board als visuellen Kontext verwenden. Erstelle und wende ein Prototype auf das Board an. Wähle einen Bildschirm aus.

Prototype-Stile aus einem Screenshot anwenden

Wenn dein Prototype zu einer bestehenden Website oder einem Produkt passen soll, kannst du Stile aus einem Screenshot extrahieren und auf deine Bildschirme anwenden.

1. Prototyp erstellen.
2. Wähle deinen Prototyp-Bildschirm/deine Prototyp-Bildschirme aus.
   Das Kontextmenü erscheint.
3. Klicke auf das Miro AI Symbol im Kontextmenü.
4. Wähle Stil aus Bild importieren.
   Stile importieren und auf deinen Prototyp anwenden
5. Wähle die Bilddatei aus, von der du den Stil importieren möchtest.
6. Die Stile werden auf deinen Prototyp angewendet.

💡 Wende Stile zuerst oder zuletzt an. Um sicherzustellen, dass alle Elemente in deinem Prototyp einem Thema entsprechen, wende dein Thema frühzeitig im Prototypdesign an oder als abschließenden Schritt.

Screenshots in bearbeitbare Prototypen umwandeln

Du kannst einen Screenshot eines Designs oder einer Benutzeroberfläche eines Mitbewerbers in einen bearbeitbaren Prototyp umwandeln.

1. Füge den Screenshot zu deinem Miro Board hinzu.
2. Klicke auf das Bild, um das Kontextmenü zu öffnen.
3. Wähle das Miro AI Symbol > Bild in Prototyp umwandeln.
4. Wähle den Gerätetyp (Mobil, Tablet, Desktop).
5. Die KI wird es als bearbeitbaren Prototyp wiederherstellen—Text, Schaltflächen, Layout und andere Elemente.
6. Du kannst diese Version nun nach Bedarf ändern, ergänzen oder bearbeiten.

💡 Konvertiere einen Screenshot in ein bearbeitbares Mock-up. Fordere dann Miro AI auf, mit der Bearbeitung fortzufahren. Du kannst einen Screenshot auch als Kontext in deinem Prompt verwenden und ein Prototyp erstellen. Um mehrere Screenshots zu verwenden, wähle alle Screenshots aus und kopiere sie als Bild. Verwende dann das Bild als Kontext in deinem Prompt.

Wähle eine Prototyp-Version aus

Jede Verfeinerung erstellt eine Prototyp-Version. Während du deinen Prototyp verfeinerst, befindet sich der Versionswähler über dem Prototyp-Entwurf. 

Klicke auf die Pfeile, um zwischen den Versionen zu wechseln. Wenn du eine Version ausgewählt hast, klicke auf Zum Canvas hinzufügen. Deine Version wird auf das Canvas angewendet.

Wähle aus, welche Verfeinerung oder Version deines Prototyps du zum Canvas hinzufügen möchtest.

💡 Bevor du auf Zum Canvas hinzufügen klickst, kannst du einen Bildschirm aus jeder Version auswählen und in das Canvas kopieren und einfügen. Dies stellt sicher, dass du einen Bildschirm aus einer Version speichern kannst, die du möglicherweise verwirfst. 

⚠️ Wenn du auf Zum Canvas hinzufügen klickst, können alle anderen Versionen nicht wiederhergestellt werden.

Prototypvorschau

1. Wähle einen Prototyp-Bildschirm aus.
   Das Kontextmenü erscheint.
2. Klicke im Kontextmenü auf Vorschau.
   Die Vorschau wird geladen.

💡 Verwende Verbindungslinien zwischen den Bildschirmen, um eine vollständig interaktive Prototyp-Vorschau zu erhalten.

Verbindungslinien hinzufügen, um einen Prototyp interaktiv zu machen

Um Verbindungen zwischen Objekten in deinem Miro-Prototyp hinzuzufügen oder zu ändern:

1. Klicke auf ein Element (wie eine Schaltfläche) in deinem Prototyp.
2. Ziehe das Verbindungslinien-Symbol zu dem Bildschirm, mit dem es verbunden werden soll.
3. Im Vorschau-Modus führt ein Klick auf das Element die Nutzer zum verlinkten Bildschirm.

Verbindungslinien ausblenden

Für Prototypen mit vielen Verbindungslinien kannst du diese ausblenden, um die Ansicht deines Prototyps zu vereinfachen.

Im Canvas-Modus wähle deinen Prototyp aus. Klicke im Kontextmenü auf die drei Punkte. Wähle dann Verbindungen ausblenden.

Im Fokusmodus, klicke oben links auf den Schaltfläche Verbindungen ausblenden | anzeigen.

Verbindungen im Fokusmodus ausblenden oder anzeigen.

Wiederhole die gleichen Schritte, um die Verbindungslinien wieder anzuzeigen.

💡 Verwende Kurzbefehle, um Verbindungslinien ein- oder auszublenden. Drücke auf deiner Tastatur Shift + E. Im Canvas-Modus stelle sicher, dass du deinen Prototyp auswählst, um die Kurzbefehle zu verwenden.

Fokusmodus

Miro Prototypes umfassen den Fokusmodus. Gehe in den Fokusmodus, um an deinem Prototyp ohne Ablenkung durch andere Inhalte auf dem Board zu arbeiten.

Um in den Fokusmodus zu gelangen, wähle dein Miro Prototype aus. Klicke im Kontextmenü auf Fokusmodus.

Der Fokusmodus ermöglicht eine ablenkungsfreie Miro-Prototyping-Erfahrung.

Exportiere deinen Prototypen

Du kannst deinen Prototypen als SVG exportieren. Du kannst auch den Miro Model Context Protocol (MCP) Server verwenden, um zu einem Codebase-KI-Editor zu exportieren; Teams können den Export nutzen, um funktionierenden Code zu erstellen und die Entwicklung zu beschleunigen.

Als SVG exportieren

1. Klicke in der Board-Leiste auf die vertikalen drei Punkte.
2. Klicke auf Board > Exportieren > Als Bild exportieren.
   Ein Auswahlfenster und das Bild als exportieren-Dialogfeld öffnen sich.
3. Passe das Auswahlfenster so an, dass es dein Prototype abdeckt.
4. Wähle im Bild als exportieren-Dialogfeld die Option Vektor – SVG aus.
5. Klicke auf Exportieren. 

💡 Du kannst einen einzelnen Bildschirm als SVG aus dem Kontextmenü exportieren. Wähle einen Bildschirm in deinem Prototyp aus. Klicke im Kontextmenü auf die drei vertikalen Punkte und dann auf Als Bild exportieren. Das Als Bild exportieren-Dialogfeld öffnet sich, dann wähle Vektor – SVG.

✏️ Bei SVG-Exporten von Prototypen mit Bildern, werden die Bilder durch Platzhalter ersetzt, wenn du das SVG in andere Software wie Figma zum Bearbeiten importierst.

Exportieren mit Miro MCP Server

Um deinen Prototyp in einen KI-Code-Editor wie z.B. Cursor zu exportieren, füge die Board-URL mit der Board-ID in deinen Prompt ein. Stelle sicher, dass du Anweisungen gibst, um basierend auf dem Prototypen Code zu generieren.

Mehr über die Nutzung von Miro MCP erfährst du in der Miro MCP Server Übersicht.

Ein Codebasis-KI-Bearbeiter wie Cursor akzeptiert eine Miro-Board-URL mit Board-ID, um Code basierend auf deinem Prototyp zu erstellen.

FAQ