Miro Prototypes

Kto może z tego korzystać: Członkowie zespołu
Które plany: Business, Enterprise (płatny dodatek)
Na których platformach: Przeglądarka, aplikacja desktopowa

Miro Prototypes umożliwia tworzenie interfejsów użytkownika bezpośrednio na planszy Miro. 

Możesz generować przepływy jedno- i wieloekranowe, dopracowywać projekty i stosować style oraz podglądać interaktywną symulację prototypu. Twórz projekt w kilku konkretnych promptach, które generują każdy element prototypu. Możesz też dopracowywać prompty, aby nie zaczynać od nowa.

W tym artykule wyjaśniono, jak korzystać z funkcji Miro Prototypes. Aby uzyskać ogólne informacje o Miro Prototypes, zobacz Przegląd Miro Prototypes. 

Uwaga: Miro Prototypes jest teraz wliczony w abonament Business. Jeśli korzystasz z poprzedniego abonamentu Business lub z abonamentu Starter, zobacz co się zmienia.

Więcej informacji: Zobacz FAQ.

Utwórz prototyp za pomocą Miro AI

Ta sekcja opisuje, jak rozpocząć prototypowanie za pomocą Miro AI. Aby dowiedzieć się, jak zacząć ręcznie, zobacz Biblioteka prototypów.

Zacznij od początku

1. Na planszy Miro, nad paskiem tworzenia kliknij Współpracownicy AI.
   Otworzy się panel Współpracownika AI.
2. Kliknij Biblioteka współpracowników AI.
   Dostęp do prototypu w bibliotece współpracowników AI 
3. Kliknij Formaty > Prototyp.
4. Wskaż, czy chcesz zacząć od prompta tekstowego, czy od zrzutu ekranu.
5. Wskaż typ urządzenia.
6. Wskaż, czy ma to być pojedynczy ekran czy prototyp wieloekranowy.
7. Postępuj zgodnie z instrukcjami na ekranie, aby napisać prompt lub przesłać zrzut ekranu. W polu odpowiedzi możesz opcjonalnie użyć tagów sugestii, aby rozpocząć prompt.
8. Dokończ prompt, a następnie kliknij strzałkę Wyślij lub naciśnij ENTER na klawiaturze.
   Miro AI generuje wersję roboczą prototypu na planszy.
9. (Opcjonalnie) Aby zatrzymać generowanie, na prototypie kliknij Zatrzymaj.
10. (Opcjonalnie) Aby iterować prototyp, kontynuuj wpisywanie promptu w Prototyp panelu.
    Każda iteracja tworzy wersję twojego szkicu prototypu.
11. Na swoim szkicu prototypu wybierz jedną z następujących opcji:
    • Zastosuj na planszy
      Twój prototyp można teraz edytować na planszy.
    • Usuń wszystko
      Twój szkic został usunięty z planszy. Możesz dopracować prompt i powtórzyć kroki 7–9.

Tworzenie prototypu ze współpracownikami AI (wersja beta)

Niektórzy użytkownicy mogą już mieć zaktualizowany interfejs współpracowników AI do prototypowania. Ta sekcja opisuje, jak rozpocząć prototypowanie za pomocą współpracowników AI. Aby dowiedzieć się, jak rozpocząć ręcznie, zobacz Biblioteka prototypów.

Wskazówka: Utwórz prototyp za pomocą współpracowników AI, aby włączyć historię czatu AI, która zapamiętuje Twoje prompty, dzięki czemu możesz przeglądać wcześniej eksplorowane opcje i wznawiać pracę na dowolnej tablicy. Aby uzyskać więcej informacji, zobacz Współpracownicy AI — rozwój tworzenia z użyciem AI w Miro oraz Przegląd Miro Prototypes.

UWAGA: Aktualizacja współpracowników AI dla prototypów jest obecnie w publicznej becie. Jeśli Twoje doświadczenie nie odpowiada dokumentacji w tej sekcji, zobacz Tworzenie prototypu za pomocą Miro AI.

Wykonaj następujące kroki:

1. Na planszy Miro, nad paskiem tworzenia kliknij Współpracownicy AI.
   Otworzy się panel boczny Współpracownicy AI.

2. W polu prompt kliknij Utwórz prototyp.
   Współpracownicy AI są gotowi Ci pomóc stworzyć prototyp.
   Rozpocznij prototyp w panelu Współpracowników AI.

   TIP: Alternatywnie możesz otworzyć panel Współpracowników AI i od razu zacząć wpisywać prompt. Upewnij się, że wyraźnie zaznaczysz, że chcesz stworzyć prototyp, np. „Utwórz prototyp dla procesu realizacji zamówienia.”

   TIP: Do formatu prototypu możesz też przejść z Narzędzia, Media i Integracje (+) w pasku tworzenia.

