ВСТРЕЧА №3 // 11.05.2026

ВАЙБ-КОДИНГ:
ЧТО ДЕЛАТЬ ДАЛЬШЕ?

ОЛЬГА ЛАДОГА × AI-ИНТЕНСИВ
MANUSCLAUDEGEMINIREPLITLOVABLETILDA

Обзор встречи

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

«Мы идём от простого к сложному. Когда с этим всё понятно — пойдём в более сложный вопрос.»

«Вайб-кодинг прекрасен, но мир уже пошёл дальше — к более зрелому, неспешному инженерному подходу.»

УЧАСТНИКИ

Ольга ЛадогаОксана СунгуроваЖанна ДмитриеваАнна БеспаловаЕвгения ФанинаЕлена БирюковаГульмира ПушкарёваЛюдмила КругловаКира

Инструменты

Бонус по реферальной ссылке. Карточки с пометкой REF ведут по реферальной ссылке Ольги — вы получите приветственные бонусы платформы (бесплатные кредиты или дни доступа), а проект получит немного токенов на дальнейшие эксперименты.

Gemini
Обработка расшифровок встреч, анализ данных, подготовка идей.
→ Открыть
Claude
Основной ассистент для кода, промтов и контента.
→ Открыть
DS
DeepSeek
Альтернативная модель для кодинга. Рекомендует Python для прямой работы с API.
→ Открыть
ChatGPT
Генерация текста и кода для экспериментов.
→ Открыть
REF
♥
Lovable
Красивый дизайн, простая работа, встроенный Gemini Flash. По реферальной ссылке — бонусные кредиты на старте.
→ Открыть по ссылке
REF
Replit
Менее приятный дизайн, но множество интеграций. Для сложных задач. По реферальной ссылке — приветственные бонусы.
→ Открыть по ссылке
Figma
Дизайн-инструмент для прототипирования интерфейсов.
→ Открыть
Tilda
Конструктор сайтов. Перенос на хостинг двумя кликами.
→ Открыть
REF
M
Manus
Новый AI-агент, который Ольга тестировала накануне встречи. 7 бесплатных дней. Очень бережно относится к запросу: предлагает варианты с учётом контекста, не навязывает решений.
→ Открыть по приглашению

Схема пути разработки

Идея какую проблему решаем? Прототип Gemini 2.5 pro · Claude Дизайн mobile-first · референсы Разработка выбор платформы Lovable проще · красивее Replit больше интеграций Будут ли персональные данные? ДА НЕТ Соблюдаем 152-ФЗ согласие на обработку политика конфиденциальности хранение на серверах РФ → только Timeweb Любой хостинг можно Supabase можно Timeweb можно встроенный → свобода выбора Резидентство пользователей? РФ НЕ РФ Timeweb (РФ) облачная база ~720 руб./мес Supabase встроенная база через Lovable / Replit Настройка домена 3 дня до старта работы Регистрация домена где? НЕ РФ РФ godaddy.com /en/domains reg.ru /domain/new Как монетизировать? Бесплатно B2C-инструмент имиджевый продукт лидмагнит к услуге внутрикорпоративный → ценность от охвата Подписка / разовая ЮKassa, CloudPayments Stripe (НЕ РФ) Patreon, Boosty бот-Telegram оплата → регулярный доход B2B / лицензии продажа в компанию white-label решения кастомизация Freemium / Pro → крупные чеки Запуск Референсы для вдохновения: Pinterest Awwwards сайт дня Dribbble Резерв через GitHub

Создание админки

Что такое админка. Это панель управления продуктом для администратора. Здесь видна статистика, можно управлять пользователями, контентом, настройками. Пользователь не видит админку — он видит фронтенд.

Когда нужна

Если у продукта будут пользователи, требуется статистика, нужно управлять контентом или доступом.

Когда НЕ нужна

Простой одностраничный продукт без пользователей и динамического контента.

Как создаётся

Промт в режиме планирования: «Создай админку. Роли. Вход. Уведомления». Чем подробнее — тем меньше доработок.

