Notatki z podcastu „How I AI”, w którym Claire Vo rozmawia z Ravi Mehtą – byłym CPO Tindera. Wszystkie przemyślenia, obserwacje i metody pochodzą bezpośrednio od rozmówców.

TL;DR

Problem „vibe prototyping”: PM-owie i designerzy tworzą przeciętne prototypy, prosząc AI o zbyt wiele naraz (UX + dane + kod)
Data-driven prototyping: zacznij od wygenerowania strukturalnego JSON w Claude, następnie wklej do narzędzia prototypowego
Unsplash MCP eliminuje hallucynacje: automatyczne pobieranie prawdziwych zdjęć zamiast złamanych linków i błędnych obrazów
Formuła Midjourney: Subject + Setting (w tym światło) + Style (używaj metadanych fotograficznych jak film stock)
Elastyczność: zmiana danych nie wymaga przebudowy UI – możesz testować różne scenariusze (Paryż → Tajlandia) w sekundy
Consumer AI wymaga psychologii: technologia to za mało, trzeba rozumieć potrzeby i psychologię użytkownika
Trick promptowania: używaj słowa „elite” (np. „You are an elite photographer”) – przesuwa model w przestrzeń lepszych wyników

Vibe prototyping nie działa tak dobrze, jak mogłoby

Mehta identyfikuje problem dotykający większość zespołów produktowych. PM-owie i designerzy promptują systemy prototypowe, których nie do końca rozumieją. W rezultacie prototyp się generuje, jednak często nie jest tym, czego potrzebują.

Vo nadaje temu nazwę „vibe prototyping” – w analogii do „vibe coding” inżynierów. Ludzie piszą kod, którego nie rozumieją. Podobnie PM-owie i designerzy promptują narzędzia bez pełnego zrozumienia mechanizmów. Efekty są imponujące, mimo to rzadko doskonałe.

Trzy główne problemy tego podejścia:

Niedokładne dane – treści są przypadkowe i często nielogiczne (np. hotel z Polinezji Francuskiej w planerze wycieczki do Paryża)
Błędy i hallucynacje – AI generuje elementy, które nie działają (zmyślone linki do zdjęć)
Przeciętna jakość – prototyp jest wynikiem kompromisów, ponieważ AI musi jednocześnie projektować UX, tworzyć model danych i pisać kod

Prototypowanie dla istniejących produktów to inna gra

Mehta rozróżnia dwa konteksty: budowanie czegoś od zera (od 0 do 1) oraz prototypowanie dla ustalonych produktów. Kiedy pracujesz z istniejącymi produktami, musisz dostosować się do obecnego UI. Masz również istniejące dane i funkcjonalność, które wymagają uwzględnienia.

Kluczowe pytanie brzmi: jak dostarczyć odpowiedni kontekst narzędziu? Większość zespołów wybiera jeden z dwóch sposobów: szczegółowe specyfikacje albo designy z Figmy. Mehta proponuje jednak trzecie podejście.

Trzy podejścia do prototypowania z AI

Spec-driven prototyping – piszesz szczegółowy prompt, starając się być jak najbardziej konkretny. Celem jest dostarczenie narzędziu wystarczającego kontekstu.

Design-driven prototyping – zaczynasz od obrazów. Wireframe’y, projekty z Figmy wrzucasz do narzędzia, które następnie je „ożywia”.

Data-driven prototyping – nowe podejście Mehty. Zacznij od danych. Dlaczego? Ponieważ tak właśnie robią inżynierowie. Kiedy engineering przegląda design lub specyfikację, pierwszą rzeczą jest pytanie o schemat danych napędzający frontend. To kodyfikuje elementy niejednoznaczne w designie lub specach.

Filozofia agentów: separation of concerns

Mehta wyjaśnia fundamentalną koncepcję swojego podejścia. Podstawowa idea agentów zakłada indywidualnych agentów z własnym kontekstem, pracujących razem sekwencyjnie. Alternatywą jest próba zrobienia wszystkiego za jednym zamachem.

Prosząc jedno narzędzie o wykonanie wszystkiego naraz (UX + dane + architektura kodu), otrzymujesz średnią wyników. Z kolei rozdzielając te zadania, każde może zostać wykonane na wyższym poziomie.

Analogia do zespołu produktowego: masz eksperta od designu, eksperta od produktu oraz eksperta od engineeringu. Każdy skupia się na swojej części, a razem tworzą lepszy rezultat.

