Делюсь промтом, который помогает обогатить ваши статьи инфографикой, калькуляторами и другими интерактивными элементами

Промт берет ваш материал (в любом формате), анализирует, как его можно сделать «богаче», предлагает варианты, а затем — по вашему выбору — генерирует готовый HTML-код для вставки.

В результате вы получите лучше оформленный материал, а при добавлении интерактивных блоков — ещё и обогащение страницы релевантными сущностями.

Как родилась идея промта

Генераторы изображений часто не справляются с созданием корректной инфографики. В 90% случаев всё разъезжается, появляются ошибки в подписях и тексте.

Зато мы можем использовать генерацию HTML и CSS-разметки — это позволяет чётко структурировать визуальные блоки. Такой вариант не будет выглядеть «ВАУ» (оцените сами по скрину в посте), но он будет аккуратным, читаемым и полезным для обогащения статьи.

К тому же, в промт можно встроить анализ и генерацию других форм интерактива, чтобы он стал многоэтапным и более функциональным.

Где применять

Промт работает агентных системах типа Lovable и Genspark. Особенно рекомендую попробовать Lovable через референс на популярных стиль (например, на скрине журнал Time и Google), чтобы было красивше.

Промт

Я дам тебе материал. Твоя задача разработать для него интерактивные материалы, инфографику, квизы и так далее, что ты посчитаешь нужным.

Ход действий:

Изучи документ
1. Определи какие элементы ты можешь сделать. Даже если они четко не указаны, то дай предложения, что ты можешь сделать, чтобы обогатить материал.
2. Покажи пользователю.
3. Сделай эти элементы — 1 слайд — 1 элемент.
4. Учти что вставка будет идти в статью на WordPress. Контент должен визуально подходить к стилистике блога. Делай html код без полной структуры. Это будет код для вставки на внутрь статьи. Иначе он может сломать мне верстку.

Инфографику ты должен делать через статичный HTML, чтобы можно было сделать скриншот с них. и добавить в статью.

—

### Описание стиля

Используй визуальный стиль **журнала Time**.

Как работать с промтом

1. Укажите стиль, который хотите получить от генератора.
2. Отправьте этот промт вместе с текстом статьи.
3. Получите идеи по интерактиву и инфографике.
4. Выберите, что нужно сгенерировать.
5. Получите готовый HTML-код для вставки.

Сценарии использования

1. Если вы вставляете код напрямую в статью, добавьте в промт указание сделать элементы адаптивными.
2. Если хотите видеть результат генерации как полноценную страницу, уберите строку:
   «Учти, что вставка будет идти в статью на WordPress…».
   Но помните — в этом случае код будет содержать полную HTML-структуру, и вставлять его напрямую в страницу нельзя.

Как добиться красивой графики

Дайте референсы и/или подробно пропишите стиль: шрифты, цвета, композицию, элементы, закругления. Чем подробнее вы опишите стили тем лучше.

P.S. Перезалив. Что-то запутался в оформлении и случайно снес сам промт.