Новичкам·14 июля 2026 г.

Промпты для Вайб-блока Tilda: 5 готовых примеров и 3 блока с кодом

Готовые промпты для Вайб-блока Tilda и три блока с открытым кодом, которые можно вставить бесплатно — не потратив ни одного ИИ-запроса. Разбираем лимиты, правила хорошего промпта и показываем, где генерация слабее готового решения.

Вайб-блок — самая обсуждаемая новинка Tilda этого года: описываете задачу словами, и нейросеть собирает блок с кодом, структурой и дизайном прямо в редакторе. Мы уже разбирали, что это за инструмент и заменит ли он готовые шаблоны. Короткий ответ: не заменит, но точечные задачи решает отлично — если уметь им пользоваться.

В этой статье — практика. Пять готовых промптов, которые можно скопировать и вставить в чат Вайб-блока, и три готовых блока с открытым кодом, которые вообще не тратят ИИ-запросы. Но сначала — про лимиты, из-за которых всё это имеет значение.

Лимиты Вайб-блока: почему каждый запрос на счету

Генерация в Вайб-блоке не бесконечная. Количество запросов зависит от тарифа:

Тариф	Лимит запросов
FREE	5 за 12 часов / 20 в месяц
Personal Trial	10 за 12 часов / 30 в месяц
Student	15 за 12 часов / 40 в месяц
Personal	50 за 12 часов / 100 в месяц
Business	50 за 12 часов / 100 в месяц

И есть нюанс, который замечают не сразу: у каждой ИИ-модели своя цена. Более сильная модель списывает несколько запросов за одну генерацию. А сложный блок редко получается с первого раза — обычно нужно 3–7 итераций «поправь отступы, замени цвет, сделай крупнее». В итоге один калькулятор или квиз может съесть половину месячного лимита на тарифе FREE.

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

Как писать промпт, чтобы не сжечь лимит

Мы прогнали через Вайб-блок десятки генераций и разобрали код, который выдаёт нейросеть Tilda. Хороший промпт состоит из четырёх частей:

Задача — что за блок и что он делает. Не «сделай красиво», а «карточки услуг в 3 колонки, у каждой иконка, заголовок, описание и ссылка».

Стиль — конкретные прилагательные и референсы. Нейросеть Tilda хорошо понимает формулировки вроде «чистый, светлый, премиальный», «тёмный технологичный», «мягкие тени, крупная типографика».

Детали поведения — что происходит при наведении, клике, прокрутке. Без этого получите красивую, но статичную картинку.

Ограничения — чего не делать: «без ярких градиентов», «не больше трёх цветов», «без эмодзи».

Ещё один приём: Вайб-блок при генерации подхватывает шрифты и глобальные стили вашего проекта, поэтому не тратьте слова промпта на «используй шрифт как на сайте» — это происходит автоматически.

5 готовых промптов — скопируйте и вставьте

1. Калькулятор стоимости

Создай калькулятор стоимости услуги: слайдер количества (от 1 до 100), три чекбокса дополнительных опций с ценами, итоговая сумма крупно обновляется мгновенно. Стиль: минималистичный, светлый, много воздуха, акцентный цвет только на итоговой цифре и кнопке «Оставить заявку».

Калькулятор — классический конверсионный блок: посетитель играет с ценой и сам подводит себя к заявке.

2. Квиз на 3 вопроса

Сделай квиз из 3 вопросов с вариантами ответов в виде карточек, прогресс-баром сверху и формой email на последнем шаге для получения результата. Переходы между вопросами плавные. Стиль: дружелюбный, светлый, скруглённые карточки, одна акцентная кнопка.

3. Таймлайн этапов работы

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

4. Таблица тарифов

Сделай блок из трёх тарифов: карточки рядом, средняя выделена рамкой и подписью «Популярный», в каждой — название, цена, список из 5 пунктов с галочками и кнопка. При наведении карточка слегка приподнимается. Стиль: чистый, премиальный, много воздуха.

5. Отзывы-слайдер

Создай слайдер отзывов: по одному отзыву на экран, фото клиента в круге, имя, должность, текст отзыва, стрелки навигации по бокам и точки-индикаторы снизу. Автопрокрутка каждые 6 секунд, останавливается при наведении. Стиль: мягкий, светлый, лёгкая тень у карточки.

