Так, дизайнер без команди розробників може зібрати робочий застосунок з Claude Code у 2026 - але не через один промпт «зроби мені застосунок». Ключ у дисципліні: маленькі задачі, файл CLAUDE.md з правилами проєкту, компоненти по одному і рев'ю кожної зміни перед тим, як рухатись далі. Claude Code тут напарник-виконавець, а не автор рішень. Постановник задач і рев'юер - завжди ти.
Я, Dmytro Nikolaienko, збираю застосунки з Claude Code щодня - і саму платформу UX Hero, і клієнтські MVP. Цю саму дисципліну я показую на курсі «Design Engineer». Нижче - чесний покроковий шлях: з чого почати, навіщо потрібен CLAUDE.md, як не втратити контроль над кодом і скільки часу це реально займає.
Чи реально зібрати застосунок без розробників?
Визначення: тут «застосунок» означає working MVP - кілька екранів з реальною навігацією, дані, які зберігаються і читаються, і деплой за посиланням, а не набір скріншотів у Figma.
Реально. Claude Code вміє писати компоненти, стилі, роботу зі станом і навіть підключення до бази даних. Але поріг тут не «чи вміє агент писати код», а «чи вмієш ти поставити йому задачу і перевірити результат». Агент не знає твого продукту, не бачить різниці між «схоже на макет» і «як у макеті» і не відповідає за те, що зламається за тиждень. Це твоя робота.
Різниця між «реально» і «нереально» не в інструменті, а в підході. Один промпт «зроби мені застосунок для трекінгу звичок» видасть купу файлів за хвилину - і ти нічого в них не зрозумієш, коли за тиждень щось зламається. Той самий результат, розбитий на 15-20 маленьких задач з рев'ю кожної, займе довше, але наприкінці ти зможеш сам пояснити, чому кожен файл там, де він є.
Що таке Claude Code і з чого він складається, я докладно розписав у статті Claude Code для дизайнерів. Якщо ти ще не пробував інструмент узагалі, почни звідти, а сюди повертайся, коли готовий будувати щось конкретне.
З чого почати?
Перш ніж відкривати термінал, відповідай на три питання на папері чи в нотатці. Це займає 20 хвилин, але економить тижні переробок.
- Який один сценарій має працювати. Не «застосунок для управління проєктами», а «людина створює завдання, позначає його виконаним, бачить список». Один сценарій, не п'ять.
- Скільки екранів у MVP. Дві-чотири екрани - нормальний обсяг для першої версії. Більше - сигнал, що скоуп треба різати.
- Де живуть дані. Локальне сховище в браузері, D1/Postgres чи Supabase - оберіть один варіант заздалегідь, а не по ходу.
Якщо база HTML, CSS і Git ще не закрита, спочатку пройди мій план у статті Як дизайнеру навчитись кодити у 2026. Без неї рев'ю коду від агента перетворюється на здогадки, а не на контроль.
І ще одне рішення на старті - обери стек, максимально близький до того, як ти вже думаєш у Figma. Статичний HTML/CSS з Tailwind для простого MVP або React з Tailwind, якщо потрібні складніші стани й повторні компоненти. Не гнатись за модним фреймворком заради самого фреймворку - на цьому етапі важливіша передбачуваність коду, а не його трендовість.
Навіщо застосунку файл CLAUDE.md?
CLAUDE.md - це файл у корені проєкту, який Claude Code читає перед кожною задачею. Він перетворює агента з генератора випадкового коду на виконавця конкретних правил твого проєкту.
У ньому фіксуєш: стек (наприклад, HTML/CSS/vanilla JS чи React + Tailwind), структуру папок, назви і формат компонентів, заборону хардкодити кольори й відступи замість токенів, правило комітити маленькими змінами. Коли цей файл є, агент раз у раз пише передбачуваний код у стилі проєкту, а не заново вигадує архітектуру щоразу.
Без CLAUDE.md кожна нова сесія - це новий агент, який не знає, що ти вже вирішив учора. З файлом - це той самий напарник, який пам'ятає правила гри.
Файл не мусить бути довгим. Кілька секцій вистачає для старту: ## Стек, ## Структура, ## Правила, ## Що не чіпати. Головне - оновлювати його разом із проєктом, а не написати один раз і забути. Коли додаєш нове правило посеред роботи, запиши його в CLAUDE.md одразу, поки не забув чому воно з'явилось.
Як не отримати некерований код?
Головне правило просте: одна задача - одна зміна. Не «зроби мені застосунок для трекінгу звичок», а «додай екран списку звичок зі статичними даними, без логіки збереження». Друге ти можеш прочитати, перевірити і прийняти за 10 хвилин. Перше - ні.
Ознаки, що ти вже втратив контроль:
- у проєкті з'явились файли, назви яких ти не можеш пояснити;
- та сама логіка продубльована у двох різних місцях;
- кольори й відступи захардкожені прямо в розмітці, а не взяті з токенів;
- ти боїшся щось поміняти, бо не розумієш, що зламається.
Якщо бачиш хоч один пункт - зупинись, відкоти зміну через Git і розбий задачу на менші. Про межу відповідальності між тобою і агентом, а раніше - між тобою і командою розробників, я писав у статті Дизайнер, що кодить.
Ще одна звичка, яка рятує: коміть після кожної прийнятої задачі, а не в кінці дня. Маленький коміт легко відкотити, зрозуміти й пояснити. Коміт на 40 файлів після трьох годин роботи з агентом - це вже не рев'ю, а археологія.
Покроковий пайплайн
Ось порядок, який реально працює від ідеї до задеплоєного MVP.
| Крок | Що робиш | Результат |
|---|---|---|
| Ідея і скоуп | описуєш один сценарій, 2-4 екрани, головні дані | чіткий бриф, а не «щось на кшталт Notion» |
| Структура і CLAUDE.md | закладаєш стек, папки й файл правил для агента | агент розуміє межі проєкту до першої задачі |
| Перший екран | верстаєш один екран статично, без даних і логіки | перевіряєш, що розмітка і стилі керовані |
| Компоненти по одному | кожен компонент - окрема задача агенту й окреме рев'ю | код, який ти встигаєш прочитати й прийняти |
| Дані і стан | підключаєш збереження даних, часто через Claude Code з MCP | застосунок працює з реальними, а не заглушеними даними |
| Деплой | заливаєш на Cloudflare Pages або Vercel | робоче посилання, яке можна надіслати, а не скріншот |
Кожен крок - це окремий коміт або кілька комітів з рев'ю, а не одна велика сесія «поки не набридне».
Як задеплоїти без бекенд-болю?
Для більшості MVP окремий бекенд-розробник не потрібен. Cloudflare Pages або Vercel закривають хостинг, збірку і CI за замовчуванням. Прості API - логін, збереження форми, вебхук від платіжки - живуть у serverless- чи edge-функціях тієї ж платформи. Claude Code з MCP допомагає підключити базу даних або авторизацію, не виходячи з того самого чату, де ти вже ставиш задачі на UI.
Технічні деталі самого деплою я розібрав окремо в статті деплой Design Engineer проєкту на Vercel. Складний бекенд із власною інфраструктурою, чергами й мікросервісами - це вже інша задача, і на старті MVP вона тобі не потрібна.
Скільки часу це займає?
Для простого MVP з кількома екранами, базою даних і деплоєм реально закласти 3-6 тижнів у режимі кількох годин на день. Розкид залежить від одного фактора - чи знаєш ти вже HTML, CSS і Git. Якщо знаєш, більшість часу йде на постановку задач і рев'ю. Якщо ні, значна частина часу піде на розбирання того, що агент щойно написав, а не на сам продукт.
Тому я і раджу закрити базу окремо, перш ніж братись за перший застосунок. Частину цього процесу я показую наживо на YouTube-каналі UX Hero.
Часті питання
Чи реально зібрати застосунок без розробників за допомогою Claude Code?
Так, реально, але не за один промпт. Робочий MVP - екрани, дані, стан і деплой - збирається через дисципліну: маленькі задачі, файл CLAUDE.md з правилами проєкту і рев'ю кожної зміни. Спроба «зроби мені застосунок» одним запитом дає код, який ти не розумієш і не можеш безпечно змінювати.
Скільки часу займає створити застосунок з Claude Code без команди?
Для простого MVP - кілька екранів, база даних, деплой - реально закласти 3-6 тижнів у режимі кількох годин на день, якщо ти вже знаєш HTML, CSS і Git. Без цієї бази більшість часу піде не на код, а на розбирання того, що агент щойно написав.
Чи можна зробити застосунок без знання коду?
Чесно - ні. Писати код за тебе може агент, але рев'ювати його результат, ловити хардкод, зламану адаптивність чи невдалу структуру даних може тільки той, хто розуміє, що відбувається у файлах. База коду потрібна не для набору символів, а для контролю.
Чи можна задеплоїти застосунок без бекенд-розробника?
Так, для більшості MVP. Cloudflare Pages або Vercel закривають хостинг і CI, serverless- або edge-функції закривають прості API, а Claude Code з MCP допомагає підключити базу даних чи авторизацію. Складний бекенд із власною інфраструктурою - це вже інша задача.
Де навчитись будувати застосунки з Claude Code українською?
У UX Hero є курс «Design Engineer» від Dmytro Nikolaienko: 10 лекцій - mindset і ринок, Git, HTML/CSS і Tailwind, Claude Code, JS і React, Figma Dev Mode і токени, Storybook, деплой на Cloudflare і Vercel, Claude Code з MCP та фінальний capstone-проєкт, де ти доводиш власний застосунок до деплою.
Застосунок з Claude Code без команди - це не магія і не міф. Це той самий процес, що й у будь-якій команді: маленькі задачі, рев'ю, деплой. Просто всі три ролі - продакт, розробник і рев'юер - зараз твої.