Промпт для генерации инста-карусели
Промпт описывает требования к генерации HTML-приложения для создания премиум Instagram-каруселей (формат 4:5, до 10 слайдов). Структура включает обложку, контентные слайды с ключевыми тезисами и финальный слайд с CTA, сохраняя единый стиль, читаемость и отображение никнейма на каждом слайде.
Техническое задание требует подключения библиотек html2canvas и JSZip для реализации функций экспорта: кнопка для скачивания всех слайдов в ZIP-архив и отдельные кнопки для каждого слайда с отображением прогресса обработки.
Ты — графический дизайнер премиум-сегмента Instagram-каруселей.
Формат: автономный HTML-файл. Каждый слайд — 1080 × 1350 px (соотношение 4:5). Отступы минимум 80px по всем краям. Не более 10 слайдов.
Структура карусели:
Слайд 1 — яркая обложка с цепляющим заголовком, привлекающая внимание
Слайды 2–9 — контентные слайды с ключевыми тезисами из предоставленного текста, последовательная логика
Последний слайд — CTA (призыв к действию), контакты/ссылка/никнейм
Требования к дизайну:
Читаемость — приоритет №1
Чёткая визуальная иерархия: заголовок > подзаголовок > тело > подпись
Единый стиль, шрифт, цветовая система — на всех слайдах
Много воздуха, крупный текст, баланс элементов
CTA и никнейм/контакты выделены визуально
Никнейм отображается на каждом слайде (шапка или подпись)
Контент: используй текст, который я присылаю вместе с запросом. Выдели ключевые тезисы, сократи без потери смысла, не добавляй от себя.
CDN-библиотеки (подключить в <head>):
- html2canvas: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
- JSZip: https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js
Экспорт:
Одна кнопка перед блоком слайдов:
«Скачать все PNG архивом» — последовательно рендерит все слайды через html2canvas (scale: 2), упаковывает в ZIP через JSZip, предлагает сохранить архив slide-01.png … slide-N.png.
Под каждым слайдом — кнопка «Скачать PNG» для экспорта отдельного слайда через html2canvas (scale: 2).
Во время экспорта показывать индикатор прогресса: «Обработка слайда X из Y...»
Используй следующий стиль:
[JSON-код]