Data-driven prototyping: workflow krok po kroku

Quick start checklist

Zdefiniuj schemat danych – zastanów się, jakie informacje są kluczowe dla Twojego interfejsu
Napisz szczegółowy prompt do LLM – poproś o wygenerowanie danych w formacie JSON
Dodaj źródła mediów – użyj narzędzi jak Unsplash MCP, by uniknąć hallucynacji
Przekaż JSON do narzędzia prototypującego – użyj prostego polecenia typu „Stwórz interfejs na podstawie tych danych”
Iteruj, modyfikując tylko dane – zmieniaj plik JSON, nie ruszając reszty prototypu

Krok 1: Wygeneruj schemat JSON w Claude

Zamiast promptować narzędzie prototypowe od razu, Mehta zaleca rozpoczęcie w Claude. Tam generujesz strukturalny schemat danych w formacie JSON.

Przykładowy prompt dla funkcji współdzielonego planowania wycieczki:

Using JSON, generate a sample itinerary that I can use 
to prototype a shared trip itinerary feature. 
The destination is Paris. The itinerary should include 
an itinerary name, cover photo, and date range covering 
three days. There should be three to four travelers 
associated with the itinerary. Each traveler should include 
a first name, last name, avatar photo, and preferred travel 
style like foodie or history buff. For each day, include 
a collection of things to see on that day. There should be 
12 to 15 items in total. The items should be a hotel for 
day one, popular things to see on each subsequent day. 
Each item should include a name, a start time, a duration, 
a star rating, number of reviews, tags to describe them, 
a photo, and a short description. Some items should have 
notes for one or more travelers. The notes should be in 
chronological order and respond to each other like 
a message thread for each itinerary item.

Prompt jest szczegółowy, jednak wykorzystuje naturalną mowę zamiast kodu. Opisujesz komponenty struktury danych bez konieczności pisania prawdziwego modelu. Zespoły pracujące nad istniejącym produktem mają przewagę – znają już schemat i prawdopodobnie dysponują prawdziwymi danymi.

Krok 2: Dodaj Unsplash MCP dla realistycznych zdjęć

Mehta nazywa to kluczowym odkryciem. Serwery MCP (Model Context Protocol) umożliwiają Claude dostęp do zewnętrznych usług. Unsplash MCP potrafi wyszukać „Eiffel Tower” lub nazwę hotelu, zwracając prawdziwy URL zdjęcia.

Bez tego rozwiązania AI halucynuje URLe. W efekcie otrzymujesz złamane linki albo – jak zauważa Vo – hotel z Polinezji Francuskiej zamiast paryskiego.

Mehta instaluje Unsplash MCP przez narzędzie Smithery. Claude automatycznie wywołuje funkcję search_photo dla każdego elementu wymagającego obrazu. Vo podkreśla: „Przeszukiwanie stock photos i próba znalezienia reprezentatywnych zajmuje mnóstwo czasu. MCP może teraz programatycznie przejść przez zadania – to po prostu dużo szybsze.”

Krok 3: Wklej JSON do narzędzia prototypowego

Mehta korzysta z Reforge Build – narzędzia zaprojektowanego dla zespołów produktowych. Generuje ono czysty kod, który łatwiej przenieść do produkcji.

Reforge Build zadaje pytania uzupełniające w celu poprawy prompta. Stanowi to dodatkową warstwę pomocy w definiowaniu kontekstu. Mehta pomija to w demo, niemniej podkreśla wartość mechanizmu.

Prompt w Reforge Build staje się prosty: „Generate a trip itinerary feature based on the sample data below.” Następnie wklejasz JSON.

Narzędzie nie musi teraz wykonywać wszystkiego jednocześnie. Zamiast wymyślać UX, strukturę danych i architekturę kodu, ma gotowe dane. Może się skupić na funkcjonalności i interfejsie, tworząc plan, komponenty wielokrotnego użytku oraz prototyp z mock in-memory state.

Porównanie: przed i po

Tradycyjny prompt (wszystko naraz):

Prompt: „Make a website for planning a Paris trip with multiple people. Include some activities, hotels and restaurants over three days. Add user profiles and let people comment on things. Make it look nice.”
Niektóre zdjęcia nie działają (złamane linki)
Hotel z Polinezji Francuskiej zamiast Paryża
Słabe zdjęcie Wieży Eiffla (tylko dolna część)
Awatary jako inicjały, nie prawdziwi ludzie
Nadmiar losowych emoji i dekoracji

