Miro Prototypes

Kto może to zrobić: Wszyscy członkowie z dodatkiem Miro Prototypes
Jakie abonamenty: Starter, Business, Enterprise
Na których platformach: Przeglądarka, Aplikacja komputerowa

Miro Prototypes pozwala tworzyć interfejsy użytkownika bezpośrednio na planszy Miro.

Ten artykuł wyjaśnia, jak korzystać z funkcji tworzenia prototypów w Miro. Aby uzyskać ogólne informacje na temat Miro Prototypes, zobacz Przegląd Miro Prototypes. 

Możesz używać Prototypes do generowania przepływów jedno- i wieloekranowych, udoskonalać swoje projekty, stosować style i przeglądać interaktywną symulację swojego prototypu.

✏️ Doświadczenie prototypów zostało przeniesione do współpracownika AI. Obecnie w wersji beta, niektórzy użytkownicy mają już dostęp do nowego, współpracownika AI dla prototypów generowanych przez sztuczną inteligencję. Jeśli twoje doświadczenie nie pokrywa się z dokumentacją, zobacz Tworzenie prototypu z wykorzystaniem współpracownika AI (Wersja Beta). Treści wyjaśniające, jak ulepszać i iterować swoje wyniki, są nadal aktualne.

Buduj swój projekt za pomocą wielu, specyficznych promptów, które generują każdy element twojego prototypu. Możesz również dopracować swoje prompty, aby uniknąć zaczynania od nowa.

Więcej informacji: Zobacz FAQ.

Utwórz prototyp z Miro AI

W tej części opisano, jak rozpocząć prototypowanie z Miro AI. Aby dowiedzieć się, jak zacząć ręcznie, zobacz Biblioteka prototypowania.

Zacznij od początku

1. Na planszy Miro, powyżej paska tworzenia kliknij Sidekicks.
   Panel Sidekick zostanie otwarty.
2. Kliknij Biblioteka współpracownika AI.
   Dostęp do prototypu w bibliotece współpracownika AI
3. Kliknij Formaty > Prototyp.
4. Określ, czy chcesz zacząć od promptu tekstowego lub zrzutu ekranu.
5. Określ typ urządzenia.
6. Określ pojedynczy ekran lub prototyp wieloekranowy.
7. Postępuj zgodnie z instrukcjami na ekranie, aby napisać swój prompt lub przesłać zrzut ekranu. W polu odpowiedzi możesz opcjonalnie użyć sugestii tagów, aby zacząć swój prompt.
8. Dokończ swój prompt, a następnie kliknij strzałkę Wyślij lub naciśnij ENTER na klawiaturze.
   Miro AI generuje wstępny prototyp na planszy.
9. (Opcjonalnie) Aby zatrzymać generację, kliknij przycisk Zatrzymaj na swoim prototypie.
10. (Opcjonalnie) Aby iterować swój prototyp, kontynuuj prompt w panelu Prototype.
    Każda iteracja tworzy wersję twojego wstępnego prototypu.
11. Na swoim prototypie roboczym wybierz jedną z opcji:
    • Zastosuj do planszy
      Twój prototyp jest teraz edytowalny na planszy.
    • Odrzuć wszystkie
      Twój szkic został usunięty z planszy. Możesz dopracować swój prompt i powtórzyć kroki 7–9.

Tworzenie prototypu z AI współpracownikiem (Beta)

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

✏️ Aktualizacja współpracowników AI dla Prototypów jest obecnie w wersji beta. Jeśli Twoje doświadczenia nie odpowiadają dokumentacji w tej sekcji, zobacz Tworzenie prototypu z Miro AI.

Postępuj według tych kroków:

1. Na planszy Miro, nad paskiem tworzenia, kliknij współpracownicy AI.
   Otworzy się panel współpracowników AI.

2. W polu prompt, kliknij Utwórz prototyp.
   Współpracownik AI jest gotowy, aby pomóc Ci utworzyć prototyp.
   Rozpocznij prototyp w panelu współpracownika AI.

   💡 Alternatywnie, możesz otworzyć panel współpracownika i od razu rozpocząć wprowadzanie promptów. Upewnij się, że jednoznacznie zaznaczysz chęć utworzenia prototypu, np. "Utwórz prototyp przepływu zakupowego."

   💡 Możesz również uzyskać dostęp do formatu Prototypu z Narzędzi, Media i Integracje (+) na pasku tworzenia.

3. Napisz prompt, opisując prototyp, który chcesz, aby współpracownik AI wygenerował. 
4. Kliknij strzałkę w górę lub naciśnij ENTER na klawiaturze.
5. (Opcjonalnie) Aby zatrzymać generowanie, w swoim prototypie kliknij Zatrzymaj.
6. (Opcjonalnie) Aby iterować nad swoim prototypem, kontynuuj podpowiadanie w Prototyp panelu.
   Każda iteracja tworzy wersję twojego prototypu roboczego.
