💡 Усі матеріали, обговорення та новини про штучний інтелект зібрані в одному просторі. Запрошуємо приєднатись до AI-спільноти!
Привіт, мене звати Яна, я займаюсь продукт-дизайном та UX/UI. Ця стаття адресована дизайнерам, які прагнуть розібратися у новітніх AI й інших інструментах (чи такі ще існують?). Вона створена для тих, хто не панікує через ймовірність заміни AI, а навпаки, хоче знайти спосіб уникнути цього страху. Можливо, матеріал буде корисним і розробникам, які цікавляться іншими аспектами роботи.
У своїй розповіді я поділюся особистим експериментом із застосуванням штучного інтелекту. Розкажу, де закінчується дизайн, робота з Figma і мокапами, а де починається наступний етап. Опишу сформований мною процес та зміни в дизайнерських підходах. Сподіваюся, що мій досвід стане корисним для розвитку власних ідей, отримання нових знань або як стимул до старту в цій сфері. Важливо, щоб результат не залишився без уваги, а став предметом обміну досвідом та дискусій.
У цій статті не буде детального аналізу ресьорчу, користувацьких потоків чи ідеальних процесів. Основна увага приділена моєму спільному досвіду роботи з Claude Code і його ролі в інтеграції різних сервісів у продукт.
Початок шляху
Я працюю дизайнером-фрілансером. Одного разу, під час пошуку бізнесів в Instagram без власного сайту, я натрапила на такий і звернулася до власника. Виявилось, сайт у розробці. І це змусило мене задуматись: «Навіщо мені клієнт, якщо я можу створити сайт самостійно?» І я зробила це — готовий сайт “під ключ”.
Тоді я ще мало розуміла про Claude Code, лише збирала інформацію з LinkedIn і декілька каруселей, яких було значно менше, ніж тепер. Все ж, бажання опанувати наявні інструменти та протестувати свої сили було надзвичайним. Було цікаво дізнатися, наскільки я відповідаю темпу розвитку у світі технологій.
Особливу складність становило рішення повністю відмовитись від Figma і створювати дизайн безпосередньо в коді. Для цього потрібно було ретельно вивчити роботу інструментів, з’ясувати суть продукту, провести ресьорч і організувати план робіт та документацію — тут Claude Code став незамінним помічником.
Я не хотіла розпорошуватися на велику кількість інструментів і переносити макети туди-сюди, хоча деколи це буває необхідно. Вірила, що зможу реалізувати дизайн так, як задумала, бо розуміла: якісний фундамент — запорука надійної конструкції. Цей процес виявився одночасно і простим, й складним.
Проєкт і концепція
Назва — Söl Tea, концептуальний e-commerce магазин спеціалізованих китайських чаїв.
Цей дослідницький проєкт демонструє, що відбувається, коли дизайнер без бекграунду в кодуванні створює повноцінний інтернет-магазин, використовуючи AI.
Нижче наведено покроковий опис етапів, рішень, несподіванок та відкриттів, зроблених у процесі роботи.
Однією з перших дій було створення репозиторію на GitHub — начебто дрібниця, але це дуже важливо й логічно починає процес. Завдяки цьому всі версії зберігаються, а у випадку потреби можна повернутися до попередніх станів. Особливо корисно, коли робота з Claude Code проходить динамічно, і ці історії змін рятують.
Етап 0. Брендинг і продуктова ідентифікація
Перш ніж писати код, варто було визначити концепцію магазину: назву, логотип, товарний ряд і категорії. AI може підказати варіанти, але зазвичай вони обмежені і не дуже масштабовані.
Söl Tea спеціалізується на нішевих китайських чаях.
Продукт я обрала випадково, поєднуючи власні ідеї і AI підказки. Назву, візуальний стиль і логотип створила особисто я — частково за допомогою AI, але основний акцент на тому, що хочу збудувати саме e-commerce продукт. Тож етапи, які потребували спеціалізованих знань, я виконувала сама.
Асортимент містить 37 товарів, розподілених на категорії:
- улун;
- пуер;
- сезонні чаї;
- стартові набори;
- дошки;
- посуд;
- аксесуари.
Кожен товар має назву, опис, варіанти ваги та ціни, унікальний бекграунд на картці. Ця частина — дизайнерська робота, проте не технологічна.
Етап 1. Створення дизайн-системи
Це був найтриваліший етап — побудова всіх компонентів сторінок. Ще до початку роботи виникло питання: як зберегти цілісність продукту?
Так само, як у Figma використовують стилі й токени, у коді реалізується аналогічний підхід через змінні, наприклад:
- —cream;
- —green-800;
- —text-h1.
Такі значення не задаються жорстко, а керуються централізовано. Зміна в одному місці одразу застосовується по всій системі. Зміни в коді відбуваються у файлі tokens.css. Це було моїм головним відкриттям.
Важливо неодноразово перевіряти систему через Claude Code, адже в контексті коду розробки це критично.
Web Components дотримуються логіки модульності, схожої на Figma: nav, footer, продуктові картки — усі компоненти є уніфіковані й однакові на всіх сторінках. Зміна одного файлу оновлює їх повсюдно.
Дизайн-система міститься у файлі sol-design-system.html — це сторінка, де зібрано всі стилі, шрифти, кнопки, варіанти компонентів у різних станах. Відкривши її у браузері, можна побачити актуальний стан системи. На сайті кнопку для переходу знайти можна внизу сторінки.
Спочатку документація підтримувалася окремими markdown-файлами для Claude Code, де зберігалися правила, але згодом виникла потреба створити цілісну інтерактивну сторінку. AI може генерувати та оновлювати документацію, що пришвидшує роботу, проте вміст і призначення документації контролює лише дизайнер.
Робота з AI нагадує диригування оркестром, де багато інструментів, кожен має своє місце і без керування неможливо створити гармонію.
Окремо варто підкреслити важливість слідкувати за новинами у сфері IT та зберігати ентузіазм для тестування і освоєння нового.
Я вирішила створити проєкт невластивим способом із допомогою нового інструменту, але по суті принципи системності і творчості залишаються незмінними.
Організація сторінок
Роботу над сторінками розбивала на окремі частини. У мережі радять не починати з головної сторінки, і я слідувала цій пораді: створила базову версію для зняття напруги, а пізніше переробила її, коли майже весь сайт був готовий. Так краще розумієш продукт і контекст.
Головна сторінка — це свого роду лендинг всередині e-commerce, що веде покупця до купівлі, дає змогу ознайомитись із товаром.
Пропонуються хіти продажів для постійних клієнтів і стартові набори для новачків. Кожен елемент веде до сторінок з покупкою товару. Все це має бути ретельно протестовано зі справжніми користувачами.
Сторінка «Про нас» детальніше знайомить відвідувачів із сервісом і має логічні переходи до каталогу.
Розділи «Кошик» і «Чекаут» максимально прості: відсутні елементи, які могли б збити користувача або викликати сумніви. Проте все рішення потребують тестування.
Додаткова сторінка FAQ допомагає користувачам отримати відповіді на найпоширеніші питання щодо доставки, оплати, повернень.
Пошук реалізовано у вигляді оверлею доступного з будь-якої сторінки через навігацію. Шукає по назві, інгредієнтах, описі з підсвічуванням введених символів.
Сайт повністю адаптивний, що є критично важливим, адже більшість відвідувачів користується мобільними пристроями.
Медіаконтент: понад 110 зображень і системний підхід до генерації
Паралельно з технічними етапами відбувалась робота над медиачастиною — для 37 товарів було створено по три зображення.
Усі зображення генерувалися через Krea AI, де системність і увага до деталей допомогли надати єдність проєкту. За допомогою “нодів” у Krea вдалося забезпечити послідовність. Про це я докладно розповідала у своїх LinkedIn-публікаціях.
Генерація була творчою, але одночасно нудною, особливо після 20-го товару. Системний підхід дозволяв зберегти єдність у великому обсязі роботи.
Хоч AI видається простим і швидким інструментом, насправді це дорогий процес. Можливо, відсутність лічильника кредитів зробила б завдання менш монотонним, але ми цього не дізнаємося. Головне — створити еталонну упаковку, а AI візьме на себе написання промптів та підбір деталей — ідеї та концепції належать людям, а не машинам.
Більший обсяг та контекст наразі недосяжні в AI, а живий світ і людський фактор змінюються постійно, на відміну від штучного інтелекту.
Етапи 2–3. Переходи від даних до бази даних
Спочатку товарні дані зберігалися у простому JSON-файлі — текстовому списку продуктів, підходящому для прототипу. Проте для продукту реального масштабу, де необхідно управляти цінами, замовленнями, відгуками в режимі реального часу, це було умовою недостатньо.
Впровадження Supabase ознаменувало перехід від “макету з даними” до повноцінної “системи з даними”. Тепер була система, де зберігалися, редагувалися і відображалися інформація про товари та замовлення.
Структура даних стала інформаційною архітектурою:
- Товари й їх варіанти (вплив ваги на ціну);
- Замовлення, їх зв’язок з товарами;
- Відгуки, пов’язані з товарами і користувачами.
Це суто дизайн-мислення, але у нових умовах із розширеними ролями.
Всього було створено 10 таблиць: товари, варіанти, замовлення, позиції, відгуки, підписки, кошики, вішлісти, населені пункти та відділення пошти.
Інтерфейс містить один шаблон, що наповнюється даними конкретного товару: обираєш варіант ваги — оновлюється ціна, якщо товару немає в наявності, кнопка замінюється повідомленням.
Оформлення замовлення записує дані в базу: покупець, товари, доставка, оплата. Для залогінених користувачів замовлення пов’язується з акаунтом, для гостей — зберігається окремо з можливістю пізнішої прив’язки.
Етап 4. Авторизація та профіль користувача
Є модальний компонент з п’ятьма режимами:
- Вхід у акаунт;
- Реєстрація;
- Відновлення пароля;
- Magic link — вхід по листу без пароля;
- Auth-gate — доступ до створення відгуку лише після авторизації.
Модальне вікно пропонує увійти в профіль і повертає користувача до попередньої дії без перезавантаження сторінки.
Важливою функцією є вхід через Google, який виявився простим в реалізації завдяки Claude Code.
Захист від ботів реалізується через Cloudflare Turnstile, активується при взаємодії з формою, а не одразу при відкритті.
Після входу в акаунт в навігації з’являється меню профілю з переходами до замовлень, відгуків, налаштувань, або для виходу з системи.
Профіль включає три вкладки:
- Замовлення;
- Відгуки;
- Налаштування.
У налаштуваннях доступна зміна електронної пошти, пароля та два важливих сценарії:
- Вихід з усіх пристроїв;
- Видалення акаунту з підтвердженням і особливим дизайном кнопки.
Етап 5. Адміністративна панель: другий продукт всередині першого
Це окремий продукт із різними користувачами та завданнями.
Для покупців важливо швидко знайти товар, купити, відслідковувати замовлення.
Для адміністраторів — спостерігати ситуацію в реальному часі, керувати замовленнями, працювати з відгуками, аналізувати продажі.
Дашборд виконаний у стилі bento-сітки:
- Виручка;
- Кількість замовлень;
- Нові відгуки;
- Топ-5 товарів;
- Міні-графік за місяць.
Картки замовлень містять інформацію про клієнта, доставку, оплату. Статус можна змінювати прямо на картці без переходу.
Відгуки модеруються у три стани:
- Очікує;
- Опублікований;
- Відхилений.
Є можливість відповісти на відгук — відповідь відображається під коментарем на сторінці товару.
Етап 6. Кошик та вішліст: два стани одного користувача
Кошик має надзвичайну важливість у e-commerce.
Основні особливості:
- Збереження кошика у браузері в гостевому режимі, що збільшує шанси на покупку;
- Після входу кошик синхронізується з сервером, працює між пристроями;
- Злиття гостьового та акаунтного кошика без дублювання товарів, проконтрольоване AI та дизайнером.
Цей процес реалізовується з допомогою Claude Code, де важливий баланс контролю над AI — не можна повністю передавати прийняття рішень машині.
Етап 7. Сервіси доставки
Вибір відділення доставки — часта причина залишити кошик.
Для зручності реалізовано базу реальних відділень Нової пошти, що оновлюється незалежно від сайту.
Для Укрпошти відкритого API немає, проте вдалося створити власну базу на основі відкритих даних data.gov.ua. Дані зберігаються у Supabase для швидкого пошуку без залежності від зовнішніх сервісів.
Етап 8. Оплата: редирект і три стани після повернення
Використовується LiqPay — найпопулярніший сервіс в Україні.
Принцип:
- Користувач натискає «Оплатити карткою»;
- Перенаправлення на LiqPay для підтвердження;
- Повернення на сайт.
Поки працює тестове вікно, що імітує оплату і не списує коштів.
Дизайнери врахували 3 можливих стани після оплати:
- Успішна — оплата підтверджено, показують позитивне повідомлення з деталями;
- Помилка — оплата не пройшла, пропонують повторити;
- Невизначений — платіж обробляється, система перевіряє статус, показує нейтральне повідомлення.
Останній стан — найважливіший через можливі затримки у банківських системах.
Чекаут включає:
- Дані отримувача;
- Вибір перевізника й відділення;
- Метод оплати (готівка чи картка).
Для зареєстрованих деякі поля заповнюються автоматично, для гостей — спрощений процес без примусового входу.
Етап 9. Електронна пошта та аналітика
Домейн sol-tea.store коштує 50 гривень на рік. Відповідно, листи приходять з адреси [email protected], що зберігає цілісність бренду навіть у транзакційному листуванні.
Відправлення листів налаштовано через сервіс Resend.
Існує три типи листів:
- Підтвердження замовлення (покупцю й адміну одночасно);
- Зміна статусу замовлення;
- Вітальний лист при підписці на розсилку.
Листи оформлені у дизайні сайту із збереженням кольорів і типографіки.
Деплой налаштовано через Vercel — автоматичне оновлення сайту при пуші в main. Спочатку використовувався GitHub Pages, проте через приватність репозиторію перейшли на Vercel і підключили власний домен.
Аналітика реалізована на трьох рівнях:
- Vercel Analytics — трафік і швидкість завантаження;
- Microsoft Clarity — теплові карти кліків і записи сесій, що дають уявлення про поведінку користувачів;
- Google Analytics 4 — події та конверсії на кожному кроці воронки продажів.
Додатково залучається Google PageSpeed Insights, що оцінює сайт по таких параметрах:
- Performance;
- Accessibility;
- Best Practices;
- SEO.
Оцінки стабільно трималися на рівні 95–100 для Accessibility, Best Practices і SEO. Показник Performance варіюється залежно від навантаження сервера і середовища тестування, але загалом залишається позитивним.
Для продуктів такого типу і обсягу динамічних даних це вагомі показники, і при розробці власних проєктів варто враховувати подібні метрики.
Komora DS
Під час створення дизайн-системи Söl Tea і самого проєкту виникла ідея: а що, як би цей процес можна було швидко відтворювати в будь-якому іншому проєкті?
Завдяки команді українських дизайнерів було розроблено публічний Claude Code навик — Komora DS. Він генерує інтерактивну живу Design System сторінку на основі вже наявного продукту. Це не просто документація, а повноцінна сторінка з усіма компонентами, токенами та правилами — для кожного окремого проєкту.
Підсумком цього стала низка висновків:
- Принципи системності не залежать від інструменту;
- Компоненти, токени, ієрархія, інформаційна архітектура — це спосіб мислення, а не окремий інструментарій Figma;
- Подібні підходи застосовні в різних середовищах для розв’язання схожих задач;
- Масштаб підштовхує до системності: 10 сторінок, 19 компонентів, 7 серверних функцій, 37 товарів, 110+ зображень;
- Тестування можна проводити навіть з допомогою Claude Code, але це потребує часу і структури;
- Без документації й чіткого плану проект легко розпадається;
- Для якісної роботи потрібне розуміння впливу на кінцевих користувачів.
Завершальні слова
Виконання роботи перекладається на AI, але рамки залежать повністю від дизайнера чи будь-кого, хто веде проєкт із AI. Один промпт не дасть бажаного результату — це міф. AI — ефективний помічник спеціаліста, підсилюючи зони, де бракує компетенції, але не виступає чарівною паличкою.
З моїм бекграундом у дизайні експеримент став захопливою подорожжю та можливістю приміряти багато ролей, інтегрувати різні сервіси, створити робоче рішення власноруч.
Сподіваюся, моя оповідь заохотить когось спробувати подібне, як свого часу надихнули мене незнайомі проєкти.
Запрошую всіх охочих перевірити моє рішення за посиланням: подивитися, оцінити, зробити замовлення, залишити відгук або задати питання — особисто чи у коментарях. Саме це впливає на подальший розвиток продукту.
Далі можна використовувати цей шаблон як основу для вдосконалення або робити власні висновки та рухатися вперед.
Для зручності нижче наведено актуальні посилання на інструменти, репозиторій на GitHub зі створеним скілом, а також мій LinkedIn, де докладно описувався цей шлях у форматі сторітелінгу.
Дякую за увагу!
Посилання
Сподобалась стаття? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.
