Советы

Как описывать идею

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

Анатомия хорошего запроса

Запрос для Vibe2Code — это не просто пожелание, а задание для AI. Чем точнее ты опишешь, что хочешь получить, тем ближе результат будет к ожиданиям. Вот пять ключевых элементов, которые стоит включить в каждое описание.

Тип приложения

Начни с главного: что ты создаёшь? Лендинг, портфолио, сайт услуги, страницу события, каталог работ или простой блог. Это задаёт структуру и блоки, которые AI будет генерировать.

Целевая аудитория

Для кого это приложение? "Для клиентов ветклиники", "для менеджеров по продажам", "для студентов дизайн-курса". AI подбирает тон текстов, визуальный стиль и уровень детализации под аудиторию.

Ключевые элементы

Перечисли конкретные секции, экраны и функции. Не "сделай меню", а "меню напитков с ценами: эспрессо 180 руб, латте 250 руб, капучино 220 руб". Чем конкретнее данные, тем реалистичнее результат.

Дизайн-предпочтения

Опиши визуальный стиль: цвета, настроение, референсы. Можно указать конкретные цвета ("акцент - бирюзовый"), стиль ("минимализм", "стеклянный эффект") или сослаться на известный продукт ("как у Notion", "в стиле Linear").

Тон и стиль контента

AI генерирует тексты для всех секций. Укажи желаемую тональность: "дружелюбно и неформально", "строго и профессионально", "с юмором". Если есть готовые тексты или слоганы — включи их в описание.

Совет

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

Примеры: до и после

Сравни размытые запросы с конкретными. Разница в результатах — колоссальная.

Пример 1: Лендинг

Плохо

Сделай сайт

Хорошо

Лендинг для кофейни "Brew" в минималистичном стиле:
hero с фото зёрен, меню напитков с ценами,
карта с адресом, форма бронирования столика.
Тёплые коричневые тона, шрифт без засечек.

Пример 2: Каталог

Плохо

Каталог

Хорошо

Каталог handmade украшений для бренда "Mira":
карточки с фото, названием, материалом и ценой,
фильтры по коллекциям (серебро, жемчуг, подарки),
блок "как заказать", отзывы и форма заявки.
Светлая тема, акцент — тёплый золотой.

Пример 3: Сайт услуги

Плохо

Барбершоп

Хорошо

Сайт барбершопа "Sharp" в центре Казани:
hero с оффером, услуги и цены, команда мастеров,
галерея работ, карта, форма записи на стрижку.
Тёмная тема, акцент — медный, стиль уверенный
и лаконичный.

Пример 4: Портфолио

Плохо

Портфолио

Хорошо

Портфолио UX-дизайнера Алины Морозовой.
Hero с именем и специализацией, секция "Проекты"
(6 кейсов с превью, описанием и тегами),
раздел "Обо мне" с фото и навыками,
контактная форма. Светлая тема,
минималистичный стиль, акцент — коралловый.

Информация

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

Итеративный подход

Не пытайся описать идеальный проект с первого раза. Vibe2Code создан для итеративной работы: начни с основы в режиме CREATE, затем доработай через EDIT.

Создай основу

Опиши ключевые секции и общий стиль. Не перегружай описание — 10-15 строк вполне достаточно для первой генерации. Сфокусируйся на структуре и данных.

Оцени результат

Посмотри превью в sandbox. Что нравится? Что нужно изменить? Запиши конкретные замечания, прежде чем переходить к правкам.

Дорабатывай точечно

Используй EDIT для конкретных изменений. Каждое сообщение — одна логическая правка или группа связанных правок.

Повторяй до готовности

Несколько итераций EDIT обычно дают лучший результат, чем одна попытка описать всё в CREATE. Это нормальный рабочий процесс.

Эффективные запросы в EDIT

Размыто

"Сделай покрасивее"
"Улучши дизайн"
"Поменяй стиль"

Конкретно

"Увеличь отступы между секциями до 80px"
"Замени фон Hero на градиент от тёмно-синего к чёрному"
"Добавь hover-эффект на карточки: подъём + тень"

Совет

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

Работа с дизайном

Vibe2Code поддерживает 67 дизайн-стилей, 96 цветовых палитр и 57 шрифтовых пар. Ты можешь выбрать пресет в интерфейсе или описать стиль прямо в запросе — AI поймёт оба варианта.

Способы задать дизайн

Через пресеты — выбери стиль, палитру и шрифты в интерфейсе перед генерацией. AI автоматически применит их ко всем компонентам.
Через описание— опиши стиль словами: "минимализм", "glassmorphism", "brutalism", "neumorphism". AI подберёт подходящие цвета, тени и формы.
Через референсы— "в стиле Apple", "как у Vercel", "похоже на Notion". AI знает визуальный стиль популярных продуктов.
Через конкретные значения— "фон #0a0a0a, акцент бирюзовый #06b6d4, скруглённые углы 16px". Для тех, кто точно знает, чего хочет.

Примеры дизайн-инструкций в описании

Тёмная тема с градиентами

Тёмная тема с фоном #0c0c0c. Акцентный цвет —
фиолетовый (#8b5cf6). Карточки с glassmorphism-эффектом:
полупрозрачный фон, размытие, тонкая белая граница.
Градиентные заголовки от фиолетового к розовому.

Светлый минимализм

Светлая тема, много воздуха. Белый фон, серые акценты,
чёрный текст. Минимум декора, фокус на типографике.
Шрифт с засечками для заголовков, без засечек для текста.
Вдохновение: Medium, Apple.

Яркий и энергичный

Яркие цвета: оранжевый (#ff6b4a) и жёлтый (#fbbf24)
на тёмном фоне. Крупные заголовки, жирный шрифт.
Карточки с цветными градиентами и лёгкой тенью.
Энергичный, молодёжный стиль.

Заметка

Если ты не укажешь дизайн-предпочтения, AI подберёт стиль автоматически на основе тематики проекта. Кофейня получит тёплые тона, tech-стартап — минималистичный тёмный дизайн, детская школа — яркие цвета.

Планируй поэтапно

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

Уровни детализации

Быстрый старт

Визитка, одностраничный лендинг, простая форма заявки.

Больше контента

Лендинг с несколькими секциями, портфолио, небольшой каталог.

Поэтапная доработка

Дополнительные страницы, новые секции и точечные правки через чат.

Как описывать большую идею

Структурируй описание — разбей его по секциям или экранам. Используй списки, чтобы AI не пропустил ни одного элемента.
Указывай данные — для таблиц, списков, карточек укажи примеры: имена, цены, категории. AI генерирует реалистичный контент, а не lorem ipsum.
Описывай действия посетителя— "оставить заявку", "посмотреть работы", "выбрать услугу", "написать в мессенджер".
Задай приоритеты — если проект большой, укажи, что важнее всего. AI распределит усилия соответственно.
Не пытайся сделать всё сразу — сначала получи рабочую основу, затем добавляй детали через EDIT.

Пример поэтапного описания

Сначала сделай лендинг для фитнес-студии:
- Hero с оффером "первая тренировка бесплатно"
- Направления: йога, силовые, растяжка
- Расписание ближайших занятий
- Тренеры с короткими описаниями
- Цены на абонементы
- Форма записи и контакты

Стиль: светлый, энергичный, акцент — лаймовый.
После первой версии добавим отдельную страницу с тренерами.

Внимание

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

Вся документация Генерация кода