Каждый промпт можно дорабатывать в том же чате: «сделай фон тёмным», «добавь четвёртый тариф». Но помните — каждое уточнение тратит запрос.

3 готовых блока с кодом: ноль запросов

А теперь главное. У Вайб-блока есть вкладка «Код» — и мы проверили: вставка готового кода не списывает ни одного запроса. Лимиты тратятся только на генерацию через ИИ. Это значит, что проверенный блок можно просто скопировать, вставить и пользоваться — бесплатно на любом тарифе.

Как вставить блок (3 шага):

Добавьте Вайб-блок на страницу: Библиотека блоков → «Другое» → Вайб-блок.
Откройте вкладку «Код» в панели блока.
Вставьте код целиком, нажмите «Сохранить» и опубликуйте страницу.

В начале каждого нашего блока — короткий список CSS-переменных с комментариями. Поменяйте 3–4 значения цвета, и блок встанет в палитру вашего сайта. Шрифты подстраиваются автоматически: код использует те же переменные --t-headline-font и --t-text-font, что и родные блоки Tilda.

Блок 1 — FAQ-аккордеон

Раскрывающиеся вопросы-ответы: открыт один пункт, остальные закрываются, плюс плавная анимация и иконка «плюс/минус». По умолчанию — светлая версия; для тёмного фона замените четыре переменные в начале (значения — в комментариях).

<!-- FAQ-аккордеон | Tematema.ru -->
<style>
  /* ===== Настройка: поменяйте 4 цвета под свой сайт ===== */
  /* Тёмный фон: accent/text #ffffff, muted rgba(255,255,255,.65), border rgba(255,255,255,.2) */
  .tmtm-faq {
    --tmtm-accent: #1a1a1a;      /* цвет акцента (иконка) */
    --tmtm-text: #1a1a1a;        /* цвет вопросов и заголовка */
    --tmtm-muted: #6e6e68;       /* цвет текста ответа */
    --tmtm-border: #e3e3df;      /* цвет разделителей */

    max-width: 760px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: var(--t-text-font, inherit);
    color: var(--tmtm-text);
  }

  .tmtm-faq * { box-sizing: border-box; }

  .tmtm-faq__title {
    font-family: var(--t-headline-font, inherit);
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tmtm-text);
    margin: 0 0 32px;
  }

  .tmtm-faq__item { border-bottom: 1px solid var(--tmtm-border); }

  .tmtm-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 22px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--t-text-font, inherit);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tmtm-text);
    transition: opacity .2s ease;
  }

  .tmtm-faq__q:hover { opacity: .75; }

  .tmtm-faq__icon { position: relative; flex: 0 0 20px; height: 20px; }
  .tmtm-faq__icon::before,
  .tmtm-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 2px;
    background: var(--tmtm-accent);
    transform: translate(-50%, -50%);
    transition: transform .25s ease;
  }
  .tmtm-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .tmtm-faq__item.is-open .tmtm-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

  .tmtm-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  .tmtm-faq__item.is-open .tmtm-faq__a { grid-template-rows: 1fr; }
  .tmtm-faq__a-inner { overflow: hidden; }

  .tmtm-faq__a-text {
    margin: 0;
    padding: 0 30px 22px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tmtm-muted);
  }

  @media (max-width: 640px) {
    .tmtm-faq { padding: 40px 16px; }
    .tmtm-faq__q { font-size: 16px; padding: 18px 0; }
    .tmtm-faq__a-text { padding-right: 20px; }
  }
</style>

<div class="tmtm-faq">
  <h2 class="tmtm-faq__title">Частые вопросы</h2>

  <div class="tmtm-faq__item">
    <button class="tmtm-faq__q" type="button">
      Первый вопрос — замените на свой
      <span class="tmtm-faq__icon"></span>
    </button>
    <div class="tmtm-faq__a">
      <div class="tmtm-faq__a-inner">
        <p class="tmtm-faq__a-text">Текст ответа на первый вопрос. Отредактируйте прямо в коде.</p>
      </div>
    </div>
  </div>

  <div class="tmtm-faq__item">
    <button class="tmtm-faq__q" type="button">
      Второй вопрос — замените на свой
      <span class="tmtm-faq__icon"></span>
    </button>
    <div class="tmtm-faq__a">
      <div class="tmtm-faq__a-inner">
        <p class="tmtm-faq__a-text">Текст ответа на второй вопрос.</p>
      </div>
    </div>
  </div>

  <div class="tmtm-faq__item">
    <button class="tmtm-faq__q" type="button">
      Третий вопрос — замените на свой
      <span class="tmtm-faq__icon"></span>
    </button>
    <div class="tmtm-faq__a">
      <div class="tmtm-faq__a-inner">
        <p class="tmtm-faq__a-text">Текст ответа на третий вопрос.</p>
      </div>
    </div>
  </div>
