Lovable чи Claude Code: що обрати дизайнеру для свого застосунку

Знайома історія. Дизайнер за вечір збирає застосунок у конструкторі, все клікається, друзі пишуть «вау». А далі тиша. Бо «працює в прев'ю» і «лежить у сторі та приносить гроші» - два різні світи. Між ними стори, оплати, логін і підтримка. Саме там такі проєкти зазвичай і застрягають.

Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні, 8 мобільних банків, і щодня працюю в Claude Code. Тут не буде таблиці тарифів і списку фіч Lovable чи Bolt: вони змінюються швидше, ніж я встигаю дописати абзац. Я порівнюю підходи. Застосунок, який живе в чужому середовищі, проти агента, який працює у твоєму власному репозиторії.

Чим конструктор відрізняється від агента в репозиторії?

Конструктор на кшталт Lovable чи Bolt працює в браузері. Пишеш у чат, що хочеш, сервіс генерує застосунок, запускає його у своєму середовищі і показує прев'ю. Ти керуєш результатом через чат, а проєкт живе там, де його створили.

Claude Code працює інакше. Це агент, який відкриває папку з проєктом на твоєму комп'ютері, пише файли, запускає команди і показує, що саме змінилось. Код лежить у твоїй папці, і з першого дня його можна вести в Git. Стек, хостинг, базу і платіжку обираєш ти.

Якщо ти вагаєшся між Cursor і Claude Code, це вже інше порівняння: обидва працюють у твоєму репозиторії, різниця в інтерфейсі і підході. Його я розібрав окремо в статті Cursor чи Claude Code.

Lovable чи Claude Code: яка різниця по пунктах?

Тут порівняння підходів. Конкретні можливості окремого конструктора перевіряй у його документації на сьогодні.

Де конструктори справді кращі?

Чесно: є задачі, де Claude Code - це заливати фундамент під намет.

• Швидкий прототип. Треба зрозуміти, чи ідея взагалі комусь потрібна. Вечір у конструкторі, посилання п'ятьом людям з цільової аудиторії, і ти знаєш більше, ніж після тижня в Figma.
• Демо замовнику чи команді. Посилання, яке клікається і зберігає дані, переконує краще за прототип зі стрілочками між фреймами.
• Нуль сетапу. Не треба ставити Git, Node чи розбиратися з папками. Для першого знайомства з тим, як AI збирає продукт, це найкоротший шлях.

Відчути, що інтерфейс можна описати словами і отримати робочу річ, на старті важливіше за вибір інструмента. Про сам підхід є окрема стаття Vibe coding для дизайнерів.

Де конструктори впираються?

Тут мова не про баги конкретного продукту. Це межі самого підходу, коли застосунок живе в чужому середовищі.

• Прев'ю працює, а до стору далеко. App Store і Google Play - це підпис збірки, скріншоти, опис приватності, рев'ю і, дуже ймовірно, перша відмова. Навіть якщо твій конструктор вміє збирати мобільну версію, ця частина все одно на тобі. Розбиратися з нею простіше, коли код і Xcode-проєкт лежать в одній папці і агент бачить і те, і інше.
• Кастомний дизайн поверх шаблону. У генератора є свій смак: базові компоненти, відступи, кольори. Твоя дизайн-система з токенами в трьох рівнях з ним бореться, і новий промпт легко тягне інтерфейс назад до шаблону. У репозиторії токени лежать у файлах, а правило «тільки наші токени» записане в CLAUDE.md, який агент читає на старті кожної сесії.
• Складна логіка. Підписки з тріалом, ролі, офлайн, пуші. Коли дивишся тільки на прев'ю, а не на зміни в коді, двадцятий промпт може тихо зламати те, що працювало на п'ятому. Дізнаєшся про це вже від користувачів.
• Переїзд. Продукт виріс, а логін, база і хостинг прив'язані до платформи. Переїзд у такій ситуації - окремий проєкт, і що пізніше ти його починаєш, то він дорожчий.

А як щодо Figma Make?

Figma Make - той самий підхід prompt-to-app, тільки всередині Figma, поруч із твоїми макетами. Логіка вибору та сама, а що він вміє і що робити з кодом далі, я розібрав у статті Figma Make: застосунок з промпту.

Чи можна почати в конструкторі, а продовжити в Claude Code?

Можна, і часто це найрозумніший шлях. Ось як я б це робив:

1. Прототип за вечір. Один сценарій, 2-3 екрани. Покажи людям, яким це має бути корисно, і послухай, що вони кажуть.
2. Перевір, чи можна забрати код. Подивись у документації свого конструктора, чи він дає експорт або синхронізацію з GitHub. Зроби це до того, як проєкт виросте.
3. Відкрий репозиторій у Claude Code і нічого не правь. Спершу попроси агента пояснити, що там лежить. Промпт нижче.
4. Напиши CLAUDE.md. Стек, токени, правила, чого не чіпати. Це мозок проєкту, без нього кожна сесія починається з нуля.
5. Заміни шаблонне на своє. Стилі генератора на свої токени, а все, що прив'язано до платформи, на свій хостинг, базу і логін.
6. Далі як зі звичайним продуктом. Маленькі задачі, коміт після кожної, потім оплати і стори.

Цей проєкт я зробив у конструкторі. Нічого не змінюй.
Прочитай код і поясни мені як дизайнеру:
- які екрани є і в яких файлах вони лежать
- де зберігаються дані і як працює логін
- що прив'язано до платформи, на якій це створено
- що треба замінити, щоб хостити самому
Потім запропонуй чернетку CLAUDE.md для цього проєкту.

