Визуальные посты
@visual-posts
Визуальные посты для ленты — карточки с цитатами, списки, статистика, инфографика, текст на фото. Композиция текста поверх фона в HTML/SVG → рендер в PNG (4:5 1080×1350 или 1:1 1080×1080).
Кому подходит навык «Визуальные посты»
- Экспертам и блогерам — цитаты и стат-карточки, которые подтверждают экспертность и сохраняются подписчиками.
- SMM-менеджерам — серия визуальных постов в едином стиле для ровной ленты.
- Брендам — мини-инфографика и «save-worthy» контент: процессы, сравнения, до/после.
- Лайфстайл-аккаунтам — текст на фото: аффирмация, правило, настроение.
Что можно создать
- Цитата — крупный шрифт, автор мелко, контраст к фону; своя, клиента или известного человека с атрибуцией.
- Список — пронумерованные пункты, 3–7 на один экран: «5 признаков», чек-лист.
- Стат-карточка — одна крупная цифра + строка контекста + источник.
- Мини-инфографика — процесс, сравнение или до/после в 3–5 шагов.
- Текст на фото — скрим под текстом для читаемости, настроение и лайфстайл.
Принцип: текст настоящий, в HTML/SVG
Ключевое отличие — текст не генерируется в картинке (нейросети искажают буквы). Он компонуется поверх фона в HTML/SVG и рендерится в PNG: шрифт ровный и читаемый, геометрия точная, а копию можно править без перегенерации. Фон — чистый цвет или градиент (быстро, без генерации) либо фото и иллюстрация через image-studio. Размеры: 4:5 1080×1350 (recommended для ленты) или 1:1 1080×1080.
Дизайн-основы по умолчанию
- Контраст текста ≥4.5:1 (WCAG AA); на фото — скрим/затемнение под текстом.
- Один фокус на пост: взгляд первым падает на главную мысль или цифру.
- Мобильная читаемость: заголовок ≥48px при ширине 1080, читается в миниатюре в ленте.
- 60-30-10 и единая палитра серии для узнаваемости.
Карусель из нескольких слайдов соберёт навык carousel-posts, рекламный баннер точного размера — ad-creatives, а полный контент-план на месяц поможет составить ИИ-маркетолог.
Готовы собрать визуал для ленты? Опишите идею — запустите навык «Визуальные посты».
Почему текст не генерируется прямо в картинке?
Текстовые нейросети искажают буквы. Навык компонует текст, цифры и заголовки поверх фона в HTML/SVG и рендерит в PNG — поэтому шрифт ровный, читаемый и точной геометрии, а править копию можно без перегенерации.
Какие размеры поддерживаются?
4:5 1080×1350 (recommended для ленты Instagram и VK — максимум площади без обрезки) и 1:1 1080×1080. Соблюдается безопасная зона ≥60px от краёв.
Это рекламный баннер?
Нет. Навык делает органические посты для ленты: цитаты, списки, статистику, инфографику. Для рекламного баннера с оффером, CTA и маркировкой erid используйте навык ad-creatives.
Что я получу на выходе?
PNG нужного размера, редактируемый HTML/SVG-исходник (править текст без перегенерации фона) и при необходимости короткую подпись к посту с CTA «сохрани» или «поделись».
Можно сделать серию постов?
Да. Навык предложит серию из 3–5 постов в едином визуальном стиле — та же палитра, шрифты и сетка раскладки, чтобы лента выглядела узнаваемо.
Визуальные посты для соцсетей
Готовый визуальный пост — карточка, которая работает как самостоятельная единица контента: цитата, список, статистика, мини-инфографика, текст на фото. Такие посты сохраняют и репостят чаще текстовых — это сильный сигнал алгоритмам 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.
Что на выходе
- PNG нужного размера (4:5 1080×1350 — recommended для ленты; 1:1 1080×1080).
- HTML/SVG-исходник — чтобы править текст без перегенерации.
- Подпись к посту (короткая, с CTA «сохрани»/«поделись») — если просили пост целиком.
Инструменты
| Задача | Инструмент |
|---|---|
| Фон (фото/иллюстрация/текстура) | MCP generate_image через image-studio (~0,015 $/вызов) |
| Проверить читаемость/контраст результата | MCP analyze_image |
| Рендер HTML→PNG | design-renderer → scripts/render.js |
| Сохранить файлы | встроенные write |
Чистый фон (цвет/градиент) не требует генерации — сразу вёрстка в HTML/CSS.
Типы визуальных постов
| Тип | Когда | Ключевое |
|---|---|---|
| Цитата | экспертность, вдохновение | Крупный шрифт цитаты + автор мелко; контраст к фону |
| Список | польза, сохраняемость | Пронумерованные пункты; один экран — 3–7 пунктов |
| Стат-карточка | доказательность | Одна крупная цифра + 1 строка контекста + источник |
| Мини-инфографика | процесс/сравнение | 3–5 шагов с иконками/номерами; простая визуальная метафора |
| Текст на фото | настроение, лайфстайл | Скрим (затемнение) под текстом для читаемости |
Шаблоны 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 $/вызов).