ИНТЕРАКТИВНЫЙ КУРС v2.0

Claude: от нуля до профи

Боты, веб-сайты, веб-приложения, интеграции, AI-агенты — с продвинутыми примерами, реальными промптами и пошаговой практикой

9
разделов
32
модуля
80+
примеров
практики
ПРОГРЕСС
0%
🧠 Основы работы с Claude
Фундамент, без которого всё остальное не работает. Модели, токены, контекст, режимы.
🤔
Как Claude думает и что он «видит»
Архитектура, токены, контекстное окно, память
1
Claude — это авторегрессивная языковая модель
Каждый следующий токен предсказывается на основе всех предыдущих. Это значит: порядок слов важен, начало промпта задаёт «тон» всего ответа. Claude не ищет в интернете — он генерирует из выученных паттернов (если не включён web search).
# Что происходит под капотом при твоём запросе: Ты пишешь → токенизация → embedding → transformer layers → softmax → следующий токен → ...повторяется до конца ответа # 1 токен ≈ 0.75 слова на английском # 1 токен ≈ 0.5 слова на русском (2 токена на слово!) "привет мир" → [12445, 3687, 220, 44153] # 4 токена
2
Контекстное окно — рабочая память Claude
Claude видит только то, что есть в текущем диалоге. Между сессиями — полная амнезия. Но в рамках одного диалога помнит всё.
# Лимиты моделей (2025): claude-sonnet-4-6 → 200 000 токенов входа / 8 192 выхода claude-opus-4 → 200 000 токенов входа / 32 000 выхода claude-haiku-4-5 → 200 000 токенов входа / 8 192 выхода # 200к токенов ≈ ~150 000 слов ≈ роман «Война и мир» # Можно скормить целую кодовую базу!
Чем больше контекста — тем умнее ответ. Вставляй в диалог: код проекта, документацию, примеры, требования.
3
Модели: когда что выбирать
Sonnet — лучший баланс скорости и качества для большинства задач. Opus — для сложных рассуждений. Haiku — максимальная скорость и минимальная стоимость.
ПРАКТИКА

Попроси Claude объяснить разницу: Ты claude-sonnet-4-6. Когда тебя стоит использовать вместо Haiku, а когда нужен Opus? Честно и с примерами.

🛠️
Все инструменты Claude в claude.ai
Файлы, артефакты, Projects, web search, memory
1
Projects — постоянный контекст для проекта
Projects позволяет добавить system prompt и документы один раз — они автоматически подставляются в каждый новый чат. Идеально для: рабочих проектов, личного ассистента, кодовой базы.
# Пример Project Instructions для разработчика: Ты senior full-stack developer на нашем проекте. Стек: Next.js 15, TypeScript, Prisma, PostgreSQL, Tailwind. Правила кода: - Всегда TypeScript strict mode - Компоненты: функциональные, с proper typing - API routes: всегда валидация через Zod - Ошибки: всегда обрабатывай, логируй Наш стиль: camelCase переменные, PascalCase компоненты. База данных на Railway. Деплой на Vercel.
После настройки Projects — Claude понимает твой стек без объяснений в каждом чате.
2
Загрузка файлов — скармливай всё
PDF, изображения, CSV, код, docx — всё можно загрузить. Claude проанализирует содержимое. Лайфхак: скидывай сразу несколько файлов для комплексного анализа.
ПРОДВИНУТАЯ ПРАКТИКА

Загрузи 3 файла: package.json, главный компонент, API route и напиши:
Проанализируй архитектуру. Найди потенциальные проблемы с безопасностью, производительностью и масштабируемостью. Дай конкретные рекомендации.

3
Артефакты — живые документы
HTML/React артефакты рендерятся прямо в интерфейсе. Можно редактировать итеративно. Идеально для: прототипов, дашбордов, интерактивных инструментов.
ПРАКТИКА

Создай React компонент — красивый дашборд с графиком продаж (recharts), картами метрик и dark theme. Данные хардкодь примерные.

