Miro Prototypes

Wer kann es nutzen: Alle Mitglieder mit Miro Prototypes Add-on
Welche Preispläne: Starter, Business, Enterprise
Welche Plattformen: Browser, Desktop

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

Du kannst Einzelseiten- und Mehrseiten-Flows generieren, deine Designs verfeinern und Stile anwenden sowie eine interaktive Simulation deines Prototyps als Vorschau abrufen. Erstelle dein Design in mehreren, spezifischen Prompts, die jedes Element deines Prototyps generieren. Du kannst deine Prompts auch verfeinern, um einen Neustart zu vermeiden.

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

HINWEIS: Die Prototyping-Erfahrung wurde auf KI-Kollege verlagert. Jetzt in der öffentlichen Betaversion, haben einige Nutzer bereits das aktualisierte, KI-Kollege-Eingabefeld für KI-generierte Prototypen. Wenn du merkst, dass deine Erfahrung nicht mit der Dokumentation übereinstimmt, siehe Erstelle einen Prototyp mit KI-Kollege (Beta). Inhalte, die erklären, wie du dein Ergebnis verfeinern und iterieren kannst, sind weiterhin anwendbar.

Weitere Informationen: Siehe häufige Fragen.

Einen Prototyp mit Miro AI erstellen

In diesem Abschnitt wird beschrieben, wie du mit dem Prototyping mit Miro AI anfängst. Um zu erfahren, wie du manuell starten kannst, sieh dir die Prototyping-Bibliothek an.

Neu anfangen

1. In einem Miro-Canvas, klicke 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. Wähle einen Einzelscreen oder einen Mehrbildschirm-Prototyp.
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 Send-Pfeil oder drücke ENTER auf deiner Tastatur.
   MIro KI erstellt einen Entwurf des Prototyps auf dem Canvas.
9. (Optional) Um die Generierung zu stoppen, klicke auf deinem Prototyp auf Stop.
10. (Optional) Um deinen Prototyp zu iterieren, setze die Eingaben im Prototype-Feld fort.
    Jede Iteration erstellt eine Version deines Entwurfsprototyps.
11. Wähle auf deinem Entwurfsprototyp eine der folgenden Optionen:
    • Auf Canvas anwenden
      Dein Prototyp ist jetzt im Canvas bearbeitbar.
    • Alles verwerfen
      Dein Entwurf wird vom Canvas entfernt. Du kannst deinen Prompt verfeinern und die Schritte 7–9 wiederholen.

Prototypen mit KI-Kollegen erstellen (Betaversion)

Einige Nutzer haben bereits die aktualisierte Eingabe mit KI-Kollegen für die Prototypenerstellung. Dieser Abschnitt beschreibt, wie man mit KI-Kollegen mit der Prototypenerstellung beginnt. Um zu erfahren, wie man manuell beginnt, siehe Bibliothek für Prototypen.

TIPP: Erstelle dein Prototype mit dem KI-Kollege, um den KI-Verlauf zu ermöglichen, der sich an deine Prompts erinnert. Dadurch kannst du Optionen, die du bereits erkundet hast, überprüfen und auf jedem Board fortfahren. Weitere Informationen findest du unter Wie KI-Kollege die KI-Kreation in Miro weiterentwickelt und Übersicht über Miro Prototypes.

HINWEIS: Die Aktualisierung des KI-Kollegen für Prototypen befindet sich derzeit in der öffentlichen Betaversion. Wenn deine Erfahrung nicht mit der Dokumentation in diesem Abschnitt übereinstimmt, siehe Erstelle einen Prototypen mit Miro AI.

Befolge diese Schritte:

1. Klicke auf einem Miro-Canvas über der Erstellungsleiste auf KI-Kollege.
   Das KI-Kollege-Panel öffnet sich.

2. Im Eingabefeld klicke auf Prototyp erstellen.
   KI-Kollege ist bereit, dir bei der Erstellung deines Prototyps zu helfen.
   Starte deinen Prototypen im KI-Kollege Feld.

   TIPP: Alternativ kannst du das KI-Kollege Feld öffnen und sofort mit der Eingabe beginnen. Stelle sicher, dass du ausdrücklich angibst, dass du einen Prototypen erstellen möchtest, z. B. "Erstelle einen Prototyp für einen Checkout-Flow."

   TIPP: Du kannst auch auf das Prototyp-Format über Werkzeuge, Medien, und Integrationen (+) in der Erstellungsleiste zugreifen.

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

