Miro Prototypes

Verfügbar für: Alle Mitglieder mit dem 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 Ein- und Mehrbildschirm-Flows erstellen, deine Entwürfe verfeinern und Stile anwenden sowie eine interaktive Simulation deines Prototyps in der Vorschau anzeigen. Baue dein Design in mehreren, spezifischen Prompts auf, die jedes Element deines Prototyps generieren. Du kannst auch deine Prompts verfeinern, um einen Neustart zu vermeiden.

Dieser Artikel erklärt, wie du die Funktionen von Miro Prototypes verwendest. Für allgemeine Informationen zu Miro Prototypes sieh dir die Übersicht über Miro Prototypes an. 

✏️ Die Prototypes-Erfahrung ist zu den KI-Kollegen gewechselt. Jetzt in der öffentlichen Betaversion haben bereits einige Nutzer die aktualisierte, KI-Kollege-Eingabe für KI-erstellte Prototypen. Wenn deine Erfahrung nicht der Dokumentation entspricht, sieh dir Einen Prototyp mit KI-Kollegen erstellen (Beta) an. 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

Dieser Abschnitt beschreibt, wie man mit Miro AI das Prototyping startet. Um zu lernen, wie man manuell beginnt, siehe Prototyping-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.
   Zugriff auf Prototyp in der KI-Kollege-Bibliothek 
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. Bestimme, ob es sich um einen Einzelbildschirm oder einen Multibildschirm-Prototyp handelt.
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, dann klicke auf den Senden-Pfeil oder drücke ENTER auf deiner Tastatur.
   Miro AI erstellt einen Entwurf des Prototyps auf dem Canvas.
9. (Optional) Um die Erstellung zu stoppen, klicke auf deinem Prototyp auf Stop.
10. (Optional) Um an deinem Prototyp weiterzuarbeiten, fahre fort, im Prototyp-Feld zu prompten.
    Jede Iteration erstellt eine Version deines Entwurfsprototyps.
11. Wähle eine der folgenden Optionen auf deinem Entwurf:
    • Auf Canvas anwenden
      Dein Prototyp ist jetzt auf dem Canvas bearbeitbar.
    • Alles verwerfen
      Dein Entwurf wird vom Canvas entfernt. Du kannst deinen Prompt verfeinern und die Schritte 7–9 wiederholen.

Einen Prototypen mit KI-Kollege erstellen (Betaversion)

Einige Nutzer haben möglicherweise bereits die aktualisierte KI-Kollege-Eingabe für das Prototyping. Dieser Abschnitt beschreibt, wie man mit KI-Kollege mit dem Prototyping beginnen kann. Um zu erfahren, wie man manuell startet, siehe Prototyping-Bibliothek.

✏️ Das Sidekicks-Update für Prototypen befindet sich derzeit in der öffentlichen Betaversion. Wenn Ihre Erfahrung nicht mit der in diesem Abschnitt beschriebenen Dokumentation übereinstimmt, siehe Prototyp mit Miro AI erstellen.

Gehe dazu wie folgt vor:

1. Auf einem Miro-Canvas oberhalb der Erstellungsleiste auf Sidekicks klicken.
   Das KI-Kollege-Feld öffnet sich.

2. Klicke im Eingabefeld auf Prototyp erstellen.
   Der KI-Kollege steht bereit, um dir bei der Erstellung deines Prototyps zu helfen.
   Starte deinen Prototyp im KI-Kollege-Feld.

   💡 Alternativ kannst du das KI-Kollege-Feld öffnen und sofort mit dem Auffordern beginnen. Stelle sicher, dass du ausdrücklich erwähnst, dass du einen Prototyp erstellen möchtest, z. B. "Erstelle einen Prototyp für einen Checkout-Flows".

   💡 Du kannst auch auf das Prototypen-Format über Tools, Medien und Integrationen (+) in der Erstellungseiste zugreifen.

3. Schreibe deinen Prompt, um den Prototyp zu beschreiben, den du vom KI-Kollegen erstellen lassen möchtest. 
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 Stopp.
6. (Optional) Um auf deinem Prototyp weiter zu iterieren, fahre fort im Prototype-Feld zu prompten.
   Jede Iteration erstellt eine Version deines Entwurfsprototyps.
7. Wähle in deinem Entwurfsprototyp 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 dein Prompt verfeinern und die Schritte 3–6 wiederholen.

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

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

