Як дизайнеру зробити свій перший застосунок з Claude Code: мій кейс з iOS

Коротка відповідь: так, дизайнер може зробити робочий iOS-застосунок з Claude Code без знання Swift. Я зібрав застосунок для домашньої бухгалтерії за пару годин і відправив його на рев'ю в App Store. Потрібні Mac з Xcode, підписка Claude і, для публікації, акаунт Apple Developer. Сам код забирає найменше часу. Найбільше йде на чітку постановку задачі, тестування на симуляторі і паперову частину App Store.

Я Дмитро Ніколаєнко, продуктовий дизайнер, 15 років у продукті і 8 мобільних банків за плечима. Мобільні інтерфейси я проєктував роками, але власний застосунок у сторі довго здавався чимось, для чого потрібна команда. Цей кейс про те, як це змінилося.

Чому саме домашня бухгалтерія?

Задача була особиста і проста: записувати витрати і доходи сім'ї і бачити, куди йдуть гроші за місяць. Готових застосунків багато, але мені хотілося рівно тих екранів і тієї логіки, які потрібні нам, без зайвого.

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

Що потрібно, щоб почати?

• Mac з Xcode. Xcode безкоштовний, у ньому є симулятор iPhone. Без Mac нативний iOS-застосунок не зібрати, але є шлях вебзастосунку, про нього нижче.
• Claude з доступом до Claude Code. Працювати можна у вкладці Code застосунку Claude, термінал не обов'язковий. Як почати, я описав у статті Claude Code без терміналу.
• Акаунт Apple Developer. Потрібен тільки для публікації в App Store і TestFlight. Він платний, з щорічною підпискою. Для запуску на симуляторі і на своєму телефоні для тесту він не потрібен.
• Опис застосунку на одну сторінку. Це найважливіше, і про це далі.

Крок 1. Описати застосунок, як бриф для розробника

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

Застосунок: домашня бухгалтерія для сім'ї, iOS, SwiftUI.
Екрани: список операцій за місяць, додавання операції,
підсумок по категоріях.
Дані: сума, тип (витрата/дохід), категорія, дата, коментар.
Зберігання: локально на телефоні, без акаунтів і сервера.
У першій версії НЕМАЄ: синхронізації, банків, графіків.
Стиль: системні компоненти iOS, світла і темна тема.

Блок «чого немає» економить найбільше часу. Без нього агент чесно намагається зробити все і першу версію ви не побачите довго.

Крок 2. CLAUDE.md і план замість коду

Покладіть у папку проєкту файл CLAUDE.md з цим описом і кількома правилами, наприклад: використовувати SwiftUI, не додавати сторонніх бібліотек без питання, після кожної зміни перевіряти, що проєкт збирається. Потім попросіть Claude спершу скласти план, а не писати код.

Прочитай CLAUDE.md. Склади план першої версії:
які файли створиш, які екрани і моделі даних.
Код поки не пиши, спершу покажи план.

Прочитайте план як дизайнер: чи всі екрани на місці, чи логіка навігації така, як ви хочете. Виправте, що не так, і тільки після цього кажіть «поїхали».

Крок 3. Збірка і симулятор

Далі Claude Code створює проєкт, екрани і модель даних. Ви запускаєте застосунок у симуляторі iPhone, дивитесь, що вийшло, і даєте правки так само, як дали б їх розробнику. Наприклад: «відступи між рядками більші», «сума витрат червона, доходів зелена, але через системні кольори, щоб працювала темна тема», «кнопка додавання завжди доступна внизу».

Коли щось не збирається, не намагайтесь розібрати помилку самі. Скопіюйте текст помилки з Xcode в Claude Code з проханням виправити і пояснити одним реченням, що сталося. У моєму випадку робоча версія, якою можна користуватись, з'явилась за пару годин.

Крок 4. Полірування очима дизайнера

Тут дизайнерський досвід дає найбільше. Агент збирає функціонал, але деталі бачите ви:

• пусті стани: що бачить людина, коли операцій ще немає;
• великі шрифти: чи не ламається інтерфейс з динамічним розміром тексту iOS;
• темна тема і контраст;
• довгі назви категорій і великі суми;
• іконка застосунку і екран запуску.

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

Крок 5. App Store: найдовша частина

Код зазвичай готовий швидше, ніж ви пройдете всі кроки публікації. Що треба зробити:

1. Створити запис застосунку в App Store Connect.
2. Підготувати скріншоти потрібних розмірів, опис, ключові слова і категорію.
3. Заповнити відомості про приватність: які дані збирає застосунок. Якщо все зберігається локально, це простіше.
4. Завантажити збірку з Xcode, перевірити її через TestFlight.
5. Відправити на рев'ю і чекати відповіді Apple.

Claude допомагає і тут: пише опис застосунку, підказує, де в Xcode налаштування підпису, пояснює, що означає повідомлення від App Store Connect. На момент написання мій застосунок саме на рев'ю. Ще важливо: відмова на першому рев'ю - нормальна річ, Apple пояснює причину, і її виправляють.

Немає Mac? Шлях вебзастосунку

Якщо у вас Windows або ви не хочете зв'язуватись з App Store, зробіть вебзастосунок, який встановлюється на головний екран телефону (PWA). Логіка та сама: опис, CLAUDE.md, план, збірка, правки. Деплой на Cloudflare Pages чи Vercel безкоштовний, а результат відкривається з будь-якого телефону. Загальний пайплайн такого підходу є в статті Застосунок з Claude Code без команди.

Де дизайнери застрягають найчастіше

• Розмита задача. «Зроби застосунок для фінансів» дає хаос. Опис на одну сторінку з блоком «чого немає» вирішує 80% проблем.
• Страх помилок у Xcode. Червоний текст лякає, але це просто інформація для агента. Копіюйте і віддавайте Claude.
• Розростання першої версії. Графіки, синхронізація, віджети - все це друга версія. Спершу випустіть мінімум.
• Відсутність Git. Попросіть Claude Code ініціалізувати репозиторій з першого дня і комітити після кожного робочого кроку. Тоді будь-яку невдалу зміну легко відкотити.

Як формулювати задачі, щоб агент розумів з першого разу, я розписав окремо: Промпти для Claude Code: як дизайнеру ставити задачі.

Що цей досвід змінив для мене як дизайнера

Найцікавіше відкриття було не про код. Коли ти сам відповідаєш за весь застосунок, по-іншому дивишся на кожне дизайнерське рішення. Зайвий екран - це не «ще один макет», а ще одна річ, яку треба зібрати, перевірити і підтримувати. Тому перша версія виходить простішою і чеснішою, ніж була б у Figma.

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

І третє: бар'єр між «у мене є ідея» і «у мене є застосунок» для дизайнера став дуже низьким. Найважче тепер не зібрати, а обрати, що саме варто збирати.

Що цей досвід змінив для мене як дизайнера

Найцікавіше відкриття було не про код. Коли ти сам відповідаєш за весь застосунок, по-іншому дивишся на кожне дизайнерське рішення. Зайвий екран - це не «ще один макет», а ще одна річ, яку треба зібрати, перевірити і підтримувати. Тому перша версія виходить простішою і чеснішою, ніж була б у Figma.

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

І третє: бар'єр між «у мене є ідея» і «у мене є застосунок» для дизайнера став дуже низьким. Найважче тепер не зібрати, а обрати, що саме варто збирати.

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

Чи може дизайнер зробити iOS-застосунок без знання Swift?

Так. З Claude Code код на SwiftUI пише агент, а дизайнер описує екрани, дані і поведінку, тестує в симуляторі і дає правки. Дмитро Ніколаєнко, засновник UX Hero, так зібрав застосунок для домашньої бухгалтерії за пару годин і відправив його на рев'ю в App Store.

Що потрібно для iOS-застосунку з Claude Code?

Mac з безкоштовним Xcode, Claude з доступом до Claude Code і, для публікації в App Store, платний акаунт Apple Developer. Для тестів на симуляторі і своєму телефоні акаунт розробника не потрібен.

Скільки часу займає перший застосунок з Claude Code?

Простий застосунок на кілька екранів з локальним зберіганням даних можна зібрати за кілька годин. Більше часу йде на полірування деталей і на публікацію в App Store: скріншоти, опис, приватність і рев'ю Apple.

Що робити, якщо немає Mac?

Зробіть вебзастосунок (PWA), який встановлюється на головний екран телефону. Процес той самий: опис, CLAUDE.md, план, збірка з Claude Code і безкоштовний деплой на Cloudflare Pages або Vercel.

---

Застосунок у сторі більше не потребує команди. Потрібні чітка задача, дизайнерське око на деталі і терпіння до паперової частини. Код - найменша з проблем.