Инструменты

Дата составления: 2026-08-31
Статус: 💡 Актуально

Суть

Существуют разные способы и инструменты для вайб-кодинга — от минимального порога входа к максимальным возможностям, приближающим вайб-кодера к профессиональному разработчику. Чем выше уровень, тем шире круг решаемых задач.

Отдельно стоит помнить: часть задач агенту можно поручить напрямую, вообще без написания программы, — об этом в статье Кодинг с агентами. Здесь же речь о способах именно создать программу.

Способ 1 — HTML прямо в чате

Инструменты: любая нейросеть

Как работает: Описываете задачу → нейросеть генерирует HTML-код → копируете его в файл с расширением .html → открываете в браузере.

Пример: Юрист сделал чек-лист проверки договора аренды — один .html-файл, открывается в браузере, пункты отмечаются галочками. Никаких серверов, никакой установки: отправил коллеге файл по почте — и все работает.

Что можно собирать этим способом:

• презентации, которые открываются в браузере без PowerPoint

• интерактивные меморандумы

• таймлайны, сравнительные таблицы с фильтрами, аналитические панели

• калькуляторы.

Разбор форматов, промптов к ним и проверки готового файла — в гайде Екатерины Чевычеловой, партнера Рунетлекс Академии:

Гайд по HTML для юристов.html (скачивается и открывается в браузере).

Что учесть: приложенные картинки у получателя не откроются — в код зашивается путь к файлу на вашем компьютере, а не сам файл. Черновые слайды, комментарии в коде и данные, из которых построены диаграммы, остаются внутри файла и видны получателю.

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

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

Способ 2 — Облачные конструкторы

Инструменты: Lovable, Bolt

Как работает: Описываете приложение в интерфейсе → платформа сама генерирует код, разворачивает сервер и дает ссылку на готовый сайт. Код можно не трогать вообще.

Пример: Юрист за вечер собрал кликабельный прототип личного кабинета клиента — как выглядят экраны, что куда нажимается, какие поля в форме — чтобы показать партнерам и подрядчику-разработчику вместо текстового ТЗ. В прототипе только вымышленные данные, боевую версию делают разработчики.

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

Порог входа: низкий — интерфейс похож на чат, деплой происходит автоматически.

Способ 3 — No-code автоматизация

Инструменты: Make.com, n8n, Zapier, Nodul, Botman.one

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

Пример: «Входящее письмо с документом → извлечь текст → отправить в GPT с задачей "определи, какой это из наших клиентов и проектов" → создать карточку в таск-трекере → прислать уведомление в Telegram». Настраивается как конструктор, без единой строчки кода.

Не подходит для: сложной бизнес-логики, работы с локальными файлами, задач, требующих кастомного кода.

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

Способ 4 — IDE + нейросеть: в браузере или внутри IDE

Инструменты: VS Code (или другой редактор) + любая LLM в браузере (Claude.ai, ChatGPT и т.д.)

Как работает: Пишете и редактируете код в VS Code, а рядом в браузере открыт чат с нейросетью. Вставляете код в чат, обсуждаете задачу, получаете готовый фрагмент — и вставляете обратно. Вы контролируете каждое изменение.

Пример: Python-скрипт для массовой проверки реквизитов контрагентов: загружает список из Excel, запрашивает данные, выдает сводку по каждому. Каждый новый блок логики обсуждался с LLM в браузере — код растет постепенно, по шагам.

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

Порог входа: средний — нужно установить IDE и язык программирования (чаще всего с использованием терминала).

Вариант того же способа: ИИ-ассистента можно поставить прямо в IDE — расширением (в VS Code это Copilot, Cline, Continue и другие; свои расширения для VS Code и JetBrains есть у Claude Code и Codex). Тогда ассистент видит открытые файлы сам и копипаст между окнами исчезает.

Способ 5 — Агентные среды разработки и CLI-харнессы

Инструменты: Claude Code, Codex, Cursor, Windsurf, Antigravity

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

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

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

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

Это уровень сегодня — самый эффективный способ вайб-кодить. Ему посвящена отдельная статья Кодинг с агентами.

Как выбрать

Совет: начинайте с самого простого способа, который решает задачу. Усложняйте только при необходимости.

Связанные статьи

• Кодинг с агентами — подробно про верхний, агентный ярус

• Фронтенд и бэкенд — типы кода и конфигурации проекта

• Организация работы — жизненный цикл проекта от ТЗ до дебага

• Глоссарий — деплой, бэкенд, агент, вебхук, вайб-кодинг

• Что такое агентный ИИ — как агент выполняет задачи самостоятельно, без участия пользователя на каждом шаге

• Агентные инструменты — Hermes, Claude Cowork, Perplexity Computer и кейсы из юридической практики

• Визуализация с ИИ — что собирают в HTML-формате и как формулировать запрос на визуал

Дополнительные материалы

• Lushbinary — сравнение 7 агентных IDE — Cursor, Windsurf, Claude Code, Copilot, Kiro, Antigravity, OpenAI Codex (март 2026)

• Гайд по HTML для юристов — Екатерина Чевычелова, партнер Рунетлекс Академии: форматы материалов, промпты, проверка файла и передача результата

Теги: #обзор #новичок #вайб-кодинг #инструменты