Пошаговая инструкция по вайб-кодингу, часть 1: создание сайтов и приложений.

Я заметила, что многие до сих пор не решаются попробовать вайб-кодинг, потому что в интернете практически нет понятного объяснения, как выглядит весь процесс целиком. А моя миссия — максимально демократизировать технические знания, поэтому давайте разберём всё простым языком.

Подходы отличаются для автоматизаций, цифровых платформ, веб-скрейпинга, сайтов и приложений. Сегодня поговорим именно про создание сайтов.

Сначала вы описываете свою идею простыми, даже довольно размытыми словами в любом ИИ-инструменте. Это может быть ChatGPT, Claude, NotebookLM, Perplexity или практически любой другой AI. Вы объясняете, что хотите создать, для кого и какую проблему это должно решать. После этого просите: «Преобразуй это в подробный промпт с контекстом».

Затем вы создаёте документ с техническими требованиями (Technical Requirements Document, TRD). Это тоже можно сделать через ИИ. Например: «На основе этой идеи создай документ с техническими требованиями для сайта или приложения».

После этого просите ИИ превратить этот документ в промпт для Lovable: «Создай подробный промпт для Lovable на основе этого документа с техническими требованиями». Получившийся текст вставляете в Lovable — инструмент для создания сайтов и приложений.

Обычно работа начинается с UI и UX: что будет видеть пользователь, какие страницы существуют, как устроена навигация, как выглядит продукт и как человек будет по нему перемещаться.

Дальше начинается фронтенд-разработка, или собственно вайб-кодинг. Здесь вы дорабатываете экраны, кнопки, формы, пользовательские сценарии, дашборды и взаимодействия внутри продукта.

После этого подключается бэкенд.

Supabase используется, когда пользователям нужны аккаунты, сохранённые данные, дашборды, отслеживание прогресса, история платежей, загруженные файлы или структурированные базы данных.

Firebase полезен для мобильных продуктов, обновлений в реальном времени, push-уведомлений, чатов и быстрой разработки внутри экосистемы Google.

API подключаются тогда, когда приложению нужно получать или отправлять данные во внешние сервисы: Google Calendar, почтовые сервисы, Notion, Telegram, CRM-системы, сайты вакансий и многое другое.

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

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

Когда MVP начинает работать, его можно деплоить — то есть публиковать в интернете. Это можно сделать прямо внутри Lovable или пойти более «айтишным» путём: подключить Lovable к GitHub, а затем развернуть фронтенд через Vercel, Netlify, Azure или другую платформу.

Перед запуском обязательно попросите ChatGPT проверить код и настройки безопасности, особенно если вы собираете пользовательские данные. Если приложение коммерческое и работает с персональными данными, необходимо также учитывать требования GDPR.

В упрощённом виде процесс выглядит так:

Идея → PRD → TRD → Lovable → подключение Supabase и других сервисов → тестирование MVP → настройка секретов и переменных окружения → подключение домена → публикация → тестирование в продакшене → исправление ошибок → запуск.

Удачи! ☺️ @humanandcomputer