Визуальные посты для ленты — карточки с цитатами, списки, статистика, инфографика, текст на фото. Композиция текста поверх фона в HTML/SVG → рендер в PNG (4:5 1080×1350 или 1:1 1080×1080).

Визуальные посты для соцсетей

Готовый визуальный пост — карточка, которая работает как самостоятельная единица контента: цитата, список, статистика, мини-инфографика, текст на фото. Такие посты сохраняют и репостят чаще текстовых — это сильный сигнал алгоритмам IG/VK/LinkedIn.

Принцип: текст — настоящий, в HTML/SVG

Текст на картинке не генерируется нейросетью (glm-image искажает буквы). Компонуем так:

фон (generate_image через image-studio ИЛИ чистый цвет/градиент)
   + текст/заголовок/цифры → HTML/SVG-шаблон
   → рендер в PNG (design-renderer)

Шрифты — системные (system-ui, Segoe UI, Georgia) для детерминированного рендера на Windows-десктопе без загрузки веб-фонта.

Когда использовать

• «сделай визуальный пост / карточку»
• цитата (свою, клиента, известного человека — с атрибуцией)
• список (5 признаков, 3 ошибки, чек-лист)
• статистика / «стат-карточка» (одна цифра + 1 строка контекста)
• мини-инфографика (процесс, сравнение, до/после)
• текст на фото («morgan freeman voice» morale, аффирмация, правило)
• «сохраните, чтобы не потерять» — savable-контент

Когда НЕ использовать

• Рекламный баннер с оффером/CTA/erid → ad-creatives.
• Карусель из нескольких слайдов → carousel-posts.
• Чистая картинка без текста (иллюстрация, фото) → image-studio.
• Текст поста (подпись, сам пост) → post-generator.

Что на выходе

1. PNG нужного размера (4:5 1080×1350 — recommended для ленты; 1:1 1080×1080).
2. HTML/SVG-исходник — чтобы править текст без перегенерации.
3. Подпись к посту (короткая, с CTA «сохрани»/«поделись») — если просили пост целиком.

Инструменты

Чистый фон (цвет/градиент) не требует генерации — сразу вёрстка в HTML/CSS.

Типы визуальных постов

Шаблоны HTML для каждого типа — в references/visual-post-templates.md.

Рабочий процесс

Шаг 1. Замысел

Тип поста, ключевая мысль/цифра/цитата, бренд-цвета и шрифт (или «подбери»), площадка. Если цитата/статистика — проверь источник и атрибуцию.

Шаг 2. Фон

• Чистый цвет/градиент — для списка/стат-карточки/цитаты (быстро, без генерации).
• Фото/иллюстрация — через image-studio (--no text), для «текст на фото» и настроенческих постов. Оставь негативное пространство под текст.

Шаг 3. Композиция (HTML/SVG)

Собери шаблон из references/visual-post-templates.md. Соблюдай:

• Контраст текста ≥ 4.5:1 (WCAG AA). На фото — скрим/затемнение под текстом.
• Один фокус: взгляд первым падает на главную мысль/цифру.
• Мобильная читаемость: шрифт достаточно крупный (заголовок ≥ 48px при 1080 ширине), читается в миниатюре в ленте.
• Безопасная зона: значимое не у краёв (≥60px).
• 60-30-10: фон 60, surfaces 30, акцент 10.
• Бренд-консистентность: та же палитра/шрифты/раскладка, что и в других постах (см. память brand.md).

Шаг 4. Рендер

node <design-renderer>/scripts/render.js --html post.html --out post.png --width 1080 --height 1350

Шаг 5. Проверка

Через analyze_image или визуально: текст читаем? контраст достаточен? ничего не обрезано? один фокус? Если нет — правь HTML, не перегенерируй фон.

Шаг 6. Доставка

PNG + HTML-исходник + (опц.) подпись. Предложи серию (3–5 постов в одном стиле).

Дизайн-правила (кратко)

• 4:5 (1080×1350) — recommended для ленты IG/VK (максимум площади без обрезки).
• Alt-text — для каждого визуального поста (доступность + SEO).
• Сохраняемость: встраивай «save-worthy» элемент — чек-лист, цифру, фреймворк.
• Один пост — одна идея. Не пихай 3 темы в одну карточку.

Если рендер недоступен

render.js требует Playwright/Puppeteer + Chromium. Если их нет — HTML остаётся основным артефактом (открывается в браузере); предложи открыть и снять скриншот или установить с согласия пользователя.

Антипаттерны

• Генерировать текст в картинке — буквы поползут.
• Мелкий/низкоконтрастный текст — нечитаемо в ленте, провал по охватам.
• Несколько идей в одной карточке — разделите на серию или карусель.
• Игнорировать бренд-палитру — серия выглядит чужеродно.
• Чужая цитата без атрибуции — всегда указывай автора.
• Молчать про стоимость генерации фона (~0,015 $/вызов).