Кейс із design engineering
Flex Academy: одне джерело правди
Тестове завдання-концепт для The Flex / Base360: лендинг, що продає дві програми двом різним аудиторіям, зібраний як пов’язана система зі змінних Figma, компонентів у коді, документації в Storybook і живого прототипу.
Про проєкт
Вступ
Flex Academy — новий продукт від The Flex, оператора мебльованих апартаментів з 2019 року, і Base360, AI-платформи для бізнесу короткострокової оренди (STR), що з нього виросла. Академія вчить запускати й масштабувати STR-бізнес за тим самим playbook, системами й софтом. У брифі просили один лендинг для двох програм, Launch і Scale, лише як дизайн-завдання. Я також перетворив сторінку на невелику дизайн-систему в коді, щоб показати, як працюю від початку до кінця.
Моя роль
Продуктовий дизайнер, власник процесу.
Стратегія, UX, UI, дизайн-система, правила для AI-інструментів і ревʼю кожної зміни.
Терміни й тип
3 дні активної роботи (5–7 жовт. 2026). Тестове дизайн-завдання і концепт, а не продакшн чи клієнтський проєкт. Розробка не входила в бриф; код і Storybook я зробив додатково.
Інструменти
Figma (Variables, Variants) · Storybook 10 · Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Claude Code · Figma MCP · GitHub · Vercel
Виклик
Постановка проблеми
Одна сторінка мала продати дві пропозиції двом дуже різним людям: «втікачеві з 9-to-5», який ще не почав, і початківцю-оператору, що вже має кілька обʼєктів, але застряг у ручній роботі й низькій маржі. Аудиторія зайнята і відкрито скептична до курсів від «гуру». Як одній сторінці швидко заслужити довіру й дати кожному відвідувачу діяти за пропозицією, яка йому підходить?
Розбір проблеми
Дві аудиторії, одна сторінка
У новачка й оператора різні болі, рівень довіри й готовність діяти. Сторінка, яка говорить з усіма однаково, не переконує нікого.
Вбудований скептицизм
Ринок освіти переповнений курсами від «гуру», тож довіра має зʼявитися раніше за будь-яку пропозицію.
Розрив між дизайном і кодом
Тестове зазвичай закінчується статичними екранами. Я хотів, щоб дизайн-рішення жили в коді без розбіжностей: змінюєш токен один раз, і Figma, Storybook та сайт оновлюються разом.
Чіткі критерії успіху
За 5 секунд зрозуміло, що це, за 30 секунд зʼявляється довіра, і діяти можна з будь-якого місця сторінки.
Ключові екрани
Hero з двома входами: Launch зеленим, Scale синім.
Блок довіри одразу після hero, до будь-якої пропозиції.
Два CTA-флоу: реєстрація на вебінар і запис на стратегічний дзвінок.
Дві аудиторії
Launch — для «втікача з 9-to-5» з нулем або одним обʼєктом: курс у власному темпі, живі групові сесії й шаблони, вхід через безкоштовний вебінар.
Scale — для початківця-оператора з кількома обʼєктами: 12 тижнів щотижневих групових сесій, щомісячна 1:1 із засновником, спільнота, SOP і доступ до Base360, вхід через безкоштовний стратегічний дзвінок.
Launch · Вебінар
Низький поріг. Імʼя, email, країна → підтвердження й додавання в календар.
Scale · Стратегічний дзвінок
Високий намір. Обʼєкти зараз, ціль, місто, діапазон бюджету → вибір часу → підтвердження.
Ще не готові · Чекліст
Вторинна конверсія: чекліст масштабування STR в обмін на email.
Процес
1. Розбір брифу
Дві персони, мапа болів і критерії успіху.
2. Вайрфрейми у Figma
Desktop 1440, Mobile 390, обидва CTA-флоу й дизайн-нотатки.
3. Аудит бренду
Реальні computed styles, витягнуті з theflex.global і base360.ai та перенесені в змінні Figma: примітиви → семантичні аліаси. 157 шарів привʼязано до змінних.
4. Збірка блок за блоком
Код у прототипі → перевірка в браузері → виправлення → Storybook з усіма станами й документацією → дзеркало у Figma як component set.
Ключові дизайн-рішення
Дві двері, один hero. Launch іде першим, бо це більший ринок, але Scale має рівну візуальну вагу, тож операторам не доводиться гортати повз контент не для них. Довіра до пропозиції: блок довіри стоїть одразу після hero, до будь-якої пропозиції, із засновниками, публічними цифрами компанії (з 2019, 400+ помешкань, £10M+ виручки, 7 міст) і логотипами медіа.
Колір зі змістом: Launch використовує зелений The Flex — історію того, як починали засновники; Scale використовує синій Base360, бо Scale включає доступ до Base360. Окремі флоу для різних намірів: вебінар — коротка форма з трьох полів, стратегічний дзвінок спершу кваліфікує ліда, а потім дає вибрати час.
Як заслужити довіру
Відповісти на заперечення прямо
Секція «Not another guru course» порівнює програму з YouTube, дешевими курсами й мастермайндами, а не вдає, що сумнівів немає. Окремий блок про засновників прибрали, бо він повторював блок довіри: коротша сторінка замість повтору.
Жодних вигаданих відгуків. Для скептичної аудиторії вигадані цитати руйнують довіру, тож соціальний доказ лишається чітко позначеними плейсхолдерами.
Адаптивний дизайн
Design-engineering пайплайн
Замість статичних екранів я зібрав сторінку як систему з одним джерелом правди: змінні Figma → tokens.json → tokens.css → Tailwind v4 @theme → компоненти → Storybook → живий сайт.
Токени з живих сайтів
Реальні computed styles з theflex.global і base360.ai, а не «на око», перетворені на змінні Figma: брендові примітиви плюс семантичні аліаси на кшталт offer/launch і offer/scale. Ті самі 70 токенів живуть у коді, без захардкоджених кольорів, відступів чи радіусів у компонентах.
18 компонентів, 88 stories
Кожен компонент задокументовано в Storybook з усіма станами, props, нотатками з доступності й Token Usage Report: властивість · токен · значення · джерело.
Чесні позначки «AI-defined»
Усе, чого не було визначено у Figma, у документації відкрито позначено «AI-defined», тож ревʼюери бачать, які рішення прийшли з дизайну, а які ні.
Figma віддзеркалює код
Компоненти перебудовано у Figma як набори варіантів (Breakpoint, State, Tone, Step), привʼязані до тих самих змінних. Екрани зібрано з них.
Модалка + справжній URL
CTA-флоу відкриваються в модальному вікні, а URL змінюється на /webinar або /strategy-call. Відкрийте це посилання напряму, з реклами чи листа, і та сама форма завантажиться окремою сторінкою.
Доступність
01
Scale використовує глибший синій (#3B4FE0, приблизно 5,6:1 з білим) замість синього кнопок Base360 (#5070FE, приблизно 3,9:1), який не проходить AA для звичайного тексту.
02
CTA-флоу використовують нативний <dialog>: focus trap, закриття по Escape, повернення фокусу й блокування скролу. Поля вводу заввишки 48px.
03
Анімації при скролі — чистий CSS, без бібліотек анімацій, і враховують prefers-reduced-motion.
Як я працював з AI
Я задавав напрям, правила й обсяг: що будувати, як структуровані токени, неймінг, рішення щодо доступності й критерії ревʼю.
Правила, ревʼю й перевірки
Claude Code написав більшу частину реалізації за цими правилами, визначеними в інструкціях проєкту, власному skill і handoff-документах. Дві гілки, prototype і design-system, мають ідентичні файли компонентів. Я переглядав кожну зміну, запускав typecheck, lint і збірку Storybook, перевіряв кожен блок у справжньому браузері на 1440, 820 і 390 px і схвалював кожен push.
Що я зробив би далі
Справжні сервіси
Підключити справжнє планування, CRM і email замість теперішніх заглушок.
Справжні історії студентів
Замінити плейсхолдери відгуків справжніми історіями студентів.
Тестувати й перевіряти
A/B-тест hero з фокусом на операторів і автоматичні тести візуальної регресії для Storybook.
Результат
Файл Figma з дизайн-системою, CTA-флоу й дизайн-нотатками; Storybook з 18 компонентами й 88 stories, кожен із Token Usage Report; і живий прототип на Vercel, зібраний саме з цих компонентів. Дизайн, код і документація, які не можуть розійтися: змінюєш токен один раз, і він оновлюється всюди.
У цифрах (обсяг роботи, а не бізнес-результат)
• 18 компонентів і 88 stories
• 70 токенів синхронно у Figma, Storybook і на сайті
• 2 гілки і 2 проєкти Vercel
• 47 комітів у prototype, 36 у design-system
• 3 дні активної роботи (5–7 жовт. 2026)
Чого я навчився
Ставитися навіть до лендингу як до невеликої дизайн-системи швидко окуповується: рішення, ухвалені один раз у токенах, послідовно зʼявляються у Figma, у коді й у документації, а AI-інструменти стають значно надійнішими, коли працюють у чітких правилах.
Чесні обмеження
Це концепт, а не продакшн-сайт. Бекенд, календар і CRM — заглушки, відгуки — плейсхолдери, ціни не показано. Safari і справжню інтеграцію з календарем не тестували.