Рендерер шаблонов
@design-renderer
Рендеринг HTML-шаблонов в PNG заданного размера через Playwright для дизайна соцсетей. Поддерживает Instagram посты (1080x1080), Instagram Stories (1080x1920), Telegram посты (1280x720) и аватары.
Кому подходит навык «Рендерер шаблонов»
- Дизайнерам и верстальщикам — превратить готовый HTML-макет в PNG точного размера для соцсетей, без ручного скриншота.
- Маркетологам и SMM — отрендерить карточку, обложку или постер из шаблона под конкретную площадку.
- Разработчикам — автоматическая отдача картинок фиксированного размера из HTML для превью и og-изображений.
Что можно сделать
- Пост Instagram — 1080×1080 из HTML-шаблона с учётом безопасных зон.
- Stories и Reels — вертикальный кадр 1080×1920 без обрезки.
- Пост Telegram — горизонтальная обложка 1280×720.
- Аватар — квадрат 500×500 или свой размер под нужную площадку.
Как это работает: HTML + headless-браузер
Шаблон — обычный HTML/CSS с жёсткими размерами html, body { width:Xpx; height:Ypx; overflow:hidden }. Headless-браузер (Playwright/Puppeteer) грузит его через file://, ждёт загрузки шрифтов и картинок (networkidle) и делает скриншот строго в заданном размере — режим полной страницы выключен, лишних полей не появляется.
Полезные детали
- Точный размер: рендер через render.js с явными --width/--height гарантирует пиксельную точность, в отличие от обычного скриншота.
- Безопасные отступы: для Instagram — от 60px, чтобы значимый контент не перекрылся UI площадки.
- Только рендер: навык не пишет текст поста и не строит стратегию — он отдаёт PNG из готового HTML.
Связанные навыки: собрать сам макет с текстом и CTA — рекламные креативы или агент ИИ-дизайнер, объединяющий веб-дизайн и фирменный стиль.
Готовы получить картинку из шаблона? Опишите размер и площадку — запустите навык «Рендерер шаблонов».
Зачем отдельный навык, если есть скриншот браузера?
Обычный скриншот не держит точный размер: вьюпорт плавает и появляются лишние поля. Навык рендерит через headless-браузер со строго заданными --width/--height при выключенном режиме полной страницы — результат пиксельно точный.
Какие размеры поддерживаются?
Стандартные под соцсети: пост Instagram 1080×1080, Stories 1080×1920, пост Telegram 1280×720, аватар 500×500. Можно задать и любой свой размер через параметры ширины и высоты.
Что должно быть в HTML-шаблоне?
Жёсткие размеры html, body { width:Xpx; height:Ypx; overflow:hidden }, встроенные шрифты и фоны, безопасные отступы от 60px для Instagram. Браузер грузит шаблон через file:// и ждёт завершения загрузки (networkidle).
Это для написания текста поста или стратегии?
Нет. Навык только рендерит готовый HTML в картинку. Текст поста, контент-план и стратегию делают другие навыки — здесь исключительно отдача PNG из шаблона.
Что я получу на выходе?
PNG-файл строго заданного размера, собранный из вашего HTML. Если headless-браузер недоступен, навык честно об этом скажет и предложит открыть шаблон в браузере для ручного скриншота.
Рендерер дизайн-шаблонов
Рендери HTML-шаблоны в PNG с точными размерами для соцсетей через Playwright.
Стандартные размеры
| Назначение | Ширина | Высота |
|---|---|---|
| Instagram пост | 1080 | 1080 |
| Instagram Stories | 1080 | 1920 |
| Telegram пост | 1280 | 720 |
| Аватар | 500 | 500 |
Workflow
- Создай HTML-шаблон с
html,body{width:Xpx;height:Ypx}и фоном. - Сохрани его, например
template.html. - Отрендери в PNG через Node-скрипт (Node всегда доступен в десктопе; Python — нет):
node scripts/render.js --html template.html --out post.png --width 1080 --height 1080
scripts/render.js сам поднимет headless-браузер (Playwright или Puppeteer) и сделает
скриншот строго в заданном размере. Никакого python3 и HTTP-сервера — Node читает HTML
через file:// напрямую.
Критически важно
- НЕ используй
browser-use --headed screenshot— вьюпорт неконтролируем, результат содержит лишние поля. - Всегда рендерь через
scripts/render.jsс явными--width/--height— это гарантирует точный размер (full_page=false). - Скрипт использует
waitUntil: networkidle— шрифты и изображения успеют загрузиться.
Если браузер недоступен
Рендер требует headless-браузер (Playwright/Puppeteer + Chromium). Если его нет:
- С согласия пользователя установи:
npm i -D playwright && npx playwright install chromium(илиnpm i puppeteer). - Если не получилось или пользователь отказался — честно скажи, что автосохранение картинки
сейчас недоступно, и предложи альтернативу: открыть HTML в браузере и сделать скриншот
вручную, либо сгенерировать обложку через MCP-инструмент
kling_text_to_image(фоллбэк —glm_generate_image).
Требования к шаблону
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 1080px;
height: 1080px;
overflow: hidden;
font-family: 'Segoe UI', sans-serif;
}
/* Безопасные отступы ≥60px для Instagram */
.content { padding: 60px; }
</style>
</head>
<body>
<div class="content">
<!-- Контент -->
</div>
</body>
</html>