// ToonSpace · Cправочник

VIBE CODING_

Как решать задачи с помощью AI-агентов: от простых определений до инструментов и стека. Путь сверху вниз — листай.

$ whoami

toonspace-employee

$ claude "автоматизируй мою рутину"

✓ готово. читай дальше, чтобы понять как

начать путь

шаг 01 / 07

🤙 Что такое Vibe Coding?

Стиль программирования, где интерфейсом к коду становится естественный язык

🎧 Vibe Coding

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 оба уровня — и вайб-кодер, и инженер — обязаны знать гайдлайны компании. Это не бюрократия, а общий язык: как трекать задачи, вносить изменения и версионировать.

💸 Плюсы, минусы и цена

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

  • Claude Opus 4.8$5 за 1M входных токенов и $25 за 1M выходных;
  • Sonnet 4.6$3 / $15;
  • Haiku 4.5$1 / $5.

Два сценария:

Сложная задача. Большая фича может «сжечь» сотни долларов токенов за множество итераций — и выдать неподдерживаемый код, который потом дороже переписать, чем написать заново. Здесь инженер часто решает задачу правильнее и дешевле в перспективе.

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

🧭 Prompt Driven Development

Это главное правило компании. Процесс в трёх шагах:

1. Всегда пиши промпты для своих задач и нужд.

2. Покажи их менеджеру и техкоманде.

3. Решите вместе, кто исполнит твой промпт — Human или AI.

Зачем: написанный промпт — это спецификация (spec). Он заставляет чётко сформулировать мысль ещё до работы и позволяет команде направить задачу нужному исполнителю.

шаг 03 / 07

🧠 Как это работает?

LLM, агенты и Markdown — что внутри у AI-инструментов

## AI и LLM

🤖 LLM

LLM (Large Language Model, большая языковая модель) — математическая функция, которая предсказывает следующий токен (кусочек слова) на основе всего текста до него. Модель обучают на гигантских объёмах текста, и она учится закономерностям языка: какое продолжение вероятнее. Никакой магии — статистика и вероятности в огромном масштабе. Ответ собирается по одному токену за раз: предсказали — добавили — предсказываем следующий.

🪟 Context и System Prompt

Context window (контекстное окно) — всё, что модель «видит» прямо сейчас: системный промпт, история переписки и текущий вопрос. За пределами окна у модели нет памяти — закончился диалог, и она ничего «не помнит».

System prompt — инструкции в самом начале, задающие рамку всему разговору: роль модели, тон, формат ответа, ограничения. Нюанс: чем больше текста в контексте, тем дороже запрос и тем сильнее «плывёт» точность (context rot), поэтому в окно стоит класть только нужное.

✍️ Prompt Engineering

Prompt engineering — навык писать запросы так, чтобы стабильно получать нужный результат. Базовые приёмы: будь конкретным, давай примеры (few-shot), задавай роль, чётко описывай формат вывода и структурируй инструкции (например, через XML-теги). Хороший промпт убирает двусмысленность — модель не угадывает, а делает ровно то, что нужно.

🪙 Tokens

Token (токен) — минимальный кусочек текста, которым оперирует модель: примерно ~4 символа или ~0.75 слова в английском (грубое правило).

Русский текст «стоит» больше токенов на слово, чем английский, потому что разбивается на более мелкие куски.

Оплата и лимиты считаются в токенах: отдельно input (всё, что вы отправили) и output (всё, что сгенерила модель).

## Code? No-Code?

🧩 No-Code

No-Code — создание автоматизаций и приложений вообще без написания кода. Классический пример — n8n: визуальный конструктор, где вы перетаскиваете ноды (блоки) и соединяете их стрелками, описывая поток данных между сервисами.

Типичные задачи: интеграции между системами (CRM, таблицы, мессенджеры), боты, автоматизации, AI-агенты. Логика собирается мышкой, а не в редакторе кода — стартовать может почти кто угодно.

🛠️ Low-Code

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

Примеры:

  • Retool (внутренние инструменты и админки для команд),

  • Airtable (база данных с интерфейсом, что-то между Excel и приложением).

💻 Code

