Эльдар Маркетинг

5 февраля 2026

Мне нужна была картинка к посту про AI-критиков для Telegram-канала. С ASCII-диаграммой пайплайна и текстом в monospace. В Canva есть monospace-шрифты, но попробуй засунь туда ASCII-схему из 20 строк — поплывёт. Figma — минут 20 на макет. Фрилансер — от 1500 ₽ за карточку. Я сгенерировал за 3 секунды.

Идея

Картинка для соцсетей — прямоугольник с текстом. Знаете, что ещё умеет рисовать прямоугольники с текстом? Браузер.

HTML-файл + невидимый браузер + скриншот. Всё.

Что нужно

Две вещи:

Шаблон — обычный HTML с CSS. Никаких фреймворков. Минимальный пример:

<div id="card-1"
     style="width:1080px; height:1080px;
            background:#323232; color:#fff;
            font-family:'Fira Code', monospace;
            display:flex; align-items:center;
            justify-content:center; text-align:center;
            padding:80px;">
  <div>
    <h1 style="font-size:50px; margin-bottom:30px;">
      Заголовок карточки
    </h1>
    <p style="font-size:26px; opacity:0.85;">
      Подзаголовок или описание
    </p>
  </div>
</div>

1080×1080 — квадрат для Telegram и Instagram.

Скрипт: 20 строк ядра

Весь файл — 80 строк с обработкой ошибок и CLI. Но суть — вот:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1080, height: 1080 }
});

await page.goto(`file://${htmlPath}`);
await page.waitForTimeout(1000); // ждём шрифты

const card = await page.$('#card-1');
await card.screenshot({ path: 'card-1.png' });

await browser.close();

Playwright запускает Chromium без окна, открывает HTML и снимает скриншот элемента по id. Пять карточек в файле — пять PNG на выходе.

Установка:

npm init -y
npm install playwright
npx playwright install chromium

Три команды — и всё работает. Бесплатно, навсегда.

Мой шаблон

Стиль подогнал под сайт eldarmarketing.ru:

Первая настройка заняла 5 минут — подобрать размеры, отступы, прозрачность. Каждая следующая карточка — 30 секунд: поменял текст, запустил скрипт, забрал PNG.

Карусель

Хочешь 5 слайдов? Пять div с id="card-1" до id="card-5" в одном HTML. Скрипт пройдётся по всем. Каждая карточка — свой текст, свой цвет акцента. Всё, что умеет CSS — умеет карточка.

Я так сделал серию из 5 карточек про DSG-бот: заголовок, три фичи, CTA. Пять PNG по 20-62 КБ каждый.

Почему не Canva

Canva Pro HTML + Playwright
Цена ~$13/мес $0
Monospace есть, но базовые любой с Google Fonts
ASCII-диаграммы не предназначена <pre> и готово
Код в карточке кривой рендер идеальный
Автоматизация API платный бесплатный скрипт
Бренд-стиль чужие шаблоны свой CSS

Canva — отличный инструмент. Monospace-шрифты там есть. Но попробуй собрать карточку с ASCII-диаграммой, блоком кода и точным letter-spacing — начнётся боль. А мне нужен именно этот контроль: мой CSS, мои шрифты, моя сетка.

Как начать

  1. Скопируй HTML-шаблон выше
  2. Поменяй текст, цвет, шрифт
  3. npm install playwright
  4. Запусти скрипт
  5. Забери PNG

Пять минут от нуля до первой карточки. Потом — 30 секунд на каждую.

Takeaways

  1. Браузер — лучший рендер для картинок. HTML+CSS → скриншот.
  2. $0 навсегда. Playwright open source, шрифты бесплатные.
  3. 30 секунд на карточку после первой настройки.
  4. Код и диаграммы в карточках — киллер-фича, которую Canva не даст.
  5. Свой CSS = свой бренд. Без ограничений чужих шаблонов.
EM