Вайбкодинг. iOS приложение от идеи до стора

На разработку ушло 16 выходных дней и примерно 250$

Решил я значит разработать свое приложение, начитавшись материалов про ИИ и вайбкодинг, захотелось попробовать самому. Так как я являюсь UX/UI дизайнером, который занимается разработкой дизайна для приложений, я поставил себе несколько целей, которые должны были закрыться в процессе разработки аппы:

Нарисовать дизайн и попробовать воспроизвести его pixel-perfect с помощью нейронки на SwiftUi

Получилось, нейронка, пусть и не с первого раза но сделала все в точности по макетам, используя дизайн-систему, токены и прочее. Поведение аппы в точности как на макетах в фигме.

Попробовать вайбкодинг

Попробовал, удивили возможности нейронок. Теперь вопрос стоит не "Как это делать?", а "что сделать?". Удивительно, что за ≈250 баксов получилось собрать полноценное, работающее MVP продукта. Можно было уложиться в 50-70, но я уперся в лимиты и пришлось перейти на подписку за 200 баксов, чтоб не тратить время на ожидание.

Попробовать пройти весь цикл разработки продукта

Считаю, что получилось, хоть и заказчиком выступал я сам, я прошел сбор требований, дизайн, написание технического задания и аналитики для нейронки, разработку, тестирование, подключение метрики с событиями (Yandex app metrica), интеграция с внешними сервисами и, собственно, релиз.

Финансовый менеджер. Уже лет 10 пользуюсь аппами для учета дохода и расхода, и у всех есть ряд минусов, которые я для себя решил закрыть своей собственной аппой. Разрабатывал прежде всего для собственного использования, за пример я брал коинкипер в его лучшие годы.

Далее я расскажу о процессе, сложностях с которыми я столкнулся и покажу результат. Не претендую на гайд, просто описываю свой опыт.

Все началось с идеи, у меня есть потребность в нескольких мобильных приложениях, существующие продукты не закрывают ее полностью, для первой реализации я выбрал финансовый менеджер. Я долгое время пользовался коинкипером, но сейчас эта аппа выглядит просто рекламным спамом, как те сайты в нулевые, которые открывали попандер за попандером.

Выбрав направление я начал дизайн, разрабатывал его в фигме очень основательно: разработал дизайн-систему основанную на токенах, все цвета, отступы и прочее было задано токенами, разработал большой ui-kit с компонентами во всех возможных состояниях.

Прорисовал отдельно каждый экран, разложил их по сценариям, получилось очень детальная прорисовка. Каждый экран и компонент содержит аннотацию с описанием поведения.

Техническое задание и аналитику экранов я писал с помощью Claude. Взял самую дешевую подписку, подключил нейронку к фигме через MCP, описал ей свою задумку и попросил пройтись по общему флоу, каждому экрану, компоненту и составить на их основе техническое задание на разработку мобильного приложения на SwiftUI.

В процессе анализа макетов Claude подсветила несколько моментов которые необходимо было поправить, а так же перечислила возможные негативные стейты которые нужно было дорисовать, так мы прошли несколько циклов доработок макетов.

Изначально думал что этот шаг будет коротким, по факту временных затрат получилось чуть меньше, чем на разработку дизайна. В результате появилось 11 md файлов, в которых описывалась аналитика, архитектура, дизайн-система и прочее.

Разрабатывать проект я доверил Codex’у, он должен был писать код по документам Claude, потом отправлять коммиты в гихаб, где их проверял Claude перед мержем. Изначально всё шло идеально, кодекс писал код по этапам, которые ему расписал Клод, я билдил аппу на телефон и проверял, далее я, видимо, сильно ему поверил и пропускал проверки на устройстве, а когда сбилдил сборку, заметил что кодекс буд-то перестал смотреть в макеты. Он делал весь функционал следуя доке, но вот UI элементы придумывал сам, пришлось описывать ему что и как должно быть на самом деле.

Слева то, как сделал Codex, справа макет.

Еще один момент, Клод неправильно описал работу с хранилищем данных, и в итоге при создании 5000 тестовых операций я столкнулся с жуткими фризами приложения, как выяснилось - при отрисовке экрана аппа обращалась ко всем существующим записям, пришлось переделать архитектуру.

Для приложения требовалось подключение внешних сервисов: поставщик котировок, для работы с сущностями в разной валюте, для конвертации, а так же с бэкендом, через который я подгружаю логотипы банков, которые пользователь может выбрать обложкой для счета, еще через бэк я управляю показом рекламного баннера, могу настроить его показ на определенные страны.

Бэкенд кодекс написал сам, на своих стандартных ui компонентах практически без моего участия, получилось хорошо, ну, по крайней мере всё работает.

Работа с кодексом - самый длительный этап, я извел всю подписку за 20 баксов в первые дни, далее купил подписку за 200, и ее уже хватило до финала. К проекту кодекс самостоятельно подключил аналитику – Yandex App Metrica, а так как проект писался на SwiftUI у меня бонусом получилась аппа, работающая на MacOs. Данные между компом и телефоном синхронизируются через iCloud.

Отдельно пришлось разработать сайт, чтоб разместить на нем политику обработки данных, по требованию Apple. Нарисовал дизайн, создал Lottie анимации самостоятельно, сверстал тоже сам, с помощью кодекса добавлял интерактивные элементы.

Сегодня iOs аппу добавили в AppStore, было 2 реджекта, первый - нужно было предоставить детальное видео работы приложения и описание его функционала, а второй касается навигации для MacOS приложения, оно еще на проверке. Пока приложение доступно для России, США, Англии, Малайзии, Казахстана.

Скачать и затестить приложение можно тут: