Miro Prototypes

Wer kann es nutzen: Alle Mitglieder mit Miro Prototypes Add-on
Welche Plä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 Einzel- und Multi-Screen-Flows erstellen, deine Designs verfeinern und Stile anwenden sowie eine interaktive Simulation deines Prototyps in der Vorschau anzeigen. Erstelle dein Design in mehreren konkreten Prompts, die jedes Element deines Prototyps generieren. Du kannst deine Prompts auch verfeinern, um nicht von vorne anfangen zu müssen.

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

HINWEIS: Die Prototyping-Erfahrung wurde zu den KI-Kollegen verschoben. Jetzt in der öffentlichen Betaversion haben einige Nutzer bereits die aktualisierte, auf KI-Kollegen basierende Eingabe für KI-erstellte Prototypen. Wenn deine Erfahrung nicht mit der Dokumentation übereinstimmt, siehe Prototypen mit KI-Kollegen (Beta) erstellen. Inhalte, die erklären, wie du deinen Output verfeinerst und iterierst, sind nach wie vor anwendbar.

Weitere Informationen: Siehe häufige Fragen.

Einen Prototyp mit Miro AI erstellen

In diesem Abschnitt wird beschrieben, wie du mit Miro AI das Prototyping startest. Um zu erfahren, wie du manuell loslegen kannst, sieh dir die Prototyping-Bibliothek an.

Neu anfangen

1. Auf einem Miro Canvas, oberhalb der Erstellungsleiste, klicke auf Sidekicks.
   Das Sidekick-Feld öffnet sich.
2. Klicke auf KI-Kollege-Bibliothek.
   Auf Prototyp in der KI-Kollege-Bibliothek zugreifen 
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. Lege fest, ob ein einzelner Bildschirm oder ein Multi-Screen-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 Senden-Pfeil oder drücke ENTER auf deiner Tastatur.
   Die Miro-KI erstellt einen Entwurf eines Prototyps auf dem Canvas.
9. (Optional) Um die Erstellung zu stoppen, klicke auf deinem Prototyp Stoppen.
10. (Optional) Um an deinem Prototyp zu iterieren, fahre fort, im Prototyp-Feld zu prompten.
    Jede Iteration erstellt eine Version deines Entwurfsprototyps.
11. Auf deinem Entwurfsprototyp wähle 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 dein Prompt verfeinern und die Schritte 7–9 wiederholen.

Prototyp mit KI-Kollegen (Betaversion) erstellen

Einige Nutzer haben möglicherweise bereits das aktualisierte KI-Kollegen-Input für die Prototypenerstellung. Dieser Abschnitt beschreibt, wie du mit KI-Kollegen mit der Prototypenerstellung beginnst. Um zu erfahren, wie man manuell beginnt, siehe Prototypenbibliothek.

TIPP: Erstelle deinen Prototypen mit dem KI-Kollege, um den KI-Verlauf zu aktivieren, der deine Prompts speichert und dir ermöglicht, die zuvor erkundeten Optionen zu überprüfen und auf jedem Board fortzufahren. Weitere Informationen findest du unter Sidekicks entwickeln die KI-Erstellung in Miro und Miro Prototypes Übersicht.

HINWEIS: Das KI-Kollege-Update für Prototypes befindet sich derzeit in der öffentlichen Betaversion. Falls deine Erfahrung nicht mit der Dokumentation in diesem Abschnitt übereinstimmt, siehe Erstelle einen Prototypen mit Miro AI.

Gehe dazu wie folgt vor:

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

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

   TIPP: Alternativ kannst du das KI-Kollege-Feld öffnen und sofort einen Prompt eingeben. Achte darauf, ausdrücklich anzugeben, dass du einen Prototyp erstellen möchtest, z.B. "Erstelle einen Prototyp für einen Checkout-Prozess."

   TIPP: Du kannst auch über Tools, Medien und Integrationen (+) im Erstellungsbalken auf das Prototyp-Format zugreifen.

3. Schreibe deinen Prompt, um den Prototyp zu beschreiben, den der KI-Kollege erstellen soll. 
4. Klicke auf den Pfeil nach oben oder drücke ENTER auf deiner Tastatur.
5. (Optional) Um die Erstellung zu stoppen, klicke auf deinem Prototyp auf Stop.
6. (Optional) Um an deinem Prototyp weiterzuarbeiten, setze die Prompting-Aktion im Prototype-Feld fort.
   Jede Iteration erstellt eine Version deines Entwurfsprototyps.
7. Wähle auf deinem Entwurfsprototyp 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 3–6 wiederholen.

TIPP: Klein anfangen und spezifisch sein. Weniger Bildschirme, die gleichzeitig erstellt werden, sorgen für genauere Ergebnisse in kürzerer Zeit. Gib die Schlüsselelemente, die du für jeden Bildschirm möchtest, explizit an, wie Schaltflächen, Abschnitte oder Aktionen.

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

TIPP: Das Erstellen eines Prototyps kann je nach Komplexität des Prompts und Größe des Inhalts 1–3 Minuten dauern. Wenn dein Prototyp länger zur Erstellung benötigt, vereinfache deinen Prompt oder reduziere die Anzahl der Bildschirme.