Data-driven approach (JSON najpierw):

Wszystkie zdjęcia działają (prawdziwe URLe z Unsplash)
Piękne, pełne zdjęcie Wieży Eiffla
Realistyczne awatary prawdziwych ludzi
Dokładne metadane (długość wizyty, oceny, tagi)
Czystszy, bardziej nowoczesny design

Vo podsumowuje: „Dokładność danych znacząco poprawia postrzeganą jakość designu.”

Elastyczność i iteracje: zmień dane, nie kod

Mehta wskazuje to jako najważniejszą zaletę podejścia. Masz plik sample-data.ts z całym JSON. Chcesz zmienić imię podróżnika? Otwierasz plik, zmieniasz „Marcus” na „Mark”, przeładowujesz. Gotowe.

Chcesz inne zdjęcie okładkowe? Wyszukujesz „Paris” na Unsplash, kopiujesz URL, wklejasz do JSON, przeładowujesz. Również gotowe.

Chcesz całkowicie inną wycieczkę? Wracasz do Claude z poleceniem: „Now generate an itinerary for the same travelers going to Thailand.” Claude pamięta cały kontekst i zna schemat. Wraca do Unsplash MCP, pobiera nowe zdjęcia, generuje nowy JSON. Kopiujesz, wklejasz, przeładowujesz.

Mehta demonstruje to na żywo podczas podcastu. Paryż → Tajlandia w mniej niż minutę.

Augmentowanie istniejących danych

Mehta podaje praktyczny przykład: masz istniejący trip itinerary array, ale brakuje konwersacji. Możesz wrzucić ten JSON do Claude z poleceniem augmentacji o informacje o podróżnikach i ich rozmowach. Claude rozpocznie od posiadanego JSON i doda brakujące dane.

To pokazuje możliwość iteracji na już posiadanych danych, żeby uzyskać to, czego potrzebujesz dla prototypu.

Dodawanie nowych funkcji dynamicznie

Mehta dodaje na żywo funkcję „blank cards” – karty pokazujące wolny czas między aktywnościami. Narzędzie implementuje funkcjonalność wykorzystując istniejący dataset. Jest ona całkowicie dynamiczna, nie wbudowana w prototyp. Demonstracja pokazuje łatwość rozszerzania prototypu o nowe elementy bez przebudowy całości.

Dlaczego to ma znaczenie dla testów użytkowników

Możesz stworzyć różne wersje dla odmiennych segmentów. Młodsza osoba jedzie do Paryża po raz pierwszy. Starsza osoba była tam już 3-4 razy. Testujesz funkcję z autentycznymi danymi pasującymi do użytkownika, a nie z „Lorem Ipsum” lub zduplikowanymi komponentami.

Vo wspomina czasy, kiedy trzeba było ręcznie wklejać Lorem Ipsum do mock-upów. Istniały nawet śmieszne generatory Lorem Ipsum w internecie. Obecnie możesz generować pseudo-realistyczny content na skalę bez manualnego obciążenia designera, content designera, PM-a czy inżyniera.

Mehta podkreśla: „Użytkownicy nigdy nie pomijają danych. My jako product builderzy jesteśmy przyzwyczajeni do myślenia o danych oddzielnie od UX. Ale użytkownicy tego nie robią.”

Szczególnie ważne dla UGC

Mehta dodaje obserwację o doświadczeniach UGC. Content dostarczany przez użytkowników nigdy nie jest tak piękny jak ten w Figmie. Dlatego warto zobaczyć, jak faktycznie będzie wyglądać dla użytkowników.

Vo’s hack: używaj production data

Vo wpadła na pomysł podczas nagrania. Zamiast wymyślać dane, można odpytać produkcyjną bazę i stworzyć przykładowy JSON reprezentujący faktyczne dane użytkowników. To pomoże stress-testować UX. Designerzy nigdy nie wstawią wertykalnie, niewłaściwie przyciętego zdjęcia do swoich pięknych designów w Figmie. Nigdy nie otrzymasz tego przypadkowego, zepsutego doświadczenia. Jednak AI zrobi to za ciebie i pomoże przetestować różne scenariusze.

Profesjonalne zdjęcia w Midjourney: formuła trzech elementów

