Jak zbudować platformę badań UX z pomocą AI – case study SonderAI #EN295

TL;DR

• Systematyczny przepływ pracy z AI: PRD (ChatPRD) → UI design (UX Pilot) → implementacja (Cursor) zapewnia spójność i jakość
• Kontekst jest kluczowy: jakość promptów drastycznie wpływa na wyniki AI – im więcej szczegółów, tym lepsze rezultaty
• Dzielenie zadań na małe kroki: przeciwko próbom zrobienia wszystkiego na raz – AI lepiej radzi sobie z dyskretnymi zadaniami
• Tech stack dla beginnera: Vue.js zamiast React (niższa krzywa uczenia), Supabase jako kompleksowy backend
• Od no-code do code: przejście przez Bubble pozwoliło zrozumieć podstawy baz danych i API
• Discovery problem: zespoły produktowe skupiają się na budowaniu kosztem zrozumienia potrzeb klientów
• AI w UX research: automatyzacja transkrypcji, kategoryzacji i analizy feedback’u skraca czas z dni do minut

Problem discovery w zespołach produktowych

Li Xia, były UX designer i product manager z ośmioletnim doświadczeniem, zidentyfikował fundamentalny problem w pracy zespołów produktowych. Mimo wieloletniego doświadczenia w różnych startupach i firmach enterprise, zarówno B2B jak i B2C, obserwował powtarzający się wzorzec. Zespoły skupiają się głównie na budowaniu i wysyłaniu produktów, podczas gdy zrozumienie klientów zostaje zepchnięte na drugi plan.

Ta obserwacja jest o tyle istotna, że discovery to umiejętność, która nie jest formalnie nauczana w żadnych kursach. Wiele zespołów produktowych, w których Li pracował, zaniedbywało fazę dogłębnego zrozumienia problemów klientów. W rezultacie Li dostrzegł możliwość wykorzystania AI do uproszczenia tego procesu dla zespołów produktowych. Dlatego postanowił stworzyć SonderAI – platformę, która ma uczynić customer discovery „bezproblemowym”.

SonderAI: AI-native platforma badań UX

SonderAI pokrywa cały przepływ pracy customer discovery – od planowania badań po analizę wyników. Jednak platforma wykracza poza tradycyjne narzędzia badawcze, oferując kompleksowe rozwiązanie.

Recruitment i conduct badań:

• Partnerstwo z globalną siecią 200,000 uczestników z 33 krajów
• Możliwość filtrowania według lokalizacji i demografii
• Testowanie prototypów, stron mobilnych lub live websites
• Wbudowane surveys dla danych quantitative

Analiza napędzana AI:

• Automatyczna transkrypcja sesji z timestampami
• AI wyciąga konkretne insights związane z typem badania (np. problemy usability dla testów użyteczności)
• Kategoryzacja komentarzy według tagów (functionality issues, content problems)
• Możliwość przeskakiwania do konkretnych momentów w nagraniach

Li podkreślił kluczową przewagę platformy: uczestnicy mogą przejść sesję 20-30 minut, a badacz może przeprowadzić wywiady z 20-30 osobami. W efekcie powstaje ogromna ilość danych do przejrzenia.

Trend AI prototyping: Li zauważył rosnący trend w ostatnich trzech miesiącach – klienci coraz częściej testują prototypy generowane przez AI zamiast mockupów z Figmy. Główną zaletą jest wysoka wierność doświadczenia, która lepiej symuluje rzeczywiste użytkowanie niż ograniczone prototypy Figma.

Systematyczny proces rozwoju z AI

ChatPRD: fundament dokumentacji

Li rozpoczyna każdą funkcjonalność od szczegółowego PRD (Product Requirements Document) generowanego przez ChatPRD. To narzędzie stworzone przez Claire Vo z LaunchDarkly przypomina wywiad, gdzie AI zadaje pytania o cele biznesowe, cele użytkowników i szczegóły doświadczenia.

Dlaczego PRD jest tak ważny? Według Li, dokument ten zawiera cały kontekst, który później wykorzystują narzędzia AI. Bez tych fundamentów późniejsze kroki są znacznie mniej efektywne. W rezultacie ChatPRD stał się podstawą całego systemu rozwoju produktu.

UX Pilot: od specyfikacji do interfejsu

Po stworzeniu PRD Li przechodzi do UX Pilot – narzędzia prompt-to-UI. Mimo prostoty koncepcji, proces wymaga systematycznego podejścia:

• Zrzut ekranu obecnego interfejsu jako punkt wyjścia
• Wklejenie user stories i funkcjonalnych wymagań z PRD
• Iteracyjne edytowanie interfejsu z AI
• Przegląd i dostosowanie UX zgodnie z własnymi zasadami designu