💡 Ein Prototyp kann 1–3 Minuten zur Erstellung benötigen, abhängig von der Komplexität des Prompts und der Inhaltsgröße. Falls dein Prototyp länger braucht, vereinfache deinen Prompt oder reduziere die Anzahl der Screens.

Der Canvas als Prompt

Wähle Inhalte auf dem Canvas aus, um sie in deinem Prompt zu verwenden. Beispielsweise hast du eine Designanweisung in einem Doc oder auf Notizen. Prototypen können diese Inhalte als Kontext nutzen, um deinen Prototypen zu erstellen. 

Befolge diese Schritte:

1. Wähle Inhalte auf dem Canvas aus. Zum Beispiel ein Doc oder Notizen. Du kannst optional mehrere Objekte auswählen.
2. Auf einem Miro-Canvas, oberhalb der Erstellungsleiste, klicke auf Sidekicks.
   Das Sidekick-Feld öffnet sich.
   HINWEIS: Wenn du die aktualisierte...
3. Klicke auf KI-Kollege-Bibliothek
   Prototyp in der KI-Kollege-Bibliothek aufrufen 
4. Klicke auf Formate > Prototyp.
5. Wähle Einen Text-Prompt aus.
6. Gib den Gerätetyp an und dann Einzel- oder Mehrfachbildschirm.
   Das Reaktionsfeld zeigt die Anzahl der Objekte, die du in Schritt 1 ausgewählt hast.
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 anweisen, bestimmte Canvas-Objekte zu verwenden, indem du sie auf dem Canvas auswählst. Zum Beispiel kannst du in deinem Prompt sagen: "Verwende Screenshots auf dem Canvas als Vorlagen für den Bau des Prototyps." 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 nicht das perfekte Ergebnis. Bevor du deinen Entwurf auf den Canvas anwendest, kannst du weiterhin iterieren und mehrere Versionen deines Prototyps 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 aus. 
3. Wähle für ein Multi-Screen-Flow die Bildschirm, die du bearbeiten möchtest.
4. Beschreibe die gewünschten Änderungen im Antwortfeld.
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 einen Bildschirm auf einmal bearbeiten.

💡 Nutze den Canvas-Kontext. Wähle Dokumente, Diagramme, Notizen oder andere Board-Inhalte aus, um Miro AI zu prompten.

Mit einem Screenshot als visuellem Kontext iterieren

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

1. Erstelle einen 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. Klicke auf Prototyp bearbeiten.
3. Für einen Multi-Screen-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 bestehende 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 die Canvas angewendet wurde, kannst du mit Mit KI bearbeiten weiter iterieren. Nutze Mit KI bearbeiten, um zu verfeinern statt neu zu erstellen, zum Beispiel, wenn du eine Dunkelmodus-Version eines bestehenden Prototyps erstellen möchtest.

Gehe dazu wie folgt vor:

1. Für jeden Prototypen, der auf dem Canvas angewendet wurde, klicke im Kontextmenü auf Mit KI bearbeiten.
   Das KI-Kollege Feld öffnet sich.
   Mit KI bearbeiten ermöglicht es dir, einen bestehenden Prototypen zu verfeinern.

   ✏️ Du kannst Mit KI bearbeiten und KI-Kollege jeweils mit einem Prototypen gleichzeitig verwenden. Um zu wechseln, schließe das KI-Kollege Feld und öffne Mit KI bearbeiten für den gewünschten Prototypen erneut.

2. Beschreibe im Prompt, welche Änderungen 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 die Eingabetaste auf deiner Tastatur.
   Der KI-Kollege erstellt dein verfeinertes Prototype.
4. (Optional) Gib dem KI-Kollegen weitere Prompts und iteriere an deinem Prototype weiter. 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.

✏️ Für Miro Prototypes sind alle KI-unterstützten Prototyping-Funktionen nur mit dem Prototypes Add-on verfügbar.

Prototyp-Stile aus einem Screenshot übernehmen

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

1. Erstelle einen Prototyp.
2. Wähle deinen Prototyp-Bildschirm aus.
   Das Kontextmenü erscheint.
3. Klicke auf das Miro AI Symbol im Kontextmenü.
4. Wähle Stil aus Bild importieren.
   Importiere Stile und wende sie auf deinen Prototyp an
5. Wähle die Bilddatei aus, aus der du den Stil importieren möchtest.
6. Die Stile werden auf deinen Prototyp angewendet.

