398 lines
21 KiB
Markdown
398 lines
21 KiB
Markdown
# 📐 STORYBASE — База для серии Stories-роликов
|
||
|
||
> **Статус:** Foundation Document v1.0 (2026-07-05)
|
||
> **Автор:** Architect (Никита)
|
||
> **Назначение:** Единый источник истины для всей серии вертикальных рекламных роликов (Stories/Reels/Shorts)
|
||
> **Формат:** 1080×1920 (9:16) — универсально для WhatsApp Stories, Instagram, Telegram, VK
|
||
|
||
---
|
||
|
||
## 1. БИЗНЕС-ПРОФИЛЬ
|
||
|
||
### 1.1 Продуктовый портфель
|
||
|
||
| # | Продукт | Тип | Статус | Описание |
|
||
|---|---------|-----|--------|----------|
|
||
| P1 | **ROI24** | SaaS-платформа | Production | Автоматизация маркетинга: AI-генерация, чат-боты, рассылки, парсинг, упаковка |
|
||
| P2 | **Call24** | SaaS-сервис | Production | AI-аналитика звонков: распознавание намерений, оценка менеджеров, инсайты |
|
||
| P3 | **152-fz checker** | Web-сервис | Production | Проверка сайтов и процессов на соответствие 152-ФЗ (персональные данные) |
|
||
| P4 | **Локальный AI** | Инфраструктура | Production | Развёртывание LLM на своём железе (Qwen3.6-35B-A3B, 2×RTX 3080 Ti) |
|
||
|
||
### 1.2 Позиционирование
|
||
|
||
> **"Локальный AI-суверенитет для российского бизнеса"**
|
||
> Мы строим инфраструктуру: автоматизация, аналитика, защита данных, локальный ИИ.
|
||
> Не консалтинг. Не аутсорс. Готовые продукты.
|
||
|
||
**УТП:**
|
||
1. **Полный контроль данных** — локальное развёртывание, 152-ФЗ out-of-the-box
|
||
2. **Готовые продукты** — не "интеграция под заказ", а SaaS, который работает сегодня
|
||
3. **Синергия экосистемы** — ROI24 + Call24 + 152-fz + Local AI = полный цикл
|
||
4. **Техническая глубина** — основано на реальном опыте (150+ ПК сеть, реальные GPU-кластеры)
|
||
|
||
### 1.3 Целевая аудитория (CVP — Customer Value Profile)
|
||
|
||
#### Primary: Владельцы бизнеса / CEO (60% фокуса)
|
||
- Возраст: 30–50
|
||
- Боль: "трачу на маркетинг, но не вижу возврата"
|
||
- Язык: цифры, ROI, конкретика, без жаргона
|
||
- Боли: потерянные лиды, неоптимизированные бюджеты, штрафы за 152-ФЗ
|
||
- Мотивация: рост прибыли, контроль, конкурентное преимущество
|
||
|
||
#### Secondary: Технический директор / CTO (25% фокуса)
|
||
- Возраст: 28–45
|
||
- Боль: "зависимость от облаков, данные у третьих лиц"
|
||
- Язык: архитектура, безопасность, масштабируемость, SLA
|
||
- Боли: комплаенс, интеграции, производительность
|
||
- Мотивация: независимость, контроль, предсказуемость
|
||
|
||
#### Tertiary: Маркетинг-директор (15% фокуса)
|
||
- Возраст: 25–40
|
||
- Боль: "инструменты не работают в связке"
|
||
- Язык: метрики, конверсия, автоматизация
|
||
- Боли: фрагментация каналов, ручная рутина, отсутствие сквозной аналитики
|
||
- Мотивация: эффективность, автоматизация, data-driven решения
|
||
|
||
---
|
||
|
||
## 2. КОНТЕНТНАЯ СТРАТЕГИЯ
|
||
|
||
### 2.1 Рубрикатор
|
||
|
||
| Рубрика | Цель | Формат | Частота | Продукт |
|
||
|---------|------|--------|---------|---------|
|
||
| **🔥 Pain** | Попасть в боль ЦА | 15s, контраст, шок-факт | 40% | Любая |
|
||
| **💡 Solution** | Показать решение | 15–20s, визуализация | 30% | P1–P4 |
|
||
| **📊 Social Proof** | Доверие, кейсы | 15s, цифры, факты | 15% | Любая |
|
||
| **⚡ Quick Win** | Быстрая польза | 10–15s, лайфхак | 10% | Любая |
|
||
| **🎯 Brand** | Позиционирование | 15s, философия | 5% | Все |
|
||
|
||
### 2.2 Контентный микс по продуктам
|
||
|
||
| Продукт | Рубрика | Пример заголовка |
|
||
|---------|---------|-------------------|
|
||
| ROI24 | Pain | "Сколько лидов утекает пока вы спите?" |
|
||
| ROI24 | Solution | "3 автоматизации, которые заменят 5 маркетологов" |
|
||
| Call24 | Pain | "Ваш менеджер врёт. И вы это знаете." |
|
||
| Call24 | Solution | "Каждый звонок — аналитика. Не мнение." |
|
||
| 152-fz | Pain | "Штраф за 152-ФЗ: сколько стоит один клик" |
|
||
| 152-fz | Solution | "Проверка сайта за 5 секунд. Не за 500K ₽" |
|
||
| Local AI | Solution | "LLM на своём сервере. Данные не уходят в облако." |
|
||
| Local AI | Brand | "ИИ, которому доверяют. Локальный, контролируемый, ваш." |
|
||
|
||
### 2.3 Формула каждого ролика
|
||
|
||
```
|
||
0–2s : HOOK — цепляющий вопрос/факт/число (остановка скролла)
|
||
2–7s : PAIN — проблема, которую зритель узнает
|
||
7–12s : SOLUTION — ваш продукт как ответ
|
||
12–15s : CTA — конкретное действие (ссылка в шапке профиля)
|
||
```
|
||
|
||
**Правило 3-х секунд:** Если нет хука до 3-й секунды — ролик не работает.
|
||
|
||
---
|
||
|
||
## 3. КРЕАТИВНАЯ НАПРАВЛЕННОСТЬ
|
||
|
||
### 3.1 Дизайн-система
|
||
|
||
**Базовая:** Bauhaus + Apple fusion (согласно AGENTS.md)
|
||
- Минимализм, геометрия, функциональная эстетика
|
||
- Много воздуха, чёткая типографика, отсутствие визуального шума
|
||
- Вдохновение: Apple product pages, Bauhaus exhibition designs
|
||
|
||
**Цветовая палитра:**
|
||
- **Primary Dark:** `#050508` (фон, глубокий чёрный)
|
||
- **Primary White:** `#FFFFFF` (текст, акцентный)
|
||
- **Accent Blue:** `#0F62FE` (IBM Carbon B2 — кнопка, CTA)
|
||
- **Accent Cyan:** `#00B8D4` (технологичность, AI)
|
||
- **Accent Purple:** `#8A2BE2` (инновации, AI-градиент)
|
||
- **Gradient AI:** `#00B8D4` → `#8A2BE2` → `#0F62FE` (AI-контент)
|
||
- **Warning:** `#E34850` (боли, штрафы, проблемы)
|
||
- **Success:** `#18A55A` (решения, результаты)
|
||
- **Muted:** `rgba(255,255,255,0.5–0.7)` (вторичный текст)
|
||
|
||
### 3.2 Типографика
|
||
|
||
- **Заголовки (Hero):** Inter Bold/Black, 110–120px, tight tracking (-0.03em)
|
||
- **Подзаголовки:** Inter SemiBold, 68–72px, tight tracking
|
||
- **Основной текст:** Inter Regular/Medium, 42–48px, line-height 1.4
|
||
- **Моноширинный (для данных/кода):** JetBrains Mono, 32px
|
||
- **CTA (кнопка):** Inter Bold, 52px, uppercase, letter-spacing 0.05em
|
||
|
||
### 3.3 Движение и анимация
|
||
|
||
**Принцип:** Минимальные анимации, максимальная читаемость. Каждая анимация должна служить пониманию, а не украшательству.
|
||
|
||
**Анимационный словарь:**
|
||
- `fade-up` — плавное появление снизу (основной entrance)
|
||
- `scale-up` — появление с масштабированием (для CTA, цифр)
|
||
- `slide-left` — сдвиг слева направо (для последовательных элементов)
|
||
- `fade-in` — простое появление (для текста)
|
||
- `pulse` — лёгкая пульсация (для CTA, акцентов)
|
||
- `count-up` — анимация счётчика (для цифр, метрик)
|
||
|
||
**Правила анимации:**
|
||
1. Время entrance: 0.5–0.8s, ease: power3.out
|
||
2. Время exit: 0.25–0.35s, ease: power2.in
|
||
3. Stagger между элементами: 0.1–0.15s
|
||
4. Никаких бесконечных анимаций (repeat: -1 запрещён)
|
||
5. Каждый элемент появляется и исчезает по таймлайну
|
||
|
||
### 3.4 Композиция кадра (1080×1920)
|
||
|
||
```
|
||
┌─────────────────────────┐
|
||
│ Safe zone (top 15%) │ ← Логотип / Брэндинг (не тропаемый UI)
|
||
│ │
|
||
│ ┌───────────────────┐ │
|
||
│ │ HERO TEXT │ │ ← Hook (центр-верх)
|
||
│ │ (110px, bold) │ │
|
||
│ └───────────────────┘ │
|
||
│ │
|
||
│ │
|
||
│ ┌───────────────────┐ │
|
||
│ │ BODY TEXT │ │ ← Pain/Solution
|
||
│ │ (42-48px) │ │
|
||
│ └───────────────────┘ │
|
||
│ │
|
||
│ Safe zone (bottom 20%) │ ← CTA + кнопка (не перекрывается UI)
|
||
└─────────────────────────┘
|
||
```
|
||
|
||
**Safe zones:**
|
||
- **Верх:** минимум 280px от верха (Instagram/WhatsApp UI overlay)
|
||
- **Низ:** минимум 380px от низа (WhatsApp/Telegram UI overlay)
|
||
- **Безопасная область текста:** Y=280px — Y=1540px (1260px высота для контента)
|
||
|
||
### 3.5 Tone of Voice
|
||
|
||
- **Уверенный, но не самонадеянный.** Знает, но не давит.
|
||
- **Цифры > прилагательные.** "Экономит 40 часов/мес" не "очень экономит".
|
||
- **Прямой, без воды.** Как разговор с инженером, который решил проблему.
|
||
- **Технически точный.** Нет "ИИ-волшебство", есть конкретные механизмы.
|
||
- **Российский контекст.** Понимает локальные боли (152-ФЗ, импортозамещение, локальный ИИ).
|
||
|
||
---
|
||
|
||
## 4. ТЕХНИЧЕСКАЯ СПЕЦИФИКАЦИЯ
|
||
|
||
### 4.1 Формат и рендер
|
||
|
||
| Параметр | Значение |
|
||
|----------|----------|
|
||
| Разрешение | 1080 × 1920 px (9:16) |
|
||
| Длительность | 10–15 секунд (sweet spot для Stories) |
|
||
| FPS | 30fps (достаточно для motion design) |
|
||
| Формат рендера | MP4 (H.264, High Profile) |
|
||
| Bitrate | 8–12 Mbps |
|
||
| Аудио | Опционально, AAC 192kbps |
|
||
| Подписи | Обязательно (85% Stories смотрятся без звука) |
|
||
|
||
### 4.2 HyperFrames проект
|
||
|
||
```
|
||
ads-stories/
|
||
├── index.html # Главная композиция (master timeline)
|
||
├── compositions/
|
||
│ └── scene-NN-*.html # Фреймы-субкомпозиции (если нужны)
|
||
├── assets/ # Логотипы, иконки, медиа
|
||
├── hyperframes.json # Метаданные проекта
|
||
├── frame.md # Дизайн-система (цвет, тип, layout)
|
||
├── STORYBOARD.md # План роликов (shot-by-shot)
|
||
└── renders/ # Рендеры MP4
|
||
```
|
||
|
||
### 4.3 Технический стек
|
||
|
||
- **HyperFrames v0.7.33** — рендер видео из HTML
|
||
- **GSAP 3.14** — timeline-based анимации
|
||
- **Inter + JetBrains Mono** — шрифты (Google Fonts)
|
||
- **FFmpeg 8.1** — финальная обработка, конвертация, оптимизация
|
||
|
||
### 4.4 Quality Gates (перед рендером)
|
||
|
||
- [ ] `npx hyperframes lint` — 0 ошибок
|
||
- [ ] `npx hyperframes validate` — 0 console errors
|
||
- [ ] `npx hyperframes inspect` — 0 errors (warnings acceptable)
|
||
- [ ] `npx hyperframes snapshot --at <midpoints>` — визуальная проверка
|
||
- [ ] Текст в safe zone (не перекрывается UI)
|
||
- [ ] Контраст текста ≥ 4.5:1 (WCAG AA)
|
||
- [ ] Нет `display`/`visibility` в анимациях
|
||
- [ ] Все `data-composition-id` уникальны
|
||
- [ ] Все clip-элементы имеют `class="clip"`
|
||
|
||
### 4.5 Экспорт для платформ
|
||
|
||
| Платформа | Требования |
|
||
|-----------|-----------|
|
||
| Instagram Stories | 1080×1920, MP4, ≤30s, ≤4GB |
|
||
| WhatsApp Status | 1080×1920, MP4/H.264, ≤16MB, ≤30s |
|
||
| Telegram Stories | 1080×1920, MP4, ≤10MB, ≤60s |
|
||
| VK Клипы | 1080×1920, MP4, ≤5 мин |
|
||
|
||
**Оптимизация для WhatsApp** (самый ограничивающий):
|
||
- Размер файла: ≤16MB
|
||
- Х264 baseline, ≤30fps
|
||
- Аудио: AAC, ≤128kbps
|
||
|
||
---
|
||
|
||
## 5. СЛОВАРЬ ПРОДУКТОВ (для использования в роликах)
|
||
|
||
### ROI24
|
||
- **Одно предложение:** Платформа автоматизации маркетинга на 7 площадках с AI-генерацией контента и чат-ботами
|
||
- **Цифры:** 10 000+ пользователей (рынок), ROI 3–5×
|
||
- **Ключевые фичи:** AI-контент, чат-боты, рассылки, парсинг ВК, упаковка Avito/YouTube
|
||
- **Конкурентное преимущество:** Все инструменты в одной платформе, не разрозненные сервисы
|
||
|
||
### Call24
|
||
- **Одно предложение:** AI-аналитика звонков: понимает каждый разговор, улучшает каждый вызов
|
||
- **Цифры:** 100% звонков анализируются, не выборка
|
||
- **Ключевые фичи:** Распознавание намерений, оценка менеджеров, инсайты для роста продаж
|
||
- **Конкурентное преимущество:** Встроен в CRM, реальный time, не "замер"
|
||
|
||
### 152-fz checker
|
||
- **Одно предложение:** Проверка сайта и процессов на соответствие 152-ФЗ за секунды, а не за сотни тысяч
|
||
- **Цифры:** Штрафы до 6M ₽, проверка за 5 секунд
|
||
- **Ключевые фичи:** Автосканирование, чек-лист соответствия, отчёт для регулятора
|
||
- **Конкурентное преимущество:** Автоматизация того, что раньше делали юристы за 500K ₽
|
||
|
||
### Локальный AI
|
||
- **Одно предложение:** Развёртывание LLM на своём железе. Данные не уходят в облако.
|
||
- **Цифры:** Qwen3.6-35B-A3B, 2×RTX 3080 Ti, ~140 tok/s
|
||
- **Ключевые фичи:** Полная изоляция данных, API совместимый с OpenAI, без подписок
|
||
- **Конкурентное преимущество:** Готовая инфраструктура, не "консультация как настроить"
|
||
|
||
---
|
||
|
||
## 6. БЛОК-ПЛАНЫ РОЛИКОВ (шаблоны)
|
||
|
||
### Template A: Pain → Agitate → Solve (15s)
|
||
```
|
||
0–2s: HOOK — Шокирующий факт или вопрос
|
||
2–7s: PAIN — Проблема, с которой узнаёт зритель
|
||
7–12s: SOLUTION — Ваш продукт как ответ (кратко)
|
||
12–15s: CTA — Ссылка в шапке профиля / "Проверь бесплатно"
|
||
```
|
||
|
||
### Template B: How It Works (20s)
|
||
```
|
||
0–3s: HOOK — "Как [продукт] решает [проблему]"
|
||
3–10s: 3 шага (визуализация процесса)
|
||
10–17s: Результат (конкретная цифра/выгода)
|
||
17–20s: CTA
|
||
```
|
||
|
||
### Template C: Comparison (15s)
|
||
```
|
||
0–2s: HOOK — "До / После"
|
||
2–8s: BEFORE — как было (рутина, потери, ошибки)
|
||
8–13s: AFTER — как стало (автоматизация, контроль, рост)
|
||
13–15s: CTA
|
||
```
|
||
|
||
### Template D: Number Fact (10s)
|
||
```
|
||
0–3s: HOOK — Крупная цифра + вопрос
|
||
3–8s: Контекст (что значит эта цифра)
|
||
8–10s: CTA
|
||
```
|
||
|
||
---
|
||
|
||
## 7. ПРАВИЛА ПРОИЗВОДСТВА
|
||
|
||
### 7.1 Приоритеты контента
|
||
|
||
1. **Текст > Анимация** — если анимация мешает прочитать, убери анимацию
|
||
2. **Цифры > Прилагательные** — "−40% затрат" лучше "значительно снижает"
|
||
3. **Конкретика > Общие фразы** — "152-ФЗ, штраф до 6M ₽" лучше "соблюдай закон"
|
||
4. **Одна мысль = один ролик** — не смешивай ROI24 и Call24 в одном кадре
|
||
5. **CTA всегда видим** — кнопка/призыв в нижней safe zone, не перекрывается
|
||
|
||
### 7.2 Запреты
|
||
|
||
- ❌ Бесконечные анимации (`repeat: -1`, `yoyo` без явного конца)
|
||
- ❌ `display: none/block` в анимациях (ломает seekability)
|
||
- ❌ Текст за пределами safe zone
|
||
- ❌ Шрифты меньше 36px для основного текста
|
||
- ❌ Градиенты с контрастом < 3:1
|
||
- ❌ Больше 2 анимаций одновременно на сцене
|
||
- ❌ Использование `Math.random()` на рендере
|
||
- ❌ Сетевые запросы из композиции
|
||
|
||
### 7.3 Процесс создания
|
||
|
||
```
|
||
1. Выбор рубрики из §2.1
|
||
2. Написание сценария по §2.3
|
||
3. Проверка по чек-листу §4.4
|
||
4. Рендер в draft (npx hyperframes render --quality draft)
|
||
5. Просмотр → правки → повтор
|
||
6. Рендер в final (npx hyperframes render --quality high)
|
||
7. Оптимизация для каждой платформы (размер файла)
|
||
```
|
||
|
||
---
|
||
|
||
## 8. БЮДЖЕТ И РЕСУРСЫ
|
||
|
||
### 8.1 Что уже есть
|
||
- ✅ HyperFrames v0.7.33 (рендер)
|
||
- ✅ FFmpeg 8.1 (обработка)
|
||
- ✅ Node.js 20 (среды выполнения)
|
||
- ✅ AMD Ryzen 7 7700X / 90GB RAM (производительность)
|
||
- ✅ Дизайн-система (Bauhaus+Apple, Inter)
|
||
- ✅ 4 готовых продукта для рекламы
|
||
|
||
### 8.2 Что нужно для production
|
||
- [ ] Логотипы продуктов (SVG, прозрачный фон)
|
||
- [ ] Favicon/brand mark (для watermark)
|
||
- [ ] TTS-голос (если нужен нарратив)
|
||
- [ ] Framerate: 30fps (достаточно для motion design, не 60fps)
|
||
- [ ] Базовые звуковые эффекты (SFX) для переходов (опционально)
|
||
|
||
### 8.3 Rerender budget
|
||
- ~15s ролик: 30–90 секунд локального рендера
|
||
- ~5–10 секунд на кадр (30fps → 450 кадров)
|
||
- Тестовый рендер → правки → финал
|
||
|
||
---
|
||
|
||
## 9. КРИТЕРИИ УСПЕХА
|
||
|
||
### KPI для Stories-роликов
|
||
|
||
| Метрика | Target | Измерение |
|
||
|---------|--------|-----------|
|
||
| Completion Rate | ≥ 65% | Instagram/Telegram insights |
|
||
| Swipe Up / Tap Rate | ≥ 3% | Ссылки в шапке профиля |
|
||
| Profile Visits | +15% / ролик | Insights за 24ч после публикации |
|
||
| Saves / Shares | ≥ 1% | Показатель viral-коэффициента |
|
||
| Re-engagement | +10% | Возвраты из Stories в сайт |
|
||
|
||
### Quality checklist для каждого ролика
|
||
|
||
- [ ] Текст читается на 9:16 без зума
|
||
- [ ] Цвета соответствуют палитре §3.1
|
||
- [ ] Анимации ≤ 3 одновременных
|
||
- [ ] CTA виден ≥ 3 секунды
|
||
- [ ] Файл ≤ 16MB (WhatsApp constraint)
|
||
- [ ] Safe zone соблюдена
|
||
- [ ] Нет орфографических ошибок
|
||
- [ ] Ролик имеет ONE чёткое послание
|
||
|
||
---
|
||
|
||
## 10. ИСТОРИЯ ВЕРСИЙ
|
||
|
||
| Версия | Дата | Изменения | Автор |
|
||
|--------|------|-----------|-------|
|
||
| v1.0 | 2026-07-05 | Initial — полный фреймворк | Architect |
|
||
|
||
---
|
||
|
||
*Этот документ — living document. Обновляй по мере появления новых продуктов, insights и данных.*
|