Vibe Designing: Magic Patterns – projektowanie z AI #EN86

TL;DR:

• Vibe designing to nowe podejście do projektowania interfejsów przy użyciu AI, analogiczne do vibe coding w świecie programistów
• Magic Patterns to narzędzie do AI prototypowania skupione na projektowaniu front-endu, wykorzystujące kod jako medium dla AI
• Kluczem do skutecznego projektowania z AI jest iteracyjne podejście i ustawienie motywu na wczesnym etapie
• Używanie zrzutów ekranu jako referencji dla AI drastycznie upraszcza komunikację i przyspiesza projektowanie
• Magic Patterns oferuje funkcję „inspiration”, generującą cztery alternatywne wersje projektu dla szybkiej eksploracji pomysłów
• Narzędzie przechowuje każdą wersję projektu, umożliwiając łatwy powrót do wcześniejszych iteracji
• Rola projektantów w erze AI nie zanika – ich kluczową wartością pozostaje dobry gust, empatia i zrozumienie użytkowników

Wprowadzenie: czym jest vibe designing?

Podobnie jak vibe coding stał się popularnym terminem wśród programistów, opisującym budowanie aplikacji z AI bez pisania kodu, vibe designing wyłania się jako analogiczne zjawisko w świecie projektowania. To podejście pozwala projektantom tworzyć zaawansowane, interaktywne prototypy bez konieczności ręcznego rysowania elementów interfejsu.

Magic Patterns, narzędzie do AI prototypingu, dostarcza platformę umożliwiającą projektowanie poprzez instrukcje w języku naturalnym. W ciągu zaledwie półtora roku technologia ta przeszła imponującą ewolucję – od generowania prostych, niskiej jakości projektów, do tworzenia w pełni interaktywnych, wizualnie dopracowanych interfejsów.

Ewolucja Magic Patterns

Teddy, współzałożyciel Magic Patterns, prezentuje podczas webinaru zadziwiającą transformację narzędzia. Pokazuje wczesną wersję platformy, gdy nazywała się jeszcze po prostu „Patterns”:

„To było wtedy, gdy AI dopiero się pojawiało. Chciałbym szybko pokazać, jak Magic Patterns wyglądało półtora roku temu, gdy pierwszy raz je uruchomiliśmy. Możecie zobaczyć, że projekty, które powstawały były, delikatnie mówiąc, złe, bardzo proste.”

W kontraście do tych skromnych początków, prezentuje współczesne możliwości narzędzia:

„To na przykład był projekt stworzony w Magic Patterns dziś rano. Widzicie, że jest w pełni interaktywny. Powiedziałbym, że jest nieco lepszy niż projekty, które prawdopodobnie widzieliście w poprzednim wideo z Magic Patterns sprzed półtora roku.”

Ta ewolucja pokazuje niezwykły postęp w technologii AI w krótkim czasie i zapowiada jeszcze większe możliwości w przyszłości.

Proces projektowania z Magic Patterns

Rola ChatGPT w efektywnym promptowaniu

Jednym z ciekawszych elementów procesu projektowania z Magic Patterns jest wykorzystanie ChatGPT do przygotowania promptów. Teddy zauważa:

„Pierwsza rzecz, którą lubię robić podczas tworzenia projektu, to faktycznie zacząć w ChatGPT. Powodem jest to, że promptowanie jest naprawdę trudne. Szczerze mówiąc, nie lubię promptowania. Ale okazuje się, że AI jest w tym naprawdę, naprawdę dobra.”

Zamiast męczyć się z formułowaniem idealnych instrukcji dla AI, można poprosić ChatGPT o wygenerowanie promptu na podstawie prostego opisu pomysłu. W przykładzie użytym podczas webinaru, prosty prompt o napisanie instrukcji dla platformy e-learningowej „Bavin” pozwolił uzyskać rozbudowany, szczegółowy prompt dla Magic Patterns.

Budowanie podstawy projektu i iteracyjne ulepszanie

Kluczowym aspektem pracy z AI do projektowania jest zrozumienie, że to proces iteracyjny. Teddy podkreśla:

„Myślę, że coś, co jest naprawdę ważne, gdy zaczynasz korzystać z AI, to faktycznie akceptacja, że to proces iteracyjny. AI trudno jest dokładnie wiedzieć, o czym myślisz i w rezultacie trudno jest AI uzyskać wszystko idealnie za pierwszym razem.”

Bardziej rozbudowane projekty często wymagają dziesiątek promptów i wielu iteracji. Przykład pokazany podczas webinaru zawierał ponad 50 promptów, by osiągnąć finalny rezultat.

Wykorzystanie zrzutów ekranu do importowania stylów

Jedną z najbardziej efektywnych technik w pracy z Magic Patterns jest wykorzystanie zrzutów ekranu:

„Używanie zrzutów ekranu to naprawdę potężny sposób komunikacji z AI. Jest znacznie łatwiejszy niż faktyczne opisywanie tego. Jak mówią, obraz wart jest tysiąca słów. I to samo dotyczy promptowania.”

