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

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

@design-renderermarketing

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

0 установокПубличный

SKILL.md

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

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

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

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

Workflow

  1. Создай HTML-шаблон с html,body{width:Xpx;height:Ypx} и фоном
  2. Запусти HTTP-сервер в папке с шаблоном: python3 -m http.server 8899
  3. Выполни рендеринг:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={'width': W, 'height': H})
    page.goto(f'http://localhost:8899/{template}.html', wait_until='networkidle')
    page.screenshot(path='output.png', full_page=False)
    browser.close()
  1. Останови HTTP-сервер после рендеринга

Критически важно

  • НЕ используй browser-use --headed screenshot — вьюпорт неконтролируем, результат содержит лишние поля
  • Всегда указывай full_page=False — иначе скриншот будет размером с страницу, а не viewport
  • Используй wait_until='networkidle' — гарантирует что шрифты и изображения загрузились
  • Гаси HTTP-сервер после использования

Требования к шаблону

<!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>

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

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

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

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