Li zauważył krytyczny punkt: ilość kontekstu w prompcie drastycznie wpływa na jakość i rezultat. Najlepsze wyniki pochodzą z kombinacji jasnego kontekstu o funkcjonalności i zasad systemu projektowania.

ShadCN zamiast Figma: Li nie używa Figma do custom designów. Zamiast tego wykorzystuje ShadCN design system (Vue version) z własnymi customizacjami kolorów. Dzięki temu praca UX skupia się na layout i flow, a nie na projektowaniu każdego komponentu od zera.

Cursor: implementacja z AI agents

Li używa pliku „generate tasks” z systemowymi promptami, które instruują AI jak rozbić PRD na konkretne zadania techniczne. To skalowalne podejście pozwala wielokrotnie wykorzystywać te same prompty. W ostatnich miesiącach przeszedł z Claude na Gemini 2.5, który jego zdaniem bardzo dogonił inne frontier models w zadaniach kodowania.

Kluczowe zasady implementacji: □ Import PRD do Cursor w formacie Markdown □ Generowanie szczegółowych engineering tasks z pomocą AI
□ Praca nad jednym zadaniem na raz – żadnych prób zrobienia wszystkiego jednocześnie □ Przegląd każdego kroku przed przejściem do następnego

Li mocno podkreślił: zamiast próby zrobienia całej listy zadań na raz, AI pracuje nad jednym punktem na raz. Specjalny plik „Action Tasks” instruuje AI żeby zatrzymał się po każdym zadaniu i czekał na przegląd.

Case study: „Limit responses per participant” Podczas demo Li pokazał implementację konkretnej funkcjonalności – możliwości ograniczenia odpowiedzi do jednej na uczestnika. Cały proces od PRD przez UI design do działającego kodu zajął około godziny. W efekcie demonstrował efektywność systematycznego podejścia.

To podejście dramatycznie redukuje potrzebę debugowania. Jak tłumaczył Li: znacznie łatwiej jest napisać kod dobrze od początku niż później go debugować.

Tech stack dla solo builder’a

Wybór frameworka: Vue.js vs React

Li wybrał Vue.js ze względu na niższą krzywą uczenia. Po przejściu kursów Vue i React stwierdził, że Vue po prostu lepiej kliknął w jego mózgu. Jednak wybór nie był przypadkowy.

Dodatkową zaletą Vue było prostsze setup – podczas gdy React wymagał skomplikowanej konfiguracji, Vue można było uruchomić poprzez CDN link. W rezultacie pozwalało to na szybsze rozpoczęcie nauki.

Supabase jako backend all-in-one

Wybór Supabase był celowy ze względu na potrzebę relacyjnej bazy danych (SQL) zamiast NoSQL. Li preferuje uproszczenie stacku – pozostaje w ekosystemie Supabase chyba że ma mocny powód żeby z niego wyjść.

Supabase oferuje:

• Różne środowiska (local development, staging, production)
• Możliwość pracy lokalnej z przesyłaniem do zarządzanych rozwiązań
• Integracja z Vercel dla automatycznych wdrożeń
• Architektura serverless eliminująca kompleksowość zarządzania infrastrukturą

Wiele środowisk w praktyce: Li pracuje lokalnie z Supabase, a następnie przesyła zmiany do hostowanych środowisk. Dzięki temu Vercel automatycznie wdraża kod z różnych gałęzi Gita na odpowiednie środowiska.

Przejście od no-code do code

Li rozpoczął swoją techniczną podróż od Bubble, budując productivity tools które sam chciał używać. Jak przyznał, najlepiej uczy się przez realizację praktycznych projektów, które rzeczywiście chciał mieć w swoim workflow. Bubble nauczyło go podstaw – strukturę baz danych, interakcję z API – które stały się fundamentem dla dalszej nauki.

Mimo to szybko osiągnął limity no-code platform i przeszedł na kodowanie. W rezultacie okazało się to bardziej efektywne niż visual builders jak Webflow.

Checklista: Jak tworzyć produkty z AI według metody Li Xia

Oto praktyczna checklista podsumowująca jego proces, którą można zastosować we własnej pracy:

Etap 1: Przygotowanie – Stwórz fundamenty □ Użyj narzędzia (np. ChatPRD) do wygenerowania szczegółowego dokumentu PRD □ Zdefiniuj „dlaczego” i „co” budujesz, zanim napiszesz linijkę kodu

Etap 2: Wizualizacja – Przekształć tekst w UI
□ Wykorzystaj narzędzie „prompt-to-UI” (np. UX Pilot) □ W prompcie połącz fragmenty PRD z ogólnymi zasadami designu

