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