Code — полный контроль: вы (или AI под вашим управлением) пишете настоящий код в настоящем репозитории. Vibe coding размывает границу: естественный язык становится интерфейсом к настоящему коду — вы описываете задачу словами, а AI пишет и правит реальный код.

## Агенты

🔄 Агент vs Чат

Чат отвечает на одно сообщение за раз: ты спрашиваешь — он отвечает, и на этом всё.

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

Главное отличие: агент сам управляет процессом и использует инструменты (tools), а не просто генерирует текст. Триада, которую стоит запомнить: Context, Memory, Loop.

🧡 Claude

Семейство инструментов от Anthropic.

  • Claude — чат в браузере и Desktop-приложение: общение, работа с документами, проекты.

  • Claude Code — agentic-инструмент для кода: живёт в терминале, VS Code, JetBrains, Desktop-приложении и в браузере, читает весь codebase, правит файлы, запускает команды и git.

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

🦾 Codex

Codex — coding-агент от OpenAI. Open-source CLI на Rust, который запускается локально в терминале и умеет читать, менять и запускать код в выбранной папке. Есть облачная версия, расширения для VS Code/Cursor и доступ через ChatGPT (планы Plus, Pro, Business, Enterprise). По сути прямой конкурент Claude Code.

🐾 OpenClaw

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

📝 Что такое Markdown

Markdown — язык простой текстовой разметки. Ты пишешь обычный текст и добавляешь несколько символов для форматирования: # Заголовок, **жирный**, - пункт списка, ссылки в виде [текст](url). Файлы — просто текст с расширением .md, открывается в любом редакторе. Никаких скрытых форматов, как у Word: всё видно глазами прямо в исходнике.

👀 Пример

Вот как выглядит небольшой кусочек Markdown в исходнике:

# Заголовок проекта

Это **важный** абзац с `кодом` внутри.

