Miro Prototypes

Wer kann es verwenden: Teammitglieder
Welche Preispläne: Business, Enterprise (Accelerate-Lizenz)
Welche Plattformen: Browser, Desktop

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

Du kannst Single- und Multi-Screen-Flows erstellen, deine Entwürfe verfeinern und Stile anwenden sowie eine interaktive Simulation deines Prototyps in der Vorschau ansehen. Baue dein Design mit mehreren gezielten Prompts auf, die jeweils ein Element deines Prototyps erstellen. Du kannst deine Prompts außerdem verfeinern, um nicht von vorn beginnen zu müssen.

Dieser Artikel erklärt, wie du die Funktionen von Miro Prototypes verwendest. Allgemeine Informationen zu Miro Prototypes findest du im Überblick zu Miro Prototypes. 

Hinweis: Miro Prototypes ist jetzt im Business-Preisplan enthalten. Wenn du einen älteren Business-Preisplan oder einen Starter-Preisplan hast, siehe was sich ändert. Miro Prototypes ist in der Accelerate-Lizenz für Enterprise-Preispläne enthalten.

Weitere Informationen: Siehe häufige Fragen.

Einen Prototyp mit Miro AI erstellen

Dieser Abschnitt beschreibt, wie du mit Miro AI mit dem Prototyping beginnst. Wenn du wissen möchtest, wie du manuell beginnst, siehe Prototyping-Bibliothek.

Bei null anfangen

1. Auf einem Miro-Canvas, oberhalb der Erstellungsleiste klicke KI-Kollegen.
   Das KI-Kollegen Feld öffnet sich.
2. Klicke KI-Kollegen-Sammlung.
   Prototyp in der KI-Kollegen-Sammlung aufrufen 
3. Klicke 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 einzelnen Bildschirm oder einen mehrseitigen Prototyp 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, klicke dann auf den Pfeil Senden oder drücke die ENTER-Taste auf deiner Tastatur.
   Miro AI erstellt einen Entwurf des Prototyps auf dem Canvas.
9. (Optional) Um die Erstellung zu stoppen, klicke in deinem Prototyp auf Stoppen.
10. (Optional) Um an deinem Prototyp zu iterieren, gib weiterhin Prompts im Prototype Feld ein.
    Jede Iteration erstellt eine Version deines Entwurfs.
11. Wähle bei deinem Entwurf eine der folgenden Optionen:
    • 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.

Prototyp mit KI-Kollegen erstellen (Betaversion)

Einige Nutzer haben möglicherweise bereits die aktualisierte Eingabe der KI-Kollegen für das Prototyping. Dieser Abschnitt erklärt, wie du mit KI-Kollegen mit dem Prototyping beginnst. Weitere Informationen zur manuellen Vorgehensweise findest du in der Prototyping-Bibliothek.

TIPP: Erstelle deinen Prototyp mit KI-Kollegen, um den KI-Chatverlauf zu aktivieren, der sich an deine Prompts erinnert, sodass du zuvor erkundete Optionen überprüfen und auf jedem Board weitermachen kannst. Weitere Informationen findest du in Sidekicks evolve AI creation in Miro, und Miro Prototypes overview.

HINWEIS: Das KI-Kollegen-Update für Miro Prototypes befindet sich derzeit in der öffentlichen Betaversion. Wenn deine Erfahrung nicht mit der Dokumentation in diesem Abschnitt übereinstimmt, siehe Prototyp mit Miro AI erstellen.

Gehe dazu wie folgt vor:

1. Auf einem Miro-Canvas klicke oben in der Creation bar auf KI-Kollegen.
   Das KI-Kollegen-Panel öffnet sich.