3. Wpisz prompt opisujący prototyp, który chcesz, aby Współpracownicy AI wygenerowali. 
4. Kliknij strzałkę w górę lub naciśnij ENTER na klawiaturze.
5. (Opcjonalnie) Aby zatrzymać generowanie, kliknij Stop w prototypie.
6. (Opcjonalnie) Aby wprowadzić iteracje w prototypie, kontynuuj wpisywanie promptu w Prototype panelu.
   Każda iteracja tworzy wersję Twojego roboczego prototypu.
7. Na roboczym prototypie wybierz jedną z następujących opcji:
   • Zastosuj na planszy
     Prototyp można teraz edytować na planszy.
   • Odrzuć wszystko
     Twój roboczy prototyp zostanie usunięty z planszy. Możesz dopracować swój prompt i powtórzyć kroki 3–6.

Wskazówka: Zacznij od małych kroków i bądź konkretny. Generowanie mniejszej liczby ekranów naraz daje dokładniejsze wyniki w krótszym czasie. Wyraźnie określ kluczowe elementy, które chcesz mieć na każdym ekranie, takie jak przyciski, sekcje czy akcje.

Wskazówka: Zastosuj kilka wersji roboczych prototypu na planszy. Możesz je porównać, przeanalizować decyzje projektowe i dalej dopracowywać najlepszą opcję.

WSKAZÓWKA: Wygenerowanie prototypu może zająć 1–3 minuty, w zależności od złożoności promptu i rozmiaru zawartości. Jeśli wygenerowanie prototypu trwa dłużej, uprość swój prompt lub zmniejsz liczbę ekranów.

WSKAZÓWKA: Możesz dołączyć adres URL do swojego promptu i poprosić współpracownika AI o zastosowanie stylów ze strony, do której prowadzi link.

Użyj planszy jako promptu

Wybierz zawartość na planszy, aby użyć jej w swoim prompcie. Na przykład możesz mieć brief projektowy w dokumencie lub na karteczkach. Prototypy mogą wykorzystać zawartość jako kontekst podczas tworzenia prototypu. 

Wykonaj następujące kroki:

1. Wybierz zawartość planszy. Na przykład dokument (Doc) lub karteczki. Opcjonalnie możesz wybrać wiele obiektów.
2. Na planszy Miro, nad Paskiem tworzenia kliknij Sidekicks.
   Otwiera się panel Sidekick.
3. Kliknij ikonę Prototype na dole pola prompt.
4. Postępuj zgodnie z instrukcjami wyświetlanymi w polu prompt, aby wygenerować prototyp.
   Miro generuje prototyp na podstawie twoich specyfikacji i wybranej zawartości planszy.

NOTE: Możesz dodać na planszę jeden lub więcej zrzutów ekranu i sprawić, że Miro Prototypes utworzy z wybranych zrzutów wiele ekranów w prototypie.

TIP: Możesz poprosić Miro AI, aby użyło konkretnych obiektów na planszy, zaznaczając je na planszy. Na przykład w swoim prompt możesz napisać "Użyj zrzutów ekranu na planszy jako przewodników przy budowaniu prototypu." Jeśli na planszy masz wiele podobnych obiektów, opisz wyraźnie, których obiektów chcesz, aby Miro AI użyło.

Konwersja osadzonej ramki Figma na Miro Prototype

1. W Figma wybierz odpowiednią ramkę.
2. Kliknij prawym przyciskiem myszy ramkę i wybierz Kopiuj/Wklej jako > Kopiuj link do zaznaczenia. 
3. Przejdź do swojej tablicy Miro.
4. Wklej link z Figma.
5. Połącz Figma (jeśli jeszcze tego nie zrobiłeś/aś).
6. Wybierz osadzenie Figma na planszy.
7. Kliknij Konwertuj na w menu kontekstowym osadzenia.
8. Wybierz Prototyp z menu Konwertuj na.
9. Miro AI przekształci osadzony prototyp z Figma w edytowalny prototyp Miro.

Iterowanie prototypu

Twój pierwszy szkic może nie być idealny. Zanim zastosujesz go na planszy, możesz dalej go modyfikować i tworzyć kolejne wersje prototypu.

1. Utwórz prototyp z Miro AI. Nie stosuj na planszy.
   Następny krok w panelu Prototyp to Co chcesz zrobić dalej?