Etap 3: Kodowanie – Pracuj iteracyjnie z AI □ W edytorze kodu załaduj PRD, szablony promptów i opis stacku jako kontekst □ Zleć AI wygenerowanie listy zadań inżynierskich na podstawie PRD
□ Zweryfikuj i w razie potrzeby popraw wygenerowaną listę zadań □ Zlecaj AI wykonanie jednego zadania naraz □ Sprawdzaj kod po każdym kroku, zanim przejdziesz do następnego

Kluczowe zasady pracy z AI w dewelopmencie

Proces Li Xia pokazuje, że efektywna praca z AI opiera się na kilku uniwersalnych zasadach:

Bądź precyzyjny: Li przyznaje, że czasami AI bywa kapryśne. Bycie bardzo precyzyjnym zdecydowanie pomaga. Jasne instrukcje minimalizują ryzyko błędów.

Poznaj fundamenty: Mimo zaawansowanych narzędzi, Li radzi początkującym by najpierw przeszli kursy z podstaw (np. JavaScript). Daje to ogromną przewagę, ponieważ to ty wciąż jesteś za kierownicą i prowadzisz AI.

Traktuj AI jak członka zespołu: Potrzebuje ono jasnego kontekstu i wytycznych, a nie jest bezbłędną wyrocznią.

Pozostań „kierowcą” procesu: Rola dewelopera polega na nadzorowaniu, weryfikowaniu i korygowaniu pracy AI.

Praktyczne wskazówki dla AI development

Znaczenie precyzyjnych instrukcji

Li wielokrotnie podkreślał: im bardziej precyzyjny możesz być, tym lepsze rezultaty. AI są „finicky” i potrzebują jasnych, szczegółowych instrukcji. Dlatego systematyczne podejście do tworzenia kontekstu jest kluczowe.

System plików pomocniczych

Li utrzymuje zestaw „meta-docs” w projekcie. W efekcie pozwalają na skalowalne wykorzystanie tych samych promptów dla każdej nowej funkcjonalności:

• Cursor rules file – opisujący stos technologiczny projektu
• Generate tasks file – z systemowymi promptami do rozbijania PRD na zadania
• Action tasks file – z instrukcjami przepływu pracy dla agentów AI

Debugowanie i kiedy używać tego przepływu pracy

Nawet z najlepszymi praktykami błędy się zdarzają. Jednak Li wypracował strategię radzenia sobie z nimi:

• Używanie funkcji restore w Cursor do powrotu do punktów kontrolnych
• Otwieranie nowych chatów dla debugowania żeby utrzymać separację kontekstu
• Budowanie podstawowej wiedzy o komunikatach błędów żeby móc kierować AI
• Precyzyjne instrukcje – im bardziej szczegółowe, tym lepsze rezultaty

Kiedy stosować pełny przepływ pracy? Li nie stosuje pełnego procesu dla każdej funkcjonalności. Większe funkcjonalności wymagają pełnego przepływu PRD → UI → implementacja. Z kolei mniejsze zmiany mogą być realizowane prostszymi metodami.

Od Webflow do code: zmiana paradygmatu

Li dokonał ciekawej obserwacji o ewolucji narzędzi. Początkowo używał Webflow dla strony marketingowej, ale odkrył że z szybkim postępem AI coding tools budowanie w kodzie stało się szybsze niż visual builders.

Problem z Webflow: to warstwa UI na CSS-em, ale bez wiedzy o Webflow każda zmiana wymaga nauki „jak to zrobić w Webflow”. Z AI można po prostu opisać co chce się osiągnąć. W rezultacie eliminuje to dodatkową warstwę abstrakcji.

Osobna aplikacja dla marketingu: Li utrzymuje stronę marketingową jako oddzielny projekt na Vercel. Również został zbudowany z pomocą narzędzi AI zamiast Webflow.

Przykładowe prompty z workflow Li Xia

Podczas demo Li pokazał kilka konkretnych przykładów komunikacji z AI tools. Jednak nie ujawnił pełnych systemowych promptów, ale przedstawił praktyczne wzorce:

UX Pilot – replikacja interfejsu

"Czy możesz zreplikować ten załączony zrzut ekranu?"

Kiedy stosować: Na początku pracy z UX Pilot, żeby AI miał punkt odniesienia do obecnego UI Uzasadnienie: Zamiast opisywać istniejący interfejs słowami, Li dostarcza zrzut ekranu jako wizualny punkt startowy dla AI, co jest znacznie szybsze i dokładniejsze.

UX Pilot – dodawanie nowego komponentu

"Czy możesz dodać przełącznik lub toggle do ograniczenia liczby odpowiedzi na badanie? 
Oto trochę kontekstu z PRD o tym, jak to doświadczenie powinno wyglądać."

