Как я разобрал 46 чужих каруселей и собрал из них свою систему

Двадцать второго августа я скинул в папку 46 скриншотов чужих каруселей. Тех, на которых залипал сам. Потом попросил модель разобрать каждый слайд по одному шаблону и свёл ответы руками.

На разбор ушло часа четыре. На выходе получилось семь стилей, библиотека из 19 логотипов и рендерер, который собирает карусель из текстового файла. Сейчас у меня семь готовых каруселей, 56 слайдов. Одна карусель занимает 20-30 минут, из которых 20 уходят на то, чтобы придумать, что сказать.

Дальше — весь метод целиком. Забирай и повторяй.

Почему карусели выглядят самодельно

Проблема почти никогда не в «нет вкуса». Проблема в трёх вещах, и все три чинятся механически.

Нет системы — есть набор слайдов. Каждый пост оформляется заново, поэтому лента не читается как что-то одно.

Логотипы сервисов взяты из поиска картинок. Разный размер, разное качество, устаревшие версии, у половины белый квадрат вокруг. Это первое, что выдаёт любителя.

Слайд утверждает, а не показывает. «Это экономит время» вместо скриншота, где видно сколько.

Дальше — как закрыть каждую.

Реверс-инжиниринг: как разобрать чужие карусели

Это главный навык. Не «вдохновиться», а разобрать до параметров, которые можно ввести в свою вёрстку.

Шаг 1. Собрать корпус. 30-50 скриншотов каруселей, которые нравятся. Не пять — на пяти не видно системы. Брать целыми каруселями, а не отдельными красивыми слайдами: половина приёмов видна только в связке «обложка — середина — финал».

Шаг 2. Разобрать каждый слайд по одному шаблону. Шаблон важнее усердия: одинаковые вопросы дают сравнимые ответы.

1. Тип слайда: обложка / контент / сравнение / список / схема / финал
2. Композиция: поля, где заголовок, где визуал, сколько воздуха, выравнивание
3. Типографика: гарнитура, вес, кегль заголовка в % от высоты слайда,
   интерлиньяж, капслок или нет, сколько уровней иерархии
4. Цвет: фон (hex), акцент (hex), сколько цветов всего, есть ли текстура
5. Логотипы: какие бренды, в плашке или без, моно или в цвете,
   размер, есть ли подписи, как скомпонованы
6. Приёмы: рамки, линии, стрелки, счётчики, скриншоты, иллюстрации
7. Что делает слайд хорошим: один-два приёма, которые стоит украсть

Кегль считай в процентах от высоты слайда, а не в пикселях. Тогда параметр переносится в любую вёрстку: заголовок обложки 8-11% высоты, тело 2.2-3.2%, служебные надписи 1.2-1.5%.

Шаг 3. Сгруппировать в системы. После тридцати слайдов сами собой проступают три-пять устойчивых наборов «фон плюс шрифты плюс подача логотипов плюс тип контента». Это и есть стили — но чужие. Свои получатся на следующем шаге.

Как ускорить. Разбор 46 слайдов вручную — те самые четыре часа. Если есть доступ к модели, которая видит картинки: раскидай корпус на три-четыре пачки и запусти параллельно по одному промпту с шаблоном выше, попросив в конце каждой пачки сводку по повторяющимся системам. Дальше свести руками. Сведение как раз важно делать самому, там появляются решения.

Что выявилось на корпусе из 46 каруселей

Семь закономерностей. Они повторяются у авторов, которые между собой никак не связаны. Совпадение на таком корпусе означает механику, работающую поверх личного вкуса.

Один акцентный цвет на систему. Ровно один. Второй цвет появляется только как «тревожный» для боли и ошибок, и то редко. Цветовой шум допускается исключительно внутри логотипов и только запертым в контейнер — белую панель или серый док.

Один сквозной элемент на каждом слайде. Маскот, иконка приложения, мелкий лок-ап логотипа нейросети в шапке, счётчик слайдов. Именно он склеивает карусель в целое, а не общий фон.

Три шрифтовых регистра с жёсткими ролями. Плакатный заголовок, нейтральное тело и третий голос — рукописный маркер или моноширинный. Третий регистр читается как голос автора поверх машинной вёрстки. У авторов, где его нет, слайды заметно плоские, хотя всё остальное сделано аккуратно.

Нумерация в заголовке, а не в индикаторе. 1. STRIPE, ЭТАП 3, 01/09, 4. УРОК. Читатель всегда знает, где он и сколько осталось. Точки Instagram эту работу не делают.

