| name | export-png |
| description | Скриншоты слайдов/экранов в PNG через Playwright. Один кадр на слайд или массовый рендер по селектору. |
| when_to_use | Пользователь просит "выгрузить слайды как картинки", "скриншот каждого экрана", "PNG'и для Notion / Telegram". |
Export PNG
Playwright headless. Установка та же, что для export-pdf:
npm i -D playwright && npx playwright install chromium
Скрипт
templates/render-png.mjs — умеет:
- Если на странице есть
<deck-stage> — переключает слайды через goToSlide(i) и снимает кадр на каждый.
- Иначе — снимает либо весь viewport, либо элементы по селектору (
--selector ".artboard").
node render-png.mjs deck.html out/
node render-png.mjs canvas.html out/ --selector dc-artboard --width 1200 --height 800
node render-png.mjs prototype.html out/screen.png
Размеры
По умолчанию viewport 1920×1080, scale 2 (retina). Меняется флагами --width, --height, --scale.
Подсказки
- Для деков скрипт ждёт 600ms между слайдами — этого хватает для transition. Если у тебя длиннее —
--delay 1200.
- Для прозрачных картинок добавь
--omit-background (установит body background в transparent перед снимком).
- Шрифты —
await document.fonts.ready уже стоит. Если используешь Google Fonts с display: swap, добавь --font-wait 1000.
Legacy reference
Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-export-png.md. Секции там: Базовый каркас, Стандартные размеры social, Серия из шаблона, Серия слайдов как PNG, Качество vs размер файла, Прозрачный PNG, После export — оптимизация, Антипаттерны.