TIPP: Beginne klein und sei spezifisch. Weniger auf einmal generierte Bildschirme liefern genauere Ergebnisse in kürzerer Zeit. Gib die Schlüsselelemente, die du für jeden Bildschirm möchtest, wie Schaltflächen, Abschnitte oder Aktionen, explizit an.

TIPP: Wende mehrere Entwürfe von Prototypen auf der Canvas an. So kannst du Designentscheidungen vergleichen und die beste Option weiter verfeinern.

TIPP: Ein Prototyp kann je nach Komplexität des Prompts und Größe des Inhalts 1-3 Minuten zur Erstellung benötigen. Wenn dein Prototyp länger benötigt, vereinfache dein Prompt oder reduziere die Anzahl der Bildschirme.

TIPP: Du kannst eine URL in dein Prompt einfügen und den KI-Kollegen anweisen, die Stile der verlinkten Seite zu übernehmen.

Canvas als Prompt verwenden

Wähle Inhalte auf dem Canvas aus, die du in deinem Prompt verwenden möchtest. Zum Beispiel, wenn du ein Design-Briefing in einem Dokument oder auf Notizen hast. Prototypen können den Inhalt als Kontext verwenden, um deinen Prototyp zu erstellen. 

Gehe dazu wie folgt vor:

Klicke auf KI-Kollegen-Bibliothek
Greife auf Prototypen in der KI-Kollegen-Bibliothek zu 

TIPP: Du kannst Miro AI dazu auffordern, spezifische Canvas-Objekte zu verwenden, indem du sie auf dem Canvas auswählst. Zum Beispiel kannst du in deinem Prompt sagen "Benutze Screenshots auf dem Canvas als Orientierungshilfe für den Bau des Prototypes." Wenn du viele ähnliche Objekte auf dem Canvas hast, beschreibe explizit, welche Objekte Miro AI verwenden soll.

Dein Prototype iterieren

Dein erster Entwurf ist möglicherweise noch nicht perfekt. Bevor du deinen Entwurf auf das Canvas anwendest, 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öchtest du als Nächstes tun?
2. Wähle Prototyp bearbeiten. 
3. Für einen 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 Eingabe auf deiner Tastatur.
   Miro erstellt eine neue Version deines Prototyps.

HINWEIS: Änderungen können nur bildschirmweise vorgenommen werden.

TIPP: Nutze den Kontext der Canvas. Wähle Dokumente, Diagramme, Notizen oder andere Boardinhalte aus, um Miro AI zu prompten.

Iteriere mit einem Screenshot als visuellem Kontext

Bevor du dein Prototyp auf die Canvas anwendest, kannst du einen Screenshot oder einen anderen bereits auf der Canvas befindlichen Prototyp als Kontext nutzen, um deinen Entwurf zu iterieren.

1. Erstelle einen Prototypen 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. Klicke auf Prototyp bearbeiten.
3. Wähle bei einem Multi-Screen-Flow den Bildschirm aus, den du bearbeiten möchtest.
4. Wähle einen Screenshot auf dem Board aus.
5. Beschreibe im Antwortfeld die gewünschten Änderungen basierend auf dem ausgewählten Screenshot.
6. Klicke auf den Pfeil nach oben oder drücke Enter auf deiner Tastatur.
   Miro erstellt eine neue Version deines Prototyps. 

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

Mit KI bearbeiten

Für jeden Prototyp, der bereits auf dem Canvas angewendet wurde, kannst du weiterhin mit 'Mit KI bearbeiten' iterieren. Verwende 'Mit KI bearbeiten', um zu verfeinern anstatt neu zu erstellen, wenn du beispielsweise eine Dunkelmodus-Version eines bestehenden Prototyps erstellen möchtest.

Befolge diese Schritte:

1. Für jedes auf dem Canvas angewendete Prototyp-Rahmen, klicke im Kontextmenü auf Bearbeiten mit KI.
   Das KI-Kollege Feld öffnet sich.
   Mit Bearbeiten mit KI kannst du einen bestehenden Prototyp verfeinern.

   HINWEIS: Du kannst Bearbeiten mit KI und KI-Kollege immer nur mit einem Prototyp zur Zeit nutzen. Um zu wechseln, schließe den KI-Kollege und öffne Bearbeiten mit KI vom gewünschten Prototyp aus erneut.

2. Beschreibe im Prompt-Feld die Änderungen, die du vornehmen möchtest. Zum Beispiel: „In dunkles Thema konvertieren“.
3. Um deinen Prompt auszuführen, klicke auf die Aufwärtspfeil-Schaltfläche oder drücke ENTER auf deiner Tastatur.
   Der KI-Kollege erstellt dein verfeinertes Prototype.