7. Na swoim szkicowym prototypie wybierz jedną z opcji:
   • Zastosuj na planszy
     Twój prototyp jest teraz edytowalny na planszy.
   • Odrzuć wszystko
     Twój szkic jest usuwany z planszy. Możesz udoskonalić swój prompt i powtórzyć kroki 3–6.

💡 Zaczynaj od małych elementów i bądź precyzyjny. Mniej wygenerowanych ekranów za jednym razem daje bardziej dokładne wyniki w krótszym czasie. Wyraźnie określ kluczowe elementy, które chcesz umieścić na każdym ekranie, takie jak przyciski, sekcje czy działania.

💡 Zastosuj kilka szkiców prototypów na planszy. Możesz porównać i zbadać decyzje projektowe oraz dalej udoskonalać najlepszą opcję.

💡 Wygenerowanie prototypu może zająć od 1 do 3 minut, w zależności od złożoności promptu i wielkości treści. Jeśli generowanie prototypu trwa dłużej, uprość prompt lub zmniejsz liczbę ekranów.

Użyj planszy jako promptu

Wybierz treść na planszy, aby użyć jej w promptie. Na przykład, masz brief projektowy w dokumencie lub na karteczkach. Prototypy mogą wykorzystać tę treść jako kontekst do tworzenia prototypu. 

Postępuj według tych kroków:

1. Wybierz zawartość planszy. Na przykład, dokument lub karteczki. Opcjonalnie, możesz wybrać wiele obiektów.
2. Na planszy Miro, powyżej paska tworzenia kliknij Sidekicks.
   Otworzy się panel Sidekick.
   UWAGA: Jeśli masz zaktualizowaną...
3. Kliknij bibliotekę współpracowników AI
   Uzyskaj dostęp do Prototype w bibliotece współpracowników AI 
4. Kliknij Formaty > Prototyp.
5. Wybierz prompt tekstowy.
6. Określ typ urządzenia, a następnie wybierz pojedynczy ekran lub wiele ekranów.
   Okno odpowiedzi pokazuje liczbę obiektów wybranych w kroku 1.
7. Postępuj zgodnie z instrukcjami na ekranie, aby wygenerować swój prototyp.
   Miro generuje twój prototyp na podstawie twoich specyfikacji i wybranej zawartości planszy.

💡 Możesz poprosić Miro AI o użycie konkretnych obiektów na planszy, zaznaczając je na planszy. Na przykład w twoim zleceniu (prompt) możesz powiedzieć: "Użyj zrzutów ekranów na planszy jako przewodników do budowy prototypu." Jeśli na planszy znajdują się liczne podobne obiekty, opisz wyraźnie, które z nich ma użyć Miro AI.

Iteracja prototypu

Twój pierwszy szkic może nie być idealnym wynikiem. Zanim zastosujesz swój szkic na planszy, możesz dalej iterować i tworzyć wiele wersji swojego prototypu.

1. Utwórz prototyp za pomocą Miro AI. Nie stosuj na planszy.
   Kolejnym krokiem w panelu Prototypu jest Co chcesz zrobić dalej?
2. Wybierz Edytuj prototyp. 
3. W przypadku przepływu wieloekranowego wybierz ekran, który chcesz iterować.
4. W oknie odpowiedzi opisz zmiany, które chcesz wprowadzić.
5. Kliknij strzałkę w górę lub naciśnij klawisz Enter na klawiaturze.
   Miro generuje nową wersję twojego prototypu.

✏️ Edycje można wprowadzać tylko jeden ekran na raz.

💡 Użyj kontekstu planszy. Wybierz dokumenty, diagramy, karteczki lub inną zawartość tablicy, aby wywołać Miro AI.

Iterowanie z użyciem zrzutu ekranu jako kontekstu wizualnego

Zanim zastosujesz swój prototyp na planszy, możesz użyć zrzutu ekranu lub innego prototypu już znajdującego się na planszy jako kontekstu do iteracji swojego projektu roboczego.

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. Dla przepływu wieloekranowego wybierz ekran, który chcesz iterować.
4. Wybierz zrzut ekranu na tablicy.
5. W oknie 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. 

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

Zastosuj style prototypu ze zrzutu ekranu

Jeśli chcesz, aby Twój prototyp pasował do istniejącej strony internetowej lub produktu, możesz wydobyć style ze zrzutu ekranu i zastosować je na swoich ekranach.

1. Utwórz prototyp.
2. Wybierz swój 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 do swojego prototypu
5. Wybierz plik obrazu, z którego chcesz zaimportować styl.
6. Style są stosowane do twojego prototypu.

💡 Zastosuj style, zanim rozpoczniesz pracę nad prototypem lub na jej zakończenie. Aby upewnić się, że wszystkie elementy w Twoim prototypie odpowiadają wybranemu tematowi, zastosuj go wcześnie lub jako ostatni krok.

Konwertuj zrzuty ekranowe na edytowalne prototypy

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

1. Dodaj zrzut ekranu do swojej tablicy Miro.
2. Kliknij obraz, aby otworzyć menu kontekstowe.
3. Wybierz ikonę Miro AI > Konwertuj obraz na prototyp.
4. Wybierz typ urządzenia (Mobilny, Tablet, Komputer stacjonarny).
5. AI odtworzy go jako edytowalny prototyp – tekst, przyciski, układ i inne elementy.
6. Możesz teraz modyfikować, dodawać lub edytować tę wersję według potrzeb.

💡 Przekształć zrzut ekranu w edytowalną makietę. Następnie użyj Miro AI do dalszej edycji. Możesz również użyć zrzutu ekranu jako kontekstu w swoim promtcie i wygenerować prototyp. Aby użyć wielu zrzutów ekranów, zaznacz wszystkie i skopiuj jako obraz. Następnie użyj obrazu jako kontekstu w promtcie.

Wybierz wersję prototypu

Każda modyfikacja tworzy wersję prototypu. Podczas udoskonalania prototypu selektor wersji jest nad wersją roboczą prototypu. 

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

Wybierz, którą wersję lub poprawkę swojego prototypu chcesz dodać na planszę.

💡 Zanim klikniesz Dodaj do planszy, możesz wybrać ekran z dowolnej wersji i skopiować go na planszę. To zapewnia, że możesz zachować ekran z wersji, którą możesz odrzucić. 

⚠️ Po kliknięciu przycisku Dodaj do planszy nie można odzyskać żadnych innych wersji.

Podgląd prototypu

1. Wybierz ekran prototypu.
   Pojawi się menu kontekstowe.
2. Z menu kontekstowego kliknij Podgląd.
   Wczyta się podgląd.

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

Dodaj linie łączące, aby uczynić prototyp interaktywnym

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

1. Kliknij element (na przykład przycisk) na swoim prototypie.
2. Przeciągnij ikonę Linii Łączącej na ekran, do którego ma prowadzić połączenie.
3. W trybie podglądu, kliknięcie elementu przeniesie użytkownika do połączonego ekranu.

Ukryj linie łączące

Dla prototypów z wieloma łącznikami, aby uprościć wyświetlanie twojego prototypu, możesz ukryć łączniki.

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

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

Ukryj lub pokaż linie łączące w trybie skupienia.

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

💡 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 upewnij się, że wybrałeś swój prototyp.

Tryb skupienia

Miro Prototypes zawiera tryb skupienia. Wejdź w tryb skupienia, aby pracować nad swoim prototypem bez widocznej innej zawartości tablicy, co umożliwia pracę bez rozproszeń.

Aby wejść w tryb skupienia, wybierz swój Miro Prototypes. W menu kontekstowym kliknij Tryb skupienia.

Tryb skupienia umożliwia doświadczenie Miro Prototypes bez rozproszeń.

Eksportuj swój prototyp

Możesz eksportować swój prototyp jako SVG. Możesz również użyć serwera Miro Model Context Protocol (MCP), aby eksportować do AI edytora kodu; zespoły mogą wykorzystać eksport do generowania działającego kodu i przyspieszenia rozwoju.

Eksportuj jako SVG

1. Na pasku tablicy, kliknij trzy pionowe kropki.
2. Kliknij Tablica > Eksportuj > Eksportuj jako obraz.
   Otworzy się okno wyboru oraz okno modalne Eksportuj obraz jako.
3. Dopasuj okno wyboru tak, aby obejmowało Twój prototyp.
4. W oknie modalnym Eksportuj obraz jako wybierz Wektor – SVG.
5. Kliknij Eksportuj. 

💡 Możesz eksportować pojedynczy ekran jako SVG z menu kontekstowego. Wybierz ekran w swoim prototypie. Z menu kontekstowego kliknij pionową ikonę trzech kropek, a następnie kliknij Eksportuj jako obraz. Otworzy się okno modalne Eksportuj jako obraz, następnie wybierz Wektor – SVG.

✏️ W przypadku eksportu SVG prototypów zawierających obrazy, jeśli zaimportujesz SVG do innego oprogramowania do edycji, takiego jak Figma, obrazy zostaną zastąpione przez zastępniki.

Eksport za pomocą Miro MCP Server

Aby wyeksportować swój prototyp do edytora AI kodu, na przykład Cursor, dołącz adres URL tablicy z ID tablicy w swoim prompt. Upewnij się, że podajesz instrukcje do generowania kodu na podstawie prototypu.

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

Edytor AI do baz kodu, taki jak Cursor, akceptuje URL tablicy Miro z ID tablicy, aby wygenerować kod na podstawie Twojego prototypu.

FAQ