Poniższy artykuł zawiera notatki z Lightning Lesson prowadzonej przez Alexa, współzałożyciela Magic Patterns. Wszystkie przedstawione przemyślenia, obserwacje i wnioski pochodzą bezpośrednio od prowadzącego sesję.
TL;DR
- Problem: AI prototyping (V0, Bolt) nie rozpoznaje kontekstu Twojej marki i generuje generyczne komponenty
- Obecne rozwiązanie: Wklejanie zrzutów ekranu przy każdej iteracji – drogie i nieprecyzyjne
- Nowe podejście: Tworzenie bibliotek komponentów do wielokrotnego użytku
- Magic Patterns: Oferuje presets i biblioteki komponentów z Chrome extension do szybkiego importu
- Komponenty jako LEGO klocki: Myślenie atomowe zamiast całościowego kopiowania stron
- Praktyczność: Medium-fidelity wystarczy do komunikacji wizualnej, nie potrzeba pixel-perfect
- Przyszłość: Planowana integracja z Figma i Storybook
Problem z rozpoznawaniem kontekstu marki w AI prototypingu
Główny problem obecnych narzędzi AI prototypingu to brak kontekstu marki, jak zauważa Alex. Gdy użytkownik wpisuje „profile picture dropdown” w V0 czy Bolt, otrzymuje generyczny komponent. Narzędzia jednak nie wiedzą, że dana osoba pracuje dla LinkedIn, dlatego nie znają odpowiednich kolorów ani czcionek.
Obecne rozwiązanie polega na wklejaniu zrzutów ekranu przy każdym prompt. Alex demonstruje to na przykładzie – po wklejeniu zrzutu ekranu LinkedIn do Bolt, narzędzie rzeczywiście odtwarza wygląd marki. Takie podejście ma jednak swoje ograniczenia:
- Zrzuty ekranu wymagają vision modeli, które są drogie tokenowo
- AI czasem wykonuje więcej pracy niż potrzeba – zamiast samego navbaru, odtwarza całą stronę
- Użytkownik musi wklejać zrzut ekranu przy każdej iteracji
- Vision modele „zgadują” fonty i styling zamiast używać rzeczywistych wartości
Filozofia komponentów jako building blocks
Alex wykorzystuje metaforę LEGO klocków, żeby wyjaśnić filozofię komponentów. W Magic Patterns niebieski przycisk primary stanowi ich LEGO klocek. Na LinkedIn występują przyciski, awatary, logo – każdy element to osobny klocek.
Kluczowe znaczenie ma myślenie atomowe. Alex podkreśla: „Projektanci myślą o tym na poziomie atomowym. Jakie są atomy, building blocks mojego UI?”
Zamiast importować całą stronę, lepiej rozbić ją na elementy:
- Przyciski
- Nagłówki
- Karty
- Inputy
Taka filozofia zapewnia większą elastyczność i konsystencję w projektach.
Rozwiązanie Magic Patterns dla bibliotek komponentów
Magic Patterns od początku był „component library first”, jak wyjaśnia Alex. Prowadzący pokazuje nawet stary zrzut ekranu z archiwum – wspomina o „bardzo gęstych wąsach, co mówi, że to było dawno temu” – jednak już wtedy zespół pracował nad komponentami.
Każdy projekt ma opcję wyboru presetu – domyślnie dostępne są popularne biblioteki jak Mantine czy Chakra.
Nowa funkcja umożliwia używanie własnych bibliotek komponentów. Alex demonstruje: ten sam prompt „profile picture dropdown” generuje teraz komponent w stylu LinkedIn, ponieważ system już rozpoznaje jego komponenty.
Magic Patterns pokazuje transparentny proces wyboru komponentów. Alex wyjaśnia: „Można zobaczyć w 'thinking’ jak AI streamuje – mówi 'Użyję następujących komponentów z dostępnego niestandardowego systemu komponentów’, czyli avatar i dropdown menu.” To pozwala zrozumieć, dlaczego AI wybrał konkretne elementy.
Checklist: Jak stworzyć preset od zera
Alex prezentuje proces krok po kroku:
- [ ] Kliknij „create a new preset”
- [ ] Nazwij go (np. „LinkedIn demo”)
- [ ] Wpisz domyślny prompt dla AI
- [ ] Dodaj informacje o firmie: „platforma social media dla profesjonalistów”
- [ ] Określ kolory primary: „mój kolor primary to niebieski”
- [ ] Dodaj inne wskazówki stylistyczne (fonty, spacing)
Preset to po prostu koncepcja domyślnego prompta stosowanego za każdym razem. Alex sugeruje, że stanowi to „początkową wersję komponentów” – daje AI podstawowy kontekst bez konieczności importowania każdego elementu.
Metody importowania komponentów w praktyce
Chrome extension – płynny workflow
Alex cytuje wiadomość od beta testera: „workflow komponentów i extension to masło”. Chrome extension pozwala na import „tysiąca komponentów w zero czasu”.
Mechanizm działa w prosty sposób – extension pobiera kod bezpośrednio z przeglądarki. Alex wyjaśnia: „Pobieramy dosłownie kod ze strony internetowej. Dlatego jest tak szybko – nie ma AI, po prostu kod.”
Dlaczego extension okazuje się tak efektywny:
- Pobiera rzeczywisty kod zamiast zgadywania przez AI
- Zachowuje oryginalne fonty i spacing
- Nie wymaga kosztownych vision modeli
- Działa w czasie rzeczywistym
Alex odpowiada na pytania o bezpieczeństwo: „Oczywiście rozmawiajcie z waszymi zespołami IT. Ale extension pobiera tylko to, co jest dostępne na stronie – to co przeglądarka widzi.” Jeśli to stanowi problem, nadal można robić zdjęcia do odtworzenia komponentów.
Alex przyznaje się do realnego problemu fragmentacji. Pokazuje „klasyczny komiks ze świata technologii”: „Mam brand guidelines w PDF. Mam design system w Figma. Mam design system w kodzie. Mam design system w Storybook.” A teraz dodaje: „Hej, musicie przenieść komponenty do Magic Patterns.”
Rzeczywistość wszystkich narzędzi do prototypowania AI: komponenty muszą być w formacie czytelnym dla AI. Alex obiecuje przyszłe integracje z Figma i Storybook, mimo to obecnie wymaga importowania.
Wykorzystanie PDF brand guidelines przez ChatGPT
Alex ma praktyczną radę dla problemu PDF z brand guidelines. Można przesłać PDF do ChatGPT i poprosić: „wygeneruj mi domyślny prompt dla AI generation tool”.
ChatGPT może wyciągnąć z tailwind config czy theme kolory, fonty i inne wskazówki. Alex pokazuje przykład: pięć kolorów primary, font, 8px margins i paddings, professional appearance.
Konwersja istniejących projektów
Jeśli użytkownik już korzysta z Magic Patterns, może utworzyć komponenty z istniejących projektów. Alex wyjaśnia kontekst: „Tradycyjnie Select Mode służy do klikania 'Add to chat’ i mówienia 'zmień tę nazwę’ lub cokolwiek chcesz edytować.”
Teraz jednak można również: przejść do Select Mode, kliknąć element, wybrać „Create Component” i dodać do biblioteki.
System pokazuje podgląd komponentu – Alex wyjaśnia: „AI widzi tylko kontekst użycia, nie duplikuje elementów.”
Ograniczenia i realistyczne oczekiwania
Alex pozostaje szczery co do obecnych ograniczeń. Cel to medium fidelity, nie pixel-perfect odwzorowanie. AI nie używa dokładnie tego samego kodu co LinkedIn – dysponuje tylko „zdjęciami lub tym co widzi przeglądarka”.
Jak podkreśla Alex: „Nikt nie ma wątpliwości, że mówimy o LinkedIn teraz. Ale to nie jest one-to-one perfect.”
Alex wielokrotnie przypomina, że to bardziej sztuka niż nauka. Gdy ktoś pyta o „właściwe color tokens i spacing tokens”, Alex odpowiada szczerze: „Możesz oczywiście powiedzieć 'moje spacing tokens to 8px i 4px dla padding’, żeby było bliżej. Jednak ważne jest to, że cel nie to one-to-one perfect, bo ostatecznie to nie kod jest wykorzystywany – to wizualna komunikacja.”
Integracja z ekosystemem narzędzi
Magic Patterns eksportuje już do Figma. Alex przyznaje: „Słyszę was – już macie design system w Figma, potrzebujecie go zaimportować do Magic Patterns.”
Różnica polega na interaktywności:
- Magic Patterns: code-first i interaktywne (klikanie, pisanie w input box)
- Figma: vector-based, wymaga osobnego hookowania interaktywności
- Różne formaty plików = różne ograniczenia
Planowane integracje:
- Import z Figma
- Import ze Storybook
- Inne narzędzia design systemów
- Lepsze wsparcie dla tokenów (kolory, spacing)
Przyszłość komponentów w AI prototypingu
Alex przedstawia przyszłość, gdzie użytkownik nie musi wklejać zrzutów ekranu przy każdej iteracji. System automatycznie rozpoznaje komponenty i wykorzystuje je konsystentnie.
Można również używać składni @ do jawnego wywołania komponentu: „@LinkedIn demo navigation” wskazuje AI, którego elementu użyć.
Checklist: Pierwsze kroki z komponentami
- [ ] Przetestuj Magic Patterns z domyślnymi presetami
- [ ] Stwórz swój pierwszy preset z brand guidelines
- [ ] Zainstaluj Chrome extension
- [ ] Zaimportuj 3-5 podstawowych komponentów ze swojej strony
- [ ] Przetestuj generowanie z własnymi komponentami
- [ ] Stwórz bibliotekę atomowych elementów (przyciski, inputy, karty)
- [ ] Udokumentuj swoje spacing i color tokens
Najważniejsze według Alexa: te narzędzia „wzmacniają ludzi, którzy wcześniej nie mogli komunikować wizualnie. Teraz mogą lepiej komunikować używając istniejącego kontekstu marki.”
Kluczowy insight
Atomy zamiast całości
Standardowo myślimy: Żeby skopiować projekt, należy skopiować całą stronę lub sekcję – im więcej kontekstu, tym lepiej.
W praktyce okazuje się, że: Rozbicie na pojedyncze atomy (przycisk, input, avatar) i ich wielokrotne użycie daje bardziej spójne rezultaty niż kopiowanie złożonych układów.
Dlaczego to jest istotne: AI lepiej radzi sobie z kombinowaniem prostych, dobrze zdefiniowanych elementów niż z odtwarzaniem skomplikowanych całości. Dlatego Alex nazywa komponenty „LEGO klockami” – ich siła leży w możliwości składania, nie w wielkości pojedynczego klocka.
Test na jutro: Następnym razem gdy chcesz skopiować projekt ze swojej strony, zamiast robić zrzut ekranu całej sekcji, spróbuj wyodrębnić 3-4 najmniejsze powtarzalne elementy (przycisk, karta, input) i sprawdź jak AI lepiej je kombinuje w nowych projektach.
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, był to Lightning Lesson prowadzony przez Alexa z Magic Patterns na temat używania własnych bibliotek komponentów w AI prototypingu.
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.