Карусель генератор: карусели для Instagram и LinkedIn через Claude Code

Зачем это нужно

Карусели работают. LinkedIn отдаёт карусельным постам в 2-3 раза больше охвата, чем обычному тексту. Instagram использует их как основной формат для обучающего контента. Но собирать карусели руками долго, а сервисы вроде Canva Pro стоят от $12/мес, шаблоны устаревают, дизайнер просит от $50 за одну карусель.

Этот скилл решает проблему в корне. Ты описываешь тему. Claude Code генерирует карусель по твоему брендбуку. Получаешь готовые PNG-слайды 1080×1350 для публикации. Процесс занимает пару минут, стоит ноль.

Что внутри архива

13 файлов. Готовый движок + инструкция для Claude Code + стартовый шаблон + пример.

• SKILL.md. Инструкция для Claude Code. Срабатывает автоматически на фразы «создай карусель», «сделай карусель», «новая карусель»

• README.md. Инструкция для тебя: установка, использование, структура

• BRAND.example.md. Темплейт брендбука. Копируешь в BRAND.md, заполняешь под свой бренд. Клод читает его перед каждой генерацией

• generate.js. Рендерит PNG через Puppeteer

• preview.js. Открывает HTML-галерею в браузере для ревью до финального рендера

• _render-core.js. Ядро: шрифты, ассеты, плейсхолдеры. Не трогаешь, просто работает

• templates/simple.html. Минимальный чистый шаблон. Белый фон, чёрный текст, синий акцент. Попросишь Клода адаптировать под свой бренд и получишь свой

• carousels/example/. Рабочий пример на 3 слайда. Запустишь и сразу увидишь, как всё устроено

• fonts/. Сюда кладёшь свои шрифты

• assets/. Сюда кладёшь свои SVG-иконки

Как это работает

1. Распаковка и настройка

Распакуй архив куда удобно. Например, ~/Carousels/ или C:/Carousels/. Затем:

cd carousel-generator
npm install
npx puppeteer browsers install chrome

Первая команда ставит Puppeteer. Вторая один раз качает Chromium (около 200 МБ), который Puppeteer использует для рендера. Это одноразовая установка.

2. Проверка

node generate.js example

Должны появиться 3 PNG в output/example/. Если появились, всё работает.

3. Передай проект Claude Code

Открой папку в Claude Code и скажи:

Разберись с этим проектом. Я хочу генерировать карусели
в своём стиле. Помоги настроить под мой бренд: цвета,
шрифты, первый шаблон.

Claude Code прочитает SKILL.md и README.md, задаст вопросы про твой бренд, поможет заполнить BRAND.md, добавить шрифты и адаптировать шаблон.

4. Генерируй карусели

После настройки просто говоришь в любой момент:

Создай карусель на тему «5 ошибок начинающих копирайтеров».

Клод:

1. Читает твой BRAND.md и твой шаблон

2. Смотрит предыдущие карусели, чтобы новая отличалась визуально

3. Создаёт carousels/<slug>/data.json с текстом

4. Запускает node preview.js <slug>. Открывается браузер с галереей всех слайдов

5. Ты смотришь, даёшь правки. «Укороти второй заголовок». «Замени иконку на четвёртом слайде». «Добавь ещё один слайд с примером»

6. Клод правит, обновляет preview. Итерации до апрува

7. Когда одобряешь, запускает node generate.js <slug>. Получаешь финальные PNG в output/<slug>/

Главная идея: адаптация под твой бренд

Стартовый simple.html это чистый минимум. Задумано так специально. Ты просишь Клода:

Сделай мой шаблон: тёмный фон #0C0F15, акцентный
неоновый салатовый, заголовки в Benzin Bold, плавающие
геометрические декорации в углах, тонкая сетка на фоне.

Клод читает simple.html, понимает структуру (где body, где decor, где футер) и переписывает шаблон под тебя. Хранишь сколько угодно шаблонов в templates/: cover-hero.html, tutorial.html, quote.html. В каждой карусели указываешь нужный в config.template.

Шрифты

Puppeteer не видит системные шрифты. Поэтому все шрифты должны лежать в fonts/ как файлы. Положи .ttf/.otf туда и пропиши в fonts.config.json:

[
  { "family": "Inter", "weight": "400 700", "file": "Inter-Variable.ttf" },
  { "family": "Montserrat", "weight": 700, "file": "Montserrat-Bold.ttf" }
]

Бесплатные шрифты: Google Fonts, Open Foundry, Velvetyne. Если оставишь пустым, слайды отрендерятся системным шрифтом (Inter / system-ui). Всё равно рабочий результат.

Ассеты

Любой SVG, PNG, JPG в assets/ можно использовать в слайдах через {{asset:имя.svg}}. Рендер встроит файл как data URI прямо в HTML, внешних ссылок не будет. Бесплатные библиотеки иконок: Heroicons, Lucide, Feather, Phosphor, Tabler.

Требования

• Node.js 20+. Проверь командой node -v

• Claude Code. Устанавливается через npm install -g @anthropic-ai/claude-code

• ~200 МБ свободного места для Chromium

• Windows / macOS / Linux. Работает везде

Частые вопросы

Можно использовать без Claude Code? Можно, но теряется весь смысл. Тогда ты сам редактируешь data.json и запускаешь команды. Клод берёт на себя генерацию контента и итерации.

Сколько шаблонов можно сделать? Сколько угодно. Типовой набор: обложка, туториал, цитата, статистика, разбор кейса. Каждый шаблон это просто .html-файл в templates/.

Можно сделать не 1080×1350, а квадрат 1080×1080? Да. В config указываешь любой размер. Работает с любыми пропорциями.

Скилл умеет делать видео-карусели или GIF? Нет. Только статические PNG-слайды. Для видео нужен другой стек.

Куда сохранять BRAND.md? В корень проекта, рядом с SKILL.md. Клод читает его автоматически. Коммить в git вместе с проектом.

Что дальше

Скачай архив. Распакуй. Дай Клоду папку и скажи «разберись». За 10-15 минут получишь настроенный под тебя генератор. Дальше карусели делаются за пару минут, без подписок.

Полный видео-разбор: смотри на канале. Там показано, как я настраиваю скилл под свой аккаунт, адаптирую шаблон и генерирую карусель с нуля.