💡 Stile zuerst oder zuletzt anwenden. Um sicherzustellen, dass alle Elemente in deinem Prototyp einem Thema entsprechen, lege das Thema frühzeitig in deinem Prototyp-Design fest oder verwende es als letzten Schritt.

Screenshots in bearbeitbare Prototypen umwandeln

Du kannst einen Screenshot eines Designs oder einer konkurrierenden Benutzeroberfläche 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 aus (Mobil, Tablet, Desktop).
5. Die KI wandelt es in einen bearbeitbaren Prototyp um – Text, Schaltflächen, Layout und andere Elemente.
6. Du kannst diese Version nun nach Bedarf modifizieren, ergänzen oder bearbeiten.

💡 Wandle einen Screenshot in ein editierbares Mock-up um. Lasse Miro AI mit der Bearbeitung fortfahren. Du kannst auch einen Screenshot als Kontext in deinen Prompt nutzen und einen Prototyp erstellen. Zum Verwenden mehrerer Screenshots wähle alle Screenshots aus und kopiere als Bild. Dann verwende das Bild als Kontext im Prompt.

Wähle eine Prototyp-Version aus

Jede Verfeinerung erstellt eine neue 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 Zum Canvas hinzufügen. Deine Version wird auf das Canvas angewendet.

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

💡 Bevor du auf Zur Canvas hinzufügen klickst, kannst du einen Bildschirm aus einer beliebigen Version auswählen und auf die Canvas kopieren. Dies stellt sicher, dass du einen Bildschirm aus einer Version speichern kannst, die du möglicherweise verwerfen möchtest. 

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

Einen Prototypen ansehen

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

💡 Um eine vollständig interaktive Vorschau des Prototyps zu erhalten, verwende Verbindungslinien zwischen Bildschirmen.

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 zum Bildschirm, mit dem es verlinkt werden soll.
3. Im Vorschau-Modus führt das Anklicken des Elements die Nutzer zum verlinkten Bildschirm.

Verbindungslinien ausblenden

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

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

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

Verbindungslinien im Fokusmodus aus- oder einblenden.

Wiederhole die gleichen Schritte, um die Verbindungslinien anzuzeigen.

💡 Verwende Kurzbefehlstasten, um Verbindungslinien aus- oder einzublenden. Drücke auf deiner Tastatur Shift + E. Im Canvas-Modus stelle sicher, dass du deinen Prototyp auswählst, um die Kurzbefehlstasten zu nutzen.

Fokusmodus

Miro Prototypes beinhaltet den Fokusmodus. Im Fokusmodus kannst du an deinem Prototyp arbeiten, ohne dass anderer Board-Inhalt sichtbar ist, wodurch du ungestört arbeiten kannst.

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

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

Zum Einfügen in Figma kopieren

Gib deinen Prototyp an Designer in Figma weiter, ohne ihn manuell neu erstellen zu müssen. Du kannst deinen Prototyp oder einzelne Screens kopieren.

Einen Prototypen zum Einfügen in 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 Kopieren nach Figma.
   Miro kopiert deinen Prototyp in die Zwischenablage.
   Kopiere deinen Prototyp nach Figma. 
4. Füge in Figma deinen Prototyp ein. Du kannst die Tastenkombination (Windows) Strg + V oder (macOS) Befehl + V verwenden.
   Dein Prototyp wird in Figma eingefügt.

Einen Prototyp-Bildschirm nach Figma kopieren

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

Exportiere deinen Prototyp

Du kannst dein Prototype als SVG exportieren. Du kannst auch den Miro Model Context Protocol (MCP) Server verwenden, um in einen Codebasis-KI-Bearbeiter 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 exportieren als Dialogfeld öffnen sich.
3. Passe das Auswahlfenster so an, dass es deinen Prototyp abdeckt.
4. Wähle im Bild exportieren als Dialogfeld 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 vertikalen drei Punkte und dann auf Als Bild exportieren. Das Als Bild exportieren Dialogfeld öffnet sich, dann wähle Vektor – SVG.

✏️ Bei Prototyp-SVG-Exporten mit Bildern werden die Bilder durch Platzhalter ersetzt, wenn du das SVG zur Bearbeitung in andere Software wie Figma importierst.

Export mit Miro MCP Server

Um deinen Prototyp in einen Code-Editor mit KI-Funktionalität, 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 auf Basis des Prototyps Code zu generieren.

Um mehr über die Nutzung von Miro MCP zu erfahren, siehe Überblick über den Miro MCP Server.

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

Häufige Fragen