Mehta współpracował z designerem Finnem Sturdym nad opracowaniem frameworka dla wysokiej jakości obrazów z Midjourney. Problem polega na tym, że większość ludzi promptuje chaotycznie. Rezultaty są ładne, niemniej nie użyteczne.

Vo zauważa szybkość Midjourney. Kiedyś był wolny, teraz jest szybki. Content jest już piękny bez względu na prompt, można go jednak uczynić użytecznym.

Formuła: Subject + Setting + Style

Subject – co dokładnie chcesz na zdjęciu Nie tylko „office chair”, ale „empty, stylish office chair”. Precyzja ma znaczenie.

Setting – gdzie to jest + jakie światło Obejmuje dwie rzeczy: umiejscowienie w pomieszczeniu oraz oświetlenie. Fotografowie myślą dużo o świetle. Jeśli opiszesz światło w prompcie, otrzymasz lepsze rezultaty. Zamiast „soft lighting” powiedz „autumn rainy morning”. Model wie, jakie światło pasuje do tego settingu.

Style – jak ma to wyglądać To najważniejsza część. Większość ludzi próbuje opisać styl słowami, jednak zdjęcia nie są tak tagowane. Warto pomyśleć: jak fotograf opisałby konkretne zdjęcie? Mogą używać odniesień kulturowych, lokalizacyjnych albo metadanych kamery oraz informacji o sesji.

Film stock: „Fujicolor C200” (ciepły), „Kodak Tri-X” (kontrastowy czarno-biały). Aparat: „Leica” (za $8,000 – niedostępny dla większości, lecz wspomnienie go przesuwa model w przestrzeń high-end fotografii). Obiektyw: „50mm lens” (popularny do portretów). Przysłona: „f1.2” (bardzo rozmyte tło, eteryczny efekt).

Przykłady promptów

Mehta pokazuje ewolucję od prostego do structured promptu. Różnica jest ogromna.

Prosty prompt:

office chair

Otrzymasz ładne fotele, ale czy są użyteczne? Czy można je wrzucić do katalogu? Prawdopodobnie nie.

Structured prompt z pełną formułą:

Empty, stylish office chair positioned near a large window

with natural light streaming in, set in a modern glass 
Italian architect's office with a trestle desk in Milan, 
shot on Fujicolor C200

Zmiana nastroju (to samo miejsce, inne światło):

Empty, stylish office chair positioned near a large window,

set in a modern glass Italian architect's office with a 
trestle desk in Milan during an autumn rainy morning, 
shot on Fujicolor C200

Otrzymujesz krople deszczu, Mediolan w tle. Szybko przechodzisz od pięknego porannego światła do miękkiego – nie przez opisywanie samego światła, lecz przez zmianę settingu.

Zmiana lokalizacji:

Empty, stylish office chair positioned near a large window

with natural light streaming in, set in a modern glass 
American architect's office with a trestle desk in New York, 
shot on Fujicolor C200

Portrait z pełnymi metadanymi:

Young man with brown hair and eyes at golden hour,

shot on Leica, 50mm lens, f1.2, Fujifilm Provia

Portrait bez metadanych (dla porównania):

Young man with brown hair and eyes

To daje szkice lub zdjęcie z „uncanny look” – trochę zbyt perfekcyjne. Bez metadanych narzędzie próbuje użyć średniej wszystkich danych treningowych.

Mehta zauważa: „Tło jest równie ważne dla zapewnienia poczucia miejsca.” Jeśli wolisz Nowy Jork niż Mediolan, po prostu zmień to w prompcie.

Dlaczego metadane działają lepiej niż opisy

Mehta wyjaśnia mechanizm. Modele są trenowane na danych z opisami lub metadanymi wokół obrazów. Tworzą mapowanie między językiem a obrazem. Kiedy używasz fotograficznego języka, model przeszukuje wyższej jakości zdjęcia w datasecie.

Pisząc „Fujicolor C200”, kierujesz model do zdjęć oznaczonych tym film stockiem. Pisząc „Leica”, wchodzisz w przestrzeń high-end fotografii. To nie magia – to dostęp do lepszej części datasetu treningowego.

Kluczowa zasada: photographer terminology > descriptive language. „Kodak Tri-X” działa lepiej niż „grainy, contrasty, black and white”. „Autumn rainy morning” działa lepiej niż „soft, diffused lighting”. „50mm lens, f1.2” działa lepiej niż „blurry background”.