Подход Гульмиры

Сначала все экраны админки, потом все экраны фронтенда — и только потом связать их между собой.

Главный нюанс — потеря данных. Когда вы создаёте админку через AI, она строится на временной базе. Если перегенерировать или сбросить проект — данные пользователей могут пропасть. Заранее решите, где хранятся данные.

Перенос данных. При миграции с одной платформы на другую после покупки облака надо передать данные в формате: host, port, db, user, pass. Делайте бэкап через GitHub перед любой миграцией.

API-ключи — секреты. Никогда не публикуйте OpenAI/Claude API-ключи в GitHub, Telegram, чатах. Храните в специальном разделе (Secrets / Environment Variables).

Роли на сайтах

Перед созданием продукта определите, кто будет им пользоваться и с какими правами. Чем точнее опишете роли в промте, тем меньше переделок потом.

Простые пользователи

  • Без регистрации
  • Зарегистрированный (бесплатный)
  • Зарегистрированный (платный)

Администраторы

  • Главный админ — видит всё
  • Админ с ограниченными правами

Для CRM

  • Собственник
  • Маркетолог
  • РОП
  • Менеджер отдела продаж

Для обучающей платформы

  • Собственник
  • Администратор
  • Руководитель кураторов
  • Куратор

UI-элементы навигации

AI лучше понимает запрос, если говорить на языке готовых паттернов интерфейса. Назовите элемент — и AI сразу поймёт.

Продажи700KЗаказы154Конверсия12%
Дашборд
Все ключевые данные на одном экране.
ГлавнаяЗаказыКлиентыНастройкиконтент
Меню (сайдбар)
Боковая навигация по разделам.
контентмобильное
Таб-бар
Нижнее меню для мобильных приложений.
ДеньНеделяМесяцконтент вкладки
Вкладки
Переключение внутри одного раздела.
Главная›Каталог›Обувь›Кроссовкитекущая страница
Хлебные крошки
Путь пользователя по сайту.
Выберите городМоскваМоскваСанкт-ПетербургКазань
Выпадающий список
Выбор одного из множества.
Включить аналитикуПоказывать прогнозыСкрыть архивные
Чек-боксы
Множественный выбор.
ДеньНеделяМесяцвыбор одного
Радио-кнопки
Один вариант из 2–4 опций.
Диапазон цены300100500
Слайдер
Выбор значения из диапазона.
От10/11/2025До17/11/2025календарь
Выбор даты
Календарь для выбора периода.
Emailuser@example.comПароль••••••••Войти
Форма ввода
Основа любой регистрации и входа.
Получать уведомленияТёмная темавкл / выкл
Переключатель
Бинарный выбор: настройки сразу применяются.
найти заказ, клиента...Заказ #110214 окт · клиент Иванов
Поле поиска
Поиск по контенту с автодополнением.
Удалить заказ?Это действиенельзя отменить.ОтменаУдалить
Модальное окно
Всплывающее окно для подтверждений.
✓Успешно сохраненоВсе данные обновлены!Ошибка отправкиПроверьте подключение
Уведомления (toast)
Короткие всплывающие сообщения.
Заполните профиль3 / 5✓ Фото✓ Имя✓ Email○ Телефон○ Адрес
Прогресс-бар
Завершённость процесса.
МРМария РомановамаркетологАПАлексей Петровразработчик
Карточки записей
Компактное представление в списках.
ИмяСтатусСуммаИванов И.Оплачено5 200Петрова А.Ожидает3 800Сидоров П.Отменён1 100
Таблица
Структурированные данные в строках и столбцах.
К работеЗадача 1Задача 2В работеЗадача 3ГотовоЗадача 4
Канбан-доска
Карточки по статусу.
⬆Перетащите файлыили нажмите для выбора
Drag-and-drop
Перетаскивание файлов в зону загрузки.

Визуализация данных

Когда нужно показать пользователю цифры — выбирайте тип графика по задаче.

