Visual Posts
@visual-posts
Create high-quality visual feed posts — quote graphics, list/stat cards, mini-infographics, text-on-photo — by composing text over a background in HTML/SVG and rendering to PNG at 4:5/1:1. Use when the user wants «сделай визуальный пост/карточку/цитату/инфографику», «пост со списком/статистикой», «текст на картинке», «сохраните чтобы не потерять». Do NOT use for an ad banner with CTA/erid (ad-creatives), a multi-slide carousel (carousel-posts), a pure image without text (image-studio), or post text (post-generator).
Who the Visual Posts skill is for
- Experts and creators — quotes and stat cards that prove authority and get saved by followers.
- SMM managers — a series of visual posts in one style for a consistent feed.
- Brands — mini-infographics and save-worthy content: processes, comparisons, before/after.
- Lifestyle accounts — text on photo: affirmations, rules, mood.
What you can create
- Quote — large type, author small, contrast against the background; your own, a client's or a known figure, with attribution.
- List — numbered items, 3–7 per screen: "5 signs", a checklist.
- Stat card — one large number + a line of context + the source.
- Mini-infographic — a process, comparison or before/after in 3–5 steps.
- Text on photo — a scrim under the text for readability; mood and lifestyle.
The principle: real text, in HTML/SVG
The key difference: text is never generated into the image (models distort letters). It's composed over a background in HTML/SVG and rendered to PNG — the type is clean and readable, the geometry exact, and copy is editable without regenerating. The background is a solid color or gradient (fast, no generation) or a photo/illustration via image-studio. Sizes: 4:5 1080×1350 (recommended for the feed) or 1:1 1080×1080.
Design fundamentals, applied by default
- Text contrast ≥4.5:1 (WCAG AA); on photos, a scrim/darken layer under the text.
- One focus per post: the eye lands on the main idea or number first.
- Mobile readability: headline ≥48px at 1080 width, legible as a thumbnail in the feed.
- 60-30-10 and a consistent series palette for recognizability.
A multi-slide carousel is built by the carousel-posts skill, an exact-size ad banner by ad-creatives, and a full monthly content plan comes together with the AI Marketer.
Ready to build visuals for your feed? Describe the idea — launch the Visual Posts skill.
Why isn't the text generated straight into the image?
Image models distort letters. The skill composes text, numbers and headlines over a background in HTML/SVG and renders to PNG — so the type is clean, readable and pixel-exact, and you can edit copy without regenerating.
Which sizes are supported?
4:5 1080×1350 (recommended for the Instagram and VK feed — maximum area with no cropping) and 1:1 1080×1080. A safe zone of ≥60px from the edges is respected.
Is this an ad banner?
No. The skill makes organic feed posts: quotes, lists, stats, infographics. For an ad banner with an offer, CTA and erid marking, use the ad-creatives skill.
What do I get as output?
A PNG at the right size, an editable HTML/SVG source (edit text without regenerating the background) and, on request, a short caption with a save or share CTA.
Can it make a series of posts?
Yes. The skill offers a series of 3–5 posts in one visual style — the same palette, fonts and grid, so the feed stays consistent and recognizable.
Визуальные посты для соцсетей
Готовый визуальный пост — карточка, которая работает как самостоятельная единица контента: цитата, список, статистика, мини-инфографика, текст на фото. Такие посты сохраняют и репостят чаще текстовых — это сильный сигнал алгоритмам IG/VK/LinkedIn.
Принцип: текст — настоящий, в HTML/SVG
Текст на картинке не генерируется нейросетью (glm-image искажает буквы). Компонуем так:
фон (kling_text_to_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 kling_text_to_image через image-studio (~0,028 $/вызов; фоллбэк — glm_generate_image ~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 $/вызов).