| name | carousel |
| description | Генерация Instagram каруселей — от бренд-кита до готовых PNG слайдов с текстом |
| $ARGUMENTS | Тема карусели. Опционально: тип (expert/minimalist/viral/screenshot/grid), количество слайдов |
Instagram Carousel Factory
Полный пайплайн: бренд-кит → контент → AI-визуалы → HTML-шаблон → Playwright рендер → готовые PNG.
Формула: ХУКА (слайд 1) → ТЕЛО (2-N) → CTA (последний)
Режимы работы
| Что установлено | Режим |
|---|
| LaoZhang + Playwright | Полный (AI-фоны + HTML-рендер → PNG) |
| Только Playwright | HTML-only (цветные фоны из бренд-кита) |
| Ничего | Текстовый (структура + промпты для ручной сборки) |
Первый запуск — Настройка
Шаг 1: Бренд-кит
Спроси у пользователя и заполни references/brand-kit.md:
1. Название аккаунта Instagram: [@ваш_аккаунт]
2. Стиль: Light / Dark / Custom
3. Цвета: Фон [hex], Текст [hex], Акцент [hex]
4. Шрифт заголовков: [Google Fonts]
5. Шрифт подписей: [Google Fonts]
6. CTA-слайд: [путь / нет]
7. Лого/аватар: [путь / нет]
Шаг 2: Зависимости
LaoZhang API — генерация AI-фонов:
export LAOZHANG_API_KEY="sk-ваш-ключ"
Playwright — рендер HTML в PNG:
npm install playwright && npx playwright install chromium
Шаг 3: Генерация шаблона
После бренд-кита скилл создаёт: render/template.html, render/render.js, references/brand-kit.md.
Быстрый старт (после настройки)
"карусель [ТЕМА]"
"expert карусель 7 способов экономить"
"viral карусель шокирующие факты об ИИ"
"карусель со скриншотами: топ расширений"
Workflow
1. Сбор данных
- ТЕМА, ТИП (auto/expert/minimalist/viral/screenshot/grid), СЛАЙДЫ (5-10, default 7), ЯЗЫК (RU/EN)
2. Структура контента
- ХУКА (слайд 1) — заголовок + интрига, останавливает скролл
- ТЕЛО (слайды 2-N) — 1 идея = 1 слайд, max 20 слов
- CTA (последний) — стандартный файл из бренд-кита
3. Генерация визуалов
| Режим | Описание | Детали |
|---|
| A: AI-фоны + HTML | LaoZhang генерит фоны, HTML накладывает текст, Playwright рендерит PNG | См. references/api-example.md |
| B: Только HTML | Цветной фон из бренд-кита + текст через шаблон | Быстро, бесплатно |
| C: Только промпты | NanoBanana промпты для ручной сборки | См. carousel-prompts.md |
4. Рендер
cd [папка-карусели] && node render.js
5. Скриншоты (для tech-каруселей)
Для каруселей со скриншотами GitHub/сайтов — см. carousel-screenshots.md.
Файловый роутер
| Файл | Содержание |
|---|
SKILL.md | Этот файл — роутер и инструкция |
carousel-structure.md | Формулы хуков, структура Hook → Body → CTA |
carousel-types.md | Детали по каждому типу (expert, minimalist, viral, grid) |
carousel-prompts.md | Шаблоны NanoBanana промптов + Style Lock + Identity Lock |
carousel-cta.md | Варианты CTA-слайдов для конверсии |
carousel-screenshots.md | Гайд по скриншотам: захват, CSS, размеры, чеклист |
references/brand-kit.md | Бренд-кит (заполняется при онбординге) |
references/brand-defaults.md | Пресеты и шаблон бренд-кита |
references/html-template.md | Структура HTML-шаблона слайдов |
references/api-example.md | Пример вызова LaoZhang API (Gemini) |
render/template.html | HTML-шаблон (генерируется под бренд) |
render/render.js | Playwright рендер-скрипт |
render/grab-screenshots.js | Скрипт захвата скриншотов с GitHub/сайтов |
Параметры
| Параметр | Значение | Описание |
|---|
| Соотношение | 4:5 | Instagram оптимальный |
| Размер | 1080x1350px | Минимальное разрешение |
| Слайды | 5-10 (default 7) | Зависит от темы |
| Текст | Max 20 слов/слайд | Для читаемости |
| Шрифт заголовков | Из brand-kit | Google Fonts |
| AI-модель | gemini-3-pro-image-preview | LaoZhang API |
Типы каруселей
| Тип | Когда | Особенности |
|---|
| Expert | Советы, инструкции | Фото эксперта + текст |
| Minimalist | Цитаты, мысли | Чистый фон + типографика |
| Viral | Хайп, новости | Контрастный фон, крупный текст |
| Screenshot | Tech, обзоры | Скриншот по центру + заголовок |
| Grid | Много пунктов | Карточная сетка |
| Timeline | По шагам/времени | Время + описание + визуал |
Частые ошибки
- Много текста на слайде — max 20 слов
- Разные стили слайдов — Style Lock обязателен (см.
carousel-prompts.md)
- Слабый хук — не останавливает скролл (см.
carousel-structure.md)
- Нет CTA — теряется конверсия (см.
carousel-cta.md)
- Текст поверх лица — текст ТОЛЬКО внизу если есть человек
- Hex-коды в AI-промптах — Gemini рендерит их как текст
- AI генерит текст на кириллице — текст ТОЛЬКО через HTML-шаблон