2. Wybierz Edytuj prototyp. 
3. W przypadku przepływu wieloekranowego wybierz ekran, który chcesz zmodyfikować.
4. W polu odpowiedzi opisz zmiany, które chcesz wprowadzić.
5. Kliknij strzałkę w górę lub naciśnij Enter na klawiaturze.
   Miro wygeneruje nową wersję twojego prototypu.

NOTE: Edycje można wprowadzać tylko po jednym ekranie naraz.

Wskazówka: Skorzystaj z kontekstu planszy. Wybierz dokumenty, diagramy, karteczki lub inne elementy na planszy, aby użyć ich jako prompt dla Miro AI.

Iteracja z wykorzystaniem zrzutu ekranu jako kontekstu wizualnego

Zanim zastosujesz prototyp na planszy, możesz użyć zrzutu ekranu lub innego prototypu już znajdującego się na planszy jako kontekstu do iterowania wersji roboczej.

1. Utwórz prototyp z Miro AI. Nie stosuj na planszy.
   Następnym krokiem w panelu Prototyp jest Co chcesz zrobić dalej?
2. Kliknij Edytuj prototyp.
3. W przypadku przepływu wieloekranowego wybierz ekran, nad którym chcesz pracować.
4. Wybierz zrzut ekranu na tablicy.
5. W polu odpowiedzi opisz zmiany, które chcesz wprowadzić na podstawie wybranego zrzutu ekranu.
6. Kliknij strzałkę w górę lub naciśnij Enter na klawiaturze.
   Miro wygeneruje nową wersję twojego prototypu. 

Wskazówka: Możesz użyć istniejących ekranów prototypu znajdujących się już na tablicy jako kontekstu wizualnego. Utwórz prototyp i zastosuj go na tablicy. Wybierz ekran.

Edytuj z pomocą AI

Dla każdego prototypu już zastosowanego na planszy możesz kontynuować iteracje za pomocą Edytuj z pomocą AI. Użyj Edytuj z pomocą AI, aby udoskonalić projekt zamiast tworzyć go od nowa — na przykład gdy chcesz stworzyć wersję w trybie ciemnym istniejącego prototypu.

Wykonaj następujące kroki:

1. Dla dowolnego prototypu zastosowanego na planszy w menu kontekstowym kliknij Edytuj z AI.
   Otworzy się panel współpracownika AI.
    
   Edytuj z AI umożliwia dopracowanie istniejącego prototypu.

   UWAGA: Z funkcji Edytuj z AI i współpracownika AI możesz korzystać tylko dla jednego prototypu naraz. Aby przełączyć się, zamknij współpracownika AI i ponownie otwórz Edytuj z AI w docelowym prototypie.

2. W polu prompt opisz zmiany, które chcesz wprowadzić. Na przykład: "Przekształć na motyw ciemny".
3. Aby wykonać prompt, kliknij przycisk ze strzałką w górę lub naciśnij ENTER na klawiaturze.
   Współpracownik AI generuje dopracowany prototyp.
4. (Opcjonalnie) Kontynuuj wysyłanie promptów do współpracownika AI i iteruj prototyp. Możesz wybrać wersję zanim zastosujesz prototyp na planszy.
5. Powyżej wersji roboczej prototypu kliknij Dodaj do planszy.

Zastosuj style prototypu z adresu URL

Aby zastosować styl z istniejącego adresu URL do prototypu:

1. Utwórz prototyp.
2. Wybierz ekran(y) prototypu.
   Pojawia się menu kontekstowe.
3. W menu kontekstowym kliknij Edytuj za pomocą AI, aby otworzyć panel Współpracownika AI.
4. W polu prompt poproś Współpracownika AI o zastosowanie stylu z dołączonego adresu URL (upewnij się, że podałeś pełny adres URL).
5. Współpracownik AI zastosuje styl wizualny z adresu URL w zaktualizowanej wersji prototypu na Twojej tablicy.

Zastosuj style prototypu ze zrzutu ekranu

Jeśli chcesz, aby prototyp pasował do istniejącej strony internetowej lub produktu, możesz wyodrębnić style ze zrzutu ekranu i zastosować je do ekranów prototypu.

1. Utwórz prototyp.
2. Wybierz ekran(y) prototypu.
   Pojawia się menu kontekstowe.
3. Kliknij ikonę Miro AI w menu kontekstowym.
4. Wybierz Importuj styl z obrazu.
   Importuj style i zastosuj je w swoim prototypie
5. Wybierz plik obrazu, z którego chcesz zaimportować styl.
6. Style zostaną zastosowane w Twoim prototypie.

Wskazówka: Zastosuj style na początku lub na końcu. Aby wszystkie elementy prototypu pasowały do motywu, zastosuj motyw na początku projektowania prototypu lub jako krok końcowy.

Konwertowanie zrzutów ekranu na edytowalne prototypy

Możesz zamienić zrzut ekranu projektu lub interfejsu konkurenta na edytowalny prototyp.

1. Dodaj zrzut ekranu do swojej tablicy Miro.
2. Kliknij obraz, aby otworzyć menu kontekstowe.
3. Kliknij przycisk Konwertuj na, a następnie kliknij Prototyp.
4. W podmenu wybierz typ urządzenia (Telefon, Tablet, Komputer, Niestandardowe).
5. AI przebuduje go jako edytowalny prototyp — tekst, przyciski, układ i inne elementy.
6. Teraz możesz modyfikować, dodawać elementy lub edytować tę wersję w razie potrzeby.

TIP: Przekształć zrzut ekranu w edytowalną makietę. Następnie podaj prompt Miro AI, aby kontynuować edycję. Możesz też użyć zrzutu ekranu jako kontekstu w promptcie i wygenerować prototyp. Aby użyć wielu zrzutów ekranu, wybierz wszystkie zrzuty i skopiuj je jako obraz. Następnie użyj obrazu jako kontekstu w promptcie.

Wybierz wersję prototypu

Każde udoskonalenie tworzy wersję prototypu. Podczas udoskonalania prototypu selektor wersji znajduje się nad jego szkicem. 

Kliknij strzałki, aby przełączać się między wersjami. Gdy wybierzesz wersję, kliknij Add to canvas. Wybrana wersja zostanie zastosowana na planszy.

Wybierz, którą wersję prototypu chcesz dodać do planszy.

Wskazówka: Zanim klikniesz Dodaj do planszy, możesz wybrać ekran z dowolnej wersji i skopiować go, a następnie wkleić na planszę. Dzięki temu możesz zapisać ekran z wersji, którą możesz odrzucić. 

Wskazówka: Po dodaniu wersji do planszy możesz uzyskać dostęp do wcześniejszych wersji w historii czatu AI.

Podgląd prototypu

Z menu kontekstowego prototypu kliknij Podgląd. Wyświetli się podgląd.

Wskazówka: Aby uzyskać w pełni interaktywny podgląd prototypu, użyj linii łączących między ekranami.

Dodaj linie łączące, aby prototyp stał się interaktywny

Aby dodać lub zmienić połączenia między obiektami w prototypie Miro:

1. Kliknij element (np. przycisk) w prototypie.
2. Przeciągnij ikonę Linia łącząca na ekran, z którym ma być połączona.
3. W trybie podglądu kliknięcie elementu przeniesie użytkowników do powiązanego ekranu.

Ukryj linie łączące

Jeśli prototyp zawiera wiele linii łączących, możesz je ukryć, aby uprościć widok prototypu.

W trybie planszy wybierz swój prototyp. W menu kontekstowym kliknij trzy kropki. Następnie wybierz Ukryj łączniki.

W trybie skupienia, w lewym górnym rogu kliknij przycisk Ukryj | Pokaż łączniki.

Ukryj lub pokaż łączniki w trybie skupienia.

Powtórz te same kroki, aby pokazać łączniki.

Wskazówka: Użyj skrótów klawiszowych, aby ukryć lub pokazać łączniki. Na klawiaturze naciśnij Shift + E. W trybie planszy, aby korzystać ze skrótów, upewnij się, że prototyp jest zaznaczony.

Tryb skupienia

Miro Prototypes obejmuje tryb skupienia. Wejdź do trybu skupienia, aby pracować nad swoim prototypem bez widoku innych elementów tablicy, co pozwala pracować bez rozproszeń.

Aby przejść do trybu skupienia, zaznacz swój prototyp Miro. W menu kontekstowym kliknij Tryb skupienia.

Tryb skupienia umożliwia pracę z Miro Prototypes bez rozproszeń.

Kopiuj do Figmy

Przekaż swój prototyp projektantom w Figmie bez ręcznego odtwarzania. Możesz skopiować cały prototyp lub poszczególne ekrany.

Kopiowanie prototypu do Figmy

1. Kliknij ramkę prototypu.
   Pojawi się menu kontekstowe Format.
2. W menu kontekstowym kliknij pionowe trzy kropki, aby otworzyć menu Więcej.
3. Kliknij Kopiuj do Figmy.
   Miro kopiuje prototyp do schowka.
   Kopiuj prototyp do Figmy. 
4. W Figmie wklej prototyp. Możesz użyć (Windows) Ctrl + V lub (MacOS) Command + V .
   Prototyp zostanie wklejony do Figmy.

