Всем привет! Если вы следите за темой вайбкодинга, то наверняка замечали как быстро всё меняется. Ещё год назад я генерил одностраничные HTML-файлы, радовался жизни и был уверен что вайбкодинг - он вот про это. Странички, кнопочки, красивый фронтенд. А потом как-то незаметно оказалось что мне нужна база данных, авторизация, платёжная система и тесты. Это как зайти в IKEA за свечкой и выйти с кухней.
Но за последний год вайбкодинг изменился до неузнаваемости. Сейчас это не "сгенерь мне страничку" - это полноценная разработка с бэкендом, PostgreSQL, OAuth авторизацией, эквайрингом от Т-Банка, тестами и автодеплоем. Настоящий небоскрёб. И каждый кирпичик в нём выбран не случайно - самые беспроблемные технологии которые я нашёл за время своих скитаний по разным стекам и агентам. Чтобы строить легко и с удовольствием. Ну или хотя бы без желания выкинуть ноутбук в окно.
Меня зовут Илья, я основатель нейросети для генерации изображений ArtGeneration.me, техноблогер и нейро-евангелист. Я уже писал о своих приключениях с Devin за $500, обзоривал Codex и Jules - но то были эксперименты уровня шалаша. Одностраничные пет-проекты, игрушки. А сейчас я построил хоть и маленький, но коммерческий SaaS - сервис с AI-генерацией изображений, личными кабинетами, оплатой через Т-Банк и ММ моделями от Google, OpenAI, Black Forest Labs и других под капотом. И самое главное - я не написал ни одной строчки кода руками. Весь проект от первого коммита до деплоя - это работа с AI-агентами и данными.
В статье разберу весь стек по кирпичикам. Каждую технологию - почему именно она, что закрывает, какие подводные камни. Без рекламы и без прикрас - честно расскажу и про косяки, куда без них. И кстати, если вы разработчик который давно не выходил за пределы привычного стека - вам тоже может быть интересно. Я вот лично очень удивился когда узнал как изменились дела в веб-разработке за последнюю пару лет, пока я за ней не следил. Supabase, Server Actions, PKCE, self-hosted капчи - мир не стоял на месте.
Мне как блогеру, рассказывающему про нейросети, часто пишут - задать вопрос, спросить "а можно ли сделать вот так", или даже заказать что-то. И вот в очередной раз написали и показали скриншот сервиса, который делал примерку мебели в интерьере. Типа загружаешь фото комнаты, добавляешь фото дивана - и нейросеть рисует как он будет смотреться у тебя дома.
Подумал - а почему бы не попробовать? У меня был большой опыт работы с топовыми моделями генерации и я хорошо знал на что они способны. До этого я уже решал похожие кейсы для ArtGeneration - генерация и редактирование логотипов, промо-фотографии, всякие эксперименты с inpainting. Буквально за два вечера слепил рабочий прототип, показал клиенту - понравилось.
И вот тут начинается самое интересное. Параллельно с партнёром закусились на тему выставления счетов и оформления договоров. Знаете как это бывает - ты делаешь кому-то проект, потом надо выставить счёт, потом акт, потом ещё что-то подписать. С одной компанией это не выгодно и не удобно. И я подумал - проще автоматизировать, чем нагружать человека этой рутиной. Клиент и сам сказал что ему интереснее платить абонентку, но немного, чем за весь проект сразу и исходники. А SaaS с автоматической регистрацией, личным кабинетом, подписками и всеми делами - это уже совсем другая лига. Тут одним фронтедом не обойдёшься.
Кому интересно что за сервис получился - поищите у меня в телеграме ссылку, чтобы не сочли за рекламу.
Дальше разбираем стек. Каждый кирпичик - почему именно он и что закрывает.
Если наш SaaS - это небоскрёб, то Supabase - его фундамент. Для тех кто не в курсе - это опенсорсная альтернатива Firebase, только под капотом не проприетарная NoSQL база от гугла, а нормальный честный PostgreSQL. И вот что меня в нём поразило - один Supabase закрывает столько всего, что раньше пришлось бы собирать из пяти разных сервисов.
Смотрите что получаем из коробки:
База данных - полноценный PostgreSQL с Row Level Security. Это когда безопасность встроена прямо в базу на уровне строк - даже если в клиентском коде накосячишь, база физически не отдаст чужие данные. Пишешь SQL-политику типа "пользователь видит только свои записи" - и всё, можно спать спокойно
Авторизация - OTP по email, Magic Link, passwordless вход, 20+ OAuth провайдеров из коробки, MFA
Хранилище файлов - S3-совместимое, работает с любым S3-клиентом, CDN с 285+ точками по миру
Realtime подписки - через WebSocket, можно подписаться на изменения в базе и получать их мгновенно
Edge Functions - серверные функции если вдруг Server Actions не хватит
И всё это на бесплатном тарифе - 500 МБ база, 1 ГБ хранилище, 50 000 активных пользователей в месяц. Для MVP - за глаза.
Но вот что для меня было ключевым при выборе. Supabase - это классические большие технологии в облаке. PostgreSQL, S3, стандартный Auth. Это не проприетарные штуки типа KV Workers в Cloudflare (хотя это тоже крутая штука, я про неё как-нибудь отдельно напишу), которые хрен знает как потом перенести на понятный дедик за 10 тысяч в месяц. Тут всё стандартное, всё переносимое. Начинаешь на бесплатном тарифе, потом переходишь на платный, а когда экономика позволяет - просто разворачиваешь весь стек на своём сервере через Docker Compose.
Масштаб проекта кстати впечатляет - 5 миллионов разработчиков, больше 3,5 миллионов баз данных, а 40% стартапов из последнего батча Y Combinator используют Supabase. Оценка компании - 5 миллиардов долларов. Это не какой-то стартап-однодневка, это серьёзная платформа.
Конечно не правда будет сказать что всё было гладко. Были и косяки, и странные решения в документации, и моменты когда хотелось пошаманить с вилкой. Но оно рабортает. А для вайбкодера это главное.
Подводный камень: из РФ Supabase напрямую не работает. Решается дешёвой VPS-кой за 500 руб/мес для проксирования. Supabase - это как заселиться в отель "всё включено". База? Есть. Авторизация? Есть. Хранилище? Есть. Завтрак? Ну, завтрак сами. Только вот отель находится за границей, но для мвп это не проблема, а потом технологии можно просто развернуть на собственном дедике.
Если Supabase - фундамент, то Next.js - стальной каркас всего здания. И знаете что меня больше всего удивило когда я начал в него погружаться? Граница между фронтендом и бэкендом просто исчезла.
Серьёзно. В Next.js 16 есть такая штука как Server Actions - это функции которые пишешь прямо рядом с компонентами, помечаешь "use server" и всё, у тебя бэкенд. Не надо поднимать отдельный сервер, не надо городить API на Express, не надо думать про CORS и прочие прелести. Ты думал что пишешь фронтенд - а оказалось что написал и бэкенд тоже. У меня в проекте 40+ Server Actions - они закрывают авторизацию, генерацию изображений, платежи, галерею, подписки, управление пользователями. По сути весь бэкенд живёт прямо в Next.js. "Подожди, а где мой сервер?" - "Ты на нём стоишь."
Плюс Server Components - они рендерятся только на сервере и не отправляют JavaScript клиенту. То есть страница грузится быстрее, а нейросеть делает меньше ошибок потому что не надо думать про гидрацию и прочие приколы клиентского рендеринга. App Router, Turbopack как дефолтный бандлер с 10-кратным ускорением Hot Reload - в общем Next.js в 2026 году это уже не "React с SSR", это полноценный фулл-стек фреймворк. 135 тысяч звёзд на гитхабе, 11 миллионов загрузок в неделю - не на пустом месте.
Отдельно скажу про TypeScript. Для вайбкодинга это не просто удобство - это спасение. Когда нейросеть пишет код, строгие типы работают как ограждения на горной дороге. Исследование 2025 года показало что 94% ошибок компиляции в AI-генерированном коде - это ошибки типов. То есть TypeScript ловит почти все косяки которые делает нейросеть, и агент тут же их фиксит. Без типов я бы утонул в багах. Кстати, TypeScript в октябре 2025 стал языком номер один на GitHub по числу контрибьюторов - 2,63 миллиона, впервые обогнал Python. Мир меняется.
Ну и Vercel закрывает вопрос деплоя целиком. Подключаешь GitHub-репозиторий один раз - и дальше при каждом git push сайт автоматически пересобирается и деплоится. Пушнул - через минуту всё обновилось. Каждый пулл реквест получает свой Preview URL для тестирования. Откатиться на любую предыдущую версию - один клик. Бесплатный тариф даёт 100 ГБ трафика и кучу всего, но он только для личного некоммерческого использования. Для MVP достаточно, а потом можно либо переехать на собственный сервер, либо просто купить про подписку.
Каркас стоит, фундамент залит - теперь надо обставить небоскрёб мебелью. Кнопки, формы, модалки, уведомления, графики, дропзоны для загрузки файлов - всё это UI-библиотека. И это все делать вручную мы не будем. И тут мне тоже повезло с первого раза.
Mantine - open-source React-библиотека, 130+ компонентов из коробки, 50+ готовых хуков, и - вот это ключевое - нейросети её знают идеально. Claude Code за весь проект ни разу не запутался в Mantine. Ни разу. Это вообще первый раз когда какая-то технология в стеке не вызвала ни одной истерики.
Почему так хорошо работает с AI? Во-первых, у Mantine на сайте лежит специальный файл llms-full.txt - вся документация в формате оптимизированном для LLM, полтора мегабайта. Подключаешь его как контекст к Claude или Cursor - и агент генерит код с первого раза. Во-вторых, у всех компонентов одинаковая структура пропсов - если ты понял как работает один инпут, ты понял все. Плюс полная TypeScript-типизация, 30 тысяч звёзд на гитхабе, 120+ готовых шаблонов страниц бесплатно на ui.mantine.dev.
А ещё к Mantine идёт Tabler Icons - почти 5 000 иконок. Для сравнения у Heroicons их 316, у Lucide около 1 600. Когда у тебя библиотека на пять тысяч иконок - AI-агент почти всегда находит нужную без подбора. Не надо гуглить, не надо искать, просто пишешь "иконка корзины" и он берёт правильную.
Знаете что общего между выбором UI-библиотеки и выбором жены? Если с первого раза повезло - не трогай, живи и радуйся. С Mantine повезло. Доки идеальные, компоненты не глючат, нейросеть всё понимает. Впервые за всю стройку ни одной проблемы. Поставил и работает. Беспроблемная технология - именно то что нужно вайбкодеру.
Вот мы и добрались до самого нервного этажа стройки. OAuth. Единственный раздел где я реально рвал на себе волосы.
Но давайте по порядку. Авторизация в проекте трёхуровневая.
Первый уровень - Passwordless OTP (One-time password). Самый простой и приятный. Пользователь вводит email, получает код, вводит код - всё, он внутри. Никаких паролей, никаких "забыл пароль", никаких баз с хешами которые потом утекают. Supabase Auth делает это из коробки, подключаешь свой SMTP (у меня Unisender Go - российский сервис, серверы в Москве и Питере, полное соответствие 152-ФЗ) и письма летят. Единственный нюанс - встроенный SMTP Supabase ограничен 3-4 письмами в час, так что внешний сервис обязателен. Но настройка - буквально вбить хост, порт, логин и пароль в настройках Supabase. Пять минут.
Второй уровень - OAuth через VK ID и Yandex ID. И вот тут начался ад.
Для тех кто не в курсе - OAuth 2.0 это протокол, который позволяет пользователю войти через сторонний сервис без передачи пароля. Нажимаешь "Войти через ВК" - переходишь на страницу ВК - даёшь разрешение - ВК возвращает одноразовый код - твой сервер меняет код на токен. Звучит просто да?
А теперь есть ещё PKCE (произносится "пикси"). Это расширение которое стало обязательным в OAuth 2.1. Проблема такая - SPA-приложение работает целиком в браузере и не может безопасно хранить секретный ключ. Решение - перед авторизацией приложение генерирует случайную строку, отправляет серверу её хеш, а при обмене кода на токен предъявляет оригинал. Даже если злоумышленник перехватит код авторизации - без оригинальной строки он бесполезен.
Это я вам сейчас красиво объяснил. А в процессе было так: две ночи читаешь доку про PKCE, redirect URI, "а почему токен протух", "а зачем мне code_verifier если и так всё рабо... а, не работает". Токены нельзя хранить в localStorage из-за XSS - только httpOnly cookies. Refresh-токены надо ротировать при каждом обновлении. Redirect URI должен совпадать символ в символ. И VK ID, и Yandex ID - оба с нюансами, оба с подводными камнями в документации. Самый нервный этаж стройки. Без преувеличений.
Третий уровень - ALTCHA. Self-hosted капча. Тут надо объяснить почему именно она. Раньше я бы без раздумий поставил Cloudflare Turnstile - бесплатно, работает, красиво. Но сейчас это не вариант по двум причинам. Первая - с 1 июля 2025 года в России вступили в силу поправки к 152-ФЗ, теперь нельзя собирать персональные данные россиян через иностранные сервисы без обработки на российских серверах. reCAPTCHA, Turnstile - они все собирают IP, данные браузера, поведение пользователя и отправляют на свои серверы за рубеж. Это прямое нарушение закона. Штрафы от 1 до 6 миллионов рублей, повторно - до 18 миллионов, плюс возможна блокировка сайта. Роскомнадзор уже массово рассылает предписания. Вторая - Cloudflare в России блокируется вдоль и поперёк, стабильной работы от него ждать не приходится.
Окей, а что с российскими решениями? Яндекс SmartCaptcha? Платная. И вот тут у меня принципиальная позиция - я не готов платить за то что всегда было бесплатным. Капча - она как бы и сейчас бесплатна, просто я не могу этим пользоваться. Значит нужно своё, self-hosted решение.
И тут нашёлся ALTCHA. Open-source, MIT-лицензия, данные вообще не покидают твой сервер. Вместо картинок со светофорами используется proof-of-work: сервер генерирует SHA-256 задачу, браузер пользователя перебирает числа примерно секунду, отправляет ответ с формой. Для человека незаметно, для бота тысячи отправок - вычислительно дорого. Весит 30 КБ против 300+ у reCAPTCHA, никаких cookies, никакого трекинга. Робот-охранник который спрашивает "вы человек?" - но без Google, без Яндекса и без абонентки.
Плюс ко всему - Content Security Policy, security headers, HSTS, X-Frame-Options. Всё что нужно для SaaS чтобы не было стыдно перед пользователями которые доверяют тебе свои данные.
Вот мы и добрались до того что делает здание живым. Всё-таки это SaaS для генерации изображений - без AI-моделей тут как без электричества.
По-хорошему, для большинства задач хватило бы пары топовых моделей. GPT Image 1.5 от OpenAI и Gemini 3 Pro Image от Google - и закрывай 90% кейсов. Но раз уж есть агрегатор который даёт доступ к полутора десяткам моделей через один API - почему бы не добавить и остальные? Seedream 4.0 и 4.5 от ByteDance, Riverflow разных версий, Qwen-Image-Edit-Plus, Wan2.6 Image, FLUX.2 max - некоторые стоят сильно дешевле топовых (P-Image-Edit вообще ~70 копеек за генерацию против ~11 рублей у Gemini 3 Pro), а для каких-то конкретных задач могут сработать даже лучше. Плюс пользователям нравится выбор - кто-то хочет фотореализм, кто-то стилизацию, кому-то нужен быстрый черновик за копейки.
Runware - это агрегатор который решает всё одним ударом. Один SDK, один API - и через него доступ ко всем этим моделям. Представьте что вы пришли в ресторан, а там одно меню и один официант, но готовят одновременно полтора десятка шеф-поваров из разных стран. Вы просто тыкаете в блюдо - а кто его приготовил вам вообще не важно.
Для вайбкодера это идеально - одна интеграция вместо пятнадцати. Claude Code написал обёртку над Runware SDK один раз и дальше добавление новой модели - это буквально строчка в конфиге.
По ценам - диапазон от ~70 копеек до ~15 рублей за генерацию в зависимости от модели. Компания серьёзная - из Лондона, привлекли $66 миллионов инвестиций, среди клиентов Wix, Quora, Freepik. Не какой-то ноунейм.
Минус один, но существенный - оплата только зарубежной картой. В 2026 году в России это отдельный квест с посредниками которые берут комиссию за каждый чих. Неприятно, но терпимо.
Вот тут шалаш окончательно умирает. Потому что в шалаше кассы нет. А если в шалаше появилась касса - поздравляю, у вас теперь ларёк, лицензия и налоговая на горизонте. Добро пожаловать во взрослую жизнь, вайбкодер.
Stripe из России ушёл в 2022 году из-за санкций, так что выбор локальных решений не такой уж большой. Но мне повезло - с Т-Банк эквайрингом я уже хорошо знаком, через него мы принимаем платежи в ArtGeneration.me. А значит договор подписан, эквайринг настроен, всё работает. Выбор был без выбора - зачем искать что-то другое когда всё уже есть и проверено боем?
Работает через REST API - твой сервер вызывает метод Init, получает ссылку на платёжную форму, покупатель оплачивает, и Т-Банк отправляет вебхук на твой сервер с результатом. Для тех кто не в курсе - вебхук это когда не ты дёргаешь банк "ну чё там с оплатой?", а банк сам тебе стучится и говорит "оплачено, расслабься".
Каждый API-запрос подписывается SHA-256 токеном. Это как цифровая печать - банк берёт все параметры запроса, подмешивает секретный пароль и вычисляет хеш. Если хоть один символ поменять - хеш будет другим и банк поймёт что запрос подделан. Плюс идемпотентность через уникальный OrderId - если пользователь случайно нажал "Оплатить" дважды, система не спишет деньги повторно.
В моём проекте подписок как таковых нет - "подписка" это единоразовый платёж на определённый период. Плюс покупка кредитов для генерации. Но если кому-то нужны настоящие рекуррентные платежи - Т-Банк это поддерживает из коробки. Продаж пока нет, зато касса работает!
Тесты - это то что вайбкодеры обычно игнорируют. Ну серьёзно, кому охота писать тесты когда можно фичи пилить? А зря. Давайте сначала объясню что это вообще такое и зачем оно нужно. Тем более что писать тесты вручную, или глубоко понимать как они работают - не придется.
Представьте что вы построили дом. Тесты - это когда перед заселением приходит инспектор и проверяет: вода течёт? Течёт. Свет включается? Включается. Дверь открывается? Открывается. Если завтра вы решите переложить трубы на кухне - инспектор снова пройдёт по всему списку и скажет, не сломали ли вы случайно что-нибудь в ванной пока ковырялись на кухне.
В коде то же самое. Юнит-тесты проверяют отдельные функции - "если подать на вход вот это, на выходе должно быть вот то". Компонентные тесты проверяют что кнопки, формы и карточки рендерятся правильно. А сквозные тесты - это когда робот открывает настоящий браузер, тыкает по кнопкам как живой пользователь и проверяет что весь путь от регистрации до оплаты работает от начала до конца. Без тестов каждое изменение в коде - это русская рулетка. Особенно когда код пишет нейросеть которая при следующем промпте может зарефакторить половину проекта.
Стек тестирования: Vitest для юнит-тестов (практически догнал Jest по загрузкам, но работает с TypeScript из коробки без плясок с бубном), React Testing Library для компонентов, Playwright для сквозных тестов. Плюс Lefthook на git hooks - менеджер от Evil Martians, написан на Go, работает в разы быстрее чем Husky и не тянет за собой тысячу зависимостей.
Как это всё появилось в проекте? Два дневных лимита Claude Code. Но я не просто сказал "покрой тестами" - сначала попросил загуглить все лучшие практики по тестированию нашего стека, изучить что сейчас используют, выбрать технологии и обосновать выбор. И только потом покрывать - итерационно, шаг за шагом. Благо я заранее выдал ему GitHub CLI токен (не делайте так) и он сам смотрел логи GitHub Actions, чтобы разобраться почему его же тесты не проходят. Вот так побегав между деплой-логами на Vercel (где всё работало) и логами GitHub Actions (где тесты валились), в конечном итоге все тесты стали зелёными. Понятия не имею что они там реально тестируют.
Но знаете что - это и не важно. Главное что тесты - это страховка. Тесты в вайбкодинге - это когда ты нанял инспектора, инспектор сам изучил строительные нормы, сам написал себе чек-лист, сам проверил, сам подписал, и радостно доложил что всё ок. Ты ему веришь? Не особо. Но зелёные галочки в GitHub Actions всё равно греют душу.
Небоскрёб - это конечно громко сказано. Давайте честно - это MVP. Но MVP качественное и масштабируемое. Именно такое каким должен быть минимально жизнеспособный продукт в наше время - не просто "работает и ладно", а продукт который можно полюбить и которым реально можно пользоваться. С нормальной авторизацией, с безопасными платежами, с тестами. Не стыдно показать людям.
И построил всё это один человек за неделю плотной работы. Один. Без команды разработчиков. Без фрилансеров. Даже анимированный тизер-ролик для сервиса сделал сам на стриме. И этот человек - напоминаю - не является программистом в классическом смысле, а скорее энтузиастом, предпочитающим генерировать код с помощью нейросетей, а не писать его с нуля. Это не панацея, но выход, чтобы продакту запустить прототип в одиночку, не напрягая команду разработки.
Я - прораб, который не умеет класть кирпичи. Зато умею орать на роботов, тыкать пальцем в чертёж и говорить "не так, переделай". Двадцать лет продакт-менеджмента наконец нашли своё истинное применение.
Claude Code - основной инструмент, 90% работы. Подписка Max за $100 в месяц (~7 700 рублей). Я не люблю терминалы и всё делаю через веб-версию - просто открываю браузер, подключаю гит и пишу промпты. Лайфхак (плохой, но рабочий): дать ему CLI-токены от Vercel и Supabase - и он сам загуглит как всё настроить и сам поменяет все настройки. Так делать нельзя по соображениям безопасности, но пока сайт не запущен и если не забудете сменить токены потом - экономит кучу времени. Бесит одно - лимиты. Постоянно кончаются. Работаешь, входишь в поток, всё летит - и бац, "вы исчерпали лимит, подождите". Приходится переключаться на другие дела, потом возвращаться, восстанавливать контекст. Раздражает дико. Да, когда-нибудь я перейду на GLM, но пока я в поиске локального агента такого же уровня как клод.
Devin AI - подключал точечно для работы с VPS. У Claude Code есть ограничения песочницы - он не хочет лезть на удалённые серверы. Ну вот так он устроен, принципиальный. А мне надо было настроить проксирование всего проекта через РФ VPS. У Devin таких ограничений нет - дал ему доступ к серверу и он спокойно подключился, посмотрел что есть и настроил nginx и автоматический выпуск SSL.
Итог по затратам: ~$100 Claude Code в месяц + немного Devin. Сравните с наймом фронтендера, бэкендера и девопса на такой стек.
Давайте подведём итог. Вот что мы имеем:
Supabase - фундамент. База данных, авторизация, хранилище файлов, рассылка писем. Бесплатный тариф.
Next.js + TypeScript - каркас. Фронтенд и бэкенд в одном флаконе.
Vercel - деплой. Пушнул в гит - сайт обновился.
Mantine - интерфейс. 130+ компонентов, нейросети его знают идеально.
Supabase Auth + OAuth + ALTCHA - охрана. OTP, VK ID, Yandex ID, self-hosted капча.
Runware - AI-модели. Один API, множество моделей.
Т-Банк - платежи. Вебхуки, SHA-256.
Vitest + Playwright + Lefthook - тесты.
Claude Code и немного Devin.
Вайбкодинг в 2026 - это уже не про одностраничные поделки. Один человек без навыков программирования может за неделю собрать как-то работающий, масштабируемый MVP с бэкендом, платёжкой, авторизацией, тестами и автодеплоем. И в базовом варианте почти весь стек бесплатный - Supabase free tier, Vercel free tier, GitHub. Платишь только за кодинг-агента и VPS-ку за 200 рублей. Конечно, если бы я последние 20 лет не занимался запуском проектов и продуктов, наверное ничего у меня бы не получилось, но, если понимание есть, препятствий теперь никаких.
Каждая технология в этом стеке выбрана за одно качество - она беспроблемная. Не самая модная, не самая хайповая - а та с которой меньше всего геморроя. Потому что когда ты прораб а не каменщик, тебе нужны кирпичи которые не крошатся в руках.
Год назад я строил скворечники и гордился. Сейчас - MVP которые не стыдно показать. Через год, наверное, буду строить что-то ещё больше. Или наконец признаю что я разработчик. Хотя нет, не признаю.
Ну а я продолжаю строить всякое с помощью нейросетей и рассказывать об этом. Подписывайтесь на меня в YouTube, Телеграм или на Бусти. И заглядывайте на стримы каждую пятницу в 19:00. Всех обнял и удачных генераций.
Источник


