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

Tag: Screenshot Method

Jak tworzyć unikalne strony z AI, które nie wyglądają jak generyczne szablony #EN236