Miro Prototypes

Wer kann es nutzen: Teammitglieder
Welche Preispläne: Business, Enterprise (kostenpflichtiges Add-on)
Welche Plattformen: Browser, Desktop

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

Du kannst Einzel- und Mehrbildschirm-Flows erstellen, deine Designs verfeinern, Stile anwenden und eine interaktive Simulation deines Prototyps in der Vorschau ansehen. Erstelle dein Design mit mehreren spezifischen Prompts, die jeweils ein Element deines Prototyps erzeugen. Du kannst deine Prompts außerdem verfeinern, damit du nicht von vorne anfangen musst.

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

HINWEIS: Miro Prototypes ist jetzt im Business-Preisplan enthalten. Wenn du einen älteren Business-Preisplan oder den Starter-Preisplan hast, siehe was sich ändert.

Weitere Informationen: Siehe häufige Fragen.

Einen Prototyp mit Miro AI erstellen

Dieser Abschnitt beschreibt, wie du mit Miro AI mit dem Prototyping beginnst. Um zu erfahren, wie du manuell startest, siehe Prototyping-Bibliothek.

Neu anfangen

1. Klicke auf einem Miro-Canvas oberhalb der Erstellungsleiste auf KI-Kollegen.
   Das KI-Kollegen-Feld öffnet sich.
2. Klicke auf KI-Kollegen-Sammlung.
   Prototype in der KI-Kollegen-Sammlung aufrufen 
3. Klicke auf Formate > Prototype.
4. Gib an, ob du mit einem Text-Prompt oder einem Screenshot beginnen möchtest.
5. Wähle den Gerätetyp.
6. Wähle, ob es ein einzelner Bildschirm oder ein Prototype mit mehreren Bildschirmen sein soll.
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 starten.
8. Beende deinen Prompt, klicke dann auf den Senden Pfeil oder drücke ENTER auf deiner Tastatur.
   Miro KI erstellt einen Entwurf des Prototype auf dem Canvas.
9. (Optional) Um die Erstellung zu stoppen, klicke in deinem Prototype auf Stopp.
10. (Optional) Um an deinem Prototyp weiterzuarbeiten, gib im Prototype Feld weiter Prompts ein.
    Jede Iteration erstellt eine Version deines Prototyp-Entwurfs.
11. Wähle in deinem Prototyp-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 KI-Kollegen-Eingabe für das Prototyping. Dieser Abschnitt erklärt, wie du mit den KI-Kollegen mit dem Prototyping startest. Wenn du wissen möchtest, wie du manuell anfängst, siehe Prototyping‑Bibliothek.

TIPP: Erstelle deinen Prototyp mit KI‑Kollegen, um den KI‑Chatverlauf zu aktivieren. Dieser merkt sich deine Prompts, sodass du zuvor erkundete Optionen überprüfen und auf jedem Board weitermachen kannst. Weitere Informationen findest du in Wie KI‑Kollegen die KI‑Erstellung in Miro weiterentwickeln und in Überblick zu Miro Prototypes.

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

Befolge diese Schritte:

1. Auf einem Miro-Canvas klicke oberhalb der Erstellungsleiste auf KI-Kollegen.
   Der KI-Kollegen-Bereich öffnet sich.

2. Klicke im Prompt-Feld auf Prototyp erstellen.
   Die KI-Kollegen sind bereit, dir beim Erstellen deines Prototyps zu helfen.
   Beginne 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 Prototype auf Stop.
6. (Optional) Um an deinem Prototype zu iterieren, gib weiterhin Prompts im Prototype Feld ein.
   Jede Iteration erstellt eine Version deines Entwurfsprototyps.
7. Wähle eine der folgenden Optionen für deinen Prototypentwurf:
   • 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 3–6 wiederholen.

TIPP: Fang klein an und sei konkret. Weniger gleichzeitig erstellte Screens liefern genauere Ergebnisse in kürzerer Zeit. Formuliere ausdrücklich die Hauptelemente, die du für jeden Screen möchtest, z. B. Schaltflächen, Bereiche oder Aktionen.

TIPP: Wende mehrere Prototypentwürfe auf dem Canvas an. Du kannst Designentscheidungen vergleichen und weiter die beste Option verfeinern.

TIPP: Für die Erstellung eines Prototyps können 1–3 Minuten vergehen, je nach Komplexität des Prompts und Umfang 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 einfügen und den KI-Kollegen anweisen, Stile von der verlinkten Website zu übernehmen.

