Быстрый старт
Создай свой первый проект за 5 минут. Это руководство проведёт тебя от регистрации до публикации готового сайта.
Создание аккаунта
Для начала работы с Vibe2Code тебе нужен аккаунт. Зарегистрироваться можно несколькими способами — выбирай удобный.
Через email
Открой страницу регистрации
Перейди на страницу регистрации или нажми Создать аккаунт в шапке сайта.
Заполни форму
Укажи email и придумай пароль. Пароль должен содержать не менее 8 символов.
Подтверди email
Проверь почту — мы отправим письмо с ссылкой для подтверждения. После перехода по ссылке аккаунт будет активирован.
Через соцсети и сервисы
Можно зарегистрироваться в один клик через один из поддерживаемых сервисов:
- Google — войди через Google-аккаунт
- GitHub — для тех, кто знаком с разработкой
- Yandex — для пользователей экосистемы Яндекса
Совет
Личный кабинет
После входа ты попадаешь в личный кабинет — центральное место для управления проектами. Здесь можно создавать новые проекты, просматривать существующие и организовывать их.
Список проектов
Проекты отображаются в виде сетки карточек или списка — переключай режим кнопкой в правом верхнем углу. Каждая карточка показывает:
- Название проекта и краткое описание
- Дату последнего изменения
- Статус генерации (в процессе, завершена, ошибка)
- Превью сгенерированного сайта
Папки и организация
Группируй проекты в папки, чтобы не терять их среди десятков экспериментов. Просто перетащи проект в папку или создай новую через меню.
Фильтры и поиск
Используй фильтры для быстрого доступа:
- Все проекты — полный список
- Избранные — проекты, отмеченные звёздочкой
- Недавние — последние изменённые
Заметка
Создание первого проекта
Проект в Vibe2Code — это контейнер для твоего приложения. Внутри хранится сгенерированный код, история изменений и настройки.
Нажми «Новый проект»
В dashboard нажми кнопку Новый проект. Откроется форма создания.
Назови проект
Придумай понятное название — например, Лендинг для кофейни или Панель аналитики. Название можно изменить позже.
Опиши свою идею
Это самый важный шаг. Опиши приложение, которое хочешь получить. Чем подробнее описание, тем лучше результат. Вот хорошие примеры:
- Хорошо: «Лендинг для ветеринарной клиники "Лапки" в Москве. Услуги: осмотр, вакцинация, груминг. Тёплые зелёные тона, фото животных, форма записи на приём.»
- Слабо: «Сайт для бизнеса»
Как описывать идею
Процесс генерации
После нажатия Сгенерировать запускается автоматический процесс генерации. Вот что происходит за кулисами:
Анализ и планирование
AI анализирует твоё описание, определяет тип проекта и составляет план: какие страницы, компоненты и секции нужны. Ты увидишь статус Планирование... в интерфейсе.
Генерация файлов
На основе плана AI генерирует файлы проекта: страницы, блоки, стили и изображения. Файлы появляются в реальном времени — ты видишь прогресс прямо в интерфейсе.
Сборка и проверка
Система автоматически проверяет, что всё работает корректно. Если обнаружены ошибки — AI попробует исправить их автоматически.
Превью
После успешной сборки ты получишь интерактивное превью прямо в браузере. Можно кликать по элементам, скроллить, проверять адаптивность.
Информация
Что генерируется
Vibe2Code создаёт полноценный веб-проект, готовый к запуску:
- Готовые страницы и блоки
- Стили и оформление
- Адаптивная версия для телефонов и планшетов
- Фотографии, подобранные по контексту
- Всё необходимое для запуска
Итерации через чат
После первой генерации ты можешь дорабатывать проект через чат с AI. Это режим редактирования — самый мощный инструмент для точной настройки.
Как работает чат
Пиши в чат, что хочешь изменить, на обычном языке. AI проанализирует текущий код, определит нужные файлы и внесёт изменения. Примеры запросов:
- «Сделай шапку фиксированной при скролле»
- «Добавь секцию с отзывами клиентов»
- «Поменяй цветовую схему на синюю»
- «Увеличь размер шрифта в заголовках»
- «Замени фото в hero-секции на что-то с горами»
Совет по итерациям
Что можно менять
- Контент — тексты, заголовки, описания
- Стили — цвета, шрифты, отступы, анимации
- Структура — добавление/удаление секций и компонентов
- Данные — товары, услуги, цены, контактная информация
- Изображения — замена фотографий по описанию
История версий
Каждая успешная генерация сохраняется как версия. Если результат редактирования не понравился, ты можешь вернуться к любой предыдущей версии проекта.
Экспорт результата
Когда проект готов, его можно экспортировать двумя способами.
Отправка в GitHub
Подключи GitHub-аккаунт
В настройках проекта нажми Подключить GitHub. Авторизуй Vibe2Code для доступа к твоим репозиториям.
Выбери репозиторий
Создай новый репозиторий или выбери существующий. Vibe2Code запушит все файлы проекта в выбранную ветку.
Работай дальше
Проект полностью готов к запуску — разработчик сможет продолжить работу в любом редакторе.
Скачать ZIP
Не хочешь подключать GitHub? Скачай весь проект как ZIP-архив одной кнопкой. Внутри будет полная структура проекта, готовая к запуску.
Заметка