Miro Prototypes

Kto może z tego korzystać: Członkowie zespołu
Dostępne w abonamentach: Business, Enterprise (licencja Accelerate)
Na jakich platformach: Przeglądarka, aplikacja komputerowa

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

Możesz generować przepływy jedno- i wieloekranowe, dopracowywać projekty, stosować style i podglądać interaktywną symulację prototypu. Buduj projekt za pomocą kilku konkretnych promptów, które generują poszczególne elementy 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 dostępny w planie Business. Jeśli masz starszy plan Business lub plan Starter, zobacz co się zmienia. Miro Prototypes jest dostępny w ramach licencji Accelerate dla planów Enterprise.

Więcej informacji: Zobacz FAQ.

Utwórz prototyp za pomocą Miro AI

W tej sekcji opisano, jak rozpocząć prototypowanie z użyciem Miro AI. Aby dowiedzieć się, jak zacząć ręcznie, zobacz Bibliotekę prototypów.

Zacznij od zera

1. Na planszy Miro, nad paskiem tworzenia kliknij Współpracowników AI.
   Otworzy się panel współpracowników AI.
2. Kliknij Bibliotekę współpracowników AI.
   Dostęp do formatu Prototype w bibliotece współpracowników AI 
3. Kliknij Formaty > Prototype.
4. Określ, czy chcesz rozpocząć od promptu tekstowego czy od zrzutu ekranu.
5. Wybierz typ urządzenia.
6. Wskaż pojedynczy ekran lub 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ć sugerowanych tagów, aby rozpocząć prompt.
8. Dokończ prompt, a następnie kliknij Wyślij strzałkę, lub naciśnij ENTER na klawiaturze.
   Miro AI generuje szkic prototypu na planszy.
9. (Opcjonalnie) Aby zatrzymać generowanie, na prototypie kliknij Zatrzymaj.
10. (Opcjonalnie) Aby wprowadzać kolejne iteracje prototypu, kontynuuj wpisywanie promptów w Prototype panelu.
    Każda iteracja tworzy wersję twojego roboczego prototypu.
11. Na swoim roboczym prototypie wybierz jedną z poniższych opcji:
    • Apply to canvas
      Teraz możesz edytować prototyp na planszy.
    • Discard all
      Twój szkic prototypu został usunięty z planszy. Możesz dopracować prompt i powtórzyć kroki 7–9.

Utwórz prototyp ze współpracownikami AI (wersja beta)

Niektórzy użytkownicy mogą już mieć zaktualizowany interfejs współpracowników AI do prototypowania. W tej sekcji opisano, jak rozpocząć prototypowanie ze współpracownikami 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 przejrzeć wcześniej sprawdzone opcje i wznowić pracę na dowolnej tablicy. Więcej informacji znajdziesz w Współpracownicy AI — ewolucja tworzenia z 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 Współpracownicy AI.

2. W polu prompt kliknij Utwórz prototyp.
   Sidekicks jest gotowy, by pomóc Ci stworzyć prototyp.
   Rozpocznij prototyp w panelu Sidekicks.

   Wskazówka: Alternatywnie możesz otworzyć panel Sidekicks i od razu zacząć wpisywać prompty. Upewnij się, że wyraźnie zaznaczysz, że chcesz utworzyć prototyp, np. „Utwórz prototyp przepływu płatności”.

   Wskazówka: Możesz też uzyskać dostęp do formatu prototypu z Narzędzia, Multimedia i Integracje (+) na pasku Tworzenia.

3. Napisz prompt opisujący prototyp, który Sidekicks ma wygenerować. 
4. Kliknij strzałkę w górę albo naciśnij ENTER na klawiaturze.
5. (Opcjonalnie) Aby zatrzymać generowanie, w prototypie kliknij Stop.
6. (Opcjonalnie) Aby iterować nad swoim prototypem, kontynuuj wpisywanie promptów w panelu Prototype.
   Każda iteracja tworzy wersję twojego szkicu prototypu.
7. W swojej wersji roboczej prototypu wybierz jedną z następujących opcji:
   • Zastosuj na planszy
     Twój prototyp jest teraz edytowalny na planszy.
   • Odrzuć wszystko
     Twoja wersja robocza prototypu została usunięta z planszy. Możesz dopracować swój prompt i powtórzyć kroki 3–6.

Wskazówka: Zacznij od mniejszej liczby ekranów i podaj konkretne wskazówki. Mniej ekranów generowanych jednocześnie 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 na planszy kilka wersji roboczych prototypów. Porównaj je, przeanalizuj decyzje projektowe i dopracuj najlepszą opcję.