2. Klicke in das Prompt-Feld auf Prototype erstellen.
   KI-Kollegen sind bereit, dir beim Erstellen deines Prototyps zu helfen.
   Starte deinen Prototyp im KI-Kollegen-Feld.

   TIPP: Alternativ kannst du das KI-Kollegen-Feld öffnen und sofort mit Prompts beginnen. Gib ausdrücklich an, dass du einen Prototyp erstellen möchtest, z. B. „Erstelle einen Prototyp für einen Checkout-Flow.“

   TIPP: Du kannst außerdem über Tools, Medien und Integrationen (+) in der Erstellungsleiste auf das Prototype-Format zugreifen.

3. Schreibe deinen Prompt, um den Prototyp zu beschreiben, den die KI-Kollegen erstellen sollen. 
4. Klicke auf den Pfeil nach oben oder drücke ENTER auf deiner Tastatur.
5. (Optional) Um die Generierung zu stoppen, klicke in deinem Prototyp auf Stop.
6. (Optional) Um an deinem Prototyp zu iterieren, gib weiterhin Prompts im Prototype Feld ein.
   Jede Iteration erstellt eine Version deines Prototyp-Entwurfs.
7. Wähle für deinen Entwurfsprototyp eine der folgenden Optionen:
   • 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 3–6 wiederholen.

TIPP: Klein anfangen und konkret sein. Weniger gleichzeitig erstellte Bildschirme liefern in kürzerer Zeit genauere Ergebnisse. Gib für jeden Bildschirm die gewünschten Hauptelemente explizit an, z. B. Schaltflächen, Bereiche oder Aktionen.

TIPP: Wende mehrere Prototyp-Entwürfe auf dem Canvas an. So kannst du Designentscheidungen vergleichen und die beste Option weiter verfeinern.

TIPP: Ein Prototyp kann 1–3 Minuten für die Erstellung benötigen, abhängig von der Komplexität des Prompts und der Größe des Inhalts. Wenn die Erstellung deines Prototyps länger dauert, vereinfache deinen Prompt oder reduziere die Anzahl der Bildschirme.

TIPP: Du kannst eine URL in deinen Prompt aufnehmen und den KI-Kollegen anweisen, Styles von der verlinkten Seite zu übernehmen.

Canvas als Prompt verwenden

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

Gehe dazu wie folgt vor:

1. Wähle Canvas-Inhalte aus. z. B. ein Doc oder Notizen. du kannst optional mehrere Objekte auswählen.
2. Auf einem Miro-Canvas klicke oberhalb der Erstellungsleiste auf Sidekicks.
   Das Sidekick Feld öffnet sich.
3. Klicke auf das Prototype-Symbol am unteren Rand des Prompt-Felds.
4. Befolge die Anweisungen im Prompt-Feld, um deinen Prototyp zu erstellen.
   Miro erstellt deinen Prototyp basierend auf deinen Vorgaben und den ausgewählten Inhalten auf dem Canvas.

HINWEIS: Du kannst ein oder mehrere Screenshots auf dein Canvas hinzufügen und Miro Prototypes daraus mehrere Bildschirme für deinen Prototyp erstellen lassen.

TIPP: Du kannst Miro AI per Prompt anweisen, bestimmte Objekte auf dem Canvas zu verwenden, indem du sie auf dem Canvas auswählst. Zum Beispiel kannst du in deinem Prompt sagen "Verwende Screenshots auf dem Canvas als Orientierung beim Erstellen des Prototyps." Wenn du viele ähnliche Objekte auf dem Canvas hast, beschreibe genau, welche Objekte Miro AI verwenden soll.

Einen eingebetteten Figma-Rahmen in einen Miro-Prototyp konvertieren

1. Wähle in Figma den entsprechenden Rahmen aus.
2. Klicke mit der rechten Maustaste auf den Rahmen und wähle Kopieren/Einfügen als > Link zur Auswahl kopieren. 
3. Gehe zu deinem Miro-Board.
4. Füge den Link aus Figma ein.
5. Verbinde Figma (falls du es noch nicht getan hast).
6. Wähle die Figma-Einbettung auf dem Canvas aus.
7. Klicke im Kontextmenü der Einbettung auf Konvertieren in.
8. Wähle Prototyp im Menü Konvertieren in.
9. Miro AI wandelt deinen eingebetteten Figma-Prototyp in einen bearbeitbaren Miro-Prototyp um.

