Claude Code в VS Code: Полный гид по созданию Telegram-ботов, сайтов и десктоп-приложений
Практический гайд по Claude Code в VS Code: настройка, работа с CLAUDE.md, создание нейро-ботов, лендингов, десктоп-софта и деплой на VPS через Docker.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Практическое руководство по настройке и использованию Claude Code внутри VS Code для создания работающих цифровых продуктов без навыков программирования. В видео показан полный цикл разработки: от правильной архитектуры контекста и выбора моделей до сборки и деплоя на VPS трех реальных проектов (нейросетевой Telegram-бот генерации картинок, маркетинговый лендинг с мокапами и Windows-транскрибатор аудио/видео).
👤 Кому будет полезно: Вайбкодерам, соло-фаундерам, маркетологам, продюсерам и создателям контента, которые хотят автоматизировать разработку, создавать софт своими руками и экономить бюджет на найме программистов.
✨ Что получите: Пошаговый алгоритм настройки рабочего окружения Claude Code, понимание режимов работы и управления лимитами токенов, готовые промпты для генерации проектов и безопасный способ контейнеризации и деплоя приложений на удаленный сервер через Docker.
1. Настройка окружения: Интеграция Claude Code в VS Code
Контекст: Claude Code не является отдельной программой с графическим интерфейсом — это агент, который внедряется в существующие среды разработки. Запускать его можно в терминале, в кодовом редакторе или в виде отдельного приложения. Для новичков и визуального контроля структуры файлов оптимальным выбором является редактор Visual Studio Code. Это позволяет в реальном времени наблюдать за создаваемыми файлами, кодом и терминальными процессами в едином окне.
Тайминг:
Выгода: Быстрый старт в привычном графическом интерфейсе без страха перед «черным окном» терминала, удобная навигация по файлам проекта.
Как применить:
Шаг 1: Установка редактора — VS Code] — Скачайте и установите Visual Studio Code с официального сайта под вашу операционную систему.
Шаг 2: Установка расширения — VS Code Marketplace] — Перейдите во вкладку Extensions (Ctrl+Shift+X / Cmd+Shift+X), найдите расширение Claude Code и нажмите «Install».
Шаг 3: Авторизация в аккаунте — Браузер / Anthropic] — Откройте боковую панель Claude Code, нажмите кнопку входа, подтвердите авторизацию в открывшемся браузере через оплаченный аккаунт Anthropic (Google/Email).
Результат: Рабочее окно VS Code с интегрированной боковой панелью AI-агента Claude Code, готовое к генерации кода.
2. Организация воркспейса и правило «Один проект — одна папка»
Контекст: Claude Code автоматически сканирует всё содержимое открытой рабочей директории для формирования контекста. Если держать в одной рабочей папке несколько проектов, AI-агент начинает путаться в файлах, подключать чужие зависимости и мгновенно сжигать доступные лимиты токенов. Четкая изоляция каждого проекта в отдельную папку на диске — базовое правило экономии бюджета и чистоты кодовой базы.
Тайминг:
Выгода: Экономия до 50–70% контекстных токенов в каждой сессии и предотвращение конфликтов между скриптами.
Как применить:
Шаг 1: Создание изолированной папки — Проводник / Finder] — Создайте чистую папку под конкретную задачу на рабочем столе или в рабочей директории (например, tg-bot).
Шаг 2: Открытие в редакторе — VS Code] — В верхнем меню выберите File -> Open Folder... и укажите созданную папку.
Шаг 3: Настройка интерфейса — VS Code] — Разверните чат Claude Code сбоку или перетащите его в удобную область экрана, закрыв неиспользуемые панели.
Результат: Чистый изолированный воркспейс, в котором агент видит только релевантные файлы текущего проекта.
3. Выбор режимов исполнения и оптимизация моделей (Sonnet vs Opus)
Контекст: Эффективность вайбкодинга зависит от двух настроек: режима автономности агента и используемой языковой модели. Claude Code предлагает несколько режимов: режим плана (Plan Mode), режим ручного подтверждения каждого шага, авто-режим с проверкой безопасности и полный авто-режим. Для стандартных задач и рутинного кодинга используется Claude 3.5/3.7 Sonnet, а для сложной архитектуры, UI/UX и нестандартной логики подключается Claude 3 Opus.
Тайминг:
Выгода: Баланс между скоростью работы и безопасностью (файлы не удаляются случайно) плюс экономия средств за счет своевременного переключения моделей.
Как применить:
Шаг 1: Настройка режима генерации — Панель Claude Code] — Для старта нового проекта выберите режим Plan (составление архитектуры без изменения файлов). После согласования структуры переключитесь в режим Auto / Auto-approve safe actions (агент правит код сам, но спрашивает разрешение на удаление файлов и системные настройки).
Шаг 2: Выбор модели под задачу — Настройки модели] — Установите по умолчанию модель Sonnet со средним уровнем глубины рассуждений (Reasoning Depth).
Шаг 3: Переключение на Opus для дизайна — Настройки модели] — Когда требуется разработать лендинг, сложную архитектуру или интерфейс с тонким визуальным вкусом, временно переключитесь на Opus, выполните задачу и вернитесь на Sonnet.
Результат: Контролируемый процесс разработки без риска случайного удаления системных файлов и без перерасхода дорогих лимитов на простых правках.
4. Долгосрочная память проекта: Создание файла CLAUDE.md
Контекст: Без системной памяти агент в каждом новом промпте или сессии заново сканирует весь проект и требует объяснения контекста. Файл CLAUDE.md служит постоянной памятью проекта. Claude Code читает его в начале каждой сессии, хранит в нем стек технологий, архитектуру, правила запуска и обновляет его самостоятельно по мере разработки.
Тайминг:
Выгода: Полное исключение повторного ввода вводных данных и экономия токенов при каждом последующем запросе.
Как применить:
Шаг 1: Включение режима планирования — Claude Code] — Переключите сессию в режим Plan.
Шаг 2: Отправка инициализирующего промпта — Чат] — Отправьте запрос на генерацию проекта с явным требованием создать CLAUDE.md:
Сделай Telegram бота, который генерирует картинки нейросетью. Создай CLAUDE.md коротко и без воды.
Шаг 3: Ответ на уточняющие вопросы — Чат] — Ответьте на вопросы агента о стеке (например, выбрать Python и Google AI Studio / Gemini API для генерации картинок).
Шаг 4: Подтверждение плана — Чат] — Ознакомьтесь с предложенным планом, переключитесь в режим Auto и дайте команду на выполнение:
Делай проект
Результат: В корне проекта создан структурированный файл CLAUDE.md, содержащий описание стека, архитектуру и инструкции, которые агент помнит всегда.
5. Сборка и локальное тестирование нейросетевого Telegram-бота
Контекст: После генерации кода приложение требует конфигурации переменных окружения (.env файл) — токена бота от Telegram и API-ключа генератора изображений. Вместо ручного создания и редактирования конфигов всеми процессами управляет агент по текстовому запросу пользователя. Ошибки при запуске не требуют ручного поиска — достаточно передать их текст или скриншот в чат.
Тайминг:
Выгода: Запуск работающего Telegram-бота за 5–10 минут без ручного написания boilerplate-кода.
Как применить:
Шаг 1: Получение токена бота — Telegram / @BotFather] — Напишите /newbot, укажите имя и уникальный username с окончанием _bot, скопируйте полученный API-токен.
Шаг 2: Создание конфигурационного файла — Claude Code] — Попросите агента создать .env на основе шаблона .env.example:
Создай .env сам
Шаг 3: Вставка API-ключей — VS Code] — Вставьте токен Telegram и полученный ключ Google Studio API (Gemini/Imagen) в соответствующие поля файла .env.
Шаг 4: Запуск и отладка — Claude Code] — Напишите в чат команду запуска:
Запусти проект
Шаг 5: Исправление ошибок — Claude Code] — Если бот падает при тесте команды генерации, скопируйте текст ошибки или сделайте скриншот терминала и отправьте в чат:
Бот выдал ошибку при генерации, посмотри логи и исправь: [вставить текст ошибки]
Результат: Полностью работоспособный локальный Telegram-бот на Python, генерирующий изображения по текстовому промпту пользователя.
6. Безопасный деплой проекта на VPS через Docker без утечки паролей
Контекст: Локально запущенный бот перестает работать при выключении компьютера. Для круглосуточной работы нужен удаленный сервер (VPS) и контейнеризация через Docker. Критическая ошибка новичков — отправка root-паролей от сервера напрямую в окно чата нейросети. Правильный подход — дать агенту подготовить Docker-контейнеры и SSH-команды, а авторизационные данные ввести локально через терминал операционной системы.
Тайминг:
Выгода: Бесперебойная работа сервиса 24/7 в изолированном контейнере с нулевым риском компрометации паролей от сервера.
Как применить:
Шаг 1: Аренда сервера — Панель хостинга] — Закажите облачный сервер (ОС: Ubuntu, локация: например, Амстердам для стабильной работы внешних API, с публичным IPv4-адресом).
Шаг 2: Запрос на подготовку деплоя — Claude Code] — Скопируйте строку подключения к серверу и напишите агенту:
Помоги поставить проект на хостинг через Dockerfile. Вот данные сервера: [IP / строка подключения]. Передай команду для авторизации отдельно через терминал, пароль в чат писать не будем.
Шаг 3: Авторизация через системный терминал — Терминал / CMD] — Откройте командную строку Windows/Mac, вставьте предложенную SSH-команду, подтвердите подключение (yes) и вставьте пароль от сервера правой кнопкой мыши (символы не отображаются — нажмите Enter).
Шаг 4: Запуск сборки агентом — Claude Code] — Сообщите агенту об успешном входе:
Я подключился и настроил доступ. Разворачивай проект.
Результат: Проект упакован в Docker-образ, перенесен на VPS и непрерывно работает в фоновом режиме в глобальной сети.
7. Разработка продающего лендинга по дизайн-референсам на модели Opus
Контекст: Генерация сайтов по абстрактному текстовому промпту («сделай красивый сайт») всегда приводит к шаблонным и неудачным результатам. Для получения качественного UI необходимо скармливать агенту конкретные визуальные референсы (скриншоты конкурентов и понравившихся блоков), использовать модель Claude 3 Opus для верстки и внедрять реальные графические ассеты (PNG-мокапы устройств, видеодемонстрации интерфейса).
Тайминг:
Выгода: Создание конвертящего адаптивного лендинга с интерактивными элементами и мобильной версией без найма UI/UX-дизайнера и верстальщика.
Как применить:
Шаг 1: Подготовка контекста и референсов — Браузер / Проводник] — Сделайте скриншоты сайтов с желаемой структурой (например, блок с мокапом смартфона). Поместите в папку проекта видео работы продукта и PNG-рамку iPhone.
Шаг 2: Анализ функционала и первый драфт — Claude Code (модель Opus)] — Переключитесь на модель Opus и отправьте промпт со скриншотами:
Изучи функционал нашего проекта. Сделай лендинг для рекламы сервиса. Вот скриншоты дизайна, на который нужно ориентироваться по стилю и структуре: [прикрепить скриншоты].
Шаг 3: Вставка реальных медиа-ассетов — Claude Code] — Укажите путь к графике и видео внутри проекта:
В блок с телефоном вставь рамку айфона из папки assets/iphone.png и видео сервиса assets/demo.mp4. Обрежь всё видео строго по границам экрана смартфона.
Шаг 4: Экономия токенов и доработка деталей — Claude Code (модель Sonnet)] — Переключитесь обратно на модель Sonnet и внесите финальные правки:
Адаптируй сайт под мобильные устройства, добавь кнопку с иконкой Telegram 'Подключить', растяни синий фон на 100% ширины и добавь блок контактов в футер.
Результат: Готовый адаптивный HTML/CSS/JS лендинг с бесшовным видео внутри мокапа смартфона, ведущий пользователей в Telegram-бота.
8. Привязка домена, настройка веб-аналитики и SEO
Контекст: Сайт, развернутый на VPS через Docker, изначально доступен только по сырому IP-адресу. Чтобы привлекать платный трафик через Яндекс Директ и ранжироваться в поисковиках, требуется привязать доменное имя, подтвердить права в вебмастерах и установить счетчик Яндекс Метрики. Все эти шаги агент может настроить автоматически через конфигурацию веб-сервера (Nginx/Docker).
Тайминг:
Выгода: Полностью готовый к рекламе и индексации веб-ресурс с установленной аналитикой за один диалог с AI.
Как применить:
Шаг 1: Покупка и делегирование домена — Панель хостинга] — Купите домен в панели вашего хостинга и укажите привязку к созданному VPS-серверу (делегирование DNS занимает от 15 до 60 минут).
Шаг 2: Привязка домена к контейнеру — Claude Code] — Отправьте купленный домен агенту:
Добавь домен my-cool-project.ru к нашему сайту на сервере через Docker и настрой перенаправление.
Шаг 3: Подключение поисковиков и метрики — Claude Code] — Запросите интеграцию счетчиков:
Помоги добавить сайт в поиск Яндекс и Google, а также установить код Яндекс Метрики. Напиши, что мне нужно сделать и куда вставить код счетчика.
Результат: Сайт открывается по красивому доменному имени по безопасному протоколу, фиксирует визиты в Яндекс Метрике и готов к запуску рекламных кампаний.
9. Генерация нативного десктопного приложения под Windows (Транскрибатор)
Контекст: Вайбкодинг не ограничен вебом и ботами: Claude Code способен с нуля создавать десктопные GUI-утилиты для операционных систем. На примере транскрибатора аудио/видео файлов демонстрируется генерация полноценного приложения с графическим интерфейсом на Python, файловым менеджером и распознаванием речи в текст с разметкой тайм-кодов.
Тайминг:
Выгода: Создание персонального рабочего софта для автоматизации рутины за один промпт без установки сторонних платных сервисов.
Как применить:
Шаг 1: Создание проекта — VS Code] — Откройте новую пустую папку (например, transcriber-app) в VS Code.
Шаг 2: Генерация приложения по ТЗ — Claude Code (модель Sonnet)] — Отправьте четкое функциональное описание:
Сделай приложение для Windows с графическим интерфейсом. Его задача: превращать видео или аудио в текст. На выходе должно формироваться два файла: с тайм-кодами и без тайм-кодов. Создай скрипты установки зависимостей (setup.bat) и запуска (run.bat).
Шаг 3: Установка и запуск — Проводник Windows] — Зайдите в папку проекта, дважды кликните по setup.bat для подтягивания библиотек, затем запустите run.bat.
Шаг 4: Тестирование функционала — Десктопное приложение] — Нажмите кнопку «Обзор», выберите тестовое медиа, укажите папку сохранения и запустите процесс.
Результат: Автономное приложение для Windows, локально транскрибирующее медиафайлы в текстовые документы с точностью до тайм-кодов.
FAQ
В: В чем главное отличие Claude Code от обычного веб-чата Claude.ai?
О: Claude Code — это агентный инструмент разработки, который имеет прямой доступ к файловой системе, терминалу и рабочей директории. Он сам создает, редактирует, удаляет файлы, запускает скрипты, проверяет логи и тестирует код, в то время как в обычном чате код приходится копировать и вставлять вручную.
В: Почему нельзя передавать пароль от VPS-сервера прямо в чат Claude Code?
О: Передача критических учетных данных (root-паролей, приватных ключей) в чаты AI-моделей создает угрозу безопасности и компрометации сервера. Правильный метод — запросить у агента команду для SSH-подключения и ввести пароль локально в окне системного терминала.
В: Зачем переключаться между моделями Sonnet и Opus в процессе работы?
О: Модель Sonnet работает быстрее, стоит дешевле и идеально подходит для 90% рутинных задач программирования и фикса багов. Модель Opus обладает более глубоким пространственным мышлением и вкусом, поэтому ее включают точечно для проектирования сложной архитектуры и UI/UX-дизайна, после чего возвращаются на Sonnet для экономии токенов.
В: Что делать, если сайт по ссылкам не открывается у агента из-за защиты (капча / блокировки)?
О: Если Claude Code не может спарсить URL референса из-за Cloudflare, капчи или политики безопасности сайта, сделайте скриншоты нужных блоков интерфейса и загрузите изображения напрямую в чат — агент отлично считывает визуальную верстку по картинкам.
В: Для чего нужен файл CLAUDE.md в корне каждого репозитория?
О: CLAUDE.md выполняет роль долгосрочной памяти проекта. Агент считывает его при старте каждой сессии, благодаря чему помнит стек технологий, архитектуру и ключевые правила, не тратя контекстные токены на повторные расспросы.
В: Какой сервер выбрать для деплоя проектов с нейросетями и Telegram-ботами?
О: Рекомендуется выбирать облачный VPS с операционной системой Ubuntu, публичным IPv4 и локацией в Европе (например, Амстердам). Это предотвратит проблемы с блокировками внешних API нейросетей и обеспечит стабильную связь с серверами Telegram.
Ресурсы и ссылки
Visual Studio Code — Официальный редактор кода для интеграции расширения Claude Code — code.visualstudio.com
Claude Code Extension — Расширение для VS Code от компании Anthropic — упомянуто в видео
Telegram @BotFather — Официальный бот в Telegram для создания ботов и получения API-токенов — упомянут в видео
Google AI Studio — Платформа для получения API-ключей к моделям Gemini / Imagen — упомянута в видео
Docker — Платформа контейнеризации для изоляции и быстрого деплоя приложений на сервер — упомянут в видео
Конспект создан на основе видео «Claude Code полный практический гайд» канала автора. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=slAuX0VuCYw