Kiedy stosować: Przy dodawaniu nowych elementów UI z załączonym kontekstem z PRD Uzasadnienie: Kluczowy przykład łączenia zwięzłego polecenia z bogatym kontekstem z dokumentu PRD. Zapewnia to, że AI rozumie nie tylko „co” ma zrobić, ale także „dlaczego” i „jak” ma to działać.

Cursor – generowanie listy zadań

"Wygeneruj zestaw zadań inżynierskich dla tego konkretnego PRD na podstawie instrukcji 
w tym konkretnym pliku Generate tasks."

Kiedy stosować: Po stworzeniu PRD, przed rozpoczęciem kodowania – dla rozbicia pracy na małe kroki Uzasadnienie: Zamiast od razu prosić AI o napisanie kodu, Li najpierw zleca stworzenie ustrukturyzowanej listy zadań. Wymusza to na AI zaplanowanie pracy, co jest kluczowe dla jakości i spójności.

Cursor – implementacja krok po kroku

"Zabierz się za pierwsze zadanie z tej listy zadań, używając instrukcji 
z dokumentu Actions, który ci przekazałem."

Kiedy stosować: Na początku implementacji, żeby AI pracował nad jednym zadaniem na raz Uzasadnienie: To fundament iteracyjnego podejścia Li. Ta komenda jest powtarzana dla każdego zadania z listy.

Cursor – przegląd i kontynuacja

"Okay, wygląda dobrze. Zabierz się za zadanie numer dwa, upewnij się że zatrzymasz się 
po skończeniu zadania, żebym mógł przejrzeć."

Kiedy stosować: Po sprawdzeniu poprzedniego kroku – dla utrzymania kontroli nad procesem Uzasadnienie: Kluczowym elementem jest instrukcja „upewnij się, że zatrzymasz się po zakończeniu”, co zapewnia deweloperowi pełną kontrolę nad procesem i pozwala weryfikować małe fragmenty kodu.

Kluczowa zasada Li: Jestem zawsze miły dla AI. Lubię wtrącać komentarze tu i ówdzie – pozytywny ton poprawia współpracę z agentami AI.

Kluczowe lekcje

Context is king: Najważniejszą lekcją z doświadczenia Li jest rola kontekstu w pracy z AI. Im więcej szczegółów i jasności w promptach, tym lepsze rezultaty. Dlatego systematyczne budowanie kontekstu przez PRD jest fundamentalne.

Systematic approach beats ad-hoc: Mimo że systematyczny przepływ pracy może wydawać się ciężki na początku, pozwala na szybkie przejście od idei do konkretnych funkcjonalności. W efekcie redukuje chaos i zwiększa przewidywalność.

Learning fundamentals still matters: Narzędzia AI przyspieszają rozwój, ale podstawowa wiedza o kodowaniu, komunikatach błędów i architekturze aplikacji pozostaje kluczowa. Jednak umożliwia kierowanie AI w dobrą stronę.

Rada Li dla uczących się: AI jest świetne żeby zacząć, ale dla każdego kto uczy się kodowania nadal zaleca przejście przez kurs. Nauka JavaScript, potem frameworki daje fundamentalne umiejętności potrzebne do kierowania AI.

Break it down: Podział dużych zadań na małe, sprawdzalne kroki jest fundamentem udanej pracy z agentami AI. W rezultacie eliminuje frustrację i zwiększa kontrolę nad procesem.

Kluczowy insight

Wolniej znaczy szybciej z AI

Standardowo myślimy: że celem AI jest wygenerowanie całej funkcji za jednym razem. Wrzucamy duży, ogólny prompt i czekamy na gotowy kod, aby maksymalnie przyspieszyć pracę.

W praktyce okazuje się, że: najszybsze i najczystsze rezultaty daje celowe spowolnienie AI. Zmuszenie go do stworzenia planu (listy zadań), a następnie wykonywanie go krok po kroku z ludzką weryfikacją na każdym etapie, drastycznie redukuje błędy i czas na debugowanie.

Dlaczego to jest istotne: Podejście „one-shot” często kończy się kodem, który jest nieprzewidywalny i trudny do naprawy. Z kolei drobnoziarnista kontrola nad procesem daje spójność i przewidywalność, oszczędzając wielokrotnie więcej czasu w całym cyklu.

Test na jutro: Następnym razem gdy będziesz chciał stworzyć nową funkcję z pomocą AI, zamiast prosić o napisanie jej w całości, spróbuj najpierw zlecić AI stworzenie szczegółowej listy zadań inżynierskich. Następnie wykonuj tę listę, zlecając AI tylko jedno zadanie na raz i sprawdzaj wynik po każdym kroku.

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: He Built a User Research Platform with AI ｜ Li Xia