Canvas als Prompt verwenden

Wähle Inhalte auf dem Canvas aus, um sie in deinem Prompt zu verwenden. Zum Beispiel ein Designbrief in einem Doc oder auf Notizen. Prototypen können die Inhalte als Kontext nutzen, um deinen Prototyp zu erstellen. 

Gehe dazu wie folgt vor:

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 klicke oberhalb der Erstellungsleiste auf Sidekicks.
   Das Sidekick-Feld öffnet sich.
3. Klicke auf das Prototype-Symbol am unteren Rand des Prompt-Felds.
4. Folge den Anweisungen im Prompt-Feld auf dem Bildschirm, um deinen Prototyp zu erstellen.
   Miro erstellt deinen Prototyp basierend auf deinen Vorgaben und dem ausgewählten Canvas-Inhalt.

HINWEIS: Du kannst einen oder mehrere Screenshots zu deinem Canvas hinzufügen und Miro Prototypes mehrere Screens in deinem Prototyp aus den ausgewählten Screenshots erstellen lassen.

TIPP: Du kannst Miro AI anweisen, bestimmte Canvas-Objekte zu verwenden, indem du sie auf dem Canvas auswählst. Zum Beispiel kannst du im Prompt sagen: „Verwende Screenshots auf dem Canvas als Vorlage zum 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 das noch nicht getan hast).
6. Wähle das eingebettete Figma-Objekt auf dem Canvas aus.
7. Klicke im Kontextmenü der Einbettung auf Konvertieren in.
8. Wähle im Menü Konvertieren in die Option Prototyp.
9. Miro AI konvertiert deinen eingebetteten Figma-Prototyp in einen bearbeitbaren Miro-Prototyp.

Prototyp weiterentwickeln

Dein erster Entwurf ist vielleicht nicht das perfekte Ergebnis. Bevor du deinen Entwurf auf dem Canvas anwendest, kannst du weiter daran arbeiten und mehrere Versionen deines Prototyps erstellen.

1. Einen Prototyp erstellen 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. Bei einem Flow mit mehreren Bildschirmen wähle den Bildschirm aus, den du überarbeiten möchtest.
4. Gib im Antwortfeld die gewünschten Änderungen an.
5. Klicke auf den Pfeil nach oben oder drücke die Eingabetaste auf deiner Tastatur.
   Miro erstellt eine neue Version deines Prototyps.

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

TIPP: Nutze den Canvas-Kontext. Wähle Dokumente, Diagramme, Notizen oder andere Board-Inhalte aus, um Miro AI per Prompt anzusteuern.

Mit einem Screenshot als visuellem Kontext iterieren

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

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

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

Mit KI bearbeiten

Bei jedem Prototyp, der bereits auf dem Canvas angewendet ist, kannst du „Mit KI bearbeiten“ nutzen, um weiter zu iterieren. Nutze „Mit KI bearbeiten“, um zu verfeinern statt neu zu beginnen – zum Beispiel, wenn du eine Dunkelmodus-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-Kollegen jeweils nur für einen Prototyp verwenden. Um zu wechseln, schließe das KI-Kollege-Feld und öffne Mit KI bearbeiten erneut für den Zielprototyp.

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

Prototyp-Stile aus einer URL anwenden

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

1. Einen Prototyp erstellen.
2. Wähle deinen Prototyp-Bildschirm(e).
   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 einzufügen).
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 dein Prototyp einer bestehenden Website oder einem Produkt ähneln soll, kannst du den Stil aus einem Screenshot extrahieren und auf deine Bildschirme anwenden.

1. Einen Prototyp erstellen.
2. Wähle deinen Prototyp-Bildschirm (oder mehrere) aus.
   Das Kontextmenü erscheint.
3. Klicke im Kontextmenü auf das Miro KI-Symbol.
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.

TIPP: Stile zuerst oder zuletzt anwenden. Um sicherzustellen, dass alle Elemente deines Prototyps einem Design entsprechen, wende das Design früh in der Gestaltung deines Prototyps an oder als letzten Schritt.

Screenshots in bearbeitbare Prototypen umwandeln

Du kannst einen Screenshot eines Designs oder einer UI eines Konkurrenten 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 (Mobile, Tablet, Desktop, Custom).
5. Die KI baut daraus ein bearbeitbares Prototype neu auf – Text, Schaltflächen, Layout und weitere Elemente.
6. Du kannst diese Version jetzt nach Bedarf anpassen, ergänzen oder bearbeiten.