4. (Optional) Fahre fort, deinen KI-Kollegen zu prompten und arbeite weiter an deinem Prototype. Du kannst eine Version auswählen, bevor du dein Prototype auf dem Canvas anwendest.
5. Über dem entworfenen Prototype klicke auf Zum Canvas hinzufügen.

HINWEIS: Für Miro Prototypes sind alle KI-verbesserten Funktionen zum Prototyping nur mit dem Prototypes Add-on verfügbar.

Prototype-Stile von einer URL anwenden

Um einen Stil aus einer vorhandenen URL auf dein Prototype anzuwenden:

1. Einen Prototyp erstellen.
2. Wähle deinen Prototyp-Bildschirm aus.
   Ein Kontextmenü erscheint.
3. Klicke im Kontextmenü auf Mit KI bearbeiten, um das KI-Kollege-Feld zu öffnen.
4. Gib im Prompt-Feld dem KI-Kollegen an, den Stil der enthaltenen URL zu übernehmen (achte darauf, die vollständige URL anzugeben).
5. Der KI-Kollege übernimmt den visuellen Stil von der URL in einer aktualisierten Version deines Prototyps auf dem Board.

Prototypen-Stile aus einem Screenshot anwenden

Wenn du möchtest, dass dein Prototyp zu einer bestehenden Website oder einem Produkt passt, kannst du die Stile aus einem Screenshot extrahieren und auf deine Screens anwenden.

1. Erstelle einen Prototypen.
2. Wähle deinen Prototyp-Bildschirm aus.
   Ein Kontextmenü erscheint.
3. Klicke auf das Miro KI Symbol im Kontextmenü.
4. Wähle Stil aus Bild importieren aus.
   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.

TIPP: Stile zuerst oder zuletzt anwenden. Um sicherzustellen, dass alle Elemente deines Prototyps einem Thema entsprechen, wende dein Thema frühzeitig in deinem Prototyp-Design an oder als letzten Schritt.

Screenshots in editierbare Prototypen umwandeln

Du kannst einen Screenshot eines Designs oder der Benutzeroberfläche eines Mitbewerbers in einen editierbaren Prototypen umwandeln.

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

TIPP: Konvertiere einen Screenshot in ein bearbeitbares Mock-up. Dann fordere Miro AI auf, weiter zu bearbeiten. Du kannst auch einen Screenshot als Kontext in deinem Prompt verwenden und einen 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ählen Sie eine Prototyp-Version aus

Jede Verfeinerung erzeugt eine Prototyp-Version. Während du deinen Prototyp verfeinerst, befindet sich der Versionswähler oberhalb des Prototyp-Entwurfs. 

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

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

TIPP: Bevor du auf Zum Canvas hinzufügen klickst, kannst du einen Bildschirm aus jeder Version auswählen und auf das Canvas kopieren. Dadurch stellst du sicher, dass du einen Bildschirm aus einer Version speichern kannst, die du eventuell verwirfst. 

WARNUNG: Wenn du auf Zum Canvas hinzufügen klickst, können alle anderen Versionen nicht mehr abgerufen werden.

Einen Prototyp testen

Klicke im Kontextmenü des Prototyps auf Vorschau. Die Vorschau wird geladen.

TIPP: Um eine vollständig interaktive Prototyp-Vorschau zu erhalten, verwenden Sie Verbindungslinien zwischen den Bildschirmen.

Verbindungslinien hinzufügen, um einen Prototyp interaktiv zu machen

So fügen Sie Ihrem Miro-Prototyp Verbindungen zwischen Objekten hinzu oder ändern diese:

1. Klicken Sie auf ein Element (wie eine Schaltfläche) in Ihrem Prototyp.
2. Ziehen Sie das Verbindungslinien-Symbol auf den Bildschirm, mit dem es verbunden werden soll.
3. Im Vorschaumodus führt ein Klick auf das Element die Nutzer zum verlinkten Bildschirm.

Verbindungslinien ausblenden

Für Prototypen mit vielen Verbindungen können Sie zur Vereinfachung des Prototyp-Ansehens die Verbindungen ausblenden.

Im Canvas-Modus wähle dein Prototype aus. Klicke dann im Kontextmenü auf die drei Punkte. Anschließend wähle Verbindungen ausblenden.

Im Fokusmodus klicke oben links auf die Schaltfläche Ausblenden | Anzeigen von Verbindungen.

Verbindungen im Fokusmodus aus- oder einblenden.

Wiederhole die gleichen Schritte, um die Verbindungen anzuzeigen.