✍️ Мастерство промптов
Промпт — это интерфейс к Claude. Мастерство промптинга = разница между посредственным и исключительным результатом.
🏗️
Анатомия идеального промпта
Роль · Задача · Контекст · Примеры · Формат · Ограничения
1
6-компонентная формула
## РОЛЬ (кто Claude в этом контексте) Ты senior Python-разработчик с опытом в FastAPI и архитектуре микросервисов. Ты критичен к качеству кода. ## ЗАДАЧА (что конкретно нужно) Создай REST API endpoint для аутентификации пользователей. ## КОНТЕКСТ (всё важное о ситуации) Стек: FastAPI, PostgreSQL (asyncpg), Redis для сессий. Уже есть модели User и Session в базе. Нужна поддержка JWT + refresh tokens. ## ПРИМЕРЫ (как должно выглядеть) POST /auth/login → {"access_token": "...", "refresh_token": "..."} POST /auth/refresh → новый access_token POST /auth/logout → инвалидация refresh token ## ФОРМАТ (структура ответа) Сначала объясни архитектурные решения (5-7 предложений), затем готовый код с комментариями, затем тесты на pytest. ## ОГРАНИЧЕНИЯ (что нельзя/важно) Без сторонних библиотек кроме python-jose и passlib. Все пароли через bcrypt. Refresh tokens в Redis.
2
Chain of Thought — заставь Claude думать вслух
Добавление "думай пошагово" или "reasoning step by step" буквально улучшает качество на сложных задачах. Особенно эффективно для: архитектурных решений, отладки, математики, логических задач.
# Без CoT (плохо для сложных задач): "Почему мой Redis падает под нагрузкой?" # С CoT (намного лучше): "Почему мой Redis падает под нагрузкой? Перед ответом: проанализируй возможные причины (память, connections, команды, сеть), затем задай уточняющие вопросы если нужно, и только потом дай структурированный план диагностики."
Не используй CoT для простых задач — замедляет без пользы. Нужен для: архитектура, debug, сложная логика.
3
XML-теги для сложных промптов
Claude обучен хорошо понимать XML. Используй для разделения частей длинных промптов — это снижает вероятность путаницы.
<persona> Ты технический директор стартапа в сфере fintech. Опыт: 15 лет, прошёл путь от джуна до CTO. </persona> <task> Сделай code review следующего кода обработки платежей. </task> <code> // ... вставляй код сюда ... </code> <review_criteria> - Безопасность и защита от SQL injection - Обработка ошибок транзакций - Идемпотентность операций - Соответствие PCI DSS </review_criteria> <output_format> JSON: {"critical": [], "major": [], "minor": [], "praise": []} </output_format>
4
Few-shot prompting — учи на примерах
Дай 2-3 примера входа и желаемого выхода — Claude подхватит паттерн намного лучше, чем от описания словами.
# Few-shot для классификации тикетов поддержки: Классифицируй тикет в одну из категорий: [billing, technical, feature_request, complaint] # Примеры: Input: "Почему мне списали дважды?" Output: billing Input: "Приложение вылетает при загрузке фото" Output: technical Input: "Было бы здорово добавить тёмную тему" Output: feature_request # Теперь классифицируй: Input: "Не могу войти в аккаунт уже 3 дня, ужасный сервис" Output:
Few-shot особенно мощный для: форматирования данных, классификации, генерации по шаблону, трансформации текста.
🎯
Продвинутые техники и шаблоны
Мета-промпты, самокритика, итерации, контроль формата
ADVANCED
1
Мета-промпт: попроси Claude улучшить твой промпт
# Техника "промпт об промпте" Вот мой промпт для генерации маркетинговых текстов: [твой промпт] Проанализируй его и: 1. Найди слабые места 2. Предложи улучшенную версию 3. Объясни что изменил и почему
2
Самокритика: заставь Claude проверить свой ответ
Один из самых мощных приёмов — попросить Claude оценить собственный ответ перед финальной версией.
Напиши архитектуру микросервисов для маркетплейса. # После первого ответа добавь: Теперь сыграй роль скептичного senior architect. Найди 3 самых слабых места в предложенной архитектуре и предложи как их исправить.
3
Структурированный JSON вывод
Для парсинга данных в коде — требуй строгий JSON. Без markdown, без пояснений.
Проанализируй текст и верни ТОЛЬКО валидный JSON, без markdown, без пояснений, без ```json. Схема ответа: { "sentiment": "positive|negative|neutral", "score": 0.0-1.0, "key_topics": ["topic1", "topic2"], "action_required": true|false, "summary": "одно предложение" } Текст: "[вставь текст]"
Добавь в конце: Отвечай строго по схеме. Проверь JSON перед ответом. — резко снижает ошибки форматирования.
4
Декомпозиция сложных задач
# Антипаттерн (один огромный запрос): "Создай полный SaaS продукт с авторизацией, биллингом, дашбордом, API, мобильным приложением и лендингом" # Правильно (декомпозиция на спринты): Шаг 1: "Опиши архитектуру и MVP scope" Шаг 2: "Создай схему БД для User, Subscription, Usage" Шаг 3: "Напиши auth endpoints с JWT" Шаг 4: "Интегрируй Stripe для биллинга" ...и так далее
Один большой запрос = поверхностный результат. Серия точных запросов = глубокое качество.
⚡ Claude Code — AI в терминале
Агентный инструмент разработки. Читает файлы, пишет код, запускает команды, делает git commit — всё через натуральный язык.
🚀
Установка и первый запуск
Нативный установщик, аутентификация, базовые команды
НОВОЕ
1
Установка нативным установщиком (рекомендуется)
npm-установка устарела. Нативный установщик — быстрее, без зависимостей, автообновление.
# macOS / Linux: curl -fsSL https://claude.ai/install.sh | bash # Windows (PowerShell): irm https://claude.ai/install.ps1 | iex # Проверить установку: claude --version # Запустить (попросит авторизацию через браузер): claude
Нужен аккаунт Pro, Max, Teams или Enterprise. Бесплатный план не включает Claude Code.
2
Первые команды в проекте
# Перейди в папку проекта и запусти: cd my-project && claude # Базовые команды внутри Claude Code: /help # список всех команд /status # текущий статус и модель /clear # очистить контекст /compact # сжать историю (экономит токены) /bug # сообщить об ошибке /exit # выйти # Первый запрос: "Изучи структуру этого проекта и объясни мне архитектуру в 10 пунктах"
3
CLAUDE.md — инструкция для твоего проекта
Создай файл CLAUDE.md в корне проекта. Claude читает его автоматически при запуске — это постоянный контекст для кодовой базы.
# CLAUDE.md пример для Next.js проекта: # Project: MyApp ## Stack - Next.js 15 (App Router), TypeScript strict - Tailwind CSS + shadcn/ui - Prisma + PostgreSQL (Supabase) - NextAuth.js для аутентификации ## Code Style - Компоненты: function, не arrow для страниц - Всегда 'use client' / 'use server' явно - Zod для валидации всех inputs - Error boundaries на каждой странице ## Common Commands npm run dev → localhost:3000 npm run db:push → применить схему Prisma npm run test → vitest ## Important Files - /lib/auth.ts — конфиг NextAuth - /lib/db.ts — Prisma client - /types/ — все TypeScript типы
Хороший CLAUDE.md экономит 5-10 минут объяснений в каждой сессии.
💻
Реальные сценарии использования
Рефакторинг, фичи, баги, тесты, git — всё через язык
ADVANCED
1
Разработка новой фичи
# Команда Claude Code, сидя в проекте: "Добавь функционал уведомлений по email: - Модель Notification в Prisma (userId, type, message, read) - API endpoint POST /api/notifications - React компонент NotificationBell в header - Polling каждые 30 секунд - Mark as read при клике Начни с миграции базы данных." # Claude сам: # 1. Читает существующую схему Prisma # 2. Добавляет модель и миграцию # 3. Создаёт API route # 4. Создаёт компонент # 5. Обновляет header
2
Отладка и исправление багов
# Передай Claude лог ошибки: "Получаю эту ошибку в production: TypeError: Cannot read properties of undefined (reading 'map') at ProductList (/app/products/page.tsx:34:18) Найди причину и исправь. Также проверь все похожие места в кодовой базе." # Claude прочитает файл, найдёт проблему, # исправит и проверит соседние компоненты
3
Git workflow
# Claude умеет работать с git напрямую: "Посмотри что изменилось за сегодня (git diff), напиши осмысленный commit message и сделай commit. Потом создай PR description для GitHub." # Или более конкретно: "Я сделал фичу авторизации через Google OAuth. Создай feature branch auth/google-oauth, сделай аккуратные commits по логическим частям, напиши CHANGELOG entry."
4
MCP серверы — суперсила Claude Code
MCP (Model Context Protocol) расширяет Claude Code внешними инструментами: браузер, GitHub, базы данных, память.
# Добавить GitHub MCP (работа с PR/Issues): claude mcp add github -- npx -y @modelcontextprotocol/server-github # Playwright (управление браузером): claude mcp add playwright -- npx @playwright/mcp@latest # Persistent memory: claude mcp add memory -- npx -y @modelcontextprotocol/server-memory # После добавления GitHub MCP можно: "Найди все открытые issues с тегом 'bug', создай план исправления и начни с самого критичного"
MCP превращает Claude Code из помощника по коду в полноценного AI-инженера с доступом к твоей инфраструктуре.
🤖 Telegram-боты с Claude
От простого эхо-бота до умного AI-ассистента с памятью, инструментами и бизнес-логикой.
🚀
Первый AI-бот за 15 минут
python-telegram-bot 20+ · Polling · История диалога
1
Получи токены и настрой окружение
# 1. @BotFather в Telegram → /newbot → получи TELEGRAM_TOKEN # 2. console.anthropic.com → API Keys → создай ключ # 3. Создай проект: mkdir my-ai-bot && cd my-ai-bot python -m venv venv && source venv/bin/activate pip install python-telegram-bot anthropic python-dotenv # .env файл: TELEGRAM_TOKEN=your_token_here ANTHROPIC_KEY=sk-ant-...
2
Промпт для создания полноценного бота
Скопируй это в Claude и получи готовый код: Создай Telegram-бота на Python (python-telegram-bot 20+, async). Функционал: - История диалога в памяти (dict user_id → messages[]) - Лимит истории: последние 20 сообщений на пользователя - /start — красивое приветствие с inline кнопками - /clear — очистка истории - /help — список команд - /mode [creative|precise|balanced] — смена режима Claude - Typing indicator пока Claude отвечает - Обработка ошибок API с retry (3 попытки) - Логирование в файл bot.log Стек: python-telegram-bot 20+, anthropic SDK, python-dotenv Дай: bot.py + requirements.txt + .env.example + README.md
3
Деплой на Railway (бесплатно)
# Попроси Claude: "Создай Dockerfile для этого Telegram-бота и инструкцию деплоя на Railway.app шаг за шагом. Включи настройку переменных окружения." # Или используй Procfile для Railway: # Procfile: worker: python bot.py
Railway.app: бесплатные $5/месяц кредитов — хватит на 24/7 работу лёгкого бота несколько месяцев.
🧠
Бот с базой знаний и инструментами
SQLite · RAG · Tool Use · Inline кнопки
ADVANCED
1
Персистентная история в SQLite
# Промпт для Claude: Перепиши бота так чтобы история хранилась в SQLite: - Таблица conversations(user_id, role, content, timestamp) - При старте бота — загружать последние 20 сообщений пользователя - Автоудаление сообщений старше 30 дней - /export — экспорт истории пользователя в .txt файл - /stats — количество сообщений, дней активности
2
Бот-ассистент с базой знаний компании
# Архитектура RAG-бота: system_prompt = """ Ты — ассистент компании TechShop. Отвечай ТОЛЬКО на основе предоставленной базы знаний. Если ответа нет — честно скажи и предложи связаться с поддержкой: support@techshop.ru База знаний: {knowledge_base} """ # При старте читаем файл knowledge.txt: with open('knowledge.txt') as f: knowledge = f.read() # Подставляем в system prompt system = system_prompt.format(knowledge_base=knowledge)
3
Tool Use в боте — Claude вызывает API
# Бот с инструментами: Claude сам решает что вызвать tools = [ { "name": "check_order_status", "description": "Проверить статус заказа по номеру", "input_schema": { "type": "object", "properties": { "order_id": {"type": "string", "description": "Номер заказа"} }, "required": ["order_id"] } }, { "name": "search_products", "description": "Поиск товаров в каталоге", "input_schema": { "type": "object", "properties": { "query": {"type": "string"}, "max_price": {"type": "number"} } } } ] # Пользователь: "Где мой заказ #12345?" # Claude: вызывает check_order_status(order_id="12345") # Бот: выполняет функцию, возвращает результат Claude # Claude: формулирует ответ пользователю
ПРОМПТ ДЛЯ CLAUDE

Создай Telegram-бота с Tool Use, где Claude может: check_order, search_catalog, create_return_request. Включи полный цикл обработки tool_use response от Anthropic API.

🎨 Создание веб-сайтов с Claude
Лендинги, корпоративные сайты, портфолио, блоги — от HTML/CSS до Next.js с CMS.
🎨
Лендинг за один промпт
HTML · CSS · JS · Анимации · Адаптивность
ПОПУЛЯРНО
1
Промпт-шаблон для лендинга
Создай красивый лендинг для [продукт/услуга]. Целевая аудитория: [описание ЦА] Основной CTA: [что должен сделать посетитель] Тон: [профессиональный/дружелюбный/дерзкий] Структура страницы: 1. Hero с headline, subheadline, CTA кнопкой 2. Секция "Как это работает" (3 шага) 3. Блок преимуществ (6 карточек с иконками) 4. Отзывы клиентов (3 карточки) 5. Pricing (3 тарифа) 6. FAQ (5 вопросов) 7. Footer с контактами Технические требования: - Один HTML файл (встроенные CSS и JS) - Полностью адаптивный (mobile-first) - Плавные анимации при скролле (Intersection Observer) - Якорная навигация - Форма обратной связи с валидацией - Цветовая схема: [твои цвета или "придумай сам"] - Современный дизайн, не шаблонный
2
Итеративное улучшение сайта
# После получения базовой версии — итерируй: # Улучшить дизайн: "Сделай hero-секцию более впечатляющей: добавь анимированный gradient background, particle эффект, плавное появление текста" # Добавить функционал: "Добавь real-time счётчик посетителей онлайн (имитация через random interval), и progress bar при скролле страницы" # Оптимизация: "Добавь lazy loading для всех изображений, preloader при загрузке страницы, и smooth scroll для всех якорных ссылок"
Держи все правки в одном диалоге — Claude помнит контекст и вносит изменения точно, не ломая остальное.
3
Продвинутые эффекты и анимации
# Попроси добавить WOW-эффекты: "Добавь в hero-секцию: - Typewriter эффект для заголовка - Parallax при скролле для фонового изображения - Floating элементы (пузыри/частицы) через Canvas - Counter анимацию для цифр в stats секции (пример: 0 → 10 000 при попадании в viewport)" # Glassmorphism карточки: "Перестиль карточки преимуществ в glassmorphism: backdrop-filter, прозрачность, blur, subtle border, hover с подъёмом и свечением"
4
Деплой за 2 минуты
# Вариант 1: GitHub Pages (бесплатно) # Создай репо → загрузи index.html → Settings → Pages # Вариант 2: Netlify Drop (30 секунд) # Перетащи папку на app.netlify.com/drop # Вариант 3: Vercel CLI npm i -g vercel vercel deploy # в папке с index.html # Вариант 4: Cloudflare Pages # git push → автодеплой
🏢
Многостраничный сайт на Next.js
Роутинг · MDX блог · CMS · SEO · i18n
ADVANCED
1
Промпт для корпоративного сайта
Создай корпоративный сайт на Next.js 15 (App Router): Страницы: / (главная), /about, /services, /blog, /blog/[slug], /contact Технологии: - Next.js 15 + TypeScript - Tailwind CSS (тёмная тема по умолчанию) - MDX для блога (статьи в /content/posts/) - next-intl для i18n (ru/en) - next/image для оптимизации изображений - next-seo для мета-тегов - Framer Motion для анимаций SEO: - Sitemap.xml автогенерация - robots.txt - OpenGraph теги для каждой страницы - Structured data (JSON-LD) Дай полную структуру файлов и ключевые компоненты.
2
Headless CMS интеграция
# Интеграция с Contentful (или Sanity, Strapi): "Добавь Contentful как CMS для блога: - Contentful SDK для запросов - Типы для статей: title, slug, content(rich text), coverImage, author, publishedAt, tags - Страница /blog с пагинацией (12 постов) - Страница /blog/[slug] с full-text - ISR (revalidate: 60) для кэширования - Превью режим для черновиков"
3
Форма обратной связи с интеграциями
# Продвинутая форма контактов: "Создай форму обратной связи на /contact: - React Hook Form + Zod валидация - API route /api/contact - Отправка email через Resend - Запись в Notion database (через Notion API) - Уведомление в Telegram (через bot API) - Rate limiting (max 5 запросов/час с IP) - Honeypot поле от спама - Captcha через hCaptcha"
Такая форма покрывает 95% потребностей малого бизнеса и строится за 2 часа с Claude.
Дизайн-промпты и UI/UX
Как описать дизайн словами · Референсы · Стили
PRO
1
Словарь дизайн-стилей для Claude

🌑 ТЁМНЫЕ СТИЛИ

  • Glassmorphism — стекло, blur, прозрачность
  • Neumorphism — выдавленные элементы
  • Brutalism — грубые границы, монохром
  • Cyberpunk — неон, glitch, grid

☀️ СВЕТЛЫЕ СТИЛИ

  • Minimal/Clean — белый, много воздуха
  • Soft UI — пастель, скруглённые углы
  • Editorial — как журнал, типографика
  • Bauhaus — геометрия, первичные цвета

🎨 КАК ОПИСАТЬ

  • "В стиле Linear.app" (SaaS референс)
  • "Как Apple.com" (минимализм)
  • "В духе Stripe" (профессиональный)
  • "Как Vercel dashboard" (тёмный tech)
2
Продвинутый дизайн-промпт
Создай hero-секцию для SaaS продукта (productivity tool). Визуальный стиль: - Тёмный фон (#0a0a0f), акцент #6d28d9 и #06b6d4 - Glassmorphism карточка "app preview" поверх gradient blob - Noise texture overlay (opacity 3%) - Mesh gradient background (три цвета, смещённые) Типографика: - Заголовок: "Syne" или "Clash Display", 900 weight, 72px - Gradient text на ключевом слове - Subtext: нейтральный, 18px, opacity 70% Анимации: - Staggered появление элементов (0.1s задержка) - Floating анимация для карточки (translateY 10px, 4s) - Subtle gradient rotation в background - Cursor-following glow эффект Сделай в одном HTML файле с встроенным CSS.
🌐 Веб-приложения с AI
Fullstack приложения: аутентификация, база данных, AI-функции, деплой в продакшн.
Fullstack стек 2025
Next.js · Supabase · Tailwind · Stripe · Vercel

🎨 ФРОНТЕНД

  • Next.js 15 App Router + RSC
  • TypeScript strict mode
  • Tailwind CSS 4 + shadcn/ui
  • Zustand для state
  • React Query для данных

⚙️ БЭКЕНД/БД

  • Supabase PostgreSQL + Auth + Storage
  • Prisma ORM + migrations
  • Zod валидация везде
  • tRPC type-safe API
  • Upstash Redis кэш + rate limit

🤖 AI СЛОЙ

  • Anthropic SDK Claude API
  • Vercel AI SDK streaming
  • LangChain сложные цепочки
  • Pinecone векторная БД
  • OpenAI embeddings для поиска

☁️ ДЕПЛОЙ

  • Vercel фронт + edge functions
  • Railway PostgreSQL / Redis
  • Cloudflare CDN + защита
  • Stripe платежи
  • Resend email
МЕГА-ПРОМПТ ДЛЯ SAAS

Скопируй это в Claude Code в пустой папке:

Создай SaaS стартер на Next.js 15 + Supabase + Stripe. Включи: авторизацию (email + Google OAuth), систему подписок (Free/Pro/Enterprise через Stripe), защищённый dashboard, биллинг-страницу, webhook обработчик Stripe. Дай полную структуру файлов, все компоненты и инструкцию запуска.

💬
AI-чат со streaming в реальном времени
Server-Sent Events · Vercel AI SDK · Multi-model
ADVANCED
1
Streaming через Vercel AI SDK
// app/api/chat/route.ts import { anthropic } from '@ai-sdk/anthropic' import { streamText } from 'ai' export async function POST(req: Request) { const { messages } = await req.json() const result = await streamText({ model: anthropic('claude-sonnet-4-6'), messages, system: 'Ты полезный ассистент.', maxTokens: 2048, temperature: 0.7, }) return result.toDataStreamResponse() } // app/chat/page.tsx — фронтенд import { useChat } from 'ai/react' export default function Chat() { const { messages, input, handleSubmit, setInput, isLoading } = useChat() return ( <div> {messages.map(m => ( <div key={m.id} className={m.role}> {m.content} // стримится по мере генерации! </div> ))} <form onSubmit={handleSubmit}> <input value={input} onChange={e => setInput(e.target.value)} /> <button disabled={isLoading}>Отправить</button> </form> </div> ) }
2
Продвинутый чат с историей в БД
# Промпт для Claude Code: Создай полноценный AI-чат на Next.js: - История чатов сохраняется в Supabase (users, chats, messages) - Sidebar со списком чатов (создать/удалить/переименовать) - Streaming ответы через Vercel AI SDK - Поддержка загрузки изображений (vision) - Markdown рендеринг с подсветкой кода (react-markdown + shiki) - Copy кнопка для каждого сообщения - Regenerate последнего ответа - Экспорт чата в .md файл - Keyboard shortcuts (Cmd+Enter отправить, Cmd+K новый чат)
🔗 Интеграции и автоматизации
Подключай Claude к любым сервисам — n8n, Make, Zapier, API, Google Sheets, CRM.
🔄
n8n + Claude = бизнес-автоматизации
Workflow · Webhook · Триггеры · AI-узел
1
Реальные n8n workflow с Claude
# Workflow 1: Умная обработка входящих писем Gmail Trigger (новое письмо) → HTTP Request (Claude API) Промпт: "Классифицируй письмо: [spam/lead/support/partner]. Если lead — извлеки: имя, компанию, потребность, срочность. Ответь только JSON." → Switch (по типу) → lead: Создать карточку в HubSpot + уведомление в Slack → support: Создать тикет в Jira + автоответ → spam: Переместить в папку # Workflow 2: AI-модерация контента Webhook (новый пост из CMS) → Claude API (проверка на: ошибки, тон, SEO) → Если OK → опубликовать → Если проблемы → уведомить редактора в Telegram с конкретными замечаниями # Workflow 3: Ежедневный бриф Cron (каждое утро 8:00) → Собрать: задачи из Jira, события из Calendar, новые письма, метрики из Analytics → Claude: "Создай брифинг дня в 10 пунктах" → Отправить в Telegram + сохранить в Notion
2
Промпт для генерации n8n workflow
Попроси Claude создать готовый JSON для n8n: Создай n8n workflow в формате JSON для импорта: Сценарий: AI-обработка заявок с сайта 1. Webhook триггер (POST /webhook/lead) 2. Validate данные (имя, email, сообщение обязательны) 3. Отправить в Claude: классифицировать потребность, оценить горячесть (1-10), предложить первый ответ 4. Записать в Google Sheets (лист "Leads") 5. Если score >= 7: создать задачу в Asana для менеджера 6. Отправить автоответ клиенту через Gmail 7. Уведомить команду в Slack с summary от Claude Дай валидный JSON для импорта в n8n.
🛠️
Tool Use — Claude управляет твоими API
Function calling · Параллельные инструменты · Agentic loops
PRO
1
Полный цикл Tool Use с параллельными вызовами
import anthropic client = anthropic.Anthropic() tools = [ {"name": "get_weather", "description": "Погода по городу", "input_schema": {"type":"object", "properties":{"city":{"type":"string"}}, "required":["city"]}}, {"name": "search_flights", "description": "Поиск рейсов", "input_schema": {"type":"object", "properties":{ "from":{"type":"string"}, "to":{"type":"string"}, "date":{"type":"string"} },"required":["from","to","date"]}} ] messages = [{"role":"user", "content":"Лечу Москва→Лондон 20 марта. Погода там?"}] # Agentic loop — работает пока есть tool_use while True: response = client.messages.create( model="claude-sonnet-4-6", max_tokens=1024, tools=tools, messages=messages ) if response.stop_reason == "end_turn": break # Готово, финальный ответ # Выполнить все tool_use блоки tool_results = [] for block in response.content: if block.type == "tool_use": result = execute_tool(block.name, block.input) tool_results.append({ "type": "tool_result", "tool_use_id": block.id, "content": str(result) }) # Добавить результаты и продолжить messages.append({"role":"assistant", "content":response.content}) messages.append({"role":"user", "content":tool_results})
🧬 AI-агенты и сотрудники
Агент — это Claude, который сам принимает решения, использует инструменты и выполняет многошаговые задачи без участия человека.
🏗️
Архитектура ReAct агента
Think · Act · Observe · Repeat до победы
1
Полный ReAct агент на Python
# Агент-исследователь: сам ищет, анализирует, пишет отчёт class ResearchAgent: def __init__(self): self.client = anthropic.Anthropic() self.tools = [ self._web_search_tool(), self._read_url_tool(), self._save_note_tool(), self._create_report_tool() ] self.notes = [] # память агента def run(self, task: str) -> str: messages = [{"role": "user", "content": task}] system = """Ты исследователь-агент. Для каждой задачи: 1. Сначала ПЛАН (какие шаги нужны) 2. Выполняй шаги через инструменты 3. Сохраняй важные находки через save_note 4. Финальный отчёт через create_report Не торопись. Глубина важнее скорости.""" while True: response = self.client.messages.create( model="claude-sonnet-4-6", max_tokens=4096, system=system, tools=self.tools, messages=messages ) if response.stop_reason == "end_turn": return self._extract_text(response) # выполнить инструменты и продолжить цикл messages = self._process_tool_calls(messages, response)
2
Агент с долгосрочной памятью
# Memory через векторную БД (ChromaDB локально): import chromadb from anthropic import Anthropic class MemoryAgent: def __init__(self): self.db = chromadb.Client() self.memory = self.db.get_or_create_collection("agent_memory") self.client = Anthropic() def remember(self, fact: str, meta: dict): # Сохранить факт с embedding для поиска embedding = self._embed(fact) self.memory.add( embeddings=[embedding], documents=[fact], metadatas=[meta], ids=[str(uuid4())] ) def recall(self, query: str, n=5) -> list: # Найти релевантные воспоминания results = self.memory.query( query_embeddings=[self._embed(query)], n_results=n ) return results['documents'][0]
👥
Мультиагентные системы
Команды агентов · Оркестратор · Параллельное выполнение
PRO
1
Оркестратор + специализированные агенты
# Система создания контента: 4 агента в команде agents = { "researcher": { "system": "Ты исследователь. Ищешь факты, данные, " "цитаты по теме. Структурируй в JSON.", "tools": [web_search, read_url] }, "writer": { "system": "Ты копирайтер. Пишешь engaging контент " "на основе исследования. SEO-оптимизированный.", "tools": [] }, "critic": { "system": "Ты строгий редактор. Находишь слабые места, " "фактические ошибки, улучшаешь структуру.", "tools": [fact_check] }, "publisher": { "system": "Ты публикатор. Финальное форматирование, " "метаданные, публикация через CMS API.", "tools": [publish_to_cms, upload_images] } } async def create_article(topic: str): research = await run_agent("researcher", topic) draft = await run_agent("writer", research) revised = await run_agent("critic", draft) return await run_agent("publisher", revised)
2
Параллельные агенты (asyncio)
import asyncio async def parallel_analysis(company: str): # Запустить 4 агента одновременно! tasks = [ run_agent("financial_analyst", f"Анализ финансов {company}"), run_agent("market_analyst", f"Анализ рынка и конкурентов {company}"), run_agent("tech_analyst", f"Анализ технологического стека {company}"), run_agent("risk_analyst", f"Анализ рисков {company}") ] # Все 4 работают параллельно — в 4x быстрее! results = await asyncio.gather(*tasks) # Оркестратор синтезирует итоговый отчёт return await synthesize(results)
Параллельные агенты — это настоящее преимущество. Задача, которая занимает 2 минуты последовательно, выполняется за 30 секунд параллельно.
🎯 Проверь себя
10 вопросов на понимание ключевых концепций. Кликни на ответ.
1. Ты хочешь, чтобы Claude отвечал в строгом JSON формате. Что обязательно добавить в промпт?
2. Какой файл нужно создать в корне проекта, чтобы Claude Code автоматически понимал контекст при каждом запуске?
3. В чём главное преимущество параллельных агентов перед последовательными?
4. Что такое Tool Use (Function Calling) в Claude API?
5. Для чего нужен Streaming (SSE) в AI-приложениях?
🗺️ Роадмап профи
Структурированный путь от первого промпта до построения AI-продуктов. 10 недель.
НЕДЕЛЯ 1
🧠 Основы и инструменты
Контекстное окно, токены, модели. Projects, файлы, артефакты. Первые промпты и артефакты.
НЕДЕЛЯ 2
✍️ Мастерство промптов
6-компонентная формула, CoT, XML-теги, few-shot. Итеративная работа. JSON output.
НЕДЕЛЯ 3
⚡ Claude Code
Установка, CLAUDE.md, первые задачи. MCP серверы. Git workflow. Агентная разработка.
НЕДЕЛЯ 4
🎨 Первый веб-сайт
HTML лендинг с анимациями. Дизайн-промпты, итеративный дизайн. Деплой на Vercel/Netlify.
НЕДЕЛЯ 5
🤖 Telegram-бот
python-telegram-bot + Claude API. SQLite история. Tool Use. Деплой на Railway.
НЕДЕЛЯ 6
🌐 Fullstack веб-приложение
Next.js 15 + Supabase + Tailwind. Auth, CRUD, AI-чат со streaming. Деплой.
НЕДЕЛЯ 7
🔗 Автоматизации
n8n workflow с Claude. Google Sheets интеграция. Webhook обработчики. Make/Zapier.
НЕДЕЛЯ 8
🧬 Первый AI-агент
ReAct архитектура, Tool Use цикл, векторная память. Агент для реальной задачи.
НЕДЕЛЯ 9
👥 Мультиагентная система
Оркестратор + специалисты. Параллельное выполнение (asyncio). Управление состоянием.
НЕДЕЛЯ 10
🚀 Твой AI-продукт
Собрать всё вместе. Монетизация (Stripe). Масштабирование. Rate limiting. Production-ready.


⚙️ Управление прогрессом
ПРОГРЕСС ПО РАЗДЕЛАМ
💡 Прогресс сохраняется в браузере (localStorage) — отдельно у каждого пользователя, не требует сервера. Сброс удаляет только прогресс в этом браузере.
🔑 Принципы профи

💬 ДИАЛОГ

  • Один проект = один длинный чат
  • Итерируй, не начинай заново
  • Давай контекст в начале сессии
  • Уточняй неудачные ответы словами

⚡ ПРОДУКТИВНОСТЬ

  • Сохраняй лучшие промпты в файл
  • Claude Code для больших проектов
  • Projects для постоянного контекста
  • Web Search для актуальных данных

🏗️ АРХИТЕКТУРА

  • MVP сначала, оптимизация потом
  • Декомпозируй большие задачи
  • Сначала план, потом код
  • Проверяй каждый шаг

🤖 AI-МЫШЛЕНИЕ

  • Claude — партнёр, не инструмент
  • Объясняй контекст и цель
  • Самокритика улучшает результат
  • Много коротких итераций > один большой