Як я робив сайт із AI. І чому одна кнопка отримала власний мініпроєкт
Мій перший сайт із AI: від макета у Figma до власної адмінки. З правками, лімітами нейронки та окремою лабораторією для кнопки.
Як я створив свій сайт dimadiuh.com нейронкою. Показую дизайн-процес Designer + AI на цьому прикладі: від досліджень і дизайну у Figma до розробки й адмінки. Реальні строки та перевірки перед запуском.
Зміст публікації
На дизайн головної та журналу для свого сайту я витратив приблизно чотири години. На розробку пішло близько тижня, ще кілька днів забрало наповнення. Воно, до речі, досі триває.
За цей час одна скляна кнопка отримала окремий мініпроєкт із повзунками для налаштування ефекту. Якщо ви працювали з дизайнерами, навряд чи ця частина історії вас здивувала.
Я десять років займаюся UX/UI-дизайном, а dimadiuh.com став моїм першим повноцінним сайтом, реалізованим із AI. Мені було цікаво перевірити, скільки зможу зробити сам: від верстки й анімацій до бази даних та адмінки.
Зробити вдалося багато. А от пояснювати, що саме я хочу, довелося регулярно.
Від Webflow та передачі макетів — до розробки з AI
До цього я працював із Webflow. Він дозволяє збирати сайт через візуальний інтерфейс, водночас досить добре розуміючи логіку HTML і CSS. Для дизайнера це зручний спосіб перейти від макета до робочої сторінки.
Але в моїх задачах поступово накопичувалися обмеження. Хотілося більше контролю над оптимізацією, технічною частиною та функціями сайту. Десь доводилося шукати обхідне рішення, десь підлаштовувати задум під можливості платформи.
Складніші проєкти я передавав розробникам. Разом із макетами їхали ТЗ, пояснення взаємодій, уточнення та правки. Окремий жанр — пояснити, що кнопка має рухатися «трошки м’якше», але при цьому «відчуватися впевненіше». Розробники, які працювали зі мною: так, я все розумію. Тримайтеся.
З AI ці пояснення залишилися, просто тепер їх отримує нейронка. Можу скільки завгодно уточнювати характер кожної кнопки, не випробовуючи терпіння живої людини. У нейронки, щоправда, теж є межа. Називається «ви вичерпали ліміт».
Після реалізації dimadiuh.com я зрозумів, що для власного сайту можу обійтися без підписки на Webflow. Тепер я сам веду проєкт до запуску й можу одразу перевіряти свої рішення в браузері.
Як AI допомагає мені в дослідженні та дизайні
AI у моєму процесі з’являється ще до першого макета. Перед брифінгом я проводжу кабінетне дослідження: розбираюся в бізнесі клієнта та його запиті. Нейронка допомагає швидше знайти матеріали, зібрати посилання й структурувати інформацію. На цій основі готую питання під конкретний проєкт.
Після брифінгу починається докладніше дослідження. Зібране перевіряю, висновки коригую й оформлюю в презентацію для клієнта. Тут AI забирає на себе частину пошуку та впорядкування матеріалів. Вирішувати, що з них справді стосується нашої задачі, доводиться мені. Навіть дуже впевнено написаний абзац іноді потребує перевірки.
Окремо сам займаюся трендвотчингом: шукаю візуальні рішення, цікаві взаємодії та прийоми, які можемо використати. Дивлюся, чи доречні вони для продукту й аудиторії. Красива анімація в референсі ще не означає, що їй потрібне місце біля кнопки оплати.
Так складається дизайн-стратегія: для кого робимо сайт, що показуємо, які аргументи використовуємо та як будуємо структуру.
Дизайн-концепцію малюю сам у Figma. Зазвичай це вся головна сторінка або щонайменше більша її частина. На цьому етапі визначаю вигляд сайту, композицію й типографіку. Потім за допомогою AI та Figma MCP оформлюю дизайн-систему: стилі, токени та правила для наступних екранів.
Далі можу домалювати решту сторінок у Figma або перейти до розробки на основі готової концепції. Стек теж допомагає підібрати AI.
Верстку роблю по секціях. Даю макет, пояснюю поведінку елементів, перевіряю результат і повертаюся з правками. Так легше помітити неточності до того, як вони переїдуть на всі інші сторінки.
Найбільше часу на пояснення забирають дизайнерські деталі. Відступ можна показати на скриншоті. Із відчуттям плавності вже складніше. Іноді потрібні відео, референси та кілька спроб, щоб рух став саме таким, як я задумав.
Скляна кнопка з власною лабораторією
Тому скляна кнопка й отримала власний мініпроєкт.
Її вигляд я придумав у Figma. Хотів відтворити на сайті конкретний ефект скла: заломлення, дисперсію, реакцію на курсор. Знайшов основу на SVG-фільтрі й почав із неї.
Результат наблизився до задуму, але мене ще не влаштовував. Тоді попросив AI зробити саме цю кнопку на WebGL, окремо наголосивши на плавності та оптимізації.
Щоб зручніше шукати потрібний вигляд, спочатку створив окремий мініпроєкт із повзунками. Через них налаштовував ефект і анімації взаємодії та одразу бачив зміни. У кнопки з’явилася власна лабораторія, а в мене — можливість менше пояснювати й більше пробувати.
Коли результат сподобався, попросив інтегрувати його в сайт. Тут додалася поведінка: при скролі кнопка зменшується та закріплюється внизу екрана, а після натискання анімовано відкриває форму.
Раніше довелося б окремо замовляти таку реалізацію розробнику. З ефектом скла, реакціями на курсор, прилипанням та переходом у форму це вже окрема задача з бюджетом. Припустімо, умовні $500 — реального кошторису на неї я не отримував.*
У голові дизайнера це все ще «просто кнопочка». У технічному завданні вона вже має власну біографію.
З AI я зміг сам пройти всі ітерації та налаштувати результат. Вклав у це свій час, оплату інструментів і підозріло багато уваги до заломлення світла.
* $500 — ілюстративний бюджет: наприклад, 10 годин за умовної ставки $50/год. Фактичні трудовитрати цієї задачі з виконавцем не оцінювалися.
Як я відкрив для себе власну адмінку
А найбільше мене здивувала адмінка.
Тут я відчув себе Колумбом: відкрив для себе цілий континент можливостей, на якому розробники вже давно жили, працювали і не пускали сюди дизайнерів, але час йде, і ми дісталися сюди.
Виявилося, що можу додати в адмінку функцію саме під свій процес. Наприклад, мені було потрібне масове стиснення зображень, до якого я звик у Webflow.
Показав AI, де хочу бачити цю можливість, звичайними словами описав задачу та попросив порадити формат. Так у моїй адмінці з’явився потрібний інструмент. Експедицію вважаю успішною.
Схожі відкриття були з базою даних, оновленнями сайту та виправленням багів. Технічні речі, які раніше залишалися десь під капотом, стали доступнішими. Іноді AI ще й сам знаходить проблему під час перевірки.
Скільки часу зайняв сайт насправді
Саме в технічній частині я відчув найбільшу економію часу: верстка, налаштування, деплой, хостинг та оновлення. Але цифри з початку статті потребують пояснення.
Чотири години дизайну стосуються головної та журналу. Я робив сайт для себе, концепція була відносно простою, а основний фокус припав на мікроанімації й технічні можливості.
Тиждень розробки — календарний період із паузами через ліміти AI-інструментів. Згодом я продовжив роботу в Claude Code. Без цих пауз, думаю, упорався б швидше, але окремого заміру робочих годин у мене немає.
А потім почалося наповнення. Ще три-чотири дні пішли на графіку, відео та матеріали для кейсів. І робота досі триває. Короткий пункт «додати контент» у плані виглядав значно скромніше.
Тому переносити ці строки на будь-який клієнтський сайт я б не став. В іншому проєкті будуть свої дослідження, погодження та обсяг роботи. Навіть із готовою версткою матеріали самі себе не підготують.
Що я перевіряю сам. І так, код я не читаю
Перед запуском я особисто перевіряю швидкодію, вигляд інтерфейсу та зручність. Проходжу основні сценарії, дивлюся, чи правильно працюють елементи й чи відповідає результат задуму.
А сам код не перевіряю. Хай захейтять мене розробники, але достатньої експертизи для його рев’ю в мене немає. Робити розумне обличчя перед відкритим редактором я, звісно, можу. Користі від цього небагато.
Технічні перевірки доручаю AI. Перед релізом також прошу перевірити проєкт на можливі проблеми безпеки. Розумію, що нейронка може пропустити помилку, а складніші задачі можуть потребувати участі технічного спеціаліста.
Що змінилося для мене та моїх клієнтів
Після запуску продовжую допрацьовувати сайт. Десь помічаю незручність, десь змінюю поведінку або додаю функцію. Тепер можу сам пройти від «було б зручно ось так» до робочого варіанта й перевірити, чи стало краще.
Для мене як дизайнера це суттєва зміна. Я можу вести проєкт далі за межі макета й реалізовувати рішення, які раніше доводилося передавати іншому виконавцю. Для клієнта це можливість працювати зі мною від дослідження до запуску й обговорювати дизайн та реалізацію в одному процесі.
AI вже допомагає мені майже на кожному етапі. А увага все одно потрібна: перевірити дослідження, продумати структуру, створити концепцію, помітити невдалу взаємодію. І вчасно зупинитися з налаштуванням кнопки. Над останнім ще працюю.
