Как описывать идею
Качество сгенерированного кода напрямую зависит от того, как ты сформулируешь запрос. Здесь собраны практические приёмы, которые помогут получать отличные результаты с первого раза.
Анатомия хорошего запроса
Запрос для Vibe2Code — это не просто пожелание, а задание для AI. Чем точнее ты опишешь, что хочешь получить, тем ближе результат будет к ожиданиям. Вот пять ключевых элементов, которые стоит включить в каждое описание.
Тип приложения
Начни с главного: что ты создаёшь? Лендинг, дашборд, портфолио, каталог товаров, блог, админ-панель. Это задаёт структуру и блоки, которые AI будет генерировать.
Целевая аудитория
Для кого это приложение? "Для клиентов ветклиники", "для менеджеров по продажам", "для студентов дизайн-курса". AI подбирает тон текстов, визуальный стиль и уровень детализации под аудиторию.
Ключевые элементы
Перечисли конкретные секции, экраны и функции. Не "сделай меню", а "меню напитков с ценами: эспрессо 180 руб, латте 250 руб, капучино 220 руб". Чем конкретнее данные, тем реалистичнее результат.
Дизайн-предпочтения
Опиши визуальный стиль: цвета, настроение, референсы. Можно указать конкретные цвета ("акцент - бирюзовый"), стиль ("минимализм", "стеклянный эффект") или сослаться на известный продукт ("как у Notion", "в стиле Linear").
Тон и стиль контента
AI генерирует тексты для всех секций. Укажи желаемую тональность: "дружелюбно и неформально", "строго и профессионально", "с юмором". Если есть готовые тексты или слоганы — включи их в описание.
Совет
Не обязательно использовать все пять элементов каждый раз. Для простого лендинга достаточно типа, фич и стиля. Но чем больше деталей ты дашь, тем меньше придётся дорабатывать через чат.
Примеры: до и после
Сравни размытые запросы с конкретными. Разница в результатах — колоссальная.
Пример 1: Лендинг
Сделай сайтЛендинг для кофейни "Brew" в минималистичном стиле:
hero с фото зёрен, меню напитков с ценами,
карта с адресом, форма бронирования столика.
Тёплые коричневые тона, шрифт без засечек.Пример 2: Каталог
Интернет-магазинКаталог товаров для магазина электроники:
карточки с фото, ценой и рейтингом,
фильтры по категориям (смартфоны, ноутбуки,
аксессуары), корзина с итогом, страница товара
с характеристиками и отзывами.
Тёмная тема, акцент — синий.Пример 3: Дашборд
CRMДашборд CRM для отдела продаж:
таблица клиентов с поиском и сортировкой,
воронка продаж в формате kanban (лид → переговоры
→ договор → оплата), графики выручки за месяц
(линейный + столбчатый), карточка клиента
с историей взаимодействий и заметками.
Стиль: как у Linear, тёмная тема.Пример 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-стартап — минималистичный тёмный дизайн, детская школа — яркие цвета.
Сложные проекты
Vibe2Code автоматически определяет сложность проекта по длине и детализации описания. От этого зависит глубина проработки результата.
Уровни сложности
Простой
Визитка, одностраничный лендинг, простая форма.
Средний
Лендинг с несколькими секциями, портфолио, небольшой каталог.
Сложный
Панель управления, CRM, многоэкранное приложение.
Советы для сложных проектов
- Структурируй описание — разбей его по секциям или экранам. Используй списки, чтобы AI не пропустил ни одного элемента.
- Указывай данные — для таблиц, списков, карточек укажи примеры: имена, цены, категории. AI генерирует реалистичный контент, а не lorem ipsum.
- Описывай взаимодействия — "фильтры обновляют таблицу", "клик по карточке открывает модалку", "форма показывает валидацию при пустых полях".
- Задай приоритеты — если проект большой, укажи, что важнее всего. AI распределит усилия соответственно.
- Не бойся длинных описаний — для сложных проектов 10-20 строк описания — это норма. Больше деталей = лучше результат.
Дашборд для управления фитнес-клубом.
Главная страница:
- Виджеты KPI: активных клиентов, выручка за месяц,
посещаемость сегодня, продано абонементов
- График посещаемости за неделю (столбчатый)
- Список ближайших тренировок (время, тренер, зал)
Страница клиентов:
- Таблица с поиском: ФИО, абонемент, дата окончания,
статус (активен/истёк)
- Карточка клиента: контакты, история посещений,
текущий абонемент
Расписание:
- Сетка по дням недели и залам
- Карточки тренировок: название, тренер, время, мест свободно
Тёмная тема, стиль Linear. Боковая навигация с иконками.Внимание
Сложность влияет на время генерации и расход кредитов. Простой проект генерируется за 15-30 секунд, сложный — до 90 секунд. Если тебе нужен быстрый прототип, начни с простого и доработай через чат.