«Код из палок и... нейросетей»: Как я собрал MVP на Figma Make, получил «говнокод», но запустил продукт
Я продуктовый дизайнер. У меня есть идея, макеты и нет времени учить код. Поэтому я решил доверить разработку ИИ.
Спойлер: мой знакомый сеньор-разработчик, увидев результат, сказал, что это невозможно поддерживать. Но платформа Креатор работает, пользователи регистрируются, а бизнес-гипотезы проверяются.
В этой статье — честный разбор «вайбкодинга»: обзор 9 инструментов, боль отсутствия архитектуры и те самые промпты, которые спасут проект от превращения в цифровую свалку.
Идея
У меня появилась идея — создать платформу на базе ИИ (конечно же). Платформа для начинающих предпринимателей, которые хотят создать свой бизнес, но не разбираются в маркетинге и бизнес-процессах. ИИ-ассистент на платформе будет помогать людям понимать бизнес и выстраивать маркетинг.
Чтобы реализовать эту идею, нужно кодить платформу. Я не разработчик, но т.к. работаю продуктовым дизайнером, то могу создать дизайн макеты и подробное описание, как должна работать платформа с точки зрения пользователя.
И вот у меня на руках есть дизайн и описание чего я хочу. Что с этим делать?
- Нанять разработчиков: Долго и дорого.
- No-Code конструкторы вроде bubble: Быстрее, но ты упираешься в ограничения платформы и в итоге получается не быстро, геморно и не красиво.
- Вайбкодить в традиционных инструментах типа Cursor, Windsurf или Claude Code, Codex.
- AI no-code сервисы, которые обещают сделать приложение без знаний кода. (Lovable, Replit, v0, Figma Make…)
Я решил начать с четвёртого варианта. У меня были готовые дизайн-макеты и уверенность, что если ИИ видит кнопку, он заставит её работать.
Нашёл 9 решений для проектирования приложений по промпту:
- ещё несколько сервисов, которые буду интегрировать в no-code сервисы:
- Supabase — бэкенд и база данных
- GitHub — хранение версий кода
- Яндекс Метрика — аналитика
- Яндекс Рассылки — уведомления для пользователей
- Юкасса — прием платежей (в процессе она юкасса перестала работать, перешёл на робокассу)
- API Gemini — «мозг» для ИИ-ассистента
9 попыток найти кнопку «Сделай хорошо»
Я протестировал 9 популярных решений. Моя задача была простой: «Вот макет, вот описание. Дай рабочее веб-приложение».
Аутсайдеры
Rork, Builder.io, Bolt, Replit: Либо не загрузились, либо требовали денег вперёд, либо сжигали бесплатные токены на первом экране. Bolt сгенерировал фронт, но проигнорировал мой дизайн. Replit был ближе, но закончился бюджет на этапе регистрации.
Середнячки
- AI Studio (Google): Отлично для быстрого прототипирования логики, но это не «сборщик приложений». Бэкенд там не поднимешь.
- Base44 и Lovable: Сделали 4 сценария (регистрация, вход, дашборд, подписки), всё работает... но дизайн не соответствует макетам.
Второе место
v0 от Vercel: v0 просто умнее предыдущих, она понимает что я хочу и не ждёт пока я попрошу её подключить интеграцию с кассой например, а сама просит указать ключи. Также создал 4 сценария, но дизайн не соответствует макетам.
Победитель: Figma Make
Киллер-фича для дизайнера: ты не скидываешь скриншоты, ты дизайнишь макет в фигме и просто копи-пастишь макет дизайна в Figma Make. Это был основной критерий почему я выбрал Figma Make. Ну и то что она такая же умная как v0.
- Результат: Визуальное соответствие макетам ~95%. Ощущение, что там сидит команда индусов и в реальном времени верстает твой макет.
- Интеграции: Легко подружился с Supabase, (бэкенд/auth) Gemini API (мозги проекта) и другими интеграциями.
Казалось бы, победа?
Как создать MVP в Figma Make
500 итераций или около 2-3 недели работы и MVP готов. Интеграции, платёжка, всё работает как по маслу… ну, почти.
Когда эйфория прошла, я показал проект знакомому бэкенд-разработчику и тим-лиду. Его вердикт был суров:
«Это работает, но внутри — мешанина. Переиспользовать это для масштабирования не получится. Нужно проектировать архитектуру заново».
Что пошло не так?
Я думал что учёл всё. А конкретно я:
1. Написал промпт для клауда, чтобы тот написал мне промпт для Figma Make. Ответил почти на все вопросы и получил подробное ТЗ для Figma Make.
2. Затем я попросил Claude создать гайдлайны на основе макетов.
3. Вставил гайдлайны в код. (см. скрин выше)
4. Копи-пастнул ТЗ для Figma Make, который дал мне Claude.
5. Разработка началась и я уже совершил как минимум одну ошибку. (расскажу ниже)
6. Дальше я скидывал макеты с описанием и просил реализовать:
«Реализуй функционал на основе макетов дизайна и критериев. Критерии приёмки для фича/страница:
- Должен указать почту и пароль.
- Видит ошибку, если указал данные неправильно.
- ...»
7. А в конце я точечно правил косяки, которые были всегда. А порой Figma сама себя правила.
Всё. 6 и 7 пункты продолжались пока макеты не закончились и все ошибки были исправлены.
Что я сделал не так?!
- Я не разбирался в архитектуре бэка, у меня даже мысли не было там разбираться. Я думал что первого промпта и моих ответов на вопросы Клауда будет достаточно. Но нет, в идеале на этом шаге привлечь разработчика, который сможет направить ту же нейронку создать правильную архитектуру для платформы.
- Нейронки не понимают и не помнят весь контекст разработки. Поэтому периодически они могут переписать код или наложить новую логику, поверх того, что уже есть, в итоге получается Франкенштейн. Он работает, но масштабировать становится сложно. Каждая правка может что-то сломать или создать мусорный код. Поэтому будет полезно просить нейронку проверить, что оно сделало. Например так:
Протестируй результат перед выдачей. Убедись, что код не конфликтует с предыдущими модулями и соответствует гайдлайнам.
Итог: Стоит ли оно того?
Платформа Креатор сейчас готова в Beta версии, уже можно пользоваться всем функционалом MVP — https://create-products.com/.
Результаты:
- Цена разработки: 0 рублей (только подписки и API).
- Потрачено нервов: умеренно.
- Качество кода: 4/10.
- Качество продукта (MVP): 8/10 (оно работает и приносит пользу).
- Результат: Рабочий MVP, который анализирует рынок, создает персоны, позиционирование и оффер, можно общаться в чате с ИИ-ассистентом и созданными персонами и можно создать план запуска своего MVP.
Выводы
Вайбкодинг — это мощный инструмент для валидации гипотез. Можно собрать MVP за выходные, ну или пару недель, для продукта вроде Креатора. Но если вы пропустите этап архитектуры и будете просто «кидать макеты в чат», вы получите одноразовое приложение.
ИИ не заменит разработчиков (пока). Но он позволяет дизайнерам и предпринимателям срезать углы там, где раньше нужна была команда из минимум трех человек. Главное — знать, где эти углы, а где — несущие стены.
P.S. Сейчас я продолжаю допиливать платформу, используя этот подход. Если вам интересно потестировать — заходите на create-products.com.
Или можно глянуть скринкаст на ютубе: https://youtu.be/DXp-sQMDCh4
А в комментариях расскажите, пробовали ли вы Figma Make и другие инструменты?
Следить за продвижением платформы и созданием других продуктов на основе ИИ можно в тг-канале В эпоху AI — https://t.me/create_products.