Wskazówka: Generowanie prototypu może zająć 1–3 minuty, w zależności od złożoności promptu i rozmiaru zawartości. Jeśli generowanie prototypu zajmuje dłużej, uprość prompt lub zmniejsz liczbę ekranów.

Wskazówka: Możesz umieścić URL w promptcie i poprosić współpracownika AI o zastosowanie stylów z podanej strony.

Użyj planszy jako promptu

Wybierz zawartość na planszy, którą chcesz użyć w promptcie. Na przykład masz brief projektowy w Dokumencie lub na karteczkach. Prototypy mogą wykorzystać tę zawartość jako kontekst do wygenerowania prototypu. 

Wykonaj następujące kroki:

1. Wybierz zawartość planszy. Na przykład Dokument lub karteczki. Opcjonalnie możesz zaznaczyć wiele obiektów.
2. Na planszy Miro, nad Creation bar kliknij Sidekicks.
   Otworzy 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 wytycznych i wybranych elementów z planszy.

UWAGA: Możesz dodać na planszę jeden lub więcej zrzutów ekranu, a Miro Prototypes utworzy z wybranych zrzutów wiele ekranów w Twoim prototypie.

WSKAZÓWKA: Możesz nakierować Miro AI, aby użył określonych obiektów z planszy, zaznaczając je na planszy. Na przykład w prompt możesz napisać "Użyj zrzutów ekranu na planszy jako wskazówek do zbudowania prototypu." Jeśli na planszy znajduje się wiele podobnych obiektów, opisz wyraźnie, których chcesz użyć.

Konwersja osadzonej ramki Figma na Miro Prototypes

1. W Figma wybierz odpowiednią ramkę.
2. Kliknij prawym przyciskiem myszy na ramkę i wybierz Copy/Paste as > Copy link to selection. 
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 Convert to w menu kontekstowym osadzenia.
8. Wybierz Prototyp z menu Konwertuj na.
9. Miro AI przekonwertuje osadzony prototyp z Figma na edytowalny prototyp w Miro.

Dopracowywanie prototypu

Twój pierwszy szkic może nie być idealny. Zanim zastosujesz go na planszy, możesz wprowadzać kolejne poprawki i tworzyć wiele wersji prototypu.

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

UWAGA: Możesz edytować tylko jeden ekran naraz.

WSKAZÓWKA: Użyj kontekstu planszy. Wybierz dokumenty, diagramy, karteczki lub inną zawartość tablicy, aby przekazać prompt Miro AI.

Iteruj z wykorzystaniem zrzutu ekranu jako kontekstu wizualnego

Zanim zastosujesz prototyp na planszy, możesz użyć zrzutu ekranu lub innego prototypu już obecnego na planszy jako kontekstu do dopracowania szkicu.

1. Utwórz prototyp przy użyciu 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, który chcesz zmodyfikować.
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 generuje nową wersję twojego prototypu. 

Wskazówka: Możesz użyć istniejących ekranów prototypu znajdujących się 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 dopracować prototyp zamiast go przebudowywać — na przykład, gdy chcesz stworzyć wersję w trybie ciemnym istniejącego prototypu.

Wykonaj następujące kroki:

1. W przypadku dowolnego prototypu zastosowanego na planszy, w menu kontekstowym kliknij Edytuj za pomocą AI.
   Otworzy się panel współpracownika AI.
    
   Funkcja Edytuj za pomocą AI umożliwia dopracowanie istniejącego prototypu.

   UWAGA: Możesz używać Edytuj za pomocą AI i współpracownika AI tylko dla jednego prototypu naraz. Aby przełączyć się, zamknij współpracownika AI i ponownie uruchom Edytuj za pomocą AI na docelowym prototypie.

2. W polu prompt opisz zmiany, które chcesz wprowadzić. Na przykład: „Przekształć na ciemny motyw”.
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 swój prototyp. Możesz wybrać wersję zanim zastosujesz prototyp na planszy.
5. Nad wersją roboczą 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 poinstruj współpracownika AI, aby zastosował styl z dołączonego adresu URL (pamiętaj, aby podać pełny adres URL).
5. Współpracownik AI zastosuje styl wizualny z tego adresu URL w zaktualizowanej wersji prototypu na 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 swoich ekranów.

1. Utwórz prototyp.
2. Wybierz ekran(y) swojego 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 prototypie
5. Wybierz plik obrazu, z którego chcesz zaimportować styl.
6. Style zostaną zastosowane w Twoim prototypie.

Wskazówka: Stosuj style na początku lub na końcu. Aby upewnić się, że wszystkie elementy w twoim prototypie pasują do motywu, zastosuj motyw wcześnie podczas projektowania prototypu albo jako ostatni krok.

Przekształć zrzuty ekranu w edytowalne prototypy