Podczas demonstracji, Teddy pokazuje, jak zaimportować styl z istniejącej strony Maven do nowego projektu, po prostu wklejając zrzut ekranu i prosząc AI o zastosowanie tego stylu. Co ważne, warto to zrobić na wczesnym etapie pracy:

„Powodem, dla którego aktualizuję motyw i ogólny wygląd tego projektu przed czymkolwiek innym, jest faktycznie to, że gdy będziemy iterować więcej nad tym projektem, chcemy dać AI jak najwięcej kontekstu podczas projektowania nowych rzeczy, aby wiedziało, czego używać domyślnie.”

Ustalenie stylu na początku pozwala zaoszczędzić czas później, ponieważ wszystkie nowe elementy będą automatycznie go wykorzystywać.

Przewaga kodu jako medium projektowego

Interesującym aspektem Magic Patterns jest wybór kodu jako medium dla AI, zamiast bezpośredniego generowania graficznego interfejsu:

„Na początku działalności firmy faktycznie generowaliśmy projekty bezpośrednio w Figmie. Próbowaliśmy używać wewnętrznej struktury danych Figmy do tworzenia projektów. Ale odkryliśmy, że LLM-y są po prostu naprawdę, naprawdę dobre w używaniu kodu. Porównaliśmy i zestawiliśmy projekty używające języka projektowania Figmy versus kodu i faktycznie odkryliśmy, że używanie kodu jest znacznie, znacznie lepsze. LLM-y po prostu lepiej rozumieją kod.”

Ta decyzja technologiczna ma daleko idące konsekwencje dla jakości generowanych projektów i elastyczności narzędzia. Twórcy Magic Patterns wierzą, że kod staje się „pierwszorzędnym obywatelem” w erze AI, nawet w kontekście projektowania interfejsów.

Unikalne funkcje Magic Patterns

Nieskończony canvas i zarządzanie wersjami

Magic Patterns oferuje unikalny system zarządzania wersjami, który doskonale pasuje do nielinearnego charakteru procesu projektowania:

„Proces projektowania jest nielinearnym procesem, prawda? Ma wiele zwrotów, jest dużo rozgałęzień, dużo eksploracji. Z wieloma innymi narzędziami trudno jest cofnąć się w czasie i eksplorować wiele różnych ścieżek.”

Narzędzie przechowuje każdą wersję projektu, umożliwiając łatwy powrót do dowolnego punktu historii i rozpoczęcie nowej ścieżki eksploracji od tego miejsca. Ta funkcja w połączeniu z nieskończonym canvasem daje projektantom niespotykaną swobodę w eksperymentowaniu z różnymi kierunkami.

Komenda „inspiration” do generowania wariantów

Jedną z najbardziej imponujących funkcji Magic Patterns jest komenda „inspiration”, która generuje cztery różne warianty rozwiązania danego problemu projektowego:

„Jedną z moich ulubionych rzeczy podczas iteracji i pomysłów jest to, że Magic Patterns wspiera coś, czego wielu konkurentów nie ma, a mianowicie komendy. Na przykład, mogę wpisać ukośnik i użyć naszej komendy inspiration. Co to zrobi, to faktycznie wymyśli cztery różne sposoby, w jakie mogę coś zaprojektować.”

Podczas demonstracji, Teddy pokazuje, jak ta funkcja pozwala szybko zobaczyć różne podejścia do pokazania liczby osób zapisanych na kurs. AI generuje cztery różne projekty:

• Odznaka w prawym górnym rogu
• Liczba obok nazwy autora
• Kolorowa odznaka pod nazwą
• Inne podejście projektowe

Ta funkcja ogromnie przyspiesza eksplorację pomysłów i pozwala na szybkie porównanie różnych rozwiązań bez konieczności ręcznego projektowania każdego z nich.

Integracja z systemami projektowymi i komponentami

Magic Patterns oferuje interesujące możliwości integracji z istniejącymi systemami projektowymi:

„Mamy możliwość importowania niestandardowego systemu projektowego. Stworzyłem ten system projektowy o nazwie YouTube, który jest zestawem komponentów YouTube. To fantastyczne pytanie, ponieważ całkowicie rozumiemy, że to święty Graal narzędzi AI – jak zintegrować niestandardowe komponenty i istniejące style?”

Narzędzie wspiera obecnie:

• Importowanie własnych komponentów
• Popularne biblioteki komponentów jak ShadCN, Chakra i Mantine
• Własne biblioteki do wireframingu
• Wykorzystywanie tokenów projektowych poprzez predefiniowane instrukcje

Rola projektantów w erze AI design

Pomimo rosnących możliwości AI w projektowaniu, rola projektantów nie zanika, lecz przekształca się:

„Największą rzeczą, którą zauważyliśmy, jest to, że AI nie potrafi mieć dobrego gustu projektowego. I nie używam tego słowa lekko, ale zauważyliśmy, że projektanci mają tendencję do, po pierwsze, mieć wyższą poprzeczkę, a po drugie, mają lepszą intuicję i lepsze wyczucie tego, co sprawia, że projekt jest dobry.”

W kontekście wyzwań związanych z AI, Teddy dodaje:

„Myślę, że dużo z tego, sposób, w jaki lubię myśleć o AI, to że jest zdolne do znacznie więcej, niż ludzie ogólnie myślą. Ale wyzwaniem jest: jak wydobyć to z AI? Jak widzieliśmy, gdybyś pokazał mi ten projekt, powiedziałbym, że nie ma mowy, żeby AI mogło to zrobić. Ale okazuje się, że istnieje ścieżka, istnieje zestaw promptów, które można wpisać, aby dostać się do tego projektu.”

Projektanci wnoszą do procesu dwie kluczowe wartości:

1. Zrozumienie użytkownika i jego potrzeb
2. Intuicję dotyczącą UI/UX i umiejętność kierowania AI do osiągnięcia pożądanego rezultatu

Dodatkowo, Xin Renma, założyciel Design with AI, zauważa:

„Gust to zdecydowanie ważny aspekt, a także empatia wobec użytkowników, jak zrozumieć potrzeby użytkownika w nieuprzedzony lub przemyślany sposób. To ważne, ponieważ każdy może powiedzieć: och, wiem, czego chce użytkownik, użytkownik chce tego, użytkownik chce tamtego. Ale jest wiele zawiłości w tym stwierdzeniu i jak powiązać to z faktycznymi decyzjami projektowymi.”

Praktyczne zastosowania i przyszłość vibe designingu

Magic Patterns znajduje zastosowanie w różnych scenariuszach:

1. Projektanci używają go do szybkiego prototypowania i eksploracji pomysłów, często eksportując projekty do Figmy do dalszych poprawek.
2. Kierownicy produktu wykorzystują narzędzie do przekształcania swoich PRD (Product Requirement Documents) w wizualne prototypy, co jest skuteczniejsze niż „ściany tekstu”.
3. Programiści mogą tworzyć responsywne interfejsy bez konieczności ręcznego ustawiania punktów przełamania.

Co do przyszłości, twórcy Magic Patterns widzą kilka kierunków rozwoju:

• Integracja z Figmą i narzędziami jak Storybook do importowania systemów projektowych
• Możliwość generowania kodu produkcyjnego z użyciem niestandardowych komponentów
• Rozbudowa funkcji współpracy i integracji z narzędziami programistycznymi

Checklista: Jak efektywnie projektować z Magic Patterns

Na podstawie informacji przedstawionych w webinarze, można stworzyć następującą checklistę:

• Zacznij od przygotowania promptu w ChatGPT zamiast tworzyć go samodzielnie
• Ustaw podstawowy motyw/styl projektu na samym początku pracy
• Używaj zrzutów ekranu do komunikacji z AI zamiast opisywać style słowami
• Pamiętaj o iteracyjnym charakterze procesu – nie oczekuj idealnych wyników za pierwszym razem
• Wykorzystuj funkcję „inspiration” do eksplorowania różnych podejść projektowych
• Korzystaj z systemu zarządzania wersjami, aby wracać do poprzednich koncepcji
• Eksportuj finalne projekty do Figmy, jeśli potrzebujesz dopracować detale
• Pamiętaj o responsywności – Magic Patterns pozwala dostosować projekty do urządzeń mobilnych
• Eksperymentuj z różnymi podejściami do używania AI w swoim procesie projektowym

Podsumowanie

Vibe designing z Magic Patterns reprezentuje nowe podejście do projektowania interfejsów, gdzie AI staje się aktywnym partnerem w procesie kreatywnym. Kluczem do sukcesu jest zrozumienie iteracyjnej natury tego procesu oraz umiejętne kierowanie AI poprzez przemyślane promptowanie i wykorzystanie wizualnych referencji.

Jak zauważa Teddy na zakończenie webinaru:

„Moja jedyna ostatnia rada, moja ostatnia myśl dla wszystkich tutaj, to naprawdę zachęcam wszystkich do eksperymentowania. Myślę, że LLM-y stały się bardzo, bardzo potężne i wszystko sprowadza się do tego, jak możesz odkryć, jak używać AI w swoim osobistym przepływie pracy, a to będzie zależeć od osoby do osoby i naprawdę zachęcam wszystkich do eksperymentowania i zobaczenia, co działa dla nich.”

Dodatkowe zasoby:

• Design with AI newsletter (wspomniane przez Xin Renma)
• Strona internetowa Magic Patterns
• Przykłady projektów stworzonych w Magic Patterns (pokazane podczas webinaru)
• Społeczność Discord Magic Patterns (wspomniana przez Teddy’ego)

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło, znajdziesz je tutaj: https://maven.com/p/ed3554/vibe-designing-with-ai