Canvas als Prompt verwenden

Wähle Inhalte auf dem Canvas aus, die du in deinem Prompt verwenden möchtest. Beispielsweise 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 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: Falls du das aktualisierte...
3. Klicke auf KI-Kollege-Bibliothek
   Prototyp in der KI-Kollege-Bibliothek öffnen 
4. Klicke auf Formate > Prototyp.
5. Wähle Eingabetext.
6. Gib den Gerätetyp an, dann wähle zwischen Einzel- oder Multi-Screen.
   Das Antwortfeld zeigt die Anzahl der in Schritt 1 getätigten Auswahlen 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.

TIPP: Du kannst Miro AI anweisen, spezifische Canvas-Objekte zu verwenden, indem du sie auf dem Canvas auswählst. Zum Beispiel, in deinem Prompt kannst du sagen: "Verwende die Screenshots auf dem Canvas als Leitfaden zum Aufbau des Prototyps." Wenn du viele ähnliche Objekte auf dem Canvas hast, beschreibe explizit, welche Objekte Miro AI verwenden soll.

Iteriere deinen Prototyp

Dein erster Entwurf muss nicht das perfekte Ergebnis sein. Bevor du deinen Entwurf auf das Canvas anwendest, kannst du weiter iterieren und mehrere Versionen deines Prototyps erstellen.

1. Erstellen eines Prototyps mit Miro AI. Nicht auf dem Canvas anwenden.
   Der nächste Schritt im Prototype-Panel ist Was möchtest du als nächstes tun?
2. Wähle Prototyp bearbeiten. 
3. Wähle für einen Multi-Screen-Fluss den Bildschirm aus, 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 jeweils für einen Bildschirm vorgenommen werden.

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

Mit einem Screenshot als visuellen 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 verwenden, um deinen Entwurf zu iterieren.

1. Erstelle ein Prototyp mit Miro AI. Noch 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 für einen 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 Änderungen, die du basierend auf dem ausgewählten Screenshot 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 bestehende Prototyp-Bildschirme, die bereits auf dem Board sind, 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 mit "Mit KI bearbeiten" weiter iterieren. Nutze "Mit KI bearbeiten", um zu verfeinern, anstatt neu zu bauen, zum Beispiel, wenn du eine Dark Mode-Version eines bestehenden Prototyps erstellen möchtest.

Gehe dazu wie folgt vor:

1. Für jedes auf dem Canvas angewendete Prototyp, klicke im Kontextmenü auf Mit KI bearbeiten.
   Das KI-Kollege Feld öffnet sich.
   Mit KI bearbeiten ermöglicht es dir, ein bestehendes Prototyp zu verfeinern.

   HINWEIS: Du kannst Mit KI bearbeiten und KI-Kollege jeweils nur mit einem Prototypen gleichzeitig verwenden. Um zu wechseln, schließe den KI-Kollege und öffne Mit KI bearbeiten erneut vom gewünschten Prototypen.

2. Beschreibe im Prompt-Feld die Änderungen, die du vornehmen möchtest. Zum Beispiel: "In dunkles Thema umwandeln".
3. Um dein 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) Fahre fort, den KI-Kollege zu promten und bearbeite dein Prototype weiter. Du kannst eine Version auswählen, bevor du dein Prototype auf das Canvas anwendest.
5. Oben über dem entworfenen Prototype, klicke auf Zum Canvas hinzufügen.

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

Prototype-Stile von einem Screenshot anwenden

Wenn dein Prototyp mit einer bestehenden Website oder einem Produkt übereinstimmen soll, kannst du Stile aus einem Screenshot extrahieren und auf deine Screens anwenden.

1. Erstelle einen Prototyp.
2. Wähle deinen Prototyp-Bildschirm/deine Prototyp-Bildschirme aus.
   Ein Kontextmenü erscheint.
3. Klicke auf das Miro KI-Symbol im Kontextmenü.
4. Wähle Stil aus Bild importieren.
   Importiere Stile und wende sie auf deinen Prototypen an
5. Wähle die Bilddatei aus, aus 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 in deinem Prototyp einem Thema entsprechen, wende dein Thema frühzeitig in deinem Prototyp-Design an oder als letzten Schritt.

Bildschirmfotos in Prototypen umwandeln, die du bearbeiten kannst

Du kannst einen Screenshot eines Designs oder einer Benutzeroberfläche 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 In Schaltfläche und dann auf Prototyp.
4. Wähle im Untermenü den Gerätetyp aus (Mobil, Tablet, Desktop, Benutzerdefiniert).
5. Die KI wird es als bearbeitbaren Prototyp — Text, Schaltflächen, Layout und andere Elemente — neu erstellen.
6. Du kannst diese Version nun nach Bedarf ändern, hinzufügen oder bearbeiten.

