Генерация кода

Генерация кода в Vibe2Code — это многоступенчатый процесс, который превращает твоё текстовое описание в полноценный проект с несколькими файлами, компонентами и стилями. Весь процесс происходит автоматически, а ты наблюдаешь за прогрессом в реальном времени.

Режим CREATE — основной способ начать новый проект. Ты описываешь идею текстом, а AI создаёт полный набор файлов: компоненты, страницы, стили и конфигурацию.

Что происходит при создании

• Анализ описания — система оценивает качество и полноту описания. Если запрос слишком короткий или неоднозначный, AI может задать уточняющие вопросы.
• Выбор сложности — на основе описания определяется сложность проекта: простой, средний или сложный — и подбирает подходящий объём.
• Дизайн-пресеты — система подбирает визуальный стиль из десятков дизайн-стилей, цветовых палитр и шрифтовых пар. Ты также можешь выбрать стиль вручную.
• AI-изображения — при необходимости генерируются уникальные изображения, интегрированные в проект (карточки, фоны, галереи).

Примеры описаний для CREATE

Лендинг для кофейни "Brew Lab" в стиле минимализм.
Секции: герой с фото интерьера, меню с ценами (эспрессо,
латте, капучино, раф), галерея атмосферы, расположение
на карте, форма бронирования столика.
Цвета: тёмно-коричневый и кремовый.

Дашборд для менеджера по продажам. Показывает KPI:
выручку за месяц, количество сделок, конверсию, средний чек.
Графики продаж по неделям. Таблица последних сделок
с поиском и фильтрами. Тёмная тема.

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

Как это работает

Опиши, что хочешь изменить, обычным языком. AI определит нужные части проекта и внесёт правки автоматически. Все изменения применяются все сразу — либо все файлы обновляются, либо ни один.

Примеры запросов для EDIT

• Стили: "Сделай кнопки круглыми с градиентом"
• Контент: "Замени текст в главном баннере на: Мы создаём будущее"
• Структура: "Добавь секцию FAQ с 5 вопросами"
• Поведение: "Сделай бургер-меню для мобильной версии"
• Исправления: "Карточки налезают друг на друга на мобильном"

Хороший промпт — основа качественного результата. Вот из чего он должен состоять:

1. Тип проекта

Начни с того, что ты хочешь создать: лендинг, дашборд, портфолио, интернет-магазин, блог, приложение. Это задаёт контекст для AI.

2. Название и тематика

Укажи название бренда или проекта и предметную область. AI использует это для генерации реалистичного контента, подходящих изображений и тональности текстов.

3. Секции и функциональность

Перечисли, какие секции или экраны нужны. Опиши, что в них должно быть: какие данные, элементы, интерактивные блоки.

4. Визуальный стиль

Опиши желаемый стиль: цвета, настроение, референсы. Можно упомянуть стиль известных сайтов: "как у Apple", "в стиле Linear", "минимализм как у Stripe".

5. Примеры данных

Если нужны конкретные тексты, цены, названия — укажи их. AI лучше работает с реальными данными, чем с заглушками.

Лендинг для онлайн-школы программирования "CodeCraft".

Секции:
- Hero: заголовок "Стань разработчиком за 6 месяцев", подзаголовок
  о практическом обучении, кнопка записи
- Программы: 3 курса (Frontend, Backend, Fullstack) с ценами
  (15 000, 18 000, 25 000 руб/мес) и длительностью
- Преподаватели: 4 карточки с фото, именем, специализацией
- Отзывы: 3 отзыва выпускников с фото и описанием карьерного роста
- FAQ: 6 частых вопросов
- Форма заявки: имя, email, выбор курса

Стиль: современный, тёмная тема, акцент — фиолетовый.
Вдохновение: Linear, Vercel.

Несколько советов, которые помогут получать лучшие результаты от генерации.

Хорошие промпты vs плохие

Советы по работе

• Будь конкретным — укажи количество секций, названия элементов, примеры текстов. Чем больше деталей, тем точнее результат.
• Указывай стиль — "тёмная тема", "минимализм", "как у Notion" — это сильно влияет на результат.
• Пиши на русском — AI отлично понимает русский язык. Генерируемый контент тоже будет на русском.
• Используй EDIT для доработки — не пытайся описать всё идеально с первого раза. Создай базу в CREATE и доработай через чат.
• Группируй правки — в режиме EDIT лучше описать несколько изменений в одном сообщении, чем отправлять по одному.
• Не бойся экспериментировать — если результат не понравился, ты можешь вернуться к предыдущей версии через историю снапшотов.

Все проекты генерируются на современном стеке, который используют ведущие продуктовые компании.

Проекты генерируются на современных веб-технологиях. Результат — готовый сайт, который можно скачать и запустить на любом хостинге. Код написан качественно и подходит для дальнейшей разработки.

Что генерируется

• Страницы и блоки — готовые страницы и блоки
• Стили — стили и оформление
• Изображения — изображения, подобранные по контексту
• Конфигурация — файлы для запуска проекта