</div>

<script>
  // Аккордеон FAQ: открыт один пункт, остальные закрываются
  (function () {
    var faqs = document.querySelectorAll('.tmtm-faq');
    var faq = faqs[faqs.length - 1];
    if (!faq || faq.dataset.tmtmInit) return;
    faq.dataset.tmtmInit = '1';

    var items = faq.querySelectorAll('.tmtm-faq__item');
    items.forEach(function (item) {
      var btn = item.querySelector('.tmtm-faq__q');
      btn.addEventListener('click', function () {
        var isOpen = item.classList.contains('is-open');
        items.forEach(function (i) { i.classList.remove('is-open'); });
        if (!isOpen) item.classList.add('is-open');
      });
    });
  })();
</script>

Блок 2 — Карточки преимуществ с ховером

Три карточки с иконкой, заголовком и текстом. При наведении карточка приподнимается, а верхняя акцентная полоска «прорисовывается» слева направо. Чистый CSS, без скриптов. Иконки — из открытой библиотеки Tilda, можно заменить на любые свои.

<!-- Карточки преимуществ | Tematema.ru -->
<style>
  /* ===== Настройка: поменяйте цвета под свой сайт ===== */
  .tmtm-feat {
    --tmtm-accent: #1a1a1a;      /* акцент (полоска, иконка) */
    --tmtm-text: #1a1a1a;        /* заголовки */
    --tmtm-muted: #6e6e68;       /* описания */
    --tmtm-card-bg: #f5f5f3;     /* фон карточки */

    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: var(--t-text-font, inherit);
  }

  .tmtm-feat * { box-sizing: border-box; }

  .tmtm-feat__title {
    font-family: var(--t-headline-font, inherit);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--tmtm-text);
    margin: 0 0 40px;
  }

  .tmtm-feat__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .tmtm-feat__card {
    position: relative;
    overflow: hidden;
    background: var(--tmtm-card-bg);
    border-radius: 16px;
    padding: 36px 32px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s cubic-bezier(.22, 1, .36, 1);
  }

  /* Акцентная полоска сверху — прорисовывается при наведении */
  .tmtm-feat__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tmtm-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  }

  .tmtm-feat__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
  }
  .tmtm-feat__card:hover::before { transform: scaleX(1); }

  .tmtm-feat__icon {
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 0 20px;
  }

  .tmtm-feat__card-title {
    font-family: var(--t-headline-font, inherit);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tmtm-text);
    margin: 0 0 12px;
  }

  .tmtm-feat__card-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tmtm-muted);
    margin: 0;
  }

  @media (max-width: 960px) {
    .tmtm-feat__grid { grid-template-columns: 1fr; gap: 16px; }
  }
  @media (max-width: 640px) {
    .tmtm-feat { padding: 40px 16px; }
    .tmtm-feat__card { padding: 28px 24px; }
  }
</style>

<div class="tmtm-feat">
  <h2 class="tmtm-feat__title">Почему выбирают нас</h2>
  <div class="tmtm-feat__grid">

    <div class="tmtm-feat__card">
      <img class="tmtm-feat__icon" src="https://static.tildacdn.com/lib/icons/tilda/progress_improvemnt_increase.svg" alt="Рост">
      <h3 class="tmtm-feat__card-title">Первое преимущество</h3>
      <p class="tmtm-feat__card-text">Короткое описание преимущества в два-три предложения. Замените на своё.</p>
    </div>

    <div class="tmtm-feat__card">
      <img class="tmtm-feat__icon" src="https://static.tildacdn.com/lib/icons/tilda/group_team_people.svg" alt="Команда">
      <h3 class="tmtm-feat__card-title">Второе преимущество</h3>
      <p class="tmtm-feat__card-text">Короткое описание преимущества в два-три предложения. Замените на своё.</p>
    </div>

    <div class="tmtm-feat__card">
      <img class="tmtm-feat__icon" src="https://static.tildacdn.com/lib/icons/tilda/analytics.svg" alt="Аналитика">
      <h3 class="tmtm-feat__card-title">Третье преимущество</h3>
      <p class="tmtm-feat__card-text">Короткое описание преимущества в два-три предложения. Замените на своё.</p>
    </div>

  </div>
