«Вайб-кодинг» = ты описываешь задачу обычным языком, ИИ-агент сам пишет/правит файлы и запускает команды, ты проверяешь результат. Эта связка — бесплатная (или почти): редактор бесплатный, модель — либо free-уровень OpenRouter, либо локальный Ollama (0 ₽).
🧭 Картина целиком
Что получишь на выходе: редактор VS Code, в котором живёт ИИ-агент. Ты пишешь «сделай страницу логина с валидацией почты» — агент сам создаёт/редактирует файлы, запускает команды в терминале, может открыть браузер и проверить результат. Ты выступаешь как ревьюер: читаешь предложенные изменения и жмёшь «принять» или «отклонить».
Связка из трёх частей:
- Редактор + агент — VS Code и расширение-агент (руки и глаза в проекте).
- «Мозг» (модель) — бесплатно: либо облачный OpenRouter (free-модели), либо локальный Ollama (приватно, офлайн).
- MCP-инструменты — дают агенту доступ к файлам, актуальным докам, браузеру (см. гайд «Подключить MCP»).
💡 Это «бесплатный младший брат» платных Cursor/Claude Code. Слабее на сложной архитектуре, но для учёбы, прототипов и рутины — отлично, и за это не платишь.
Шаг 1. Поставить редактор и агента
Что делаем: ставим VS Code и расширение-агента.
- Установи VS Code (бесплатно): https://code.visualstudio.com — скачай под свою ОС, запусти.
- В VS Code открой вкладку Extensions (
Ctrl/Cmd+Shift+X), найди и поставь ИИ-агента. Хорошие бесплатные/открытые:- Cline — автономный агент: правит файлы, запускает терминал, ставит MCP. Спрашивает подтверждение перед действиями.
- Roo Code — форк Cline с режимами (Architect / Code / Ask) под разные задачи.
- Continue — гибкий, легко цепляется к Ollama и OpenRouter.
Как понять, что ОК: в левой панели VS Code появилась иконка агента (напр. робот Cline). Клик — открывается чат-панель агента.
Частые ошибки:
- Поставил не то расширение (их много с похожими именами) — сверяйся с издателем и числом установок.
- Открыл VS Code «просто так», без папки проекта → агенту негде работать. Сначала File → Open Folder и выбери папку проекта.
Шаг 2 (вариант А). Дать агенту «мозг» через OpenRouter (бесплатно)
Что делаем: подключаем облачную модель с бесплатным уровнем.
- Заведи ключ на https://openrouter.ai → раздел Keys → создай ключ (строка
sk-or-...). - В настройках агента выбери провайдера OpenRouter, вставь ключ.
- Выбери модель с суффиксом
:free(OpenRouter держит набор бесплатных моделей — напр.deepseek/deepseek-r1:free,qwen/...:free). У free-моделей есть лимиты запросов в сутки — это норма для старта.
Как понять, что ОК: напиши агенту «привет, какая ты модель?» — приходит ответ. Значит ключ и модель подхватились.
Частые ошибки:
401 / invalid api key— ключ скопирован с пробелом/не полностью, или вставлен не в то поле. Пересоздай и вставь заново.429 / rate limit— упёрся в дневной лимит бесплатной модели. Подожди или переключись на другую:free-модель.- Модель без суффикса
:free— платная, спишет с баланса. Проверяй название.
Шаг 2 (вариант Б). Полностью локально и приватно — Ollama
Что делаем: подключаем локальную модель — без оплаты и без утечки кода наружу.
- Поставь Ollama (см. гайд «Запуск локальной модели») и скачай модель:
ollama pull qwen3. - В агенте выбери провайдера Ollama (или «OpenAI-совместимый» с base-URL
http://localhost:11434/v1, ключ — любой непустой текст). - Укажи имя модели ровно как в
ollama ls(напр.qwen3).
Как понять, что ОК: агент отвечает на «привет» без интернета. Код-ассистент работает офлайн и приватно.
Частые ошибки:
connection refusedна 11434 — Ollama не запущена (см. её гайд:ollama serve/ открыть приложение).- Имя модели не совпало с
ollama ls— агент шлёт несуществующую модель, ошибка 404. - Слабое железо → агент думает очень долго. Возьми модель полегче (
qwen3:1b/llama3.2) или используй вариант А (OpenRouter).
Шаг 3. Подключить MCP (руки агента: файлы, доки, браузер)
Что делаем: даём агенту инструменты через MCP. Базовый набор для вайб-кодинга:
- Filesystem — читать/писать файлы проекта.
- Context7 — подтягивать актуальную документацию библиотек (меньше «галлюцинаций» по API).
- Playwright — открыть браузер и проверить, что веб-флоу реально работает.
В Cline/Roo есть кнопка MCP Servers → «добавить сервер»; формат тот же command/args/env, что и в гайде «Подключить MCP к Claude/Cursor». Проверить, что сервер вообще запускается, можно вручную:
npx -y @upstash/context7-mcp # должен стартовать без ошибок (Ctrl+C — выйти)
Как понять, что ОК: в панели MCP агента сервер горит зелёным/«connected», у агента появились новые инструменты (например, «read file», «open browser»).
Частые ошибки:
- Нет Node.js →
npxне находится. Поставь Node LTS с nodejs.org, перезапусти VS Code. - Сервер «красный» — опечатка в
command/argsили нет интернета дляnpx. Сверь конфиг с гайдом по MCP.
Шаг 4. Рабочий цикл
Что делаем: крутим петлю «задача → план → правки → проверка».
- Опиши задачу словами: «Сделай страницу логина с валидацией почты и кнопкой Войти».
- Агент предложит план и конкретные правки файлов — читай diff перед «Approve» (это твоя ответственность).
- Дай ему запустить проект и проверить (через Playwright MCP — прямо в браузере).
- Не получилось — приложи текст ошибки, попроси починить. Повторяй до «зелёного».
Как понять, что ОК: файлы изменились так, как ты ждал; приложение запускается; нужный флоу работает в браузере.
Частые ошибки:
- Жмёшь «Approve» не глядя → агент тихо переписал не то. Всегда смотри, какие файлы и строки он меняет.
- Включил «auto-approve» на старте → агент выполняет команды без спроса. На старте держи подтверждения включёнными.
- Просишь слишком большую задачу одним сообщением → агент путается. Дроби: сначала разметка, потом логика, потом стили.
🧠 Для сеньора
- Модель под задачу: держи быструю дешёвую модель для рутины и сильную (
:freeR1/Qwen или платную) — для архитектурных кусков; переключай по ходу. Через OpenRouter удобно сравнивать модели на одном API. - Контекст-инженерия: дай агенту
README/ARCHITECTURE.md/правила репо как контекст; правила в.clinerules(Cline) / системные инструкции режима (Roo) экономят токены и держат стиль. - MCP-арсенал: добавь Git-MCP, БД-MCP (RO!), Sentry-MCP — агент сам читает логи/схему/ошибки. Не превышай разумное число активных тулзов, чтобы не размывать выбор.
- Гейты качества: проси прогонять
tsc --noEmit, линт и тесты после каждого блока; не принимай код без зелёного. Для веб-флоу — обязательный прогон в браузере (Playwright), не «на веру». - Локально для приватного: код под NDA — только через Ollama; для тяжёлых рассуждений локально нужен сильный GPU, иначе медленно.
⚠️ Предупреждения
- Агент выполняет команды на твоей машине. Включи подтверждение перед действиями (auto-approve выключи на старте). Команды вроде
rm -rf, перезапись файлов,git push --force— необратимы; читай, что агент собирается запустить. - Prompt-injection. Не позволяй агенту вслепую выполнять инструкции из скачанных файлов и веб-страниц — там может быть спрятана команда «удали…/отправь ключи…». Особенно осторожно с MCP, тянущими внешний контент.
- Секреты. Не вставляй ключи/пароли в чат агента и в код в открытом виде — только через
.env(который в.gitignore). - Бесплатные модели слабее топовых: на сложной архитектуре ошибаются и уверенно «галлюцинируют». Проверяй вывод, не принимай код «на веру».
🆘 Промт-спасалка
Помоги настроить бесплатный вайб-кодинг в VS Code, объясняй по шагам.
МОЙ АГЕНТ: <Cline / Roo Code / Continue>.
МОЯ МОДЕЛЬ: <OpenRouter :free / локальный Ollama>.
МОЯ ОС: <macOS / Windows / Linux>. ЗАДАЧА ПРОЕКТА: <что делаю>.
Я ЗАСТРЯЛ: <что не работает / текст ошибки>.
Что делать:
1) Что поставить, где вставить ключ/base-URL, какую модель выбрать.
2) Как подключить MCP (Filesystem, Context7, Playwright) — точные команды/конфиг.
3) После каждого шага — как проверить, что работает.
4) Предупреди про auto-approve и безопасность (секреты, prompt-injection).
💎 Глубина и ценность
- Барьер входа в код рухнул. Раньше «написать приложение» = месяцы учёбы синтаксису. Сейчас ты описываешь задачу словами и проверяешь результат — а порог входа в саму идею «сделать свой инструмент» стал почти нулевым.
- Бесплатно = можно тренироваться без страха за счёт. Free-модели и локальный Ollama дают неограниченную практику: ошибся — переделал, и это ничего не стоило.
- Ты учишься быть ревьюером, а не машинисткой. Главный навык эпохи ИИ — не «печатать код», а ставить задачу, читать diff и проверять результат. Эта связка ставит именно его — и плавно ведёт к платным Cursor/Claude Code и к Laskoff OS (команда ИИ-агентов).