Film stock niesie ze sobą dużo znaczenia. Otrzymujesz nie tylko inny styl, ale także ciekawe kompozycje. Ma to związek z tym, jak modele były trenowane – na danych z opisami lub metadanymi wokół obrazów.

Midjourney wyróżnia się również tym, że daje różne wariacje. Otrzymujesz 3-4 opcje, wszystkie piękne i użyteczne.

Uncanny valley vs. high-end aesthetic

Mehta porównuje zdjęcia wygenerowane z i bez metadanych aparatu. Bez metadanych otrzymujesz szkice lub zdjęcie z „uncanny look” – zbyt perfekcyjne. Dzieje się tak, ponieważ narzędzie próbuje użyć średniej wszystkich danych treningowych.

Z metadanymi otrzymujesz zdjęcia bez uncanny valley, które czasem trudno uzyskać z AI. Mają estetyczną jakość dzięki wykorzystaniu kontekstu high-end fotografii.

Art literacy jako competitive advantage

Vo wnosi głęboką obserwację. W momencie, gdy używamy języka naturalnego do generowania assetów, znajomość sztuki staje się naprawdę ważna. Umiejętność opisywania designu ma znaczenie.

Ludzie nie poświęcają wystarczająco czasu na artykułowanie, co oznacza smak, elegancja, jakość czy styl. Znajomość referencyjnych stylów sztuki, urządzeń fotograficznych oraz lokacji – język jest teraz fundamentem dla technologii. Bez inwestycji w umiejętności językowe, tracisz zdolność do tworzenia wysokiej jakości assetów.

Mehta zgadza się i rozwija myśl. Dwa fundamentalne elementy tworzenia to smak i craft. Smak to zdolność do poznania, co jest dobre lub czego chcesz. Craft to zdolność do faktycznego osiągnięcia tej wizji. Z AI wszyscy dostali 10x w craft. Każdy teraz może tworzyć zdjęcia, muzykę, inne rzeczy. Jednak smak pozostaje kluczowy. Jak wziąć tę niesamowitą moc i użyć jej do stworzenia czegoś spełniającego potrzeby – czy kreatywnie, czy zawodowo?

Vo’s hack: backwards engineering promptów

Jeśli nie czujesz, że masz naturalne umiejętności patrzenia na zdjęcie i opisywania jego cech, Vo proponuje rozwiązanie. Weź zdjęcie, wrzuć do Claude lub ChatGPT i poproś o opis w języku. To może być teren treningowy, który dostarczy ci słownictwa do promptów.

Ludzie muszą włożyć wysiłek w trenowanie się, jak pisać dobre prompty. Odkodowując rzeczy, które lubią, rozwijają zrozumienie. W miarę jak to zrozumienie rośnie, rozwija się też słownictwo – co jest niesamowicie potężne dla promptowania.

Consumer AI: psychologia > technologia

Rozmowa schodzi na produkty AI dla konsumentów. Mehta zauważa fundamentalną różnicę. ROI AI w B2B jest zazwyczaj jasne. Jeśli możesz przyspieszyć workflow, uczynić kogoś szybszym, bardziej zdolnym – powód jest oczywisty. Dla konsumentów nie zawsze jest jasne, jaka jest wartość i jaki problem rozwiązujesz. Nie każdy problem wart rozwiązania dla konsumentów.

To, że możesz coś zrobić technologią, nie znaczy, że ludzie tego chcą. Dobry consumer AI jest zakotwiczony w zrozumieniu psychologii konsumenta i jego potrzeb. Dopiero potem mapujesz, jak AI pasuje do tej psychologii. Zamiast zaczynać od rozwiązania technologicznego i mówić „możemy zrobić te fajne rzeczy, stwórzmy consumer app”, lepiej skupić się na potrzebach.

Jest trochę magii, która musi się wydarzyć z consumer. Sposób na de-riskowanie to skupienie się na potrzebach i naprawdę zrozumienie podstawowej psychologii.

Vo dodaje dwa niedoceniane obszary. Pierwszy to extreme delight – bogate, zachwycające doświadczenia. Te części apki, które zazwyczaj wycinasz w redukcji scope’u, stanowią prawdziwą okazję. Drugi to personalizacja – dostosowanie do miejsca, ludzi, tego co wiemy o użytkowniku. Nie musi wyglądać jak chatbot. Może to być tag, komentarz lub zdjęcie – coś bardzo szczególnego, nawet jeśli nie wygląda jak chatbot.