60%от плана
Круговая диаграмма
Доля одного от целого.
ЯнвИюнДек
Линейный график
Тренд и динамика во времени.
Столбчатая диаграмма
Сравнение значений между категориями.
75%90 / 120 час.
Прогресс-кольцо
Завершённость процесса.
Выручка1.2MКлиенты487Конверсия14.2%Средний чек2 450
KPI-карточки
Ключевые показатели крупно.
Заказ #110214:30 · доставленПлатёж получен13:45 · ЮKassaПередан в сборку12:10
Таймлайн
События в хронологическом порядке.
Статус системОсновной APIOnlineБаза данныхOnlineПлатёжный шлюзРаботаСервер отчётовOffline
Индикаторы статуса
Цветные точки: online, offline, ошибка.
Активностьменьшебольше
Тепловая карта
Интенсивность через цвет.
Зашли на сайт5 000Регистрация1 200Покупка280
Воронка
Конверсия по этапам.

Словарь вайбкодера

Типы сервисов

Лендинг
Одностраничный сайт с одной целью
Веб-приложение
Интерактивный сервис в браузере
Мобильное приложение
Устанавливается на телефон

Этапы разработки

Прототип
Первая грубая версия — проверить идею
Дизайн
Цвета, шрифты, расположение элементов
Фронтенд
Видимая часть для пользователя
Бэкенд
Невидимая логика на сервере

Хранение данных

База данных
Хранилище: пользователи, записи
Сервер
Компьютер, обслуживающий запросы 24/7
GitHub
Кладовка для резервных копий
Supabase
Внешняя база, подключается за пару кликов

Дополнительные термины

Вайб-кодинг
Создание продуктов через диалог с AI
Инженеринг
Вайб-кодинг + ТЗ + MVP-мышление
MVP
Минимальный жизнеспособный продукт
Промт
Запрос к AI. Точнее — лучше
152-ФЗ
Закон о персональных данных РФ
Токены
«Валюта» AI-сервисов
API-ключ
Личный ключ. Никогда не публикуется
Хостинг
«Адрес в интернете», где живёт сайт
Домен
Имя сайта. 3 дня до старта работы
Бэкап
Резервная копия через GitHub
Деплой
Публикация продукта в интернете
Tailwind CSS
Популярная библиотека стилей
Режим планирования
AI описывает план, не выполняет
Фокус-группа
Реальные пользователи для тестов
Freemium
База бесплатно, расширенный — платно

Инсайты участниц

Жанна Дмитриева
«Структурирую информацию и двигаюсь поэтапно. Внутренний технический барьер преодолён.»
Елена Бирюкова
Работает с топ-менеджерами. Интерактивные тесты с персональными рекомендациями принесли два новых консалтинговых проекта.
Гульмира Пушкарёва
Сначала все экраны админки, потом все экраны фронтенда, и только потом связала их между собой.
Кира
«В 95% вакансий для методистов и разработчиков курсов уже стоит требование вайб-кодинга.»
Оксана Сунгурова
Ещё в начале пути — внимает, на неделе будет дорабатывать практику.
Евгения Фанина
«Очень интересно! Много информации — перевариваю постепенно.»

Итоговый тест

?Проверьте себя

10 вопросов по терминам, инструментам и этапам разработки. После каждого вопроса — короткий разбор.

Цель — закрепить, а не «сдать». Если ошиблись — увидите правильный ответ и объяснение.
// 0 / 10
ТЕРМИНОЛОГИЯ · ВОПРОС 1/10
Что такое MVP?
1 / 10

Задание на неделю

ЗАДАЧА 1
Доделать продукт в любой версии — пройти все шаги
ЗАДАЧА 2
Продумать: админка, платный доступ, где размещать
ЗАДАЧА 3
Подключить GitHub для резервных копий
СЛЕДУЮЩАЯ ВСТРЕЧА
17 мая — хвастаемся результатами

Есть вопросы — пишите в чат. Работает только дикий интерес или неизбежность дедлайна.