Case study z design engineeringu
Flex Academy: jedno źródło prawdy
Koncept z zadania rekrutacyjnego dla The Flex / Base360: landing, który sprzedaje dwa programy dwóm różnym grupom odbiorców, zbudowany jako połączony system zmiennych Figma, komponentów w kodzie, dokumentacji w Storybooku i działającego prototypu.
O projekcie
Wprowadzenie
Flex Academy to nowy produkt The Flex, operatora umeblowanych apartamentów od 2019 roku, oraz Base360, platformy AI dla firm z branży najmu krótkoterminowego (STR), która z niego wyrosła. Akademia uczy, jak uruchomić i skalować biznes STR z tym samym playbookiem, systemami i oprogramowaniem. Brief zakładał jeden landing dla dwóch programów, Launch i Scale, wyłącznie jako zadanie projektowe. Zamieniłem też stronę w mały design system w kodzie, żeby pokazać, jak pracuję od początku do końca.
Moja rola
Product Designer, właściciel procesu.
Strategia, UX, UI, design system, zasady dla narzędzi AI i review każdej zmiany.
Czas i typ projektu
3 dni aktywnej pracy (5–7 paź 2026). Zadanie rekrutacyjne i koncept, a nie projekt produkcyjny czy dla klienta. Development nie był częścią briefu; kod i Storybook zrobiłem dodatkowo.
Narzędzia
Figma (Variables, Variants) · Storybook 10 · Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Claude Code · Figma MCP · GitHub · Vercel
Wyzwanie
Definicja problemu
Jedna strona miała sprzedać dwie oferty dwóm bardzo różnym osobom: komuś, kto chce „uciec od etatu 9–17” i jeszcze nie zaczął, oraz początkującemu operatorowi, który ma już kilka lokali, ale utknął w ręcznej pracy i niskich marżach. Odbiorcy są zajęci i otwarcie sceptyczni wobec kursów „guru”. Jak jedna strona może szybko zdobyć zaufanie i pozwolić każdemu odwiedzającemu działać na ofercie, która do niego pasuje?
Rozbicie problemu
Dwie grupy odbiorców, jedna strona
Początkujący i operator mają inne bolączki, poziom zaufania i gotowość do działania. Strona, która mówi do wszystkich tak samo, nikogo nie przekonuje.
Wbudowany sceptycyzm
Rynek edukacji jest pełen kursów „guru”, więc zaufanie musi pojawić się przed jakąkolwiek ofertą.
Luka między designem a kodem
Zadanie rekrutacyjne zwykle kończy się statycznymi ekranami. Chciałem, żeby decyzje projektowe żyły w kodzie bez rozjazdów: zmieniasz token raz, a Figma, Storybook i strona aktualizują się razem.
Jasne kryteria sukcesu
W 5 sekund wiesz, co to jest, w 30 sekund masz zaufanie i możesz działać z każdego miejsca strony.
Kluczowe ekrany
Hero z dwoma wejściami: Launch na zielono, Scale na niebiesko.
Blok wiarygodności zaraz po hero, przed jakąkolwiek ofertą.
Dwa flow CTA: zapis na webinar i rezerwacja rozmowy strategicznej.
Dwie grupy odbiorców
Launch jest dla osoby, która chce „uciec od etatu 9–17” i ma zero lub jeden lokal: kurs we własnym tempie, grupowe sesje na żywo i szablony, z wejściem przez darmowy webinar.
Scale jest dla początkującego operatora z kilkoma lokalami: 12 tygodni cotygodniowych sesji grupowych, comiesięczne 1:1 z założycielem, społeczność, SOP-y i dostęp do Base360, z wejściem przez darmową rozmowę strategiczną.
Launch · Webinar
Niski próg. Imię, e-mail, kraj → potwierdzenie i dodanie do kalendarza.
Scale · Rozmowa strategiczna
Wysoka intencja. Liczba lokali dziś, cel, miasto, przedział budżetu → wybór terminu → potwierdzenie.
Jeszcze nie teraz · Checklista
Konwersja dodatkowa: checklista skalowania STR w zamian za e-mail.
Proces
1. Analiza briefu
Dwie persony, mapa bolączek i kryteria sukcesu.
2. Wireframe’y w Figmie
Desktop 1440, Mobile 390, oba flow CTA i notatki projektowe.
3. Audyt marki
Rzeczywiste computed styles pobrane z theflex.global i base360.ai i przeniesione do zmiennych Figma: prymitywy → aliasy semantyczne. 157 warstw powiązanych ze zmiennymi.
4. Budowa blok po bloku
Kod w prototypie → sprawdzenie w przeglądarce → poprawki → Storybook ze wszystkimi stanami i dokumentacją → odbicie w Figmie jako component set.
Kluczowe decyzje projektowe
Dwoje drzwi, jedno hero. Launch jest pierwszy, bo to większy rynek, ale Scale ma równą wagę wizualną, więc operatorzy nie muszą przewijać treści, które nie są dla nich. Zaufanie przed ofertą: blok wiarygodności stoi zaraz po hero, przed jakąkolwiek ofertą, z założycielami, publicznymi liczbami firmy (od 2019, 400+ mieszkań, £10M+ przychodu, 7 miast) i logotypami mediów.
Kolor, który coś znaczy: Launch używa zieleni The Flex, czyli historii tego, jak zaczynali założyciele; Scale używa błękitu Base360, bo Scale obejmuje dostęp do Base360. Osobne flow dla różnych intencji: webinar to krótki formularz z trzema polami, rozmowa strategiczna najpierw kwalifikuje leada, a potem pozwala wybrać termin.
Budowanie zaufania
Zmierzyć się z obiekcją wprost
Sekcja „Not another guru course” porównuje program z YouTube, tanimi kursami i mastermindami, zamiast udawać, że wątpliwości nie ma. Osobny blok o założycielach usunięto, bo powtarzał blok wiarygodności: krótsza strona zamiast powtórki.
Żadnych zmyślonych opinii. Dla sceptycznych odbiorców wymyślone cytaty niszczą zaufanie, więc social proof zostaje jako wyraźnie oznaczone placeholdery.
Projekt responsywny
Pipeline design-engineeringowy
Zamiast statycznych ekranów zbudowałem stronę jako system z jednym źródłem prawdy: zmienne Figma → tokens.json → tokens.css → Tailwind v4 @theme → komponenty → Storybook → działająca strona.
Tokeny z działających stron
Rzeczywiste computed styles z theflex.global i base360.ai, a nie „na oko”, zamienione na zmienne Figma: prymitywy marki plus aliasy semantyczne, takie jak offer/launch i offer/scale. Te same 70 tokenów żyje w kodzie, bez zahardkodowanych kolorów, odstępów czy promieni w komponentach.
18 komponentów, 88 stories
Każdy komponent jest udokumentowany w Storybooku ze wszystkimi stanami, propsami, notatkami o dostępności i Token Usage Report: właściwość · token · wartość · źródło.
Uczciwe oznaczenia „AI-defined”
Wszystko, czego nie zdefiniowano w Figmie, jest w dokumentacji otwarcie oznaczone jako „AI-defined”, więc recenzenci widzą, które decyzje pochodzą z designu, a które nie.
Figma odzwierciedla kod
Komponenty odtworzone w Figmie jako zestawy wariantów (Breakpoint, State, Tone, Step) powiązane z tymi samymi zmiennymi. Ekrany są z nich złożone.
Modal + prawdziwy URL
Flow CTA otwierają się w modalu, a URL zmienia się na /webinar lub /strategy-call. Otwórz ten link bezpośrednio, z reklamy albo maila, a ten sam formularz załaduje się jako pełna strona.
Dostępność
01
Scale używa głębszego niebieskiego (#3B4FE0, około 5,6:1 z bielą) zamiast niebieskiego przycisków Base360 (#5070FE, około 3,9:1), który nie spełnia AA dla zwykłego tekstu.
02
Flow CTA używają natywnego <dialog>: focus trap, zamykanie klawiszem Escape, powrót fokusu i blokada przewijania. Pola mają 48px wysokości.
03
Animacje przy przewijaniu to czysty CSS, bez bibliotek animacji, i respektują prefers-reduced-motion.
Jak pracowałem z AI
Ja wyznaczałem kierunek, zasady i zakres: co budować, jak są zbudowane tokeny, nazewnictwo, decyzje dotyczące dostępności i kryteria review.
Zasady, review i kontrole
Claude Code napisał większość implementacji według tych zasad, zapisanych w instrukcjach projektu, własnym skillu i dokumentach handoff. Dwie gałęzie, prototype i design-system, mają identyczne pliki komponentów. Przeglądałem każdą zmianę, uruchamiałem typecheck, lint i build Storybooka, sprawdzałem każdy blok w prawdziwej przeglądarce przy 1440, 820 i 390 px i zatwierdzałem każdy push.
Co zrobiłbym dalej
Prawdziwe usługi
Podpiąć prawdziwe planowanie, CRM i e-mail zamiast obecnych zaślepek.
Prawdziwe historie kursantów
Zastąpić placeholdery opinii prawdziwymi historiami kursantów.
Testować i weryfikować
Test A/B hero skierowanego najpierw do operatorów i automatyczne testy regresji wizualnej w Storybooku.
Rezultat
Plik Figma z design systemem, flow CTA i notatkami projektowymi; Storybook z 18 komponentami i 88 stories, każdy z Token Usage Report; oraz działający prototyp na Vercelu zbudowany dokładnie z tych komponentów. Design, kod i dokumentacja, które nie mogą się rozjechać: zmieniasz token raz i aktualizuje się wszędzie.
W liczbach (zakres pracy, a nie wpływ biznesowy)
• 18 komponentów i 88 stories
• 70 tokenów zsynchronizowanych w Figmie, Storybooku i na stronie
• 2 gałęzie i 2 projekty na Vercelu
• 47 commitów w prototype, 36 w design-system
• 3 dni aktywnej pracy (5–7 paź 2026)
Czego się nauczyłem
Traktowanie nawet landingu jak małego design systemu szybko się opłaca: decyzje podjęte raz w tokenach pojawiają się spójnie w Figmie, w kodzie i w dokumentacji, a narzędzia AI stają się dużo bardziej niezawodne, gdy działają w jasnych zasadach.
Uczciwe ograniczenia
To koncept, a nie strona produkcyjna. Backend, kalendarz i CRM to zaślepki, opinie to placeholdery, a ceny nie są pokazane. Safari i prawdziwa integracja z kalendarzem nie były testowane.