Mehta przypomina swoim zespołom: „Jeśli wytniesz wszystkie nice-to-haves, Twój produkt nie będzie nice to have. Musisz zarezerwować czas na rzeczy, które sprawiają, że produkt się wyróżnia.”

Triki promptowania od Ravi Mehty

Na koniec Vo pyta o strategię na sytuacje, gdy AI nie robi tego, czego chcesz. Oprócz podawania referencyjnych lokalizacji (śmiech z Mediolan), Mehta ma konkretną taktykę.

Stara się być bardzo zachęcający, często używając słowa „elite”. „You are an elite sales coach” lub „You are an elite photographer”. Po prostu podnoś oczekiwania modelu względem siebie.

To nie jest psychologia dziecka. To strategia danych treningowych. Dużo z promptowania polega na wyborze przestrzeni datasetu treningowego. Kiedy używasz zachęcających słów, te słowa są powiązane z naprawdę wysokiej jakości outputem. Przesuwają model w lepszą przestrzeń treningową.

Podsumowanie praktyczne

Data-driven prototyping rozwiązuje problem „vibe prototyping”:

Zacznij w Claude, nie w narzędziu prototypowym
Wygeneruj strukturalny JSON z dokładnym schematem danych
Użyj Unsplash MCP dla prawdziwych zdjęć (zero hallucynacji)
Wklej JSON do narzędzia prototypowego z prostym promptem
Iteruj, zmieniając tylko dane – nie kod, nie UI
Augmentuj istniejące dane, jeśli masz już jakieś
Dodawaj nowe funkcje dynamicznie do działającego prototypu

Dla Midjourney: pamiętaj o formule Subject + Setting + Style. Używaj metadanych fotograficznych zamiast opisów. Myśl jak fotograf, nie jak osoba opisująca to, co chce zobaczyć.

Dla nauki promptowania: weź dobre zdjęcia i poproś AI, żeby je opisało. To rozwinie Twoje słownictwo.

Dla consumer AI: zacznij od psychologii i potrzeb użytkownika, nie od technologii. Taste + craft = świetny produkt. AI dał wszystkim craft, ale smak to nadal Twoja przewaga.

Mehta prowadzi klasę AI Strategy z Brianem Balfourem w Reforge. Więcej można znaleźć na jego Substack: Ravi on Product (ravi-meta.com) lub na LinkedIn.

Biblioteka promptów: gotowe szablony z uzasadnieniem

Prompty do data-driven prototyping

1. Generowanie strukturalnego JSON dla prototypu

Using JSON, generate a sample [opis funkcji] that I can use

to prototype a [nazwa funkcji] feature. 

Include:
- [lista kluczowych elementów danych]
- [specyfikacja relacji między danymi]
- [dodatkowe wymagania, np. chronologia, tagi, itp.]

[Opcjonalnie: dodaj kontekst, np. "The destination is Paris" 
lub "For a fitness tracking app"]

Kiedy stosować: Na samym początku procesu prototypowania, zanim zaczniesz pracę w narzędziu prototypowym. Idealny moment, gdy masz pomysł na funkcję, lecz chcesz najpierw zdefiniować strukturę danych.

Dlaczego to działa: Claude dostaje jasny kontekst o potrzebnych danych bez konieczności myślenia o UI. Może skupić się tylko na stworzeniu solidnego, konsystentnego schematu danych. Format JSON wymusza strukturalność.

2. Augmentowanie istniejących danych

Here is my existing JSON:

[wklej swój JSON]

Augment this JSON with [opis brakujących danych, np. 
"information about travelers and their conversations" 
lub "additional metadata like ratings, reviews, and tags"].

Maintain the existing structure and data quality.

Kiedy stosować: Gdy masz już jakieś dane (np. z produkcyjnej bazy), jednak brakuje Ci pewnych elementów potrzebnych do prototypu. Albo gdy chcesz rozszerzyć prototyp o nowe pola bez budowania wszystkiego od nowa.

Dlaczego to działa: Claude zachowa to, co już masz, i doda tylko to, czego potrzebujesz. To oszczędza czas i zapewnia spójność z istniejącymi danymi.

