Документация
Шаблоны

Шаблоны

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

Обзор шаблонов

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

Зачем использовать шаблоны

  • Скорость — шаблон задаёт проверенную структуру секций и компонентов, AI не тратит время на планирование с нуля
  • Качество — каждый шаблон протестирован и оптимизирован для своего типа проекта
  • Предсказуемость — ты заранее знаешь, какие секции и элементы получишь в результате
  • Адаптивность — шаблоны не жёсткие: AI полностью меняет контент, стили и даже структуру под твоё описание

Шаблон или свободный промпт?

Используй шаблон, если знаешь тип проекта (лендинг, портфолио, магазин) и хочешь получить результат быстрее. Выбирай свободный промпт, если идея нестандартная или ты хочешь полный контроль над структурой.

Совет

Даже при использовании шаблона ты можешь попросить AI изменить или убрать любую секцию через чат. Шаблон — стартовая точка, а не ограничение.

Каталог шаблонов

Шаблоны сгруппированы по категориям. Каждая категория содержит оптимизированную структуру и набор секций, подходящих для конкретного типа проекта.

Landing Page

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

  • Главный баннер с заголовком и кнопкой
  • Преимущества / фичи продукта
  • Отзывы клиентов или кейсы
  • Тарифы или прайс-лист
  • Контактная форма или форма подписки

Портфолио

Персональные сайты для дизайнеров, разработчиков, фотографов и других специалистов. Акцент на визуальное представление работ.

  • Главный блок с фото и кратким описанием
  • Галерея проектов / работ
  • Секция «Обо мне» с навыками
  • Контакты и ссылки на соцсети

CRM

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

  • Управление клиентами и контактами
  • Воронка продаж
  • Задачи и напоминания
  • Отчёты и аналитика

Dashboard

Админ-панели и информационные дашборды для внутренних инструментов, аналитики и CRM-систем.

  • Sidebar-навигация
  • Карточки с метриками и KPI
  • Графики и таблицы данных
  • Формы и настройки

Маркетплейс

Платформы электронной коммерции с каталогом товаров, корзиной и личным кабинетом продавца.

  • Каталог с фильтрами и поиском
  • Корзина и оформление заказа
  • Кабинет продавца
  • Отзывы и рейтинги

SaaS

Маркетинговые сайты для SaaS-продуктов. Комплексная структура с несколькими секциями, оптимизированная для конверсии.

  • Главный блок с демо или скриншотом продукта
  • Фичи и преимущества
  • Тарифные планы
  • FAQ и социальное доказательство
  • Блоки с призывом к действию между секциями

Информация

Каталог шаблонов постоянно пополняется. Если не нашёл нужный тип — используй создание без шаблона и опиши структуру вручную.

Использование шаблона

Работа с шаблоном занимает 4 шага — от выбора до кастомизации результата через чат.

1

Выбери шаблон

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

2

Опиши свои потребности

После выбора шаблона появится поле для описания. Расскажи AI, что именно ты хочешь: название бизнеса, услуги, целевую аудиторию, предпочтения по цветам и стилю. Чем подробнее, тем точнее результат.

Пример: «Лендинг для студии йоги "Баланс" в Санкт-Петербурге. Спокойные пастельные тона, фото практики, расписание занятий, цены на абонементы, форма записи.»

3

Дождись генерации

AI возьмёт структуру шаблона и адаптирует её под твоё описание: сгенерирует уникальный контент, подберёт фотографии, применит стилизацию. Обычно это занимает 30–90 секунд.

4

Кастомизируй через чат

Результат не идеален? Используй чат для точечных правок: поменяй текст, добавь секцию, измени цветовую схему. Каждое изменение сохраняется как версия — можно откатиться в любой момент.

Совет

Не пытайся описать всё идеально с первого раза. Лучше начни с основного описания, посмотри результат и допили через чат. Итеративный подход даёт лучший результат.

Кастомизация

Шаблон — это фундамент, а не финальный результат. После генерации ты можешь изменить абсолютно всё через чат с AI.

Что можно менять

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

Эффективные промпты для кастомизации

Чтобы AI точнее понял, что менять, следуй этим принципам:

  • Будь конкретным: «Сделай заголовок главного блока крупнее» лучше, чем «Измени шрифты»
  • Указывай секцию: «В блоке тарифов добавь четвёртый план» лучше, чем «Добавь ещё один план»
  • Одно изменение за раз: так проще контролировать результат и откатывать ненужные правки
  • Описывай результат: «Хочу, чтобы карточки услуг были в два столбца с иконками» — AI поймёт и структуру, и визуал

Большие изменения

Если нужно радикально изменить структуру (например, из лендинга сделать dashboard), лучше создай новый проект с подходящим шаблоном. Чат оптимизирован для точечных правок, а не для полной переделки.

Создание без шаблона

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

Когда начинать без шаблона

  • Нестандартный проект — нет подходящей категории в каталоге
  • Экспериментальная идея — хочешь посмотреть, как AI интерпретирует описание
  • Полный контроль — хочешь сам определить набор секций и компонентов
  • Простой проект — нужна одна страница с минимумом элементов

Как получить лучший результат

Без шаблона качество зависит от подробности твоего описания. Включи в промпт:

  • Тип проекта — лендинг, каталог, информационный сайт, приложение
  • Секции — перечисли, какие блоки тебе нужны (главный баннер, преимущества, отзывы, контакты)
  • Визуальный стиль — тёмная/светлая тема, цвета, настроение (строгий, игривый, минималистичный)
  • Контент — название компании, услуги, ключевые тексты

Совет

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