Kopiowanie ekranu prototypu do Figmy

1. Kliknij, aby zaznaczyć ekran prototypu.
   Pojawia się menu kontekstowe widżetu.
2. W menu kontekstowym kliknij pionowe trzy kropki, aby otworzyć menu Więcej.
3. Kliknij Kopiuj do Figmy.
   Miro kopiuje ekran prototypu do schowka.
4. W Figmie wklej prototyp. Możesz użyć (Windows) Ctrl + V lub (macOS) Command + V skrótów.
   Ekran prototypu zostanie wklejony w Figmie.

Połączenie Claude Code z Miro Prototypes

Twórz Miro Prototypes z projektów Claude Code za pomocą Model Context Protocol.

1. Połącz się z serwerem MCP Miro, postępując zgodnie z tymi instrukcjami.
2. Po połączeniu skopiuj i uruchom to polecenie w swoim narzędziu AI:
   "Pobierz ten plik projektu i zaimplementuj odpowiednie elementy projektu. [Relevant Miro board link]"
3. Zobaczysz Miro Prototype na swojej tablicy Miro i Claude Code w oknie Terminala.

Udostępnij link do swojego prototypu (wersja ) beta

Możesz skopiować unikalny link i udostępnić go członkom zespołu lub zewnętrznym stakeholderom, nawet jeśli nie mają konta Miro. 

1. W menu kontekstowym prototypu kliknij pionowe trzy kropki, aby otworzyć menu Więcej.
2. Kliknij Udostępnij i eksportuj > Udostępnij prototyp.
   Otworzy się okno modalne Udostępnij prototyp.
3. Kliknij Kopiuj link.
4. (Opcjonalnie) Kliknij Podgląd w przeglądarce, aby zobaczyć, jak osoby mające link zobaczą Twój prototyp.
5. Udostępnij link.

UWAGA: Aby użytkownicy zewnętrzni mogli uzyskać dostęp, Twoja tablica musi być publiczna. Użytkownicy zewnętrzni mają dostęp tylko do prototypu w trybie skupienia i nie mogą przeglądać innych treści na planszy. Mogą wchodzić w interakcje z hotspotami i przepływem prototypu. Jeśli uprawnienia tablicy na to pozwalają, użytkownicy zewnętrzni mogą także komentować.

WSKAZÓWKA: Możesz też skopiować link do udostępnienia w trybie skupienia: w prawym górnym rogu kliknij pionowe trzy kropki. Następnie kliknij Udostępnij prototyp. A w trybie podglądu: w prawym górnym rogu kliknij Udostępnij prototyp.

Eksportuj prototyp

Możesz wyeksportować prototyp jako SVG. Możesz też użyć Miro Model Context Protocol (MCP) Server, aby wyeksportować do edytora AI dla bazy kodu; zespoły mogą dzięki eksportowi wygenerować działający kod i przyspieszyć rozwój.

Eksport do SVG

1. W menu kontekstowym prototypu kliknij pionowe trzy kropki.
2. Kliknij Udostępnij i eksportuj > Eksportuj jako obraz.
   Pojawi się okno zaznaczania i okno modalne Eksportuj obraz jako.
3. Dopasuj okno zaznaczania tak, aby objęło prototyp.
4. W oknie modalnym Eksportuj obraz jako wybierz Wektor – SVG.
5. Kliknij Eksportuj. 

Wskazówka: Możesz wyeksportować pojedynczy ekran jako SVG z menu kontekstowego. Wybierz ekran w swoim prototypie. W menu kontekstowym kliknij pionowe trzy kropki, a następnie kliknij Eksportuj jako obraz. Otworzy się okno modalne Eksportuj jako obraz, wybierz wtedy Wektor – SVG.

Uwaga: W przypadku eksportu prototypu do SVG z obrazami, jeśli zaimportujesz SVG do innego programu do edycji, takiego jak Figma, obrazy zostaną zastąpione symbolami zastępczymi.

Eksport przy użyciu serwera Miro MCP

Aby wyeksportować prototyp do edytora AI bazy kodu, np. Cursor, dołącz do promptu adres URL tablicy zawierający identyfikator tablicy. Upewnij się, że dołączasz instrukcje umożliwiające wygenerowanie kodu na podstawie prototypu.

Aby dowiedzieć się więcej o korzystaniu z Miro MCP, zobacz Przegląd serwera Miro MCP.

Edytor AI bazy kodu, taki jak Cursor, przyjmuje URL tablicy Miro zawierający identyfikator tablicy, aby wygenerować kod na podstawie prototypu.

FAQ