TIPP: Wandle einen Screenshot in ein editierbares Mock-up um. Gib Miro AI dann einen Prompt, damit es mit der Bearbeitung fortfährt. Du kannst einen Screenshot auch als Kontext in deinem Prompt verwenden und so 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.

Prototyp-Version auswählen

Bei jeder Verfeinerung wird eine neue Prototyp-Version erstellt. Während du deinen Prototyp verfeinerst, befindet sich die Versionsauswahl ü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 dem Canvas angewendet.

Wähle, welche Überarbeitung bzw. Version deines Prototyps du auf dem Canvas hinzufügen möchtest.

TIPP: Bevor du Auf Canvas hinzufügen anklickst, kannst du einen Bildschirm aus einer beliebigen Version auswählen und auf dem Canvas kopieren und einfügen. So stellst du sicher, dass du einen Bildschirm aus einer Version speichern kannst, die du möglicherweise verwerfen möchtest. 

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

Prototyp in der Vorschau ansehen

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

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

Verbindungslinien hinzufügen, damit dein Prototyp interaktiv wird

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

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

Verbindungslinien ausblenden

Bei Prototypen mit vielen Verbindungslinien kannst du zur Vereinfachung die Verbindungslinien ausblenden.

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

Im Fokusmodus klicke oben links auf die Schaltfläche Ausblenden | Anzeigen für Connectors.

Connectors im Fokusmodus aus- oder einblenden.

Wiederhole die Schritte, um die Connectors anzuzeigen.

TIPP: Verwende Kurzbefehle, um Connectors 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 Board-Inhalte zu sehen — so kannst du ablenkungsfrei arbeiten.

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

Der Fokusmodus ermöglicht ablenkungsfreies Arbeiten mit Miro Prototypes.

Zum Einfügen in Figma kopieren

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

Prototyp nach Figma kopieren

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

Einen Prototyp-Bildschirm nach 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 Menü Mehr zu öffnen.
3. Klicke auf In Figma kopieren.
   Miro kopiert deinen Prototyp-Bildschirm in die Zwischenablage.
4. Füge deinen Prototyp in Figma ein. Du kannst (Windows) Ctrl + V oder (MacOS) Command + V 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. Stelle eine Verbindung zum MCP-Server von Miro her, indem du diesen Anweisungen folgst.
2. Kopiere und führe nach der Verbindung in deinem KI-Tool diesen Befehl aus:
   „Rufe diese Design-Datei ab und setze die relevanten Aspekte des Designs um. [Relevanter Miro-Board-Link]“
3. Du kannst das Miro Prototype auf deinem Miro-Board ansehen und den Claude Code in deinem Terminalfenster ansehen.

Link zu deinem Prototype 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 Freigeben und exportieren > Prototyp freigeben.
   Das Prototyp freigeben-Dialogfeld öffnet sich.
3. Klicke auf Link kopieren.
4. (Optional) Klicke auf Vorschau im Browser, um zu sehen, wie jede Person mit deinem Link deinen Prototyp sieht.
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 keinen anderen Inhalt auf dem 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 in Fokusmodus einen teilbaren Link kopieren: Klicke oben rechts auf die drei Punkte. Dann klicke auf Prototyp teilen. Und im Vorschau-Modus: Klicke oben rechts auf Prototyp teilen.

Prototyp exportieren

Du kannst deinen Prototype als SVG exportieren. Du kannst außerdem den Miro Model Context Protocol (MCP) Server nutzen, um in einen KI-Bearbeiter für eine Codebase 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 auf Teilen und exportieren> Als Bild exportieren.
   Ein Auswahlfenster und das Dialogfeld Bild exportieren als öffnen sich.
3. Passe das Auswahlfenster so an, dass es deinen Prototyp abdeckt.
4. Wähle im Dialogfeld Bild exportieren als Vektor – SVG.
5. Klicke auf Exportieren. 

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

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

Exportieren mit Miro MCP Server

Um deinen Prototyp in einen Codebase-KI-Bearbeiter wie Cursor zu exportieren, füge die Board-URL mit der Board-ID in deinen Prompt ein. Gib außerdem Anweisungen, damit Code basierend auf dem Prototyp erstellt wird.

Um mehr über die Verwendung von Miro MCP zu erfahren, siehe Miro MCP-Server-Übersicht.

Ein KI-Editor für Codebases wie Cursor akzeptiert eine Board-URL mit Board-ID, um Code basierend auf deinem Prototyp zu erstellen.

Häufige Fragen