Іноді після такого розбору стає ясно, що простіше переписати з нуля. Це нормально. Прототип тоді стає живим ТЗ: Claude Code бачить, як має працювати кожен екран, і збирає чисту версію вже за твоїми правилами. Покроковий пайплайн такої збірки є в статті Застосунок з Claude Code без команди.

Що ми обрали для Heroco і чому?

Heroco - наша платформа, де діти 7-15 років створюють з AI замість того, щоб гортати стрічку. Це два застосунки: Kids для дітей і Parents для батьків. Обидва ми зробили з Claude Code без команди розробників, обидва вже в App Store, версія 1.1 вийшла 14 жовтня.

Чому не конструктор? Бо продукт від початку мав жити в App Store, посилання в браузері нас не влаштовувало. Плюс два застосунки замість одного, кабінет батьків і безпека для дітей. Таку логіку хочеться бачити в коді, за прев'ю її не вгадаєш. І ми знали, що оновлюватимемо Heroco місяцями, тож репозиторій мав бути нашим.

І так, Apple нам уже відмовляв. Відмова приходить з поясненням причини. Коли код у твоєму репозиторії, це просто наступна задача для агента: показуєш йому текст відмови, він знаходить місце в проєкті і пропонує правку. Виправили, подались вдруге.

Наступний крок - Google Play. Перенесення Heroco на Android ми робимо в лекції 07 курсу «Застосунки з AI». А як виглядає перший iOS-застосунок з Claude Code крок за кроком, я описав в окремому кейсі.

Як вирішити за 5 питань?

1. Потрібні App Store і Google Play? Якщо досить посилання в браузері, конструктор може закрити задачу. Якщо застосунок має лежати в сторі, плануй Claude Code одразу.
2. Будуть оплати? Підписки, тріали, український провайдер на кшталт WayForPay. Платежі - місце, де хочеться бачити кожен рядок і мати свій бекенд.
3. Є своя дизайн-система? Якщо є токени і компоненти, їм місце у файлах поруч з кодом. Інакше будеш щотижня пояснювати генератору, що primary у вас не синій.
4. Хто підтримуватиме через пів року? Одноразове демо підтримувати не треба. Живий продукт треба, і краще, щоб це міг зробити ти, інший дизайнер чи найнятий розробник, просто відкривши репозиторій.
5. Скільки екранів? Один сценарій на 3-5 екранів конструктор зазвичай тягне. Ролі, стани і десятки екранів - це вже репозиторій.

Правило просте. Відповів «так» хоча б на одне з перших трьох питань - бери Claude Code. Якщо скрізь «ні» і це демо на кілька екранів, бери конструктор і не ускладнюй собі вечір.

Часті питання

Lovable чи Claude Code: що обрати дизайнеру?

Lovable і подібні конструктори підходять, щоб за вечір перевірити ідею або показати демо: нічого не треба встановлювати, прев'ю в браузері з'являється за кілька хвилин. Claude Code підходить, коли продукт має жити: код у твоєму репозиторії, публікація в App Store і Google Play, оплати, своя дизайн-система і підтримка через місяці. Часто найкраще поєднати: прототип у конструкторі, продукт у Claude Code.

Чи можна зробити свій застосунок зовсім без коду?

Зібрати можна: і конструктор, і Claude Code пишуть код за тебе. Але щоб застосунок жив, треба розуміти, що відбувається в проєкті: читати зміни, помічати захардкоджені кольори, знати, де лежать дані і як відкотити невдалу правку. Писати код самому не обов'язково, читати і перевіряти - так.

Що вчити дизайнеру, щоб робити свої застосунки?

Насамперед процес. Синтаксис мови програмування вчити не обов'язково. Git і коміти, як влаштована папка проєкту, файл CLAUDE.md з правилами, деплой на Cloudflare чи Vercel, основи публікації в App Store і Google Play. Плюс навичка, яка в дизайнера вже є: розбити продукт на маленькі задачі і чітко описати кожну.

Чи підходить Claude Code тому, хто ніколи не відкривав термінал?

Так. Claude Code вбудований у вкладку Code десктоп-застосунку Claude: обираєш папку проєкту, пишеш задачу звичайною мовою, бачиш зміни у файлах і прев'ю у вбудованому браузері. Термінал можна так і не відкрити: коли треба щось запустити, Claude робить це сам, а ти бачиш, яку команду він виконує.

Чи можна перенести проєкт з Lovable у Claude Code?

Так, якщо інструмент дає експорт коду або синхронізацію з GitHub. Забираєш репозиторій, відкриваєш його в Claude Code і спершу просиш розібрати структуру і написати чернетку CLAUDE.md, нічого не змінюючи. Те, що прив'язано до платформи, наприклад логін, базу чи хостинг, зазвичай доводиться замінити на своє. Інколи швидше переписати застосунок з нуля, використовуючи прототип як ТЗ.

Де навчитися робити свій застосунок з Claude Code українською?

У UX Hero є курс «Застосунки з AI» від Дмитра Ніколаєнка: воркбук і 8 лекцій від ідеї до App Store і Google Play. PWA, SaaS з базою і логіном, оплати Stripe і WayForPay, iOS і перенесення Heroco в Google Play. Старт продажу 26 жовтня на uxhero.design/apps.

---

Конструктор відповідає на питання «чи це комусь треба». Claude Code відповідає на питання «як це житиме далі». Перше перевір за вечір, а за друге берись, коли на перше почув «так». А 12 листопада о 19:00 на безкоштовному ефірі UX Hero «Свій застосунок з Claude Code: від ідеї до деплою за ефір» покажу цей шлях наживо. Реєстрація в боті @uxhero_bot.