Установите Claude Code
Откройте Terminal, выполните установку из инструкции. Если из РФ доступ затруднён, используйте раздел памятки.
Лагерь · На волне ИИ · Brand book
Дизайн-система уроков
Единый источник правды для баннеров, описаний уроков, A4-раздаток и постов GetCourse. Палитра, шрифты, плашки, кнопки, размеры баннеров, расписание и список запретов. Любая новая страница Лагеря собирается по этим правилам, иначе ломается визуальная связность курса.
🎨
Палитра цветов
01
Тринадцать цветов, каждому своя роль. Розовый #E91E8C ведущий, на нём заголовки секций, кнопки, полосы. Чёрный и серые для текста. Жёлтый, зелёный, синий, красный — для плашек по смыслу.
#E91E8C
#FCE7F3
#FFF7F9
#1A1A1A
#4A4A4A
#9CA3AF
#E5E7EB
#F59E0B
#10B981
#2563EB
#DC2626
#C99818
#F3F4F6
🅰
Типографика
02
Три шрифта Google Fonts: Inter для тела, Manrope для заголовков, JetBrains Mono для технических меток и URL. Никаких других шрифтов на странице Лагеря.
Inter
Тело текста. Параграфы описания, текст плашек, мелкие подписи. Вес 400/500/600/700/800. Базовый вес параграфа 500.
Manrope
Заголовки и сильные акценты. H1, h2 секций, заголовки карточек шагов, кнопки. Вес 700 для кнопок, 800 для заголовков.
JetBrains Mono
Технические метки и URL. Kicker над h1, мелкие подписи URL под кнопками, номера секций, футер, код. Вес 400/500/700.
H1 page
Заголовок страницы
H2 section
Заголовок секции урока
Lede / description
Параграф описания урока, основной серый текст. Жирные акценты внутри идут чёрным.
Card title
Заголовок карточки шага
Materials text
Текст плашки «Что лежит под уроком», материалы и список ссылок.
Step body
Текст внутри пронумерованной карточки шага.
URL mono
https://navolneai.ru/handouts/handout-name.pdf
Kicker
Лагерь · На волне ИИ
🔘
Кнопки
03
Три типа: розовая основная для главного действия, контурная для второстепенного, тёмная для редкого акцента. На handout-ах под кнопкой добавляем мелкую подпись URL шрифтом JetBrains Mono.
https://navolneai.ru/week1-kit.git
Правило
URL внутри кнопки и видимый текст под ней. Если клик не сработает, студент скопирует адрес руками. Только абсолютные ссылки навигатор navolneai.ru/handouts/, никаких относительных.
🧩
Карточки шагов
04
Пронумерованные карточки для ДЗ, инструкций установки, чек-листов. Розовый круг 40×40 с белой цифрой, заголовок Manrope 800 16px, описание Inter 14px серым. Между карточками 12px.
1
2
Активируйте Кит Недели 1
Скопируйте ссылку, вставьте в Claude, скажите «установи». После активации запустится агент «Портреты клиента».
3
Соберите рабочую тетрадь
Результат каждого шага сохраняется в тетрадь. В конце недели сдаём целиком одним файлом.
🟨
Плашки
05
Пять типов плашек по смыслу. Жёлтая для основного действия, зелёная для «можно» и успеха, розовая выделенная для премиум-блоков, синяя callout для подсказок, серая нейтральная для дополнительного.
🟨 Жёлтая основная — для крупных блоков
Что сделать сразу после первого урока. Открыть памятку, поставить Claude Code, подписаться на новостной канал. На неё ложатся самые важные действия недели.
✅ Зелёная — можно и успех
Что можно делать, какие подходы работают, чек-листы для самопроверки. Зелёная читается как «всё ок, делайте так».
💎 Розовая выделенная — премиум-блок
Эксклюзивные материалы тарифа В ЛАГЕРЕ, бонусные модули, специальные предложения куратору. Розовая читается как «отдельный ценный кусок».
ℹ Синяя callout — информация
Справочная информация, ссылка на дополнительный материал, пояснение к шагу. Синяя читается как «к сведению».
⚙ Серая нейтральная — дополнительное
Технические уточнения, опциональные шаги, второстепенные ссылки. Серая читается как «можно пропустить если не интересно».
Плашка «Что лежит под уроком» — отдельный тип. Фон #FFF7F9, border-left 4px розовый, padding 22px 26px.
💬 Два готовых промпта Claude, первый собирает топ болей и язык, второй собирает портрет
🤖 Агент агент «Портреты клиента», собирает портреты из ваших данных
📌
Заголовки секций
06
H2 секции состоит из эмодзи 28px, заголовка Manrope 800 22px и розовой полосы 2px snzu. Между эмодзи и текстом gap 14px. После полосы — отступ 22px до контента.
<!-- эталон h2 секции -->
<div style="display:flex;align-items:center;gap:14px;margin-bottom:22px;
padding-bottom:12px;border-bottom:2px solid #E91E8C;">
<span style="font-size:28px;line-height:1;">📌</span>
<h2 style="font-family:'Manrope',sans-serif;font-weight:800;
font-size:22px;color:#1A1A1A;letter-spacing:-0.4px;margin:0;">
Заголовок секции
</h2>
</div>
🖼
Канонические размеры баннеров
07
Источник истины: banners.ritamillaya.ru — живой генератор Маргариты. 9 шаблонов с фиксированными размерами и готовыми стилями. Любой баннер собирается ТАМ, а не нарисованным вручную. Ниже — полный список с размерами и назначением, чтобы не путать форматы.
🚨 Главное правило по баннерам
Никогда не рисовать баннер вручную «на глаз». Открываем banners.ritamillaya.ru, выбираем нужный шаблон по id из таблицы ниже, заполняем поля и экспортируем. Это гарантирует единую стилистику.
Workflow
1. Открыть banners.ritamillaya.ru2. Выбрать шаблон по id из таблицы (например
pt-lrow для полосы урока)3. Заполнить поля (название, номер, плашка, описание)
4. Экспортировать через кнопку «Скачать PNG» (использует html2canvas)
5. Положить файл в
~/Documents/maya-camp-lessons/handoff-getcourse-weekN/banners/ с именем по канону (cover-lesson-XX.png, card-lesson-XX.png и т.д.)
🖼
Реальные баннеры Недели 1 «Бриф проекта»
07a
Утверждённые баннеры всех 7 уроков Недели 1. Используем как образец для следующих недель, ничего не сочиняем. Каждый урок собран из двух форматов: обложка
pt-cover 1920×1080 и баннер модуля pt-modbanner 1605×280.
🎞
Реальные презентации Недели 1
07b
6 утверждённых презентаций Маргариты. Превью первого слайда плюс ссылка на PDF, открывается в новой вкладке. Используем эти презентации как образец вёрстки для следующих недель.
🎞
Презентации уроков и экспорт PDF
08
HTML-презентация урока это главный артефакт эфира. Размер слайда 1920×1080, 15-16 слайдов, дизайн совпадает с уроками и раздатками. Экспорт в PDF через Puppeteer с обязательным сохранением фоновых цветов, иначе розовые слайды выходят белыми.
8.1 Структура слайда 1920×1080
15-16 слайдов: обложка → программа → 11-12 содержательных → ДЗ → закрытие. Минимальные размеры жёстко закреплены, на эфирах жалуются что мелко. Карточек не больше 3-4 в ряд. Палитра та же что у уроков и раздаток: pink, ink, cream.
| Элемент | Шрифт | Размер | Вес |
|---|---|---|---|
| h1 (обложка) | Manrope | 120 px | 800 |
| h2 (заголовок слайда) | Manrope | ≥ 56 px | 800 |
| h3 | Manrope | 40 px | 700 |
| Lead (лид-параграф) | Inter | 36 px | 500 |
| Body (текст) | Inter | ≥ 22 px | 400-500 |
| Kicker | JetBrains Mono | 22 px UPPERCASE | 700 |
| Иконки | — | ≥ 80 px | — |
8.2 Эталонный CSS контейнера слайда
Каждый слайд это
<section class="slide"> фиксированного размера. Модификаторы: .brand (розовый градиент-обложка), .cream (бежевый фон), .dark (#111827, финал), .divider (разделитель), .bonus (золотой).
/* Размер слайда фиксирован, padding не правится */
.slide {
width: 1920px;
height: 1080px;
padding: 80px 120px;
position: relative;
overflow: hidden;
background: #FFFFFF;
}
.slide.brand { background: linear-gradient(135deg, #FFF1F8 0%, #FFE0EE 100%); }
.slide.cream { background: #FFF7F9; }
.slide.dark { background: #111827; color: #FFFFFF; }
.slide.divider { background: #E91E8C; color: #FFFFFF; }
🚨 Главное правило экспорта PDF — цвета не теряются
Маргарита поймала эту ошибку трижды подряд 19.06.2026. Двух условий мало, нужны три:
print-color-adjust: exact !importantна*- Явные hex для всех элементов на CSS-переменных (
var(--pink)→#E91E8C !important). Puppeteer не всегда корректно резолвит CSS-переменные при печати. - Никаких
background: transparentдля[data-edit]. Это правило идёт ПОСЛЕ.pillи переопределяет фон у всех плашек. Оставлять толькоbox-shadow: none.
@media print {
@page { size: 1920px 1080px; margin: 0; }
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* ← обязательно: явные hex для плашек на CSS-переменных */
.pill { background: #E91E8C !important; color: #fff !important; }
.pill.outline { background: #fff !important; color: #E91E8C !important; border: 3px solid #E91E8C !important; }
.pill.cream { background: #fff !important; color: #1A1A1A !important; }
.slide.brand { background: linear-gradient(135deg, #FFF1F8 0%, #FFE0EE 100%) !important; }
.slide.cream { background: #FFF7F9 !important; }
.slide.divider { background: linear-gradient(135deg, #E91E8C 0%, #C2185B 100%) !important; color: #fff !important; }
html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; }
.toolbar { display: none !important; }
.slide {
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
page-break-after: always;
break-after: page;
width: 1920px !important;
height: 1080px !important;
}
.slide:last-of-type { page-break-after: auto; }
/* ← НЕ ставить background: transparent — оно перекроет .pill */
[data-edit] { box-shadow: none !important; outline: none !important; }
}
8.4 Скрипт экспорта через Puppeteer
Готовый скрипт лежит в
~/Documents/maya-camp-lessons/export-to-pdf.js. Ключевые параметры page.pdf() ниже. Размер задаётся в пикселях, не в формате A4, иначе ratio 16:9 ломается.
// 1. Дождаться загрузки шрифтов до экспорта
await page.evaluateHandle('document.fonts.ready');
// 2. Эмулировать print media
await page.emulateMediaType('print');
// 3. Экспорт в PDF с сохранением фонов
await page.pdf({
path: 'lesson-XX.pdf',
width: '1920px',
height: '1080px',
printBackground: true, // без этого фоны белые
preferCSSPageSize: true,
margin: { top: 0, right: 0, bottom: 0, left: 0 }
});
✓ Чеклист перед выгрузкой PDF
✓ В HTML есть блок @media print с
print-color-adjust: exact на * через !important✓ В вызове
page.pdf() стоит printBackground: true✓ Шрифты подгрузились до экспорта:
await page.evaluateHandle('document.fonts.ready')✓ Размер 1920×1080 явно задан и в
@page, и в page.pdf()✓ В
@media print убраны box-shadow и border-radius у слайдов✓ Каждый
.slide имеет page-break-after: always✓ Проверить что в
@media print правило [data-edit] НЕ содержит background: transparent (только box-shadow: none; outline: none), иначе обнулит фон плашек✓ После экспорта открыть PDF глазами и проверить что розовые/бежевые фоны на месте
8.6 Спикерская плашка внизу слайда
Компонент 480×270 px (16:9) в правом верхнем углу каждого слайда, прижат к кромке. Полупрозрачный розовый фон, пунктирная рамка слева и снизу. Внутри: label СПИКЕР, имя спикера, его роль. Подставляется автоматически через JS в каждый
.slide.
.speaker-slot {
position: absolute;
top: 0; right: 0;
width: 480px; height: 270px;
background: rgba(233, 30, 140, 0.08);
border-left: 2px dashed rgba(233, 30, 140, 0.4);
border-bottom: 2px dashed rgba(233, 30, 140, 0.4);
padding: 24px 28px;
}
.speaker-slot .ss-label {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
letter-spacing: .14em;
color: #E91E8C;
text-transform: uppercase;
}
.speaker-slot .ss-name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 36px; color: #1A1A1A; }
.speaker-slot .ss-role { font-family: 'Inter', sans-serif; font-size: 22px; color: #4A4A4A; }
⚡ Что НЕЛЬЗЯ в презентации урока
- Не анонсировать следующий урок конкретной темой/названием. Порядок может поменяться. Закрывать слайд на ДЗ.
- Не вставлять слайд с тарифами. Студенты уже купили курс.
- Не писать длительность урока (~50-60 мин) ни на обложке, ни внутри.
- Не использовать «AI» в материалах Майи. Везде «ИИ» (русск.). Бренды Claude/ChatGPT и аббревиатуры API/HTML оставлять как есть.
- Не упоминать VPN, обход блокировок, криптовалюту, Sora — везде в Лагере.
- Не выдумывать регалии спикера. Только верифицированное с лендинга.
- Без тире в текстах слайдов, заменять запятой, союзом, точкой.
📎
Плашка «Что лежит под уроком»
09
Обязательная плашка под каждым описанием урока в GetCourse. Внутри — список handout-ов, агентов, промптов с кнопками скачивания на абсолютные URL navolneai.ru/handouts/.
💬 Два готовых промпта Claude, первый собирает топ болей, второй собирает портрет
🤖 Агент «Портреты клиента», собирает портреты из ваших данных в рабочую тетрадь
📄 Раздатка PDF, чек-лист на живость портрета, 8 блоков
📅 ICS на 9 недель курса и 12 эфиров
/* CSS .materials */
background: #FFF7F9;
border-left: 4px solid #E91E8C;
border-radius: 12px;
padding: 22px 26px;
font-size: 15px;
line-height: 1.7;
color: #4A4A4A;
🧱
Правила для GetCourse
10
GetCourse сбрасывает внешний контейнер с
max-width. Поэтому поля выставляем inline-стилем на каждом верхнеуровневом блоке.
⚡ Главное правило
На каждом верхнеуровневом блоке (параграф описания, секция, плашка) inline-стиль:
margin: 0 56px 40px 56px;
Без полей по 56px GetCourse растягивает контент во всю ширину колонки — выглядит «расхлябанно». Между секциями обязательный margin-bottom 40px.
<!-- параграф описания урока -->
<p style="font-family:'Inter',system-ui,sans-serif;
font-size:17px;line-height:1.65;color:#4A4A4A;
font-weight:500;margin:0 56px 40px 56px;">
... текст урока ...
<b style="color:#1A1A1A;font-weight:700;">акцент</b>
</p>
Не делать
НЕ оборачивать всё в <div max-width:880px> — GetCourse его сбрасывает, и поля исчезают. НЕ ставить поля через class или внешний style — только inline на каждом блоке.
⛔
Что НИКОГДА не упоминать
11
Список запретов на материалы Лагеря, согласованный с Майей. За каждым стоит конкретный фидбек, нарушение = переделка.
Длительность урока
Не писать «~50 минут», «~1 час». Время не показываем нигде.
Не писать «~50 минут», «~1 час». Время не показываем нигде.
Анонс следующего урока
Порядок может поменяться. Слайд «что дальше» общий или убрать.
Порядок может поменяться. Слайд «что дальше» общий или убрать.
Тарифы в обучающих уроках
Студенты уже купили. Урок закрывать на ДЗ, не на В ЛАГЕРЕ/НА СМЕНЕ/Я САМ.
Студенты уже купили. Урок закрывать на ДЗ, не на В ЛАГЕРЕ/НА СМЕНЕ/Я САМ.
VPN, обход блокировок
Использовать «доступ из РФ затруднён», «работает из РФ напрямую».
Использовать «доступ из РФ затруднён», «работает из РФ напрямую».
Криптовалюта
Без USDT/P2P/вывода в крипте. Незаконно в РФ.
Без USDT/P2P/вывода в крипте. Незаконно в РФ.
Sora (OpenAI)
Больше нет в публичном доступе.
Больше нет в публичном доступе.
Подсчёт «X уроков»
Пугает. Показывать через результат, навык, проект.
Пугает. Показывать через результат, навык, проект.
Тире — и –
Везде заменять запятыми, союзами, точкой. Прогонять grep перед публикацией.
Везде заменять запятыми, союзами, точкой. Прогонять grep перед публикацией.
Выдуманные регалии
Сколково, годы опыта, число учеников. Только верифицированное с лендинга.
Сколково, годы опыта, число учеников. Только верифицированное с лендинга.
«AI» вместо «ИИ»
Везде русское «ИИ». Бренды (Claude, ChatGPT) и аббревиатуры (API, HTML) оставлять.
Везде русское «ИИ». Бренды (Claude, ChatGPT) и аббревиатуры (API, HTML) оставлять.
«Лилу»
Имя не упоминать.
Имя не упоминать.
Эмодзи как иконки на баннерах
Браузер рендерит непредсказуемо. Использовать inline SVG.
Браузер рендерит непредсказуемо. Использовать inline SVG.
Шапки на handout-ах
Без названия урока, спикера, даты. Уже в Telegram-посте и заголовке GetCourse.
Без названия урока, спикера, даты. Уже в Telegram-посте и заголовке GetCourse.
Относительные URL
Только абсолютные navolneai.ru/handouts/...
Только абсолютные navolneai.ru/handouts/...
🔗
Ссылки Лагеря
12
Источники истины для подстановки в handout-ы, описания, посты GetCourse. Все ссылки на VPS отдаются через Caddy с кэшем 5 минут.
Telegram-каналы
Помощники Урока 03
Карта, оплата, СМС, IP
@platipomiru_bot · @notruble_ru · @sim_kazakhstan · @yourbootesvoid
Подписки и постеры
📅 Объединённый ICS
9 недель уроков + 12 эфиров одной подпиской
navolneai.ru/handouts/lager-na-volne-ii.ics
🗓 Постер дорожной карты
9 недель Лагеря, PNG для печати
navolneai.ru/handouts/lager-calendar-poster.png
Учебные проекты Недели 1
🎤
Расписание прямых эфиров
13
Двенадцать встреч вопрос-ответ на лето 2026. Чередуются Майя, Маргарита, Роман. Встречи с куратором — отдельно для каждого потока, согласовываются в чате.
| № | Дата | Кто ведёт |
|---|---|---|
| 01 | 16 июня, вторник | Майя |
| 02 | 20 июня, суббота | Маргарита |
| 03 | 27 июня, суббота | Маргарита |
| 04 | 4 июля, суббота | Маргарита |
| 05 | 7 июля, вторник | Майя |
| 06 | 11 июля, суббота | Маргарита |
| 07 | 14 июля, вторник | Майя |
| 08 | 18 июля, суббота | Маргарита |
| 09 | 25 июля, суббота | Роман, первая встреча |
| 10 | 1 августа, суббота | Роман |
| 11 | 8 августа, суббота | Роман |
| 12 | 17 августа, понедельник | Майя, финал |
🗓
Расписание выхода уроков
14
Девять недель курса плюс подготовительная. Смена 1 — Генеративный ИИ, Смена 2 — Vibe-кодинг и AI-агенты. Календарь Google Calendar margarita.lediaeva@gmail.com.
| Период | Даты |
|---|---|
| Неделя 0 · Подготовка | без дат |
| Смена 1, Неделя 1 · Бриф проекта | 22–28 июня |
| Смена 1, Неделя 2 · Контент и упаковка | 29 июня – 5 июля |
| Смена 1, Неделя 3 · Продажи и автоматизация | 6–12 июля |
| Спринт по заработку, бонус | 13–19 июля |
| Смена 2, Неделя 1 · Лицо AI-помощника | 20–26 июля |
| Смена 2, Неделя 2 · Мозг AI-помощника | 27 июля – 2 августа |
| Смена 2, Неделя 3 · Запуск AI-помощника | 3–9 августа |
| Финальная неделя | 10–16 августа |
Календари Google
Эфиры: ID 9c9d08b445e4804317094cb90225756f6f5d7fdcb3a55d426ffd5ca998404230@group.calendar.google.comУроки по неделям: ID
6efbd4fcd6db2b5cd96e8611015f774661671a677d09c3389d0c92bf9fa9b552@group.calendar.google.com