🎧 Vibe Coding
Vibe coding — стиль программирования, где вы описываете желаемый результат обычными словами, а AI пишет код. Вы не вчитываетесь в каждую строку, а идёте «по вайбам»: смотрите на результат, просите доработать, повторяете.
// ToonSpace · Cправочник
Как решать задачи с помощью AI-агентов: от простых определений до инструментов и стека. Путь сверху вниз — листай.
$ whoami
toonspace-employee
$ claude "автоматизируй мою рутину"
✓ готово. читай дальше, чтобы понять как
шаг 01 / 07
Стиль программирования, где интерфейсом к коду становится естественный язык
Vibe coding — стиль программирования, где вы описываете желаемый результат обычными словами, а AI пишет код. Вы не вчитываетесь в каждую строку, а идёте «по вайбам»: смотрите на результат, просите доработать, повторяете.
Один «брошенный на ходу» твит Karpathy в феврале 2025 собрал миллионы просмотров и за считанные месяцы стал главным buzzword индустрии. К концу 2025 термин вышел за пределы Silicon Valley: Collins Dictionary назвал «vibe coding» словом года 2025. Вместе с хайпом растёт и критика: лёгкость входа для непрограммистов соседствует с рисками безопасности и поддерживаемости кода.
Simon Willison в «Not all AI-assisted programming is vibe coding» проводит ключевую границу: настоящий vibe coding — принимать код, не читая его, и это нормально лишь для низкорисковых задач; профессиональная разработка с AI требует понимать, тестировать и ревьюить код.
шаг 02 / 07
Кто ты, когда вайб-кодишь и правила в ToonSpace
Человек, который ничего не знает о коде и не отвечает за него — им движет только желание решить свою задачу. Это легитимный уровень: вайб-кодинг отлично подходит для прототипов, личных утилит и автоматизации мелких рутин. Ты описываешь словами, что хочешь, а AI генерирует работающий код — можно «довериться вайбу» и забыть, что код вообще существует. Главное — граница: это здорово для throwaway-проектов и экспериментов, но плохо там, где важны безопасность, данные пользователей или деньги.
Человек, который знает код и ОБЯЗАН следовать правилам структуры и ответственности. Инженер не просто принимает то, что написал AI, — он ревьюит результат, понимает каждую строку, владеет им (owns it) и соблюдает стандарты команды. Ключевая мысль индустрии: ответственность всегда на человеке — тот, кто закоммитил AI-код, отвечает за него так же, как за написанный руками.
В ToonSpace оба уровня — и вайб-кодер, и инженер — обязаны знать гайдлайны компании. Это не бюрократия, а общий язык: как трекать задачи, вносить изменения и версионировать.
Вайб-кодинг даёт огромную силу: в одиночку можно решить МАССУ задач и многое автоматизировать. Но решать сложную задачу в одиночку вайб-кодингом — не всегда лучший вариант, и у этого есть конкретная цена:
$5 за 1M входных токенов и $25 за 1M выходных;$3 / $15; $1 / $5.Два сценария:
Сложная задача. Большая фича может «сжечь» сотни долларов токенов за множество итераций — и выдать неподдерживаемый код, который потом дороже переписать, чем написать заново. Здесь инженер часто решает задачу правильнее и дешевле в перспективе.
Простая автоматизация. Разовый скрипт стоит центы токенов и заменяет часы ручной работы — тут вайб-кодинг почти всегда выигрывает. Правило: чем выше сложность и цена ошибки, тем больше нужен инженер; чем проще и одноразовее задача — тем смелее вайб-кодь.
Это главное правило компании. Процесс в трёх шагах:
1. Всегда пиши промпты для своих задач и нужд.
2. Покажи их менеджеру и техкоманде.
3. Решите вместе, кто исполнит твой промпт — Human или AI.
Зачем: написанный промпт — это спецификация (spec). Он заставляет чётко сформулировать мысль ещё до работы и позволяет команде направить задачу нужному исполнителю.
шаг 03 / 07
LLM, агенты и Markdown — что внутри у AI-инструментов
LLM (Large Language Model, большая языковая модель) — математическая функция, которая предсказывает следующий токен (кусочек слова) на основе всего текста до него. Модель обучают на гигантских объёмах текста, и она учится закономерностям языка: какое продолжение вероятнее. Никакой магии — статистика и вероятности в огромном масштабе. Ответ собирается по одному токену за раз: предсказали — добавили — предсказываем следующий.
Context window (контекстное окно) — всё, что модель «видит» прямо сейчас: системный промпт, история переписки и текущий вопрос. За пределами окна у модели нет памяти — закончился диалог, и она ничего «не помнит».
System prompt — инструкции в самом начале, задающие рамку всему разговору: роль модели, тон, формат ответа, ограничения. Нюанс: чем больше текста в контексте, тем дороже запрос и тем сильнее «плывёт» точность (context rot), поэтому в окно стоит класть только нужное.
Prompt engineering — навык писать запросы так, чтобы стабильно получать нужный результат. Базовые приёмы: будь конкретным, давай примеры (few-shot), задавай роль, чётко описывай формат вывода и структурируй инструкции (например, через XML-теги). Хороший промпт убирает двусмысленность — модель не угадывает, а делает ровно то, что нужно.
Token (токен) — минимальный кусочек текста, которым оперирует модель: примерно
~4 символа или ~0.75 слова в английском (грубое правило).
Русский текст «стоит» больше токенов на слово, чем английский, потому что разбивается на более мелкие куски.
Оплата и лимиты считаются в токенах: отдельно input (всё, что вы отправили) и output (всё, что сгенерила модель).
No-Code — создание автоматизаций и приложений вообще без написания кода. Классический пример — n8n: визуальный конструктор, где вы перетаскиваете ноды (блоки) и соединяете их стрелками, описывая поток данных между сервисами.
Типичные задачи: интеграции между системами (CRM, таблицы, мессенджеры), боты, автоматизации, AI-агенты. Логика собирается мышкой, а не в редакторе кода — стартовать может почти кто угодно.
Low-Code — в основном визуальная сборка, но с возможностью вставить кусочек кода там, где нужно. Подходит, когда no-code уже не тянет, а полноценный проект на коде — слишком.
Примеры:
Retool (внутренние инструменты и админки для команд),
Airtable (база данных с интерфейсом, что-то между Excel и приложением).
Code — полный контроль: вы (или AI под вашим управлением) пишете настоящий код в настоящем репозитории. Vibe coding размывает границу: естественный язык становится интерфейсом к настоящему коду — вы описываете задачу словами, а AI пишет и правит реальный код.
Чат отвечает на одно сообщение за раз: ты спрашиваешь — он отвечает, и на этом всё.
Агент работает в цикле: держит Context (всё, что знает о задаче и файлах), Memory (помнит прошлые шаги) и крутит Loop — читает файлы, вносит правки, запускает тесты, смотрит на результат и повторяет, пока задача не выполнена.
Главное отличие: агент сам управляет процессом и использует инструменты (tools), а не просто генерирует текст. Триада, которую стоит запомнить: Context, Memory, Loop.
Семейство инструментов от Anthropic.
Claude — чат в браузере и Desktop-приложение: общение, работа с документами, проекты.
Claude Code — agentic-инструмент для кода: живёт в терминале, VS Code, JetBrains, Desktop-приложении и в браузере, читает весь codebase, правит файлы, запускает команды и git.
Два разных продукта: первый — для разговоров, второй — чтобы реально выполнять задачи в проекте.
Codex — coding-агент от OpenAI. Open-source CLI на Rust, который запускается локально в терминале и умеет читать, менять и запускать код в выбранной папке. Есть облачная версия, расширения для VS Code/Cursor и доступ через ChatGPT (планы Plus, Pro, Business, Enterprise). По сути прямой конкурент Claude Code.
OpenClaw — open-source персональный AI-ассистент, который запускается на твоей машине (Mac, Windows, Linux) и живёт прямо в мессенджерах: WhatsApp, Telegram, Discord, Slack, Signal и других. Управляешь им текстом из чата: он запускает команды, ходит в браузер, читает и пишет файлы, ведёт календарь и почту, а главное — обладает persistent memory и помнит контекст неделями.
Кроме Claude Code и Codex рынок большой. Gemini CLI — open-source терминальный агент от Google с поддержкой MCP. GitHub Copilot — давно не просто автодополнение: в agent mode сам планирует, открывает PR, отвечает на ревью и гоняет тесты. Cursor — AI-редактор кода со встроенным агентом и «ползунком автономности» (от Tab-дополнения до полностью самостоятельной работы).
У AI-инструментов три модели оплаты.
Chat - очень дешево, но AI, обучается на ваших данных.
Subscription — фиксированная сумма в месяц (например, Claude Pro или Max); предсказуемо и выгодно при регулярном использовании.
Token only — платишь только за реально использованные API-токены (input + output); удобно для нерегулярной нагрузки и автоматизаций, но без потолка расходов. Extra usage — подписка плюс доплата за превышение лимита; компромисс, когда базовой подписки иногда не хватает.
Правило: подписка выгоднее при регулярной ежедневной работе, API — для скриптов и автоматизаций.
Markdown — язык простой текстовой разметки. Ты пишешь обычный текст и добавляешь
несколько символов для форматирования: # Заголовок, **жирный**, - пункт списка,
ссылки в виде [текст](url). Файлы — просто текст с расширением .md, открывается в любом
редакторе. Никаких скрытых форматов, как у Word: всё видно глазами прямо в исходнике.
Вот как выглядит небольшой кусочек Markdown в исходнике:
# Заголовок проекта
Это **важный** абзац с `кодом` внутри.
## Список задач
- первый пункт
- второй пункт
- [ссылка на сайт](https://example.com)
Слева — то, что ты печатаешь, а любой редактор покажет это уже красиво отформатированным.
Markdown одинаково хорошо читается и людьми, и машинами — поэтому это, по сути,
основной язык всей AI-экосистемы. На нём пишут промпты, файлы инструкций вроде CLAUDE.md
и AGENTS.md, документацию и README. Плюс он дружит с git: это обычный текст, изменения
видны в diff построчно, легко ревьюить и хранить историю. Один формат — и для заметок,
и для документации, и для общения с агентами.
Писать Markdown можно где угодно, но удобнее в специальных редакторах.
Obsidian — локальная база знаний, бесплатна для личного использования, хранит всё
в .md-файлах у тебя на диске.
Typora — минималистичный редактор с live-preview.
Ещё Markdown «из коробки» отлично показывает VS Code через встроенный preview.
шаг 04 / 07
Папки, Git и инструкции, которые читает агент
AI-агент читает проект как инструкцию: чем аккуратнее организованы папки, тем точнее он работает. Хорошо структурированная папка — это и есть промпт. На примере проекта для Claude Code:
project/
├── CLAUDE.md # инструкции для агента
├── .claude/ # rules, skills, agents, настройки
├── src/ # сам код
└── README.md # описание для людей
Агент читает CLAUDE.md в начале каждой сессии — держите его коротким, конкретным
и свежим.
Git — система контроля версий: хранит историю каждого изменения — кто, когда и зачем что-то поправил. Благодаря этому можно смело экспериментировать и в любой момент откатиться к рабочей версии. С AI-агентами Git особенно важен: каждое изменение ИИ можно отдельно посмотреть, принять или отменить.
Команды Git запоминать не обязательно — есть графические приложения, где всё делается мышкой. GitHub Desktop — самый простой для начинающих. Работа с Git встроена и прямо в основные редакторы: вкладка Source Control в VS Code (и Cursor).
Четыре способа настроить поведение AI-агента, на примере Claude Code.
Rules — постоянные инструкции, которые агент держит в голове всегда (CLAUDE.md и файлы
в .claude/rules).
Skills — переиспользуемые «рецепты» для задач: вызываются командой /имя и подгружаются
только при необходимости.
Hooks — скрипты, которые запускаются автоматически на события (например, перед коммитом или после правки файла) — срабатывают всегда, без участия ИИ.
Subagents — вспомогательные агенты со своим контекстом: им делегируют побочную работу, чтобы не засорять основной диалог.
шаг 05 / 07
Терминал, пакетные менеджеры, редакторы и скрипты
Терминал — текстовый интерфейс к системе: ты печатаешь команды, и компьютер их выполняет.
Именно здесь живут CLI-агенты вроде Claude Code. На macOS и Linux из коробки есть
базовые Unix-утилиты: ls (список файлов), cd (перейти в папку), cat (показать файл),
grep (найти текст).
Пакетный менеджер — «магазин приложений для разработчиков»: любой инструмент ставится одной командой, без ручного скачивания.
На macOS стандарт — Homebrew: brew install <название>.
На Windows встроен winget: winget install <название>.
А npm — менеджер пакетов для JavaScript: через него ставятся библиотеки и инструменты для веб-разработки.
Редактор — место, где код живёт на экране: подсветка синтаксиса, поиск по проекту, работа с Git.
Cursor — редактор с AI в основе, заточен под агентов.
VS Code — бесплатный стандарт индустрии с огромным набором расширений.
Zed — быстрый и современный 💗.
Neovim — выбор тех, кто любит работать прямо в терминале клавиатурой.
Скрипт — небольшой текстовый файл с командами, которые компьютер выполняет сверху вниз,
одну за другой (.sh для shell, .ts через npx или bun и т.д.). Это простейшая форма
автоматизации: то, что вручную делал бы десять раз, скрипт делает одним запуском. И это
идеальная задача, чтобы попросить AI написать его за тебя — а потом просто запустить.
шаг 06 / 07
Как AI-инструменты подключаются к внешнему миру
Два разных вопроса, которые легко перепутать.
Authentication (аутентификация) — это «кто ты?»: вход, где сервис проверяет личность по паролю, ключу или OAuth-логину.
Authorization (авторизация) — это «что тебе можно?»: права и разрешения, определяющие доступ к данным и действиям.
Подключая AI-инструмент к сервису (Google Drive, Slack), ты обычно проходишь оба:
через OAuth-flow сначала логинишься, затем выдаёшь агенту ограниченный
набор прав (scopes) — например, «только чтение файлов».
API keys, access tokens и secrets — это «пароли для программ». Они доказывают сервису, что запрос пришёл от тебя, и позволяют AI-агенту действовать от твоего имени: читать почту, коммитить код, постить в чат.
Правила гигиены:
никогда не коммить их в git,
хранить в .env (добавленном в .gitignore),
выдавать минимум прав и сразу ротировать (выпускать заново) при утечке.
Всё, что может сделать агент с токеном, сможет и любой, кто его украдёт.
API (Application Programming Interface) — способ, которым программы общаются: одна отправляет request (запрос), другая возвращает response (ответ), обычно поверх HTTP. Аналогия — официант в ресторане: делаешь заказ, не зная устройства кухни, и получаешь блюдо. Почти всё, что AI-инструменты делают с внешними сервисами — получают данные, создают задачи, отправляют сообщения — проходит через API.
JSON (JavaScript Object Notation) — универсальный формат данных, на котором «говорят»
почти все API. Просто текст, понятный человеку и машине, из пар "ключ": "значение":
{
"name": "Bat Hero",
"powers": ["fly", "stealth"],
"level": 7
}
AI-модели читают и пишут JSON «нативно» — так инструменты обмениваются данными, а агент понимает, какие функции вызвать и с какими аргументами.
MCP (Model Context Protocol) — открытый стандарт от Anthropic позволяющий AI-агентам подключаться к внешним инструментам и источникам данных. Его называют «USB-C для AI»: единый разъём вместо десятков самописных интеграций.
CLI (Command Line Interface) — программы, запускаемые текстовыми командами в терминале, а не кликами мышкой.
Это самый дружелюбный к AI вид инструментов: агент запускает любой CLI, читает текстовый вывод и реагирует — ставит пакет, проверяет тесты, коммитит код.
Команды, которые агент использует постоянно: git (версионирование), gh (GitHub
из терминала), npx (запуск npm-пакетов).
шаг 07 / 07
На чём строит ToonSpace
JavaScript работает везде: в браузере и на сервере. Если в интернете что-то двигается и кликается — почти наверняка под капотом JavaScript.
React собирает интерфейс из небольших переиспользуемых компонентов (кнопка, карточка,
меню), как из конструктора. Tailwind CSS — подход к оформлению: вместо отдельных файлов
стилей вы пишете готовые классы-утилиты прямо в разметке (flex, text-center, pt-4).
Эта пара — фактический стандарт индустрии, и это важно для vibe coding: AI-модели обучены на огромном количестве кода именно с React и Tailwind, поэтому генерируют его точнее.
Front-end — всё, что работает в браузере: то, что человек видит и с чем взаимодействует. Пример: страница комикса, кнопки, анимации.
Back-end — то, что работает на серверах и скрыто от глаз: хранение данных, бизнес-логика, API. Пример: база с комиксами и проверка, оплатил ли пользователь подписку. Правило: front-end показывает, back-end решает и хранит.
Агентный цикл (code-loop) — это как работает AI-агент: написать код → запустить → увидеть ошибки → исправить → повторить, пока всё не заработает.
Тесты делают цикл надёжным: агент сам проверяет результат, а не верит «на слово».
Playwright управляет настоящим браузером — открывает страницу, кликает кнопки, заполняет формы — поэтому AI-агенты используют его, чтобы реально «видеть» и тестировать приложение, как живой пользователь.
Coding Standards — общие правила, по которым пишется код, чтобы он везде выглядел одинаково, кто бы его ни написал: человек или AI. У нас за основу взят Google TypeScript Style Guide. Главная идея для vibe coding: записанный стандарт — это готовый промпт, которому AI может следовать. А инструменты Prettier (форматирование) и oxlint (проверка ошибок) автоматически следят, чтобы правила соблюдались.