Możesz przekształcić zrzut ekranu projektu lub interfejsu konkurencji w edytowalny prototyp.

1. Dodaj zrzut ekranu do tablicy Miro.
2. Kliknij obraz, aby otworzyć menu kontekstowe.
3. Kliknij przycisk Convert to, a następnie kliknij Prototype.
4. W podmenu wybierz typ urządzenia (Mobile, Tablet, Desktop, Custom).
5. AI odtworzy go jako edytowalny prototyp — tekst, przyciski, układ i inne elementy.
6. Możesz teraz modyfikować, dodawać elementy lub edytować tę wersję w razie potrzeby.

Wskazówka: 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, zaznacz wszystkie zrzuty i wybierz Kopiuj jako obraz. Następnie użyj obrazu jako kontekstu w promptcie.

Wybierz wersję prototypu

Każde udoskonalenie tworzy wersję prototypu. W miarę dopracowywania prototypu selektor wersji znajduje się nad jego szkicem. 

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

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

Wskazówka: Zanim klikniesz Add to canvas, możesz wybrać ekran z dowolnej wersji, skopiować go i wkleić na planszę. Dzięki temu zapiszesz ekran z wersji, którą możesz później odrzucić. 

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

Podgląd prototypu

W menu kontekstowym prototypu kliknij Preview. Podgląd zostanie załadowany.

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 był interaktywny

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

1. Kliknij element (np. przycisk) w prototypie.
2. Przeciągnij ikonę linii łączącej na ekran, do którego ma prowadzić.
3. W trybie podglądu kliknięcie elementu przeniesie Cię do powiązanego ekranu.

Ukryj linie łączące

Jeśli w prototypie jest wiele linii łączących, możesz je ukryć, aby uprościć wyświetlanie 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 używać skrótów klawiszowych, zaznacz prototyp.

Tryb skupienia

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

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

Tryb skupienia umożliwia pracę w Miro Prototypes bez rozpraszaczy.

Kopiuj do Figmy

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

Skopiuj prototyp do Figmy

1. Kliknij ramkę prototypu.
   Pojawia 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.
   Skopiuj prototyp do Figmy. 
4. W Figmie wklej prototyp. Możesz użyć skrótu (Windows) Ctrl + V lub (macOS) Command + V .
   Prototyp zostanie wklejony w Figmie.

Skopiuj ekran prototypu do Figmy

1. Kliknij, aby wybrać ekran prototypu.
   Pojawia się menu kontekstowe widżetu.
2. W menu kontekstowym kliknij trzy pionowe 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ć skrótów (Windows) Ctrl + V lub (MacOS) Command + V .
   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. Skopiuj i uruchom to polecenie w swoim narzędziu AI po połączeniu:
   "Pobierz ten plik projektowy i zaimplementuj istotne elementy projektu. [Odpowiedni link do tablicy Miro]"
3. Będziesz mieć możliwość wyświetlenia Miro Prototype na swojej tablicy Miro i przeglądania Claude Code w oknie terminala.

Udostępnij link do swojego prototypu (wersja beta)

Możesz skopiować unikalny link, aby udostępnić go członkom zespołu lub zewnętrznym stakeholderom bez konta Miro. 

1. Z menu kontekstowego prototypu kliknij trzy pionowe 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 osoba mająca link zobaczy Twój prototyp.
5. Udostępnij link.

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

Wskazówka: Możesz też skopiować link do udostępniania 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ć swój prototyp jako SVG. Możesz także użyć Miro Model Context Protocol (MCP) Server, aby wyeksportować go do edytora AI bazy kodu; zespoły mogą wykorzystać eksport do wygenerowania działającego kodu i przyspieszenia rozwoju.

Eksport do SVG

1. W menu kontekstowym prototypu kliknij pionowe trzy kropki.
2. Kliknij Udostępnij i eksportuj > Eksportuj jako obraz.
   Otworzy się okno wyboru oraz okno modalne Eksportuj obraz jako.
3. Dopasuj okno wyboru tak, aby objęło twój prototyp.
4. W oknie modalnym Eksportuj obraz jako wybierz Wektorowy – 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 zawierającego obrazy, jeśli zaimportujesz SVG do innego oprogramowania do edycji, takiego jak Figma, obrazy zostaną zastąpione symbolami zastępczymi.

Eksport za pomocą Miro MCP Server

Aby wyeksportować prototyp do edytora AI pracującego na bazie kodu, na przykład Cursor, dołącz do prompta adres URL tablicy zawierający jej identyfikator (ID). Upewnij się, że podasz instrukcje umożliwiające wygenerowanie kodu na podstawie prototypu.

Aby dowiedzieć się więcej o korzystaniu z Miro MCP, zobacz Omówienie serwera Miro MCP.

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

FAQ