Prototyp überarbeiten

Dein erster Entwurf ist vielleicht nicht perfekt. Bevor du deinen Entwurf auf dem Canvas anwendest, kannst du ihn weiter verfeinern und mehrere Versionen deines Prototyps erstellen.

1. Einen Prototyp erstellen mit Miro AI. Wende ihn nicht auf dem Canvas an.
   Der nächste Schritt im Prototyp-Panel ist Was möchtest du als Nächstes tun?
2. Wähle Prototyp bearbeiten. 
3. Bei einem Flow mit mehreren Bildschirmen wähle den Bildschirm aus, den du überarbeiten möchtest.
4. Beschreibe im Antwortfeld die gewünschten Änderungen.
5. Klicke auf den Pfeil nach oben oder drücke auf deiner Tastatur Eingabetaste.
   Miro erstellt eine neue Version deines Prototyps.

HINWEIS: Änderungen können nur jeweils an einem Bildschirm vorgenommen werden.

TIPP: Nutze den Canvas-Kontext. Wähle Dokumente, Diagramme, Notizen oder andere Board-Inhalte als Prompt für Miro AI aus.

Mit einem Screenshot als visuellem Kontext iterieren

Bevor du deinen Prototyp auf dem Canvas anwendest, kannst du einen Screenshot oder einen bereits auf dem Canvas vorhandenen Prototyp als visuellen Kontext verwenden, um deinen Entwurf weiterzuentwickeln.

1. Prototyp erstellen mit Miro AI. Wende ihn nicht auf das Canvas an.
   Der nächste Schritt im Prototype-Panel ist Was möchtest du als Nächstes tun?
2. Klicke auf Prototyp bearbeiten.
3. Bei einem Multi‑Screen‑Flow wähle den Screen aus, den du überarbeiten 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 auf deiner Tastatur Eingabetaste.
   Miro erstellt eine neue Version deines Prototyps. 

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

Mit KI bearbeiten

Bei jedem Prototyp, der bereits auf dem Canvas angewendet wurde, kannst du Mit KI bearbeiten verwenden, um weiter zu iterieren. Verwende Mit KI bearbeiten, um Prototypen zu verfeinern, statt sie neu zu erstellen — zum Beispiel, wenn du eine Dark-Mode-Version eines bestehenden Prototyps erstellen möchtest.

Gehe dazu wie folgt vor:

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

   HINWEIS: Du kannst Mit KI bearbeiten und den KI-Kollege jeweils nur für einen Prototyp gleichzeitig verwenden. Um zu wechseln, schließe das KI-Kollege-Feld und öffne Mit KI bearbeiten für den gewünschten Prototyp erneut.

2. Beschreibe im Prompt-Feld die Änderungen, die du vornehmen möchtest. Zum Beispiel: „In ein dunkles Design umwandeln“.
3. Um dein Prompt auszuführen, klicke auf die Aufwärtspfeil-Schaltfläche oder drücke ENTER auf deiner Tastatur.
   Der KI-Kollege erstellt deinen verfeinerten Prototyp.
4. (Optional) Gib dem KI-Kollegen weiterhin Prompts und iteriere an deinem Prototyp. Du kannst eine Version auswählen, bevor du deinen Prototyp auf das Canvas anwendest.
5. Klicke oberhalb des entworfenen Prototyps auf Add to canvas.

Prototyp-Stile aus einer URL anwenden

So wendest du einen Stil von einer bestehenden URL auf deinen Prototyp an:

1. Einen Prototyp erstellen.
2. Wähle deinen Prototyp-Bildschirm oder mehrere Prototyp-Bildschirme 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 die Anweisung, den Stil aus der beigefügten URL anzuwenden (achte darauf, die vollständige URL anzugeben).
5. Der KI-Kollege wendet den visuellen Stil aus der URL in einer aktualisierten Version deines Prototyps auf dem Board an.

Prototyp-Stile aus einem Screenshot anwenden

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

1. Einen Prototyp erstellen.
2. Wähle deinen Prototyp-Bildschirm oder mehrere aus.
   Ein Kontextmenü erscheint.
3. Klicke auf das Miro KI-Symbol im Kontextmenü.
4. Wähle Stil aus Bild importieren.
   Stile importieren und auf deinen Prototyp anwenden
5. Wähle die Bilddatei aus, aus der du den Stil importieren möchtest.
6. Die Stile werden auf deinen Prototyp angewendet.

Tipp: Wende Stile zuerst oder zuletzt an. Damit alle Elemente in deinem Prototyp zum Design passen, wende dein Design frühzeitig an oder als letzten Schritt.

Screenshots in bearbeitbare Prototypen umwandeln

Du kannst einen Screenshot eines Designs oder der UI eines Wettbewerbers 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. Klicke auf die Schaltfläche Convert to und dann auf Prototype.
4. Wähle im Untermenü den Gerätetyp (Mobil, Tablet, Desktop oder Benutzerdefiniert).
5. Die KI erstellt daraus einen bearbeitbaren Prototyp – inklusive Text, Schaltflächen, Layout und weiteren Elementen.
6. Diese Version kannst du jetzt nach Bedarf ändern, ergänzen oder bearbeiten.

Tipp: Wandle einen Screenshot in ein editierbares Mock-up um. Fordere dann Miro AI per Prompt auf, mit der Bearbeitung fortzufahren. Du kannst einen Screenshot auch als Kontext in deinem Prompt verwenden und daraus 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.

Prototypversion auswählen

Jede Verfeinerung erzeugt eine Prototypversion. Während du deinen Prototyp verfeinerst, befindet sich die Versionsauswahl über dem Prototypentwurf. 

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 bzw. 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 per Kopieren/Einfügen auf das Canvas einfügen. Dies stellt sicher, dass du einen Bildschirm aus einer Version speichern kannst, die du möglicherweise verwerfen möchtest. 

TIPP: Nachdem du eine Version auf das Canvas hinzugefügt hast, kannst du frühere Versionen im KI-Chatverlauf abrufen.

Prototyp in der Vorschau anzeigen

Im Kontextmenü des Prototyps klicke auf Vorschau. Die Vorschau wird geladen.

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

Verbindungslinien hinzufügen, um deinen Miro-Prototyp interaktiv zu machen

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

1. Klicke auf ein Element (z. B. eine Schaltfläche) in deinem Miro-Prototyp.
2. Ziehe das Verbindungslinie-Symbol auf den Bildschirm, zu dem es verlinken soll.
3. Im Vorschau-Modus führt ein Klick auf das Element die Nutzer zum verknüpften Bildschirm.

Verbindungslinien ausblenden

Bei Prototypen mit vielen Verbindungslinien kannst du die Ansicht vereinfachen, indem du die Verbindungslinien ausblendest.

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

Im Fokusmodus klicke oben links auf die Ausblenden | Einblenden-Schaltfläche für Konnektoren.

Konnektoren im Fokusmodus aus- oder einblenden.

Wiederhole die gleichen Schritte, um die Konnektoren einzublenden.

TIPP: Verwende Kurzbefehle, um Konnektoren auszublenden oder einzublenden. Drücke auf deiner Tastatur Shift + E. Im Canvas-Modus musst du deinen Prototyp auswählen, damit Kurzbefehle funktionieren.

Fokusmodus

Miro Prototypes bietet den Fokusmodus. Wechsle in den Fokusmodus, um an deinem Prototyp zu arbeiten, ohne andere Inhalte des Boards zu sehen – so kannst du ablenkungsfrei arbeiten.