</div>

Блок 3 — Анимированные счётчики цифр

Цифры «набегают» от нуля до значения, когда блок появляется на экране. Классика для «500 проектов, 12 лет, 98% довольных клиентов». Значение задаётся в атрибуте `data-target`, приставка и суффикс (например, «+» или «%») — прямо в разметке.

<!-- Счётчики цифр | Tematema.ru -->
<style>
  /* ===== Настройка: поменяйте цвета под свой сайт ===== */
  .tmtm-stats {
    --tmtm-accent: #1a1a1a;      /* цвет цифр */
    --tmtm-muted: #6e6e68;       /* цвет подписей */

    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: var(--t-text-font, inherit);
  }

  .tmtm-stats * { box-sizing: border-box; }

  .tmtm-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
  }

  .tmtm-stats__num {
    font-family: var(--t-headline-font, inherit);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tmtm-accent);
    margin: 0 0 8px;
  }

  .tmtm-stats__label {
    font-size: 15px;
    line-height: 1.5;
    color: var(--tmtm-muted);
    margin: 0;
  }

  @media (max-width: 640px) {
    .tmtm-stats { padding: 40px 16px; }
    .tmtm-stats__grid { grid-template-columns: 1fr; gap: 24px; }
  }
</style>

<div class="tmtm-stats">
  <div class="tmtm-stats__grid">

    <div class="tmtm-stats__item">
      <p class="tmtm-stats__num"><span data-target="500">0</span>+</p>
      <p class="tmtm-stats__label">выполненных проектов</p>
    </div>

    <div class="tmtm-stats__item">
      <p class="tmtm-stats__num"><span data-target="12">0</span></p>
      <p class="tmtm-stats__label">лет на рынке</p>
    </div>

    <div class="tmtm-stats__item">
      <p class="tmtm-stats__num"><span data-target="98">0</span>%</p>
      <p class="tmtm-stats__label">довольных клиентов</p>
    </div>

  </div>
</div>

<script>
  // Счётчики: анимация от 0 до data-target при появлении блока на экране
  (function () {
    var blocks = document.querySelectorAll('.tmtm-stats');
    var block = blocks[blocks.length - 1];
    if (!block || block.dataset.tmtmInit) return;
    block.dataset.tmtmInit = '1';

    var DURATION = 1500; // длительность анимации, мс

    function animate(el) {
      var target = parseInt(el.getAttribute('data-target'), 10) || 0;
      var start = null;
      function step(ts) {
        if (!start) start = ts;
        var progress = Math.min((ts - start) / DURATION, 1);
        // Замедление к концу (ease-out)
        var eased = 1 - Math.pow(1 - progress, 3);
        el.textContent = Math.round(target * eased);
        if (progress < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }

    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          block.querySelectorAll('[data-target]').forEach(animate);
          observer.disconnect(); // запускаем один раз
        }
      });
    }, { threshold: 0.4 });

    observer.observe(block);
  })();
</script>

Где Вайб-блок слабее готового решения

Мы разобрали код, который генерирует нейросеть Tilda, и вот что заметили. Генерация отлично справляется со статикой: сетки карточек, типографика, ховер-эффекты выходят аккуратными. Но интерактив — аккордеоны, калькуляторы, слайдеры с логикой — с первого раза почти никогда не работает как надо, а каждая доводка стоит запросов. Ссылки в сгенерированных блоках часто ведут в никуда, а тексты приходится переписывать целиком: нейросеть заполняет карточки обтекаемыми формулировками «комплексные решения для роста вашего бизнеса».

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

Блок решает задачу. Сайт решает бизнес

Вайб-блок — отличный инструмент для точечных задач: добавить калькулятор, освежить страницу нестандартной секцией, закрыть дыру, где не хватает возможностей стандартных блоков. Но сайт целиком — это не набор блоков, а система: структура, смыслы, путь посетителя к заявке. Собрать её из отдельных генераций — всё равно что построить дом из красивых, но случайных кирпичей.

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