Вы пишете в чат: «калькулятор стоимости заказа с полями тираж, цена и срочность» — и через один ответ модели рядом с перепиской открывается панель с работающим калькулятором. С полями, кнопкой и пересчётом на лету. Вы не открывали редактор, не ставили Node и не гуглили, как центрировать блок.
Так выглядит вайбкодинг. Если совсем коротко: вы формулируете задачу человеческими словами, модель пишет код, вы смотрите на результат и говорите, что поправить. Вы отвечаете за то, что должно получиться. Синтаксис — забота модели.
Откуда взялся термин vibe coding
Английское vibe coding буквально означает «кодить на вайбе»: не разбирать программу построчно, а идти за ощущением от результата — работает и выглядит как надо, значит хорошо. Термин появился в англоязычном сообществе разработчиков и быстро перебрался в русский. Пишут и слитно — вайбкодинг, и раздельно — вайб кодинг; разницы в значении нет, это одно и то же.
Чем вайб кодинг отличается от программирования и от no-code
Его обычно путают с двумя соседями. С программированием — потому что на выходе получается код. С конструкторами вроде no-code — потому что этот код вы не пишете руками. На деле это третий способ, со своими сильными и слабыми местами.
| Что сравниваем | Обычное программирование | No-code конструктор | Вайбкодинг |
|---|---|---|---|
| Что делаете вы | Пишете каждую строку сами | Собираете страницу из готовых блоков мышью | Описываете задачу словами и правите результат |
| Что надо знать | Язык, среду, отладку | Интерфейс конкретного конструктора | Свою задачу — до цифр и правил |
| Что на выходе | Код любой формы, полностью ваш | Страница внутри конструктора, по его правилам | Настоящий код: артефакт видно целиком, проект выгружается zip-архивом |
| Где стена | Время и квалификация | Всё нестандартное — «так нельзя» | Сложная логика: модель уверенно пишет неверное |
| Первая версия | Появляется дольше всего | Быстро, но в рамках шаблонов | Появляется прямо в ответе модели |
Что реально получается, а что нет
- Считалки и калькуляторы: стоимость заказа, ипотека, юнит-экономика, конвертер единиц.
- Дашборд по вашим числам: таблица, графики, фильтры. Цифры попадают в код прямо из вашего сообщения — заглушкой внутри файла, а не запросом на сервер.
- Интерактивная объяснялка: схема, таймлайн, тренажёр с проверкой ответов — то, что в презентации мертво, а на странице живёт.
- Прототип лендинга или карточки товара, чтобы показать заказчику и спорить о конкретном, а не о словах — подробнее в разборе про сайт с помощью ИИ.
- Небольшая игра или физическая симуляция: three.js, Matter.js, p5.js.
- Мелкие утилиты: генератор QR-кодов, сборщик PDF-сметы, разбор CSV-выгрузки.
А вот чего не будет. Артефакт не примет оплату, не сходит в базу данных и не дёрнет чужой API. Платформа не выдаёт домен, SSL и эквайринг и не собирает приложения для App Store и Google Play. Полноценный боевой интернет-магазин здесь не собирается: собирается прототип или витрина, которую потом переносят на настоящий хостинг.
Как вайбкодинг устроен на СуперИнтеллекте
Под эту работу здесь сделаны два разных инструмента, и путать их дорого. Артефакт — одна страница, которая работает сразу и ничего не стоит сверх ответа модели. Проект — приложение с зависимостями и настоящим сервером, которое надо запускать вручную и которое тратит минуты песочницы.
Артефакт: страница, которая работает сразу
Артефакт бывает шести типов: html, svg, react, mermaid, markdown, code. По умолчанию модель берёт html — цельный самодостаточный документ, где стили и скрипты лежат внутри одного файла. React-артефакт объявляется как function App(), платформа монтирует его сама, но импортировать можно только из react, react-dom, recharts и lucide-react — любой другой пакет уронит сборку, про это есть отдельный разбор про React-артефакты. Лимит — 1 МБ на версию, история версий линейная: возврат к прежней создаёт новую версию с прежним содержимым. Подробности — в гайде про артефакты в чате.
Интернета внутри нет, но библиотеки лежат локально по /lib/v1/ и подключаются без него: Tailwind, Alpine.js, Lucide, Font Awesome 6, SortableJS для перетаскивания, anime.js и Motion One для анимации; Chart.js 4, ApexCharts, ECharts 5 и D3 7 для графиков; Tabulator и AG Grid Community для таблиц, FullCalendar для календаря; three.js r160, CANNON.js, Matter.js и p5.js для трёхмерного, физики и игр; math.js, decimal.js, lodash и dayjs для расчётов и дат, PapaParse и SheetJS для CSV и Excel; marked, Mermaid, Quill, jsPDF с jsPDF-AutoTable, html2canvas и qrcode для документов. Готовым html- и svg-артефактом можно поделиться по ссылке — получателю регистрация не нужна, а у артефакта есть картинка-превью: она видна на карточке в чате и подтягивается к ссылке в мессенджере.
Проект: приложение с зависимостями и настоящим сервером
Проект — это уже не одна страница: до 100 файлов, файл до 512 КБ, весь проект до 5 МБ, до 20 версий и до трёх проектов на пользователя. Runtime — node или static. Главное отличие от артефакта: у проекта есть интернет, npm-зависимости и CDN работают. Есть выгрузка одним zip-архивом и вкладка «Что изменилось» с построчным диффом между версиями.
Запуск стоит 1 нейрон за минуту работы песочницы, сессия живёт 60 минут, потом облако её гасит — это штатно: файлы хранятся у платформы, повторный запуск собирает всё заново. Постоянного адреса у проекта нет, хостингом платформа не работает: превью запущенного приложения открывается во фрейме на домене e2b.app и живёт ровно этот час. Минуты считаются по факту работы, даже если процесс упал; закрыли панель — песочницу гасит уборщик, и минуты капать перестают.
Кнопку «Запустить» нажимает только человек: у модели есть инструменты создавать проект, читать, искать и править файлы и смотреть логи, но запускать она не умеет. Работают проекты только в режиме «Задачи», пошаговый разбор — в гайде про проекты в чате.
| Параметр | Артефакт | Проект |
|---|---|---|
| Что это | Одна самодостаточная страница | Приложение из многих файлов с сервером |
| Интернет внутри | Нет, сеть заблокирована | Есть: npm и CDN работают |
| Размер | До 1 МБ на версию | До 100 файлов, файл до 512 КБ, всего до 5 МБ, до 20 версий |
| Сколько стоит | Ничего сверх обычного ответа модели | 1 нейрон за минуту работы песочницы |
| На каких тарифах | На всех, включая бесплатный | От «Старта»: 30 минут в сутки, Стандартный 60, PRO 90, Ultra 180, командные 240; на бесплатном недоступны |
| Как показать другим | html и svg — по ссылке, получателю регистрация не нужна | Запущенное приложение живёт 60 минут на e2b.app, есть выгрузка zip |
| Где включается | В чате | Только в режиме «Задачи» |
Какую модель брать под вайбкодинг
В каталоге 95 активных моделей, и видно их по-разному: бесплатный тариф показывает 52, «Старт» и «Стандартный» — 81, PRO и выше — все 95. Начинать проще с той, что уже стоит по умолчанию: Gemini 3.7 Flash доступна на бесплатном тарифе, а контекста в 1 048 576 токенов хватает, чтобы держать в голове целую страницу вместе с историей правок — как её выжимать, разобрано в гайде про Gemini 3.7 Flash.
Из бесплатного набора для кода полезен ещё Qwen3.8 Max — про него есть отдельный разбор Qwen 3.8 для программирования. С тарифа «Старт» открываются Claude Sonnet 5 и GPT-5.6 Terra; первый чаще берут под длинную логику и рефакторинг — см. Claude Sonnet 5 для кода. Общее сравнение — в материале про нейросеть для кода.
Если ковыряться в каталоге из 95+ моделей не хочется, включите в селекторе режим «Лайт»: вместо списка он показывает сценарии. В «Задачах» их шесть — Универсальный агент, Сложные проекты, Код и разработка, Документы и файлы, Исследования, Экономный агент. Как выбрать под себя, написано в гайде какую модель выбрать, а как не сжечь нейроны на черновиках — в разборе как тратить меньше нейронов.
Первый заход: пять минут и один промпт
- Зарегистрируйтесь и откройте чат. Для артефактов хватит бесплатного тарифа: он стоит 0 ₽, и артефакты на нём не урезаны.
- Оставьте режим «Чат» и модель по умолчанию — Gemini 3.7 Flash. Она доступна на бесплатном тарифе, а контекста в 1 048 576 токенов для одной страницы хватает с запасом.
- Вставьте промпт ниже целиком, одним сообщением, и отправьте.
- Дождитесь, пока откроется панель артефакта. Её ширину можно тянуть мышью, платформа запомнит; в док-режиме панель встаёт рядом с чатом, чат сжимается и остаётся рабочим.
- Проверьте расчёт на двух-трёх примерах, где ответ знаете заранее.
- Скажите обычными словами, что поправить. Каждая правка — новая версия, к прежней можно вернуться.
- Готовое отправьте ссылкой: html открывается у получателя без регистрации, а в мессенджере к ссылке подтянется картинка-превью.
Промпт для первого артефакта — вставьте целиком
Сделай артефакт: одностраничный калькулятор стоимости заказа для небольшой типографии.
Что должно быть:
— поля: тираж (шт.), цена за штуку (руб.), скидка (%), срочность (обычная / за 3 дня / за сутки);
— срочность добавляет наценку: обычная 0%, за 3 дня +15%, за сутки +40%;
— итог пересчитывается сразу при изменении любого поля, без кнопки «посчитать»;
— рядом с итогом разбивка: база, скидка, наценка за срочность;
— кнопка «Скопировать расчёт» кладёт текст сметы в буфер обмена.
Технические требования:
— один самодостаточный html-файл, все стили и скрипты внутри;
— никаких обращений в интернет: внешние ссылки, CDN и картинки по URL не использовать;
— деньги считать через decimal.js, не через обычные дробные числа, округление до копеек;
— интерфейс на русском, аккуратные отступы, нормально читается на телефоне.
Сначала одним абзацем опиши, что именно соберёшь, потом делай.Промпт выше собран по простой схеме: сначала что должно получиться, потом технические ограничения, потом просьба сначала описать план словами и только потом писать код. Последний пункт экономит больше всего времени — расхождение в понимании видно в одном абзаце, а не в готовом файле. Та же схема работает и для страниц посложнее, её развёрнутый вариант — во фреймворке ТЗ на лендинг.
Где вайбкодинг ломается
Первое и главное: он не заменяет понимание задачи. Модель хорошо пишет код и никак не может знать, что скидка у вас считается от суммы без НДС, а наценка за срочность не складывается с оптовой ценой. Она соберёт ровно то, что вы сказали, — и если сказано было расплывчато, результат будет уверенно расплывчатым. Заметная часть времени в вайбкодинге уходит не на код, а на то, чтобы самому додумать условия.
Второе: на сложной логике модель врёт уверенно. Интерфейс выглядит опрятно, кнопки нажимаются, а формула внутри неверна — заметить это можно, только проверив расчёт руками. Особенно больно с деньгами: в обычных дробных числах копейки уплывают, поэтому для сумм просите decimal.js и сверяйте итог на примерах, где ответ известен заранее.
Третье: отладка чужого кода тяжелее написания. Пока страница помещается в голову, «почини вот это» работает. Когда файл разросся, а баг плавает, вы оказываетесь в роли человека, который правит незнакомый проект, — а модель на каждой итерации меняет чуть больше, чем вы просили. Лечится тем, что задачу режут на куски и каждый доводят отдельно; типичные грабли собраны в разборе ошибок вайбкодинга.
Кому подходит, а кому нет
- Подходит, если нужен работающий прототип, чтобы объяснить идею заказчику, команде или самому себе.
- Подходит аналитику, маркетологу, продакту: одноразовые считалки и дашборды дешевле собрать самому, чем ставить в очередь на разработку.
- Подходит разработчику как ускоритель черновиков: набросок интерфейса, разовый скрипт, демо к обсуждению.
- Не подходит, если нужен сервис с оплатой, пользователями и базой данных, который работает постоянно, — это уже настоящая разработка и настоящий хостинг.
- Не подходит, если результат некому проверить: там, где ошибка в расчёте стоит денег, кто-то должен уметь прочитать формулу.
- Спорно для обучения: формулировать задачи вы точно научитесь, а программировать — нет. Начать удобнее с пошагового захода в вайбкодинг с нуля.
Сколько это стоит
- Артефакты доступны на всех тарифах, включая бесплатный, и не стоят нейронов сверх обычного ответа модели.
- Бесплатный: 100 нейронов один раз при регистрации (не ежемесячно), 52 модели из 95, 3 агента, 2 базы знаний, 15 сообщений к платным моделям каждые 4 часа, 2 генерации MediaLab. Бесплатные модели не тратят ни нейронов, ни лимита сообщений. Проектов и поиска в интернете нет.
- Старт, 890 ₽: 300 нейронов, 81 модель, 5 агентов, 5 баз знаний, 50 сообщений и 10 генераций каждые 4 часа, поиск в интернете, 30 минут проектов в сутки — подробности в разборе тарифа «Старт».
- Стандартный, 2 690 ₽: 750 нейронов, 81 модель, 40 агентов, 150 сообщений и 20 генераций каждые 4 часа, 60 минут проектов в сутки.
- PRO, 4 990 ₽: 1 650 нейронов, все модели каталога, 60 агентов, 20 баз знаний, без лимита сообщений, 90 минут проектов.
- Ultra, 9 990 ₽: 3 350 нейронов, 100 агентов, 2 места, 180 минут проектов. Нейрон стоит примерно 3 ₽; что брать под свои задачи — в гайде какой тариф выбрать.
Проверить всё это можно на бесплатном тарифе: артефакты там работают целиком — со ссылкой для показа, историей версий и всеми локальными библиотеками, упереться можно только в 15 сообщений к платным моделям каждые 4 часа. Зарегистрируйтесь, вставьте промпт выше и посмотрите на результат через минуту. Если втянетесь, следующая ступень — «Старт» за 890 ₽: 300 нейронов, поиск в интернете и первые 30 минут проектов в сутки.
