Вайб-кодинг на Тильде: пошаговая инструкция по созданию уникальных блоков с помощью ИИ
Что такое вайб-кодинг и зачем он нужен
Вайб-кодинг – это подход, при котором вы описываете задачу обычными словами, а искусственный интеллект самостоятельно пишет код и собирает интерфейс. Никакого HTML, CSS или JavaScript знать не нужно.
До появления этого инструмента создание нестандартных элементов на Тильде требовало либо работы в Zero Block (встроенный продвинутый редактор), либо привлечения разработчика. Теперь достаточно описать идею в чате – и блок появится на странице за несколько секунд.
Что можно создать с помощью Вайб-блока:
- Интерактивные квизы и тесты
- Калькуляторы (стоимости, калорий, ипотеки и др.)
- Расписания с фильтрами и табами
- Интерактивные карты и таймлайны
- Анимированные обложки и промо-секции
- Инфографику и этапы работы
- Многошаговые формы с логикой
Шаг 1. Откройте редактор и добавьте Вайб-блок
- Войдите в свой аккаунт на tilda.cc
- Откройте нужный проект.
- Перейдите на страницу, на которую хотите добавить новый блок.
- Нажмите кнопку «Добавить блок» в редакторе страницы.
- В открывшейся Библиотеке блоков найдите Вайб-блок одним из двух способов:
- он отображается прямо в списке разделов на видном месте,
- или зайдите в раздел «Другое» → выберите «Вайб-блок».
- Кликните на него – блок добавится на страницу и сразу откроется чат с ИИ.
Шаг 2. Настройте параметры перед генерацией
Перед тем как писать первый промпт, обратите внимание на несколько важных настроек в интерфейсе чата:
Выбор модели ИИ
- Нажмите на название модели под строкой ввода – откроется список доступных нейросетей.
- Рядом с каждой моделью указано число – это количество запросов, которое будет списано при её использовании.
- Более мощные модели дают лучший результат для сложных интерактивных задач, но расходуют больше лимита.
Прикрепление изображения
- Нажмите на иконку скрепки, если хотите добавить референс – скриншот, мокап или фото.
- ИИ учтёт визуальный стиль при генерации блока.
Примеры промптов
- Нажмите на знак вопроса ? – откроется галерея готовых примеров запросов.
- Каждый пример можно просмотреть как демо на отдельной странице – это удобно, чтобы понять, что получится на выходе.
- Кликните на понравившийся пример – он автоматически подставится в поле ввода, и вы сможете адаптировать его под свою задачу.
Шаг 3. Напишите промпт (запрос)
Это самый важный шаг. Чем подробнее и конкретнее вы опишете задачу, тем точнее будет результат.
Структура хорошего промпта:
[Что нужно создать] + [Назначение] + [Структура/элементы] + [Стиль/цвета] + [Поведение/анимация]
Примеры готовых промптов
Квиз:
Структура:
- Стартовый экран: заголовок, описание, кнопка «Начать тест»
- Экран вопроса: счётчик «Вопрос 1 из 5», текст вопроса, варианты в виде кликабельных карточек, кнопка «Далее»
- Финальный экран: результат с рекомендацией курса
Стиль: современный, тёмный фон, синий акцентный цвет, мягкие тени.
Калькулятор:
Слева – крупный заголовок и описание.
Справа – форма: тип сайта (лендинг / интернет-магазин / корпоративный), количество страниц, нужен ли дизайн. После заполнения – показать ориентировочную стоимость.
Стиль: светлый, минималистичный, премиальный.
Расписание:
Стиль: чистый, светлый, карточки с мягкими тенями, акцентный цвет для
категорий курсов, сильная типографика в premium-стиле.
После написания запроса нажмите кнопку «Отправить» или клавишу Enter.
Шаг 4. Получите и оцените результат
После отправки запроса ИИ приступит к генерации – обычно это занимает несколько секунд. Важные моменты:
- В чате появится сообщение, что блок готов к использованию.
- Готовый блок сразу отобразится на странице – вы увидите его визуально прямо в редакторе.
- ИИ автоматически учитывает глобальные стили проекта – шрифты и цветовые схемы. Если настроенный стиль подходит под задачу, нейросеть использует его, чтобы новый блок выглядел органично.
- Формы внутри Вайб-блока поддерживают стандартные интеграции Тильды: заявки можно сразу направлять в CRM, на email или в мессенджеры
