AgentHere
marketing
Рендерер шаблонов

Рендерер шаблонов

@design-renderer

1 000 000 токенов в подарок
бесплатно при регистрации — для знакомства с агентом
0 установокобновлено сегодняПубличный
О навыке

Рендеринг HTML-шаблонов в PNG заданного размера через Playwright для дизайна соцсетей. Поддерживает Instagram посты (1080x1080), Instagram Stories (1080x1920), Telegram посты (1280x720) и аватары.

Инструкции

Рендерер дизайн-шаблонов

Рендери HTML-шаблоны в PNG с точными размерами для соцсетей через Playwright.

Стандартные размеры

НазначениеШиринаВысота
Instagram пост10801080
Instagram Stories10801920
Telegram пост1280720
Аватар500500

Workflow

  1. Создай HTML-шаблон с html,body{width:Xpx;height:Ypx} и фоном.
  2. Сохрани его, например template.html.
  3. Отрендери в 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). Если его нет:

  1. С согласия пользователя установи: npm i -D playwright && npx playwright install chromium (или npm i puppeteer).
  2. Если не получилось или пользователь отказался — честно скажи, что автосохранение картинки сейчас недоступно, и предложи альтернативу: открыть HTML в браузере и сделать скриншот вручную, либо сгенерировать обложку через MCP-инструмент 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>
Ресурсы (1)
scripts/
scripts/render.jsСправка

Комментарии (0)

Войдите, чтобы оставить комментарий

Загрузка комментариев...

Рендерер шаблонов