Claude Code: контейнер рабочей среды курса

Docker-контейнер для курса «Claude Code: суперсила для НЕпрограммистов» (Automatica, сезон 1). Каждый студент получает в браузере изолированную среду: VS Code, терминал с Claude Code CLI и файловый менеджер.

Что внутри

Один контейнер, три сервиса за общим порталом входа:

Браузер → :8080 (auth-gateway.py)
              ├─ /ide/   → code-server (VS Code в браузере)
              └─ /files/ → File Browser (файловый менеджер)

Студент логинится один раз и получает доступ ко всему.

Что установлено

• Claude Code CLI — основной инструмент курса.
• 19 Skills — создание документов (DOCX, PPTX, XLSX, PDF), дизайн, автоматизация браузера и др.
• LibreOffice — конвертация офисных форматов.
• Playwright + Chromium — управление браузером из скриптов.
• Pandoc, Tesseract OCR, FFmpeg — конвертация и обработка файлов.
• Python-библиотеки — pandas, matplotlib, pdfplumber, reportlab, openpyxl и др.
• 28 демо-проектов — готовые примеры по всем 5 сессиям курса.

Архитектура

Компонент	Порт	Описание
auth-gateway.py	8080 (внешний)	Python-прокси с cookie-авторизацией, единая точка входа
code-server	8081 (внутренний)	VS Code в браузере, без собственной авторизации
File Browser	9090 (внутренний)	Файловый менеджер, noauth — авторизация через gateway

Быстрый старт

1. Клонировать и настроить

git clone git@github.com:miolamio/cc-for-non-coders-dev-container.git
cd cc-for-non-coders-dev-container
cp .env.example .env

Отредактировать .env — как минимум указать API-ключ:

PASSWORD=student-2026
GLM_API_KEY=ваш-ключ-от-z-ai

2. Собрать и запустить

./run.sh

Скрипт скопирует курсовые материалы в build-контекст, соберёт Docker-образ и запустит контейнер.

3. Открыть в браузере

http://localhost:8080

Ввести пароль из .env — откроется VS Code с материалами курса.

Управление

# Остановить контейнер
docker compose down

# Остановить и удалить данные студента
docker compose down -v

# Посмотреть логи
docker compose logs -f

Переключение API-ключей

Контейнер поддерживает два ключа — основной и резервный. Если основной упирается в лимиты, преподаватель переключает на резервный:

# Внутри контейнера (в терминале code-server):
./switch-api-key.sh backup    # переключить на резервный
./switch-api-key.sh primary   # вернуть основной

После переключения перезапустите Claude Code (Ctrl+C, затем claude).

Структура файлов

├── Dockerfile              # Сборка образа: Ubuntu 22.04 + все зависимости
├── docker-compose.yml      # Конфигурация контейнера и переменных окружения
├── entrypoint.sh           # Запуск сервисов, генерация .env для Claude Code
├── auth-gateway.py         # Python HTTP-прокси с авторизацией (~300 строк)
├── login.html              # Страница входа (тёмная тема, брендинг)
├── code-server-settings.json # Настройки VS Code (тёмная тема, автосохранение)
├── claude-settings.json    # Разрешения Claude Code (белый список команд)
├── run.sh                  # Сборка и запуск одной командой
├── .env.example            # Шаблон переменных окружения
├── course/                 # Материалы курса (сессии, демо-проекты, README)
└── skills/                 # 19 Skills для Claude Code

Навыки (Skills)

В контейнере 19 предустановленных навыков (Skills) — от создания документов и дизайна до автоматизации браузера и перевода.

Работа с документами

Навык	Что делает
docx	Создание, чтение и редактирование Word-документов (.docx). Отчёты, письма, шаблоны с оглавлениями, нумерацией страниц, колонтитулами
pptx	Работа с PowerPoint-презентациями (.pptx). Создание слайдов, извлечение текста, редактирование существующих презентаций
xlsx	Работа с Excel-таблицами (.xlsx, .csv, .tsv). Создание, чтение, форматирование, формулы, графики, очистка данных
pdf	Всё, что связано с PDF: чтение, объединение, разбивка, водяные знаки, заполнение форм, OCR сканов, извлечение таблиц и изображений

Дизайн и визуализация

Навык	Что делает
frontend-design	Создание веб-интерфейсов: лендинги, дашборды, React-компоненты, HTML/CSS-макеты
canvas-design	Создание визуальных материалов: постеры, инфографика, иллюстрации в .png и .pdf
theme-factory	Стилизация артефактов (слайды, документы, HTML-страницы). 10 готовых тем, можно создать свою
brand-guidelines	Применение фирменного стиля Anthropic (цвета, типографика) к любым материалам
algorithmic-art	Генеративное искусство на p5.js: потоковые поля, системы частиц, интерактивные визуализации
web-artifacts-builder	Многокомпонентные HTML-артефакты: React + Tailwind CSS + shadcn/ui, управление состоянием, роутинг
slack-gif-creator	Создание анимированных GIF для Slack с учётом ограничений платформы

Автоматизация и тестирование

Навык	Что делает
playwright-cli	Автоматизация браузера: навигация по сайтам, заполнение форм, скриншоты, извлечение данных
webapp-testing	Тестирование веб-приложений через Playwright: проверка UI, отладка, скриншоты, логи браузера
mcp-builder	Создание MCP-серверов для подключения Claude Code к внешним API и сервисам (Python/FastMCP, Node/TypeScript)

Текст и коммуникации

Навык	Что делает
ru-editor	Редактура русского текста: убирает AI-штампы, приводит к информационному стилю
en-ru-translator-adv	Перевод с английского на русский. Трёхшаговый процесс: перевод, рефлексия, доработка
doc-coauthoring	Совместное написание документов: спецификации, предложения, техническая документация
internal-comms	Внутренние коммуникации: статус-отчёты, рассылки, FAQ, протоколы инцидентов
skill-creator	Создание новых навыков для Claude Code

Состав уроков

5 сессий по 2 академических часа. В каждой — практические демо-проекты с готовыми данными.

Сессия 1: Установка и первые задачи (3 демо)

Запуск Claude Code, работа с файлами, форматирование и конвертация.

Демо	Задача
financial-dashboard	Анализ банковской выписки (CSV), построение финансового дашборда
crm-cleanup	Очистка и нормализация CRM-экспорта
file-organization	Сортировка 33 хаотичных файлов (договоры, отчёты, заметки) по папкам

Сессия 2: Контекст и навыки (8 демо)

Как настроить CLAUDE.md, создать свои Skills, использовать слэш-команды.

Демо	Задача
claude-md-intro	Знакомство с CLAUDE.md на примерах (проектный и персональный)
audience-rewrite	Адаптация описания продукта для разных аудиторий через CLAUDE.md
weekly-report-skill	Создание навыка для еженедельных отчётов
document-pack	Пакетное создание документов из CSV и шаблона
github-skill-install	Установка навыков с GitHub
hr-letters	HR-письма через собственный навык
content-plan	Переработка квартальной стратегии в контент-план
commercial-offer	Создание коммерческого предложения по заметкам со звонка

Сессия 3: MCP — внешние сервисы (5 демо)

Подключение Google Drive, поиска, файловой системы, баз данных.

Демо	Задача
mcp-setup	Настройка MCP-серверов (filesystem, Google Drive, Tavily)
contract-comparison	Сравнение двух версий договора аренды
vendor-comparison	Оценка 7 предложений подрядчиков из разных форматов
resume-screening	Отбор резюме по требованиям вакансии
investor-briefing	Подготовка инвестиционной справки

Сессия 4: Агенты и подагенты (7 демо)

Task Tool, параллельные подагенты, хуки.

Демо	Задача
seo-audit	SEO-аудит блога по CSV с метриками статей
360-review-reports	Отчёты по результатам оценки 360
quarterly-presentation	Создание квартальной презентации из CSV-данных
meeting-protocol	Структурирование протокола по расшифровке встречи
landing-page	Лендинг силами нескольких агентов
speaking-prep	Подготовка тезисов и структуры выступления
slash-commands-and-hooks	Учебный пример: настройка слэш-команд и хуков

Сессия 5: Команды агентов (5 демо)

Командная работа агентов, обзор интеграции с n8n.

Демо	Задача
booking-bot	Система бронирования на команде агентов
cold-outreach	Персонализированная холодная рассылка по CSV с компаниями
nps-analysis	Анализ NPS-опроса несколькими агентами
portfolio-site	Портфолио-сайт силами команды агентов
n8n-integration	Интеграция Claude Code с n8n-воркфлоу

Production

Контейнер собран для локальной разработки и тестирования. Для деплоя на сервер (один контейнер на студента) есть отдельный provision-скрипт с Nginx и Let's Encrypt — см. infra/ в основном репозитории курса.

Лицензия

Внутренний проект Automatica. Курсовые материалы не для публичного распространения.