Um in den Fokusmodus zu wechseln, wähle deinen Miro-Prototyp aus. Klicke im Kontextmenü auf Fokusmodus.

Der Fokusmodus ermöglicht ein ablenkungsfreies Arbeiten mit Miro Prototypes.

Zum Einfügen in Figma kopieren

Stelle deinen Miro-Prototyp Designern in Figma zur Verfügung, ohne ihn manuell neu aufzubauen. Du kannst deinen Prototyp oder einzelne Bildschirme kopieren.

Einen Prototyp in Figma kopieren

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

Einen Prototyp-Bildschirm in Figma kopieren

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

Claude Code-Verbindung für Miro Prototypes

Erstelle Miro Prototypes aus deinen Claude Code-Projekten über das Model Context Protocol.

1. Verbinde dich mit dem MCP-Server von Miro, indem du diesen Anweisungen folgst.
2. Kopiere und führe nach der Verbindung diesen Befehl in deinem KI-Tool aus:
   "Rufe diese Design-Datei ab und setze die relevanten Aspekte des Designs um. [Relevanter Link zum Miro-Board]"
3. Du kannst den Miro-Prototyp auf deinem Miro-Board ansehen und den Claude Code in deinem Terminalfenster sehen.

Link zu deinem Prototyp teilen (Betaversion)

Du kannst einen eindeutigen Link kopieren, um ihn mit Teammitgliedern oder externen Stakeholdern zu teilen, auch wenn sie kein Miro-Konto haben. 

1. Klicke im Kontextmenü des Prototyps auf die vertikalen drei Punkte, um das Mehr-Menü zu öffnen.
2. Klicke auf Teilen und exportieren > Prototyp teilen.
   Das Dialogfeld Prototyp teilen öffnet sich.
3. Klicke auf Link kopieren.
4. (Optional) Klicke auf Vorschau im Browser, um zu sehen, wie jemand mit deinem Link deinen Prototyp ansieht.
5. Teile deinen Link.

HINWEIS: Damit externe Nutzer darauf zugreifen können, muss dein Board öffentlich sein. Externe Nutzer können nur im Fokusmodus auf den Prototyp zugreifen und nicht auf andere Inhalte des Canvas. Sie können mit Hotspots und dem Prototyp-Flow interagieren. Wenn die Board-Berechtigungen es erlauben, können externe Nutzer auch kommentieren.

TIPP: Du kannst auch einen teilbaren Link im Fokusmodus kopieren: Oben rechts klicke auf die drei vertikal angeordneten Punkte. Klicke dann auf Prototyp teilen. Und im Vorschaumodus: Oben rechts klicke auf Prototyp teilen.

Prototyp exportieren

Du kannst deinen Prototyp als SVG exportieren. Du kannst außerdem den Miro Model Context Protocol (MCP) Server nutzen, um in einen Codebase-KI-Editor zu exportieren; Teams können den Export nutzen, um lauffähigen Code zu erstellen und die Entwicklung zu beschleunigen.

Als SVG exportieren

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

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

HINWEIS: Bei SVG-Exporten von Prototypen mit Bildern werden beim Importieren der SVG in andere Software zum Bearbeiten, wie z. B. Figma, die Bilder durch Platzhalter ersetzt.

Export mit Miro MCP Server

Um deinen Prototyp in einen Codebase-KI-Bearbeiter zu exportieren, zum Beispiel Cursor, füge die Board-URL mit der Board-ID in dein Prompt ein. Stelle sicher, dass du Anweisungen gibst, damit Code auf Basis des Prototyps erstellt wird.

Weitere Informationen zur Verwendung von Miro MCP findest du unter Übersicht zum Miro-MCP-Server.

Ein Codebase-KI-Bearbeiter wie Cursor akzeptiert eine Miro-Board-URL mit Board-ID, um anhand deines Prototyps Code zu erstellen.

Häufige Fragen