## Список задач
- первый пункт
- второй пункт
- [ссылка на сайт](https://example.com)

Слева — то, что ты печатаешь, а любой редактор покажет это уже красиво отформатированным.

💡 Почему Markdown

Markdown одинаково хорошо читается и людьми, и машинами — поэтому это, по сути, основной язык всей AI-экосистемы. На нём пишут промпты, файлы инструкций вроде CLAUDE.md и AGENTS.md, документацию и README. Плюс он дружит с git: это обычный текст, изменения видны в diff построчно, легко ревьюить и хранить историю. Один формат — и для заметок, и для документации, и для общения с агентами.

🗂️ Редакторы

Писать Markdown можно где угодно, но удобнее в специальных редакторах.

  • Obsidian — локальная база знаний, бесплатна для личного использования, хранит всё в .md-файлах у тебя на диске.

  • Typora — минималистичный редактор с live-preview.

Ещё Markdown «из коробки» отлично показывает VS Code через встроенный preview.

шаг 04 / 07

🗂️ Структура проекта

Папки, Git и инструкции, которые читает агент

## Папки проекта и Git

📁 Структура проекта

AI-агент читает проект как инструкцию: чем аккуратнее организованы папки, тем точнее он работает. Хорошо структурированная папка — это и есть промпт. На примере проекта для Claude Code:

project/
├── CLAUDE.md        # инструкции для агента
├── .claude/         # rules, skills, agents, настройки
├── src/             # сам код
└── README.md        # описание для людей

Агент читает CLAUDE.md в начале каждой сессии — держите его коротким, конкретным и свежим.

🌳 Git

Git — система контроля версий: хранит историю каждого изменения — кто, когда и зачем что-то поправил. Благодаря этому можно смело экспериментировать и в любой момент откатиться к рабочей версии. С AI-агентами Git особенно важен: каждое изменение ИИ можно отдельно посмотреть, принять или отменить.

🖱️ Git GUI

Команды Git запоминать не обязательно — есть графические приложения, где всё делается мышкой. GitHub Desktop — самый простой для начинающих. Работа с Git встроена и прямо в основные редакторы: вкладка Source Control в VS Code (и Cursor).

⚙️ Rules, Skills, Hooks, Subagents

Четыре способа настроить поведение 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 и Authorization

Два разных вопроса, которые легко перепутать.

  • Authentication (аутентификация) — это «кто ты?»: вход, где сервис проверяет личность по паролю, ключу или OAuth-логину.

  • Authorization (авторизация) — это «что тебе можно?»: права и разрешения, определяющие доступ к данным и действиям.

Подключая AI-инструмент к сервису (Google Drive, Slack), ты обычно проходишь оба: через OAuth-flow сначала логинишься, затем выдаёшь агенту ограниченный набор прав (scopes) — например, «только чтение файлов».

🪙 Токены и credentials

API keys, access tokens и secrets — это «пароли для программ». Они доказывают сервису, что запрос пришёл от тебя, и позволяют AI-агенту действовать от твоего имени: читать почту, коммитить код, постить в чат.

Правила гигиены:

  • никогда не коммить их в git,

  • хранить в .env (добавленном в .gitignore),

  • выдавать минимум прав и сразу ротировать (выпускать заново) при утечке.

Всё, что может сделать агент с токеном, сможет и любой, кто его украдёт.

🔗 API

API (Application Programming Interface) — способ, которым программы общаются: одна отправляет request (запрос), другая возвращает response (ответ), обычно поверх HTTP. Аналогия — официант в ресторане: делаешь заказ, не зная устройства кухни, и получаешь блюдо. Почти всё, что AI-инструменты делают с внешними сервисами — получают данные, создают задачи, отправляют сообщения — проходит через API.

📦 JSON

JSON (JavaScript Object Notation) — универсальный формат данных, на котором «говорят» почти все API. Просто текст, понятный человеку и машине, из пар "ключ": "значение":

{
  "name": "Bat Hero",
  "powers": ["fly", "stealth"],
  "level": 7
}

AI-модели читают и пишут JSON «нативно» — так инструменты обмениваются данными, а агент понимает, какие функции вызвать и с какими аргументами.

🧩 MCP

MCP (Model Context Protocol) — открытый стандарт от Anthropic позволяющий AI-агентам подключаться к внешним инструментам и источникам данных. Его называют «USB-C для AI»: единый разъём вместо десятков самописных интеграций.

⌨️ CLI

CLI (Command Line Interface) — программы, запускаемые текстовыми командами в терминале, а не кликами мышкой.

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

Команды, которые агент использует постоянно: git (версионирование), gh (GitHub из терминала), npx (запуск npm-пакетов).

шаг 07 / 07

🧱 Стек

На чём строит ToonSpace

🟦 TypeScript и JavaScript

JavaScript работает везде: в браузере и на сервере. Если в интернете что-то двигается и кликается — почти наверняка под капотом JavaScript.

⚛️ React и Tailwind CSS

React собирает интерфейс из небольших переиспользуемых компонентов (кнопка, карточка, меню), как из конструктора. Tailwind CSS — подход к оформлению: вместо отдельных файлов стилей вы пишете готовые классы-утилиты прямо в разметке (flex, text-center, pt-4).

Эта пара — фактический стандарт индустрии, и это важно для vibe coding: AI-модели обучены на огромном количестве кода именно с React и Tailwind, поэтому генерируют его точнее.

🖥️ Front-end и Back-end

Front-end — всё, что работает в браузере: то, что человек видит и с чем взаимодействует. Пример: страница комикса, кнопки, анимации.

Back-end — то, что работает на серверах и скрыто от глаз: хранение данных, бизнес-логика, API. Пример: база с комиксами и проверка, оплатил ли пользователь подписку. Правило: front-end показывает, back-end решает и хранит.

🔁 Code-loop и тестирование

Агентный цикл (code-loop) — это как работает AI-агент: написать код → запустить → увидеть ошибки → исправить → повторить, пока всё не заработает.

Тесты делают цикл надёжным: агент сам проверяет результат, а не верит «на слово».

Playwright управляет настоящим браузером — открывает страницу, кликает кнопки, заполняет формы — поэтому AI-агенты используют его, чтобы реально «видеть» и тестировать приложение, как живой пользователь.

📐 Coding Standards

Coding Standards — общие правила, по которым пишется код, чтобы он везде выглядел одинаково, кто бы его ни написал: человек или AI. У нас за основу взят Google TypeScript Style Guide. Главная идея для vibe coding: записанный стандарт — это готовый промпт, которому AI может следовать. А инструменты Prettier (форматирование) и oxlint (проверка ошибок) автоматически следят, чтобы правила соблюдались.