TIPP: Wandle einen Screenshot in ein bearbeitbares Mock-up um. Fordere dann Miro AI auf, weiterzubearbeiten. Du kannst auch einen Screenshot als Kontext in deinem Prompt verwenden und ein Prototyp erstellen lassen. Um mehrere Screenshots zu nutzen, wähle alle Screenshots aus und kopiere sie als Bild. Verwende dann dieses Bild als Kontext in deinem Prompt.

Eine Prototyp-Version auswählen

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

Klicke auf die Pfeile, um zwischen den Versionen zu wechseln. Wenn du eine Version gewählt hast, klicke auf Zum Canvas hinzufügen. Deine Version wird dem Canvas hinzugefügt.

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

TIPP: Bevor du auf Zur Canvas hinzufügen klickst, kannst du einen Bildschirm aus jeder Version auswählen und auf die Canvas kopieren. So stellst du sicher, dass du einen Bildschirm aus einer Version speichern kannst, die du möglicherweise verwerfen wirst. 

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

Einen Prototypen in der Vorschau anzeigen

Im Kontextmenü des Prototyps klicke 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, um einen Prototyp interaktiv zu machen

So fügst du Verbindungen zwischen Objekten in deinem Miro-Prototyp hinzu oder änderst sie:

1. Klicke auf ein Element (wie eine Schaltfläche) in deinem Prototyp.
2. Ziehe das Symbol für Verbindungslinie zum Bildschirm, mit dem es verknüpft werden soll.
3. Im Vorschaumodus führt ein Klick auf das Element die Nutzer zum verknüpften Bildschirm.

Verbindungslinien ausblenden

Für Prototypen mit vielen Verbindungen kannst du die Ansicht deines Prototyps vereinfachen, indem du die Verbindungslinien ausblendest.

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

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

Verbindungen im Fokusmodus ausblenden oder anzeigen.

Wiederhole die gleichen Schritte, um die Verbindungen anzuzeigen.

TIPP: Verwende Kurzbefehl, um Verbindungen auszublenden oder anzuzeigen. Drücke auf deiner Tastatur Shift + E. Im Canvas-Modus, um den Kurzbefehl zu verwenden, stelle sicher, dass du deinen Prototype ausgewählt hast.

Fokusmodus

Miro Prototypes enthält den Fokusmodus. Wechsle in den Fokusmodus, um an deinem Prototype zu arbeiten, ohne dass anderer Board-Inhalt sichtbar ist, was dir ermöglicht, ungestört zu arbeiten.

Um den Fokusmodus zu betreten, 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 den Designern in Figma zur Verfügung, ohne manuell neu zu erstellen. Du kannst dein Prototype oder einzelne Screens kopieren.

Ein Prototype zum Einfügen in Figma kopieren

1. Klicke auf den Prototyp-Rahmen.
   Das Format-Kontekstmenü 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 die Zwischenablage.
   Kopiere deinen Prototypen zu Figma. 
4. Füge deinen Prototypen in Figma ein. Du kannst die Hotkeys (Windows) Strg + V oder (MacOS) Befehl + V verwenden.
   Dein Prototyp wird in Figma eingefügt.

Einen Prototyp-Bildschirm zu Figma kopieren

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

Teile einen Link zu deinem Prototyp (Betaversion)

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

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 Prototyp teilen-Dialogfeld öffnet sich.
3. Klicke auf Link kopieren.
4. (Optional) Klicke auf In Browser ansehen, um zu sehen, wie Personen mit deinem Link deinen Prototyp betrachten.
5. Teile deinen Link.

HINWEIS: Damit externe Nutzer Zugriff haben, muss dein Board öffentlich sein. Externe Nutzer können nur im Fokusmodus auf das Prototyp zugreifen und keinen anderen Inhalt auf dem Canvas sehen. Sie können mit Hotspots und Prototyp-Flows interagieren. Wenn die Board-Berechtigungen es erlauben, können externe Nutzer auch kommentieren.

TIPP: Du kannst auch einen teilbaren Link im Fokusmodus kopieren: Klicke oben rechts auf die drei vertikalen Punkte. Klicke dann auf Prototyp freigeben. Und im Vorschau-Modus: Klicke oben rechts auf Prototyp freigeben.

Deinen Prototyp exportieren

Du kannst deinen Prototyp als SVG exportieren. Du kannst auch den Miro Model Context Protocol (MCP) Server verwenden, um in einen 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. Im Kontextmenü des Prototyps klicke 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 an, sodass 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. Das Exportieren als Bild-Dialogfeld wird geöffnet, dann wähle Vektor – SVG.

HINWEIS: Bei SVG-Exports von Prototypen mit Bildern werden beim Import der SVG in andere Bearbeitungssoftware, wie Figma, Bilder durch Platzhalter ersetzt.

Exportieren mit Miro MCP Server

Um deinen Prototyp in einen Codebase-KI-Editor wie zum Beispiel Cursor zu exportieren, gib die Board-URL mit der Board ID in deinem Prompt an. Stelle sicher, dass du Anweisungen zur Erstellung von Code basierend auf dem Prototyp bereitstellst.

Weitere Informationen zur Nutzung von Miro MCP findest du unter Miro MCP Server Übersicht.

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

Häufige Fragen