TIPP: Verwende Kurzbefehle, um Verbindungen auszublenden oder anzuzeigen. Drücke auf deiner Tastatur Shift + E. Im Canvas-Modus, stelle sicher, dass du dein Prototype auswählst, um Kurzbefehle zu verwenden.

Fokusmodus

Miro Prototypes beinhaltet den Fokusmodus. Wechsle in den Fokusmodus, um an deinem Prototype zu arbeiten, ohne dass andere Inhalte des Boards sichtbar sind. So kannst du ungestört arbeiten.

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

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

Zum Einfügen in Figma kopieren

Stelle dein Prototype Designern in Figma zur Verfügung, ohne es manuell neu zu erstellen. Du kannst dein Prototype oder einzelne Bildschirme kopieren.

Ein Prototype nach Figma kopieren

1. Klicke auf den Prototyp-Rahmen.
   Das Format-Kontextmenü erscheint.
2. Klicke im Kontextmenü auf die vertikalen drei Punkte, um das Mehr-Menü zu öffnen.
3. Klicke auf In Figma kopieren.
   Miro kopiert deinen Prototypen in deine Zwischenablage.
   Kopiere deinen Prototypen in Figma. 
4. Füge in Figma deinen Prototypen ein. Du kannst die Hotkeys (Windows) Strg + V oder (MacOS) Befehlstaste + V verwenden.
   Dein Prototyp wird in Figma eingefügt.

Kopiere einen Prototyp-Bildschirm nach Figma

1. Klicke, um einen Prototyp-Bildschirm auszuwählen.
   Das Widget-Kontextmenü erscheint.
2. Klicke im Kontextmenü auf die vertikalen drei Punkte, um das Mehr-Menü zu öffnen.
3. Klicke auf In Figma kopieren.
   Miro kopiert deinen Prototyp-Bildschirm in die Zwischenablage.
4. Füge in Figma deinen Prototypen ein. Du kannst (Windows) Strg + V oder (MacOS) Befehl + V verwenden.
   Dein Prototyp-Bildschirm wird in Figma eingefügt.

Teile einen Link zu deinem Prototypen (Betaversion)

Du kannst einen einzigartigen Link kopieren, um ihn mit Teammitgliedern oder externen Stakeholdern ohne Miro-Konto zu teilen. 

1. Klicke im Prototypen-Kontextmenü auf die vertikalen drei Punkte, um das Mehr-Menü zu öffnen.
2. Klicke auf Freigeben und Exportieren > Prototyp teilen.
   Das Prototyp teilen-Dialogfeld öffnet sich.
3. Klicke auf Link kopieren.
4. (Optional) Klicke Vorschau im Browser an, um zu sehen, wie jeder mit deinem Link deinen Prototypen sieht.
5. Teile deinen Link.

HINWEIS: Damit externe Nutzer zugreifen können, muss dein Board öffentlich sein. Externe Nutzer können das Prototyp im Fokusmodus anzeigen, jedoch keine weiteren Inhalte auf dem Canvas. Sie können mit Hotspots und Flows interagieren. Wenn die Berechtigungen des Boards es erlauben, können externe Nutzer auch kommentieren.

TIPP: Du kannst auch einen teilbaren Link im Fokusmodus kopieren: Klicke in der oberen rechten Ecke auf die drei Punkte. Dann klicke auf Prototyp freigeben. Und im Vorschau-Modus: Klicke in der oberen rechten Ecke auf Prototyp freigeben.

Exportiere deinen Prototyp

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

Als SVG exportieren

1. Klicke im Kontextmenü des Prototyps auf die vertikalen drei Punkte.
2. Klicke auf Teilen und exportieren > Als Bild exportieren.
   Ein Auswahlfenster und das Dialogfeld Bild exportieren als öffnet sich.
3. Passe das Auswahlfenster so an, dass es deinen Prototyp abdeckt.
4. Wähle im Dialogfeld Bild exportieren als Vektor – SVG aus.
5. Klicke auf Exportieren. 

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

HINWEIS: Bei der SVG-Exportierung von Prototypen mit Bildern, wenn du die SVG in andere Software zur Bearbeitung importierst, wie Figma, werden Bilder durch Platzhalter ersetzt.

Mit Miro MCP Server exportieren

Um deinen Prototyp in einen Codebase-KI-Bearbeiter zu exportieren, z. B. Cursor, füge die Board-URL mit der Board-ID in dein Prompt ein. Stelle sicher, dass du Anweisungen zur Codeerstellung basierend auf dem Prototyp gibst.

Mehr über die Verwendung von Miro MCP erfährst du im Überblick über den Miro MCP Server.

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

Häufig gestellte Fragen