Poniższe notatki powstały na podstawie wywiadu z Meng To, designerem i twórcą narzędzia Aura. Wszystkie prezentowane przemyślenia, obserwacje i techniki pochodzą od rozmówcy.
TL;DR
- Problem z AI: Standardowe prompty tworzą generyczne, podobne do siebie strony internetowe
- Workflow Meng To: Inspiracja → Prompt builder → Customizacja → Integracja zasobów zewnętrznych
- Reguła 90/10: AI robi 90% pracy, jednak ostatnie 10% customizacji decyduje o unikalności
- Kluczowe narzędzia: Aura (design), Spline (animacje 3D), Midjourney (obrazy), UIverse (komponenty)
- Przyszłość: W ciągu 6 miesięcy AI osiągnie poziom pozwalający tworzyć strony klasy Comet czy Dia
- Najważniejsza umiejętność: Gust – rozpoznawanie co jest dobre, a co generyczne
- Praktyka: Kombinowanie różnych narzędzi daje lepsze rezultaty niż poleganie na jednym AI
Problem z generycznymi wynikami AI
Meng To rozpoczyna demonstrację od fundamentalnego problemu współczesnych narzędzi AI. Kiedy użytkownicy wprowadzają podstawowy prompt „create a beautiful landing page for a new AI browser” w różne platformy, rezultaty są uderzająco podobne.
Typowe rezultaty generycznych promptów:
- V0: pogrubiony tytuł + fioletowy motyw
- Lovable: białe tło + generyczny tekst
- Problem główny: AI tworzy bazę, którą coraz więcej ludzi otrzymuje
Jak to ujął Meng To, większość projektów AI „charakteryzuje się bardzo odważnymi tytułami, fontem Inter i wszechobecnym fioletem”. Ta sytuacja prowadzi prosto w pułapkę projektowej przeciętności.
W przeciwieństwie do tego, profesjonalne strony jak Comet od Perplexity czy przeglądarka Dia charakteryzują się unikalnymi fontami, interakcjami, animacjami oraz pięknymi obrazami generowanymi przez AI. To poziom 10, podczas gdy standardowe prompty dają poziom 0-1.
Dlaczego standardowe prompty to za mało
Według Meng To samo posiadanie promptu nie wystarcza. Potrzebne są zasoby, przykłady, szablony i referencje. AI trenowane jest na przykładach wspaniałych designerów i fotografów – podobnie jak Midjourney zawdzięcza swoją jakość artystom, na których się uczył.
Meng To stworzył już 642 eksperymenty w Aura. Ewolucja jego designów wynika z dodawania nowych narzędzi, takich jak biblioteka obrazów Midjourney czy możliwość szybkiej zmiany obrazów. Remiksowanie istniejących szablonów okazuje się znacznie efektywniejsze niż tworzenie od zera.
Workflow: od promptu do unikalnego designu
Krok 1: Prompt builder zamiast tekstów
Meng To opracował wizualny prompt builder, który zastępuje zapamiętywanie słownictwa. System pozwala wybierać:
Sekcje strony:
- Hero section, feature section, testimonials
- Settings page z różnymi konfiguracjami
- Blog i video layouts
Styling i prezentacja:
- Layout: sidebar, bento layout, full screen, card
- Style: flat, glass, liquid glass
- Tryby: light/dark mode z niestandardowymi cieniami
Typografia:
- Instrument serif zamiast standardowego Inter
- Niestandardowy letter spacing i font weights
- Trend gigantycznych font sizes (coraz więcej stron używa ogromnych napisów)
- 10 lat temu wszyscy byli pod wrażeniem Inter (bo używano Arial, Times New Roman), teraz standardy są wyższe
Builder automatycznie tworzy prompt tekstowy na podstawie wizualnych wyborów. Meng To podkreśla różnice między modelami – O3 jest „leniwszy”, ale bardziej dopracowany, natomiast Claude często używa Inter i fioletowego koloru, co może być problematyczne.
Kluczowa przewaga Aura: podgląd na żywo. Podczas gdy inne narzędzia wymagają czekania 5-10 minut na pierwszy rezultat, Aura pokazuje zmiany na żywo. To jedyne narzędzie z podglądem na żywo na rynku.
Krok 2: Customizacja bez czekania na AI
Kluczowe założenie Meng To: AI nie jest doskonałe we wszystkim. Długi czas oczekiwania na każdy prompt, utrata elementów przy kolejnych generacjach, problemy z konsystencją – to powody, by AI łączyć z natychmiastowymi opcjami customizacji.
Paradoks Aura: narzędzie zbudowane przez AI, które uczy jak nie polegać tylko na AI. Cała platforma została stworzona przez vicode, jednak Meng To projektuje ją tak, by użytkownicy nie musieli czekać na AI przy każdej zmianie.
Aura pozwala na szybką zmianę fontów, kolorów, trybu jasnego/ciemnego bez promptowania AI. Użytkownicy mogą eksperymentować z różnymi opcjami jak w Figmie, ale z AI jako punktem startowym.
Częsty błąd początkujących: rezygnacja po pierwszym promptie. Meng To zauważa, że ludzie widzą pierwszy, generyczny rezultat i się poddają. To błąd – trzeba eksperymentować z różnymi promptami i customizacjami.
Krok 3: Integracja zasobów zewnętrznych
Spline (animacje 3D):
- Przeglądaj społeczność dla darmowych projektów
- Wybierz animację → remiks → eksport linku
- Wklej URL do Aura (premium usuwa logo)
Midjourney vs stock photos:
- Obrazy AI są unikalne – nie jak powtarzalne stock photos
- Problem z Unsplash: po tysiącu użyciach tych samych zdjęć ludzie się męczą
- Lepsze do portretów niż stock photos (nie są „wyeksploatowane”)
- Kategorie: abstract, 3D, flowers, high fashion
- Generowane w 5 sekund, wyglądają profesjonalnie
UIverse i inne komponenty:
- Style buttonów i kart UI
- Kopiuj CSS jako template
- Wybieraj proste style (lepiej działają z AI)
Dodatkowe metody i narzędzia:
- Cursor: narzędzie, które Meng To używa do dalszego development’u
- CSS Scan plugin: Chrome extension do wyciągania stylów CSS
- Inspect element: dla bardziej technicznych (wymaga Developer mode)
- CodePen integration: znajdź eksperymenty HTML → skopiuj kod → wklej do Aura/Lovable
Animacje poza Spline:
- Rive i Lottie animations
- Lottie Files, Lottie Lab – alternatywne biblioteki
Kluczowa technika: Screenshots zamiast promptów
Jedną z najważniejszych technik, którą podkreślał Meng To, jest używanie obrazów zamiast słów w komunikacji z AI. Zamiast spędzać długie minuty na opisywaniu pożądanego designu, znacznie skuteczniejsze okazuje się pokazanie AI konkretnego wzorca wizualnego.
Jak to działa w praktyce:
- Znajdź design, który Ci się podoba na Dribbble, Behance lub innej stronie
- Zrób zrzut ekranu pożądanego elementu
- Wklej go do AI z prostą instrukcją: „Stwórz coś podobnego do tego”
- Dodaj specyficzne wytyczne dot. kolorów, fontów, jeśli potrzebne
Dlaczego ta metoda jest tak skuteczna:
- Eliminuje nieporozumienia – AI „widzi” dokładnie czego chcesz
- Oszczędza czas – nie musisz opisywać estetyki słowami
- Lepsza jakość – opiera się na sprawdzonych wzorcach designu
- Uniwersalność – działa we wszystkich narzędziach AI
Meng To często używa tej metody do analizy fontów (screenshot → ChatGPT → „jaki to font?”) oraz do replikowania layoutów z CodePen czy innych źródeł inspiracji.
Workflow między narzędziami
Aura koncentruje się na designie i customizacji, podczas gdy Lovable i V0 lepiej radzą sobie z funkcjonalnością całej strony.
Kompletny workflow Meng To:
✓ Krok 1: Stwórz sekcję w Aura (prompt builder lub template) ✓ Krok 2: Dostosuj font, kolory, obrazy bez czekania na AI
✓ Krok 3: Dodaj animacje Spline i obrazy Midjourney ✓ Krok 4: Wyeksportuj kod HTML lub plik Figma z Aura ✓ Krok 5: Wklej do Lovable: „zastąp [sekcję] w stylu tego kodu” ✓ Krok 6: Doprecyzuj fontowanie: „użyj fontu z mojego HTML”
Ważne: AI domyślnie adaptuje design do istniejącej strony. Jeśli chcesz zachować konkretny font czy styl, musisz to wyraźnie określić w promptie – inaczej AI zmieni wszystko na swój sposób.
Dodatkowe możliwości Aura:
- Embedding video w komponenty
- Eksport do multiple formatów (HTML, Figma)
- Edytowanie spacing, padding, typography bez AI
Takie podejście rozwiązuje problem Lovable, gdzie zmiana ikony czy tła wymaga promptowania AI. W Aura te zmiany są natychmiastowe.
Dlaczego Aura jest inna: Meng To jako samodzielny programista (2 miesiące od wydania) fokusuje się wyłącznie na design i customizację. Lovable i V0 są lepsze w budowaniu pełnych funkcjonalnych stron, ale słabsze w szybkich zmianach designu. Aura oferuje więcej prompt credits niż konkurencja.
Reguła 90/10 i znaczenie gustu
Meng To uważa AI za narzędzie augmentacji, nie zastąpienia człowieka. Ludzie wnoszą kreatywność, doświadczenie, gust i pamięć. AI powinno robić 90% pracy, jednak ostatnie 10% wymaga ludzkiego wkładu.
W erze AI gust staje się różnicującym czynnikiem. Umiejętność rozpoznania, czy używać Comet czy Dia, Aura czy Lovable, Midjourney czy Stable Diffusion – to kluczowa kompetencja. Gust decyduje o wyborze właściwych narzędzi do konkretnych zadań.
Jeśli polegasz tylko na AI i popełnisz błąd, nie wiesz jak się z tego wydostać. Musisz nauczyć się robić ostatnie 10% samodzielnie – zmieniać fonty, obrazy, style buttonów.
Przyszłość AI w designie
Meng To zauważa, że jeszcze 5-6 miesięcy temu AI nie radziło sobie z generowaniem kodu i designów. Claude 3.5 nie tworzył ładnych designów HTML. W ciągu najbliższych 6 miesięcy możliwe będzie tworzenie stron na poziomie Dia czy Comet.
Obecnie poziom to 1, przy Claude 3.5 jako poziom 0. Realny cel to poziom 5 w perspektywie pół roku. Narzędzia i wiedza muszą ewoluować wraz z rozwojem AI.
Aktualny cel Aura: osiągnąć funkcjonalność na poziomie Framer dla landing pages. Możliwe będzie tworzenie stron, blogów, komponentów, ale nie zaawansowanych systemów jak membership czy payment (podobnie jak ograniczenia Framer).
Praktyczne porady dla designerów
Meng To radzi używanie najlepszych dostępnych narzędzi, ponieważ rynek będzie zalany produktami AI. Kluczowa umiejętność to rozwijanie gustu i rozpoznawanie jakości.
Polecane zasoby designerskie:
Komponenty i UI:
- UIverse: buttony, karty UI, animacje
- 21st.dev: komponenty i design patterns
- React Bits: animacje teł, tekstury, interakcje
Animacje i grafika:
- Spline Community: animacje 3D do remiksu
- Dribbble: inspiracje do zrzutów ekranu dla AI
- Midjourney: unikalne obrazy AI
Workflow tip: Zamiast pojedynczych promptów rób zrzuty ekranu ulubionych stron i przekazuj je do Lovable czy V0. Wszystkie szablony Aura są darmowe – można eksportować kod i używać w innych narzędziach.
Darmowe zasoby edukacyjne od Meng To:
- 4 godziny video trainingu o promptowaniu (darmowe)
- YouTube kanał: Design Code Team
- Twitter: @mengto
- 1500+ templates w Aura (wszystkie za darmo z eksportem kodu)
Checklist: Jak uniknąć generycznego designu
Przed rozpoczęciem:
- Znajdź inspirację (Comet, Dia, Dribbble)
- Wybierz template do remiksu zamiast pustego prompta
- Zdefiniuj unikalny element (font, kolor, animacja)
Podczas designu:
- Zmień font z Inter na coś unikalnego (np. Instrument Serif)
- Dostosuj kolory poza domyślne AI
- Dodaj niestandardowe obrazy (Midjourney > stock photos)
- Zintegruj animację (Spline, React Bits)
- Customizuj komponenty (UIverse, 21st.dev)
Finalizacja:
- Przetestuj na różnych urządzeniach
- Sprawdź, czy wygląda inaczej niż „AI default”
- Wyeksportuj kod do dalszego rozwoju
Biblioteka promptów do AI design
Na podstawie workflow Meng To, oto sprawdzone prompty z konkretnym zastosowaniem:
Prompty podstawowe (poziom generyczny – unikać)
❌ Zły przykład:
"Create a beautiful landing page for a new AI browser"
Problem: Daje generyczne wyniki we wszystkich narzędziach AI
Prompty do customizacji sekcji
✅ Remiks testimoniali:
"Create testimonials section without background and in light mode, using bento layout style"
Kiedy używać: Gdy masz bazową sekcję i chcesz ją zmodyfikować
✅ Zmiana trybu:
"Convert this section to dark mode, maintain current layout and typography"
Kiedy używać: Szybka zmiana kolorystyki bez utraty innych elementów
Prompty do integracji między narzędziami
✅ Transfer z Aura do Lovable:
"Replace the testimonials section in my current website with the design in the style of this HTML code: [wklej kod z Aura]"
Kiedy używać: Przenoszenie zaprojektowanej sekcji do funkcjonalnej strony
✅ Zachowanie stylingu:
"Update the entire landing page to use the font and styling from my HTML that I shared here. Keep the same typeface: [nazwa fontu]"
Kiedy używać: Gdy AI zmienia fonty/kolory wbrew intencjom
Prompty do komponentów
✅ Styling buttonów z UIverse:
"Apply this CSS button style to my current button: [wklej CSS z UIverse]"
Kiedy używać: Dodawanie unique buttonów z external resources
✅ Layout z CodePen:
"Adapt this HTML layout to my current design: [wklej kod z CodePen]"
Kiedy używać: Integracja ciekawych layoutów z community
Prompty do identyfikacji (ChatGPT method)
✅ Rozpoznawanie fontów:
"What font is used in this screenshot? Please identify the typeface name."
Kiedy używać: Gdy chcesz odtworzyć font z inspiracji
✅ Analiza designu:
"Analyze this website screenshot. What design patterns, color scheme, and layout techniques are used here?"
Kiedy używać: Reverse engineering dobrych designów
Prompty z referencjami (zaawansowane)
✅ Inspiracja z konkretnych stron:
"Create a hero section inspired by Perplexity Comet landing page, using glass morphism style with dark background"
Kiedy używać: Gdy masz konkretną inspirację design
✅ Brand consistency:
"Create components in the style of [Linear/Apple/Stripe], maintaining their typography hierarchy and spacing principles"
Kiedy używać: Naśladowanie proven design systems
Zasady skutecznego promptowania (według Meng To)
- Używaj referencji: Nazwa znanego produktu/strony działa lepiej niż ogólne opisy
- Specificity matters: „glass morphism with dark background” > „make it pretty”
- Iteruj: Nie rezygnuj po pierwszym promptie
- Łącz narzędzia: Prompty w Aura do designu → prompty w Lovable do funkcjonalności
- Screenshot method: Obrazy często działają lepiej niż tekst
- Name dropping: AI zna dobre wzorce – wykorzystuj to
Filozofia małych twórców
Meng To, pracujący solo z Singapuru, widzi przyszłość w niezależnych twórcach. Ludzie nie chcą ryzykować zwolnienia z powodu nowych narzędzi AI. Budowanie własnych produktów, stron, designów daje kontrolę i swobodę życia gdzie się chce.
Mali twórcy muszą współpracować i uczyć się razem, by budować następne Figmy, Lovable, Photoshopy. To przyszłość pełna możliwości i wolności.
Kluczowy insight
Paradoks promptu: Obraz zamiast słów
Standardowo myślimy: Sukces w AI design zależy od mistrzowskiego opanowania języka i pisania coraz bardziej złożonych, precyzyjnych promptów tekstowych.
W praktyce okazuje się, że: Najskuteczniejszym sposobem na uzyskanie pożądanego designu jest użycie zrzutu ekranu jako promptu wizualnego zamiast opisywania estetyki słowami.
Dlaczego to jest istotne: Przenosi to ciężar z próby opisania estetyki słowami na umiejętność znalezienia dobrego wzorca wizualnego. Oszczędza czas i eliminuje nieporozumienia w komunikacji z AI, a także opiera się na sprawdzonych wzorcach designu.
Test na jutro: Następnym razem gdy będziesz chciał stworzyć nowy komponent, zamiast spędzać 20 minut na opisywaniu go słowami, znajdź na Dribbble projekt który Ci się podoba, zrób zrzut ekranu, wklej go do AI z prostym poleceniem „stwórz to” i porównaj czas oraz jakość wyniku z metodą opartą wyłącznie na tekście.
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: Full Tutorial: Use AI to Create Beautiful Designs (Not Generic Slop) | Meng To
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.