Magic Patterns krok po kroku: od opisu do prototypu, kodu i Figmy
Samouczek Magic Patterns: pierwsze polecenie, poprawki pojedynczych elementów, łączenie ekranów w prototyp, eksport kodu i projektu do Figmy, własny system projektowy.
👁 118 przeczytań
- Magic Patterns zamienia opis tekstowy lub zrzut ekranu w edytowalny interfejs z gotowym kodem w React, Vue lub z Tailwindem.
- Eksport do Figmy działa jako migawka ekranu, więc przed kliknięciem Copy trzeba otworzyć wszystkie elementy, np. menu, które mają być widoczne.
- Podłączenie własnego systemu projektowego przez GitHub, pakiet npm lub stronę sprawia, że nowe ekrany powstają w stylu firmy, a nie domyślnym.
Magic Patterns zamienia opis albo zrzut ekranu w edytowalny interfejs z gotowym kodem, a zespół może pracować nad nim razem na wspólnej planszy. Ten samouczek prowadzi od pierwszego polecenia do eksportu kodu i projektu do Figmy, według oficjalnej dokumentacji Magic Patterns.
Zanim zaczniesz: przygotuj materiały
Magic Patterns daje najlepsze wyniki, gdy ma się na czym oprzeć. Przygotuj zrzuty ekranów istniejącego produktu, jeśli nowy ekran ma do niego pasować, oraz listę elementów, które muszą się na nim znaleźć. Jeśli firma ma system projektowy w repozytorium albo na stronie, podłącz go od razu, zanim zaczniesz generować ekrany.
Warto też spisać, dla kogo jest ekran i co użytkownik ma na nim zrobić. Ta jedna informacja zmienia układ bardziej niż opis kolorów.
Krok 1. Pierwsze polecenie
Na stronie głównej widzisz duże pole na polecenie. W jego rogu jest wybrany styl, domyślnie podstawowy. Do szkiców o niższej szczegółowości możesz wybrać styl makiety, a do gotowych ekranów zostać przy domyślnym. Opisujesz, co ma powstać, na przykład ekran rejestracji z polami na imię, e-mail i hasło oraz przyciskiem logowania przez Google.
Zamiast opisu możesz wgrać zrzut ekranu istniejącego interfejsu, a Magic Patterns odtworzy go jako edytowalny projekt.
Krok 2. Poprawki jednego elementu
To funkcja, która oszczędza najwięcej czasu. Klikasz pojedynczy element, na przykład przycisk albo nagłówek, i wydajesz polecenie tylko dla niego. AI zmienia ten element i zostawia resztę układu w spokoju. Nie musisz opisywać całego ekranu od nowa, żeby zmienić kolor jednego przycisku.
Przy większych zmianach jest tryb planowania, w którym najpierw uzgadniasz z agentem, co ma się zmienić, zanim powstanie kod.
Krok 3. Łączenie ekranów w prototyp
Kilka ekranów możesz połączyć w klikalny prototyp. Włączasz tryb prototypu z paska narzędzi na dole albo klawiszem P, najeżdżasz na element, aż podświetli się na niebiesko, klikasz go, a potem ekran, do którego ma prowadzić. Ikoną odtwarzania uruchamiasz prototyp i przechodzisz przez niego jak użytkownik.
Krok 4. Eksport kodu
Przycisk Export w prawym górnym rogu pozwala pobrać cały kod w archiwum, zsynchronizować go z GitHubem albo wysłać projekt do Figmy. Magic Patterns generuje kod w React, Vue albo z Tailwindem. Jeśli pracujesz w Cursorze, możesz połączyć go z Magic Patterns przez MCP i poprosić, żeby zbudował prototyp w Twoim projekcie, zgodnie z jego konwencjami.
Krok 5. Eksport do Figmy
Po wybraniu eksportu do Figmy czekasz, aż projekt się przygotuje, klikasz Copy i wklejasz w Figmie. Projekt pojawia się na planszy. Eksport to migawka tego, co jest na ekranie, więc jeśli chcesz mieć w Figmie otwarte menu, otwórz je przed eksportem.
Krok 6. Własny system projektowy
Magic Patterns może pracować w stylu Twojej firmy. Łączysz repozytorium na GitHubie, pakiet npm albo działającą stronę, a narzędzie odczytuje kolory, typografię i komponenty. Nowe ekrany powstają wtedy w Twoim stylu, a nie w domyślnym. Istniejący projekt przełączysz na inny system przyciskiem konwersji, który tworzy nową wersję i zostawia oryginał.
Przykład: nowy ekran w aplikacji w godzinę
Zespół potrzebuje ekranu ustawień konta. Projektantka wgrywa zrzut obecnego ekranu profilu, żeby zachować styl, i opisuje nowe sekcje: dane osobowe, powiadomienia, usunięcie konta. Poprawia dwa elementy osobnymi poleceniami, łączy ekran z profilem w prototyp i pokazuje zespołowi. Programista dostaje kod komponentu, a projektantka wersję w Figmie do dokumentacji.
W tym przykładzie najwięcej czasu oszczędza wgranie zrzutu istniejącego ekranu. Nowy ekran od początku pasuje do reszty aplikacji, więc nie trzeba go potem dopasowywać ręcznie. Gdy firma ma podłączony system projektowy, efekt jest jeszcze lepszy, bo narzędzie korzysta wprost z komponentów, których używa zespół programistów, a nie tylko z ich wyglądu na zrzucie.
Najczęstsze błędy
- Opisywanie całego ekranu od nowa zamiast poprawiania jednego elementu.
- Eksport do Figmy z zamkniętymi menu, które miały być widoczne.
- Praca bez systemu projektowego, przez co każdy ekran wygląda inaczej.
Jak ocenić pierwszy prototyp
Pokaż prototyp komuś, kto nie brał udziału w jego tworzeniu, i poproś o wykonanie jednego zadania, na przykład zmiany hasła. Nie podpowiadaj. Miejsce, w którym się zawaha, to miejsce do poprawy, i to poprawiasz poleceniem na jednym elemencie.
Sprawdź też kod przed przekazaniem programiście. Czy komponenty są zrozumiale nazwane, czy styl zgadza się z resztą projektu, czy nie ma zbędnych elementów. Kilka minut przeglądu oszczędza godziny poprawek po stronie zespołu.
Dostęp do Magic Patterns na 12 miesięcy sprzedaję w sklepie kinetyka.pl. Link aktywacyjny wysyłam mailem do 24 godzin od zakupu.
Cały tydzień w AI, w jednym mailu
Wybrane premiery, narzędzia i analizy. Raz w tygodniu, prosto do skrzynki.
Zapisz się za darmo →Najczęstsze pytania
Jak połączyć ekrany w klikalny prototyp w Magic Patterns?
Tryb prototypu włącza się z paska narzędzi na dole lub klawiszem P, a następnie klika się element i wskazuje ekran docelowy. Ikoną odtwarzania uruchamia się gotowy prototyp, przez który można przechodzić jak użytkownik.
Jak eksportować projekt z Magic Patterns do Figmy?
Po kliknięciu przycisku Export w prawym górnym rogu wybiera się eksport do Figmy, czeka na przygotowanie projektu, klika Copy i wkleja w Figmie. Eksport to migawka bieżącego stanu, więc otwarte menu czy rozwinięte komponenty trzeba pokazać przed eksportem.
Czy Magic Patterns może pracować z własnym systemem projektowym firmy?
Tak - narzędzie odczytuje kolory, typografię i komponenty po podłączeniu repozytorium na GitHubie, pakietu npm lub działającej strony. Istniejący projekt można przełączyć na inny system przyciskiem konwersji, który tworzy nową wersję i zostawia oryginał.
Jak poprawić jeden element interfejsu bez zmieniania całego ekranu w Magic Patterns?
Wystarczy kliknąć pojedynczy element, np. przycisk lub nagłówek, i wydać polecenie tylko dla niego. AI zmienia ten element i zostawia resztę układu bez zmian, co eliminuje potrzebę opisywania całego ekranu od nowa.
Podobne tematy na Promptowym