Финальный слайд ломает сетку всей карусели. Инверсия в чёрное, центрирование там, где везде было по левому краю, круглый портрет. Физический сигнал «конец», который нельзя пролистать не заметив.

Доказательство вместо утверждения. Скриншот аналитики, собранный вручную интерфейс, таймкод «18:00 запрос → 18:04 готовый пост», метрика «182 захода в профиль → 93 подписки». Ни один сильный слайд не говорит «это работает» — все показывают.

Каждый слайд закрывается выводом. Плашка на всю ширину, подчёркнутая строка или подпись под скриншотом. Слайд без вывода читается как незаконченный.

Чего нет ни у кого из сильных: градиентов, глянцевых теней, стоковых 3D-иконок, эмодзи в заголовках. Тени встречаются ровно в двух местах — под скриншотом браузера и под мокапом телефона.

Отдельное наблюдение. Ни одна из разобранных каруселей не сгенерирована нейросетью-картинкой. Везде вёрстка. Псевдо-интерфейсы собраны вручную поэлементно, логотипы — векторные файлы. Генерация картинок не даёт ни корректного логотипа, ни текста без ошибок, а карусель на 80% состоит из текста и логотипов.

Как собрать свою систему стилей

Сначала бренд-ядро, потом стили. Ядро — то, что не меняется никогда: один акцентный цвет, две-три гарнитуры, радиус скруглений, наличие или отсутствие теней. Пять строк, которые можно записать на салфетке.

Потом четыре-шесть стилей на этом ядре. Не один — иначе лента однообразная. И не десять — иначе её перестанут узнавать. Стили различаются фоном, третьим шрифтовым регистром и способом подачи логотипов; ядро у всех общее.

Вот мой набор. Он закрывает почти любой контент.

Стиль	Под какой контент	Чем отличается
Журнальный	Обучающие разборы, чек-листы, «5 ошибок»	Бумажный фон с зерном, служебная шапка, цветовая грамматика плашек
Схемный	Объяснение систем и процессов	Фон-миллиметровка, псевдо-интерфейсы, цепочки узлов со стрелками
Витринный	Подборки инструментов	Белый фон, иконки в скруглённых квадратах, воздух
Тёмный технический	Промпты, конфиги, код	Чёрный фон, моноширинный, окно терминала
Доказательный	Кейсы, результаты, закулисье	Реальные скриншоты, подписи-плашки, метрики через стрелку
Нативный	Дни без времени на вёрстку	Фотография с телефона, мелкий белый текст, ноль графики

Схемный: цепочка узлов, рейтинг по признакам, отсечка внизу.

Тёмный технический: окно редактора прямо на слайде, моноширинный шрифт, ноль украшений.

Нативный: фотография на весь слайд, белый текст, собирается за пять минут.

Цветовая грамматика — приём, который стоит забрать целиком. Внутри одного стиля закрепи за цветом смысл и не нарушай: тёмная плашка всегда «проблема, было, неправильно», акцентная всегда «решение, стало, правильно», серая всегда «слабый вариант». К седьмому слайду читатель перестаёт читать подписи и считывает смысл цветом. Это ощущается как «дорого сделано», а на деле это одно правило.

Ротация. Не ставь два поста одного стиля подряд. Список стилей идёт по кругу.

Логотипы: как перестать позориться картинками из поиска

Секрет скучный. Сильные авторы не рисуют и не гуглят логотипы. Они берут SVG из векторных библиотек и один раз нормализуют под свою сетку.

Откуда качать

Источник	Что даёт	Лицензия
@lobehub/icons-static-svg	Основной набор: Claude, OpenAI, Cursor, Perplexity, Gemini, Midjourney, ElevenLabs, Railway. Единый viewBox 24×24, есть моно, цветной и вордмарк	MIT
@iconify-json/logos	Общий SaaS: Supabase, Telegram, Slack, Notion, Figma, Vercel, Airtable, Stripe. Цветные, аккуратно оптимизированы	CC0
simple-icons	Монохромные силуэты плюс фирменный hex каждого бренда	CC0
svgl.app	Вордмарки и варианты под светлую и тёмную тему. В ответе есть ссылка на официальный брендбук	MIT

npm i @lobehub/icons-static-svg @iconify-json/logos simple-icons

Без установки можно дёргать напрямую: https://cdn.simpleicons.org/supabase отдаст монохром, https://cdn.svglogos.dev/logos/supabase-icon.svg — цветной.

