Как я делаю карточки для Telegram-каруселей без Figma

Сережа Рис · 25 January 2026

Нужны были карточки для поста о восьмом потоке кружка. Шесть штук, квадратные, в едином стиле.

Открывать Figma — долго. Canva даёт шаблонное месиво. Сделал через код.

Проблема

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

Для кружка такие карточки нужны постоянно — анонсы потоков, расписание, результаты учеников. Хотел один раз настроить шаблон и менять только текст.

Решение

Попросил Claude Code на Opus 4.5 собрать HTML-страницу с карточками. Дал ему контент и описание стиля:

Агент сделал:

1. Создал HTML с шестью div’ами — каждый ровно 1080×1080
2. Подключил Google Fonts (Unbounded для заголовков, JetBrains Mono для тегов)
3. Добавил атмосферные эффекты: grid-линии, scanlines, неоновые свечения
4. Каждой карточке — свой акцентный цвет (cyan, magenta, green, purple, orange)

Затем — автоматические скриншоты:

Playwright проскроллил страницу, снял каждую карточку отдельно. Шесть PNG по 3 мегабайта — готово.

Почему это работает

Текст хранится в HTML. Поменял слово — перезапустил скриншот. Никакого “где этот слой в Figma”.

CSS-переменные держат консистентность: отступы, шрифты, цвета — одинаковые на всех карточках. Завтра нужен новый набор — меняю только контент.

И бонус: HTML лежит в git. Откатиться к прошлой версии — одна команда.

Техническая часть

Ключевые моменты:

• Размер карточки через CSS-переменную --card-size: 1080px
• Playwright умеет скриншотить отдельные элементы по id
• Локальный Python-сервер (python3 -m http.server) чтобы открыть файл в браузере

Результат

Шесть карточек с первого промпта. Агент сам подобрал шрифты, сделал неоновые свечения, расставил цвета по проектам.

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

Источники

• Generate Open Graph Images with Playwright — David Bushell о генерации OG-картинок
• HTML/CSS to Image API — сервис для конвертации HTML в изображения
• Auto-Generated Social Media Images — CSS-Tricks об автоматизации социальных картинок

Об авторе

Подписаться на обновления — @sereja_tech