3. Iteracja na tym samym schemacie (zmiana kontekstu)

Now generate [ten sam typ danych] for [nowy kontekst].


[Przykład: "Now generate an itinerary for the same travelers 
going to Thailand" lub "Generate the same product catalog 
but for winter clothing instead of summer"]

Kiedy stosować: Gdy chcesz przetestować ten sam prototyp w różnych kontekstach lub dla odmiennych segmentów użytkowników. Perfekcyjne do A/B testowania lub pokazania stakeholderom różnych scenariuszy.

Dlaczego to działa: Claude pamięta kontekst konwersacji i zna już strukturę. Musi tylko wypełnić nowe dane zgodnie z tym samym schematem. To działa w sekundach.

4. Prosty prompt do narzędzia prototypowego

Generate a [typ funkcji, np. "trip itinerary feature",

"product catalog", "dashboard"] based on the sample data below.

[wklej JSON]

Kiedy stosować: Po wygenerowaniu JSON w Claude. To prompt do narzędzia prototypowego (np. Reforge Build, v0, Bolt).

Dlaczego to działa: Narzędzie nie musi wymyślać danych – może skupić się na UX i implementacji. Dostaje pełny kontekst w postaci strukturalnych danych, więc generuje lepszy, bardziej spójny prototyp.

5. Tradycyjny „vibe” prompt (dla porównania)

Make a website for [opis funkcjonalności]. Include [lista elementów].

Add [dodatkowe wymagania]. Make it look nice.

Kiedy NIE stosować: Prawie nigdy, jeśli zależy Ci na jakości. Ten prompt prosi AI o zrobienie wszystkiego naraz: UX, dane, architektura. Otrzymasz średnią wszystkich tych rzeczy.

Kiedy można stosować: Tylko do bardzo szybkich eksperymentów lub gdy testujesz pomysł niewwymagający wysokiej jakości. Albo gdy naprawdę nie masz czasu na data-driven approach.

Prompty do Midjourney (generowanie zdjęć)

6. Formuła podstawowa: Subject + Setting + Style

[Subject - dokładny opis obiektu], [Setting - gdzie + opis sceny/oświetlenia],

[Style - metadane fotograficzne]

Przykład:
Empty, stylish office chair positioned near a large window with natural 
light streaming in, set in a modern glass Italian architect's office with 
a trestle desk in Milan, shot on Fujicolor C200

Kiedy stosować: Zawsze w Midjourney, gdy chcesz profesjonalnych, użytecznych zdjęć (nie tylko ładnych). To uniwersalna formuła działająca dla produktów, wnętrz, portretów itd.

Dlaczego to działa: Rozdzielasz concerns: co jest na zdjęciu, gdzie to jest, jak ma wyglądać. Używasz języka fotografów (metadane), więc model sięga po lepszą część datasetu treningowego.

7. Zmiana nastroju/światła (ten sam subject)

[Ten sam Subject i podstawowy Setting], during [opis pogody/pory dnia],

[ten sam Style]

Przykład:
Empty, stylish office chair positioned near a large window, set in 
a modern glass Italian architect's office with a trestle desk in Milan 
during an autumn rainy morning, shot on Fujicolor C200

Kiedy stosować: Gdy chcesz różne wersje tego samego obiektu w odmiennych nastrojach. Idealne do portfolios, katalogów produktowych, mood boardów.

Dlaczego to działa: Nie musisz opisywać „soft lighting” czy „moody atmosphere” – po prostu mówisz „autumn rainy morning” i model sam wie, jakie światło do tego pasuje.

8. Portrait z pełnymi metadanymi

[Opis osoby] at [pora dnia/światło], shot on [aparat],

[obiektyw], [przysłona], [film stock]

Przykład:
Young man with brown hair and eyes at golden hour, shot on Leica, 
50mm lens, f1.2, Fujifilm Provia

Kiedy stosować: Do portretów dla prototypów, about pages, team pages, user personas. Gdy chcesz realistycznych, high-quality portretów bez uncanny valley.

Dlaczego to działa: Metadane kamery = dostęp do high-end fotografii portretowej w datasecie. f1.2 daje naturalne rozmyte tło, a film stock dodaje charakteru.

9. Prosty prompt (dla porównania – NIE UŻYWAJ)

[podstawowy opis, np. "office chair" lub "young man"]

Dlaczego to NIE działa: Otrzymasz ładne rezultaty, jednak nie użyteczne. Brak precyzji w subject, brak kontekstu settingu, brak metadanych style = średnia wszystkich możliwych zdjęć tego typu. Często uncanny valley przy portretach.

Kiedy można stosować: Tylko do bardzo wczesnego brainstormingu, gdy jeszcze nie wiesz, czego dokładnie chcesz.

Prompty do podnoszenia jakości outputu

10. „Elite” prefix (uniwersalny trick)

You are an elite [rola, np. "photographer", "sales coach", 
"copywriter", "data analyst"].

[Twój właściwy prompt]

Kiedy stosować: Zawsze, gdy chcesz podnieść jakość outputu. Działa dla każdego typu zadania i każdego modelu.

Dlaczego to działa: Słowo „elite” przesuwa model w przestrzeń high-quality outputu w datasecie treningowym. To nie psychologia – to strategia dostępu do lepszych danych, na których model był trenowany.

11. Backwards engineering (nauka promptowania)

[Wklej zdjęcie lub upload]

Describe this image in detail using photographer's terminology. 
Include:
- Subject description
- Setting and lighting conditions
- Technical specifications (if visible or inferable)
- Style and aesthetic qualities

Use the language a professional photographer would use.

Kiedy stosować: Gdy chcesz nauczyć się lepszego promptowania. Znajdź zdjęcia, które Ci się podobają, wrzuć do Claude/GPT i poproś o opis. To rozwinie Twoje słownictwo.

Dlaczego to działa: AI opisze zdjęcie używając terminologii faktycznie działającej w promptach (bo to jest język z datasetu treningowego). Budujesz swoją bibliotekę słownictwa do przyszłych promptów.

Kluczowe zasady promptowania (według Mehty i Vo)

Separation of concerns – rozdziel zadania na mniejsze, każde z własnym kontekstem (filozofia agentów)
Data first, UI second – zacznij od struktury danych, nie od opisu interfejsu
Photographer terminology > descriptions – „Fujicolor C200” działa lepiej niż „warm, golden tones”
Setting over lighting – opisuj scenę („autumn rainy morning”), nie technikę („soft, diffused light”)
Metadata unlocks quality – używaj słów powiązanych z high-quality outputem w datasecie treningowym
Iterate on data, not prompts – zmień JSON, nie przepisujesz prompta
Elite mindset – podnoś oczekiwania modelu względem siebie („You are an elite…”)

Kluczowy insight

Lepszy projekt przez twarde dane: paradoks kontroli

Standardowo myślimy: Aby AI stworzyło lepszy, bardziej kreatywny interfejs, musimy dać mu lepsze instrukcje wizualne i więcej swobody w kwestii projektu. Im bardziej szczegółowo opiszemy UX, tym lepszy będzie rezultat.

W praktyce okazuje się, że: Najlepsze rezultaty wizualne i największą kreatywność AI w projektowaniu UI osiąga się przez narzucenie mu najpierw skrajnie sztywnych, technicznych ram dotyczących danych (JSON). Odbierając AI swobodę w interpretacji danych, zmuszasz je do skupienia całej swojej mocy na jednym zadaniu: stworzeniu idealnego interfejsu dla tej konkretnej struktury.

Dlaczego to jest istotne: To przesuwa uwagę z próby kontrolowania nieprzewidywalnego wyniku (projektu) na kontrolowanie przewidywalnego fundamentu (danych). Paradoksalnie daje nam to większą kontrolę nad jakością końcowego produktu. Jak pokazuje Mehta – zamiast walczyć z AI o każdy piksel, definiujesz co jest prawdą (dane), a AI może swobodnie odkrywać jak tę prawdę najlepiej pokazać.

Test na jutro: Następnym razem tworząc prototyp AI, zamiast opisywać w prompcie jak interfejs ma wyglądać i działać, zignoruj to całkowicie. Poświęć 80% czasu na stworzenie idealnego pliku JSON z danymi – zastanów się nad każdym polem, relacją, typem wartości. Następnie poproś AI o zbudowanie interfejsu na podstawie tych danych, dając mu w tej kwestii pełną swobodę. Sprawdź, jak jakość designu wzrośnie, gdy przestaniesz go projektować.

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: How I AI Podcast – howiaipod.com

Tag: Json Prototyping

Dlaczego prototypy AI powinny zaczynać się od JSON, nie od designu #EN305