Чем не пользоваться. Brandfetch — щедрый бесплатный тариф, но условия запрещают программный доступ и требуют согласовывать кэширование, то есть локальный рендер под запретом. logo.dev требует атрибуции и отдаёт растр. Worldvectorlogo и подобные агрегаторы запрещают коммерческое использование, а блог, который продвигает услуги, это оно и есть.

Что придётся забрать руками. Часть брендов удалена из открытых наборов по требованию правообладателей, в частности OpenAI и Slack. Их берут с openai.com/brand и slack.com/media-kit. Telegram лучше брать прямым файлом telegram.org/img/t_logo.svg — там правильный градиент, в копиях он часто перевран.

Почему у них ряд ровный, а у тебя прыгает

Три вещи, и ни одна не про вкус.

Обрезка до реального контура. У файлов из разных источников по-разному «дышат» поля: у одного знак на всю канву, у другого 10% воздуха. Пока не обрежешь каждый до фактических границ рисунка, ряд будет скакать.

Выравнивание по площади, а не по ширине. При одинаковой ширине рамки круглые знаки кажутся мелкими, квадратные — крупными. Считать надо долю закрашенной площади и от неё коэффициент масштаба. Посчитал один раз — записал константой.

Плашка-скруглённый квадрат как выравниватель. Если посадить все знаки в одинаковый квадрат со скруглением около 22% от стороны, половина проблемы решается сама. Глаз меряет плашку, а не знак.

Что ломается в монохроме. Логотипы, где цвет несёт форму — Google Sheets, Slack, Figma, Airtable, Telegram — при механической перекраске в один цвет превращаются в кляксу. Правило: бери готовый одноконтурный силуэт из simple-icons, а не перекрашивай цветной файл. Если силуэта нет — переводи в цвет весь ряд целиком. Смесь моно и цветного в одном ряду хуже, чем любой из вариантов.

Вставлять только инлайном. Не ссылкой на CDN. Иначе рендер зависит от сети: CDN тормознул — получил слайд с дырой и узнал об этом, когда пост уже опубликован. Плюс инлайн-SVG можно перекрасить через currentColor, а картинку по ссылке нельзя.

Десять способов подать логотип

Выбирается один на карусель и держится до конца. Смесь скруглённых плашек на одном слайде и голых знаков на следующем — главный признак самоделки.

• 01 · Скруглённый квадрат, знак на 55-60% стороны — когда логотипы герои слайда.
• 02 · Монохром в цвет текста — когда логотипы фон, а не сюжет.
• 03 · Подложка фирменным цветом на 12% прозрачности плюс цветной знак — для сетки с описаниями. У чёрных логотипов подложки не будет, им нужен серый нейтральный.
• 04 · Ряд с подписями — когда часть инструментов аудитории незнакома. Подписи либо у всех, либо ни у кого.
• 05 · Логотип как узел блок-схемы — сильнейший приём: показывает связь, а не набор. Знаки мелкие и приглушённые, иначе спорят со стрелками.
• 06 · Стек с перекрытием на четверть, как аватары участников, — компактный итог. Каждому знаку обводка цветом фона.
• 07 · Водяной знак на 60-80% высоты, срезанный краем, — для слайда про один инструмент.
• 08 · Сравнительная пара по краям слайда — оба знака строго одного оптического веса, иначе разница в размере читается как оценка.
• 09 · Лента мелких монохромных знаков вдоль нижнего края — элемент шаблона серии, не больше шести-семи штук.
• 10 · Чип «знак плюс название» — когда инструмент упомянут по ходу текста и должен быть замечен.

Юридика в трёх предложениях

Называть чужой продукт его именем и показывать его логотип, когда речь именно об этом продукте, законно. Нельзя намекать на партнёрство или сертификацию и нельзя искажать знак: менять пропорции, поворачивать, добавлять тени и обводки. Отдельно: монохромная перекраска формально нарушает брендбуки многих компаний — в обучающем контенте на это никто не смотрит, но в материалах, которые продают услуги, так лучше не делать.

Конвейер: на входе тема, на выходе карусель

Всё, что выше, имеет смысл, только если не делается заново каждый раз.

Почему код, а не Canva и не Figma

Тексты правятся в одном файле, вёрстка не разъезжается. Стили — это темы оформления на одном каркасе, сменить стиль карусели значит поменять одну строку. Перевыпустить пост с новыми цифрами — пересборка, а не ручная правка девяти артбордов. Логотипы подставляются из своей библиотеки автоматически, с уже посчитанными коэффициентами размера. И результат воспроизводим: та же карусель через полгода соберётся так же.

Нужен только Node и headless-браузер. Это буквально «отрисовать HTML и сфотографировать» — тот же приём, которым делают PDF-документы. Итоговый размер слайда 1080×1350.

Структура

carousels/
  lib.mjs            общий каркас: шрифты, базовые стили, вставка логотипов
  style-a.mjs        стиль 1: своя палитра, своя типографика, свои блоки
  style-b.mjs        стиль 2
  logos/color/       цветные, нормализованные
  logos/mono/        монохромные, приведённые к currentColor
  fonts/             шрифты локальными файлами, не по ссылке
  render.mjs         открывает HTML, снимает PNG 1080×1350
  posts/2026-08-25-tema/
    content.json     только тексты и данные
    out/             готовые слайды

Ключевое разделение: стиль отдельно, содержание отдельно. Стиль пишется один раз и живёт месяцами. Содержание — это content.json, который меняется каждый пост.

{
  "style": "b",
  "topic": "Как одна голосовая заметка превращается в восемь постов",
  "slides": [
    { "type": "cover", "title": ["Одна голосовая.", "Восемь постов."],
      "accent": 1, "lead": "Записываю мысль на ходу — через двадцать минут…" },
    { "type": "stage", "badge": "Этап 2 · разбор",
      "title": ["Claude режет расшифровку", "на смысловые куски"],
      "body": "Не «сделай саммари». Три отдельных прохода…",
      "chain": [["telegram","Расшифровка","4:12 → 620 слов"],
                ["claude","Три прохода","тезисы · истории · цифры"]] },
    { "type": "cta", "code": "завод", "promise": "пришлю схему" }
  ]
}

Рендер одной командой:

node render.mjs posts/2026-08-25-tema

Вот как выглядит вывод целиком, восемь слайдов одним прогоном.

Где остаётся человек

От тебя нужна тема и факты: цифры, названия инструментов, что реально произошло. Остальное — работа по шаблону, и её можно отдать модели. Вот промпт, который выдаёт готовый content.json.

Ты собираешь содержание карусели для Instagram по моей системе.

Тема: {тема}
Фактура: {цифры, инструменты, что произошло — своими словами}
Стиль: {a — разбор / b — объяснение системы / c — подборка инструментов /
        d — промпты и код / e — кейс со скриншотами}

Правила:
- 8–10 слайдов, структура: хук → боль → перелом → 3-5 слайдов мяса →
  доказательство → свод → CTA с кодовым словом
- один слайд = одна мысль, никаких двух тезисов на слайде
- заголовок слайда до 6 слов, вся конкретика уходит в подзаголовок
- цифры только настоящие из фактуры, ничего не выдумывать;
  если цифры нет — не ставить слайд-доказательство
- запрещено: эмодзи, «в эпоху AI», «революция», мотивационные общие места
- для каждого слайда указать, какие логотипы сервисов на нём стоят,
  слагами из библиотеки

Верни JSON по схеме content.json, без пояснений.

Дальше три минуты на вычитку, рендер, публикация. Модель ошибается предсказуемо в двух вещах: придумывает цифры и лепит два тезиса на слайд. Оба ловятся глазами за минуту.

Что делается один раз, а что каждый раз

Один раз	Каждый пост
Разбор референсов	Тема и фактура
Бренд-ядро и 4-6 стилей	Прогон промпта, вычитка content.json
Библиотека логотипов с коэффициентами	Выбор стиля из ротации
Каркас и рендер	node render.mjs, публикация

Первая настройка заняла у меня полтора дня. Дальше карусель занимает 20-30 минут.

Чек-лист перед публикацией

• Один акцентный цвет, кроме логотипов
• Один сквозной элемент на всех слайдах
• Три шрифтовых регистра, роли не смешаны
• Нумерация в заголовке слайда
• Финальный слайд ломает сетку остальных
• Есть слайд-доказательство с настоящей цифрой
• Каждый слайд закрывается выводом
• Один способ подачи логотипов на всю карусель
• Логотипы из библиотеки, не из поиска картинок
• Ни одного градиента, глянцевой тени и эмодзи
• Текст читается с телефона в ленте, а не только на мониторе

Что осталось

Библиотека логотипов сейчас на 19 брендах, добавляется по одному под конкретный пост. Шрифтов четыре, из них три стоят в системе, а Caveat лежит файлом в проекте. Публикация автоматизирована наполовину: конвейер собирает карусель сам и трижды в день выкладывает её в Threads, Instagram пока руками.

Первая карусель по этой системе собралась за 26 минут.