Превращение AI Slides в интерактивные презентации с глубоким анализом: фреймворк из 6 структур

1【Промпт для интерактивной презентации v2.1】
2Полный текст опущен из-за ограничений по объёму; скопируйте его из note.
3
4## Дополнение: делаем презентацию интерактивной
5Используйте этот блок как дополнение к промпту для создания презентации выше. Исходные материалы вставляйте под этим блоком (оставьте строку «Вставьте материалы ниже» из предыдущего промпта без изменений).
6
7### Приоритеты
8- Контент (работа с цифрами, заголовки, логика, шаблоны, стандарты отрисовки, проверка) подчиняется промпту для создания презентации выше.
9- Формат вывода определяется этим блоком: единый интерактивный HTML-файл, 3 слайда (4, если материалов много), заголовки максимум 36 символов в строке (без переносов). Не выводите отдельный дизайн-документ; замените его списком слайдов и реестром цифр (включите в них обязательные элементы дизайна из предыдущего промпта).
10- Задавайте вопросы только один раз перед началом работы и только если цель или аудитория непонятны из материалов и контекста. В остальных случаях действуйте по своему усмотрению, фиксируйте допущения и пишите всё за один проход.
11
12### Шаблон слайда (визуал должен совпадать с примером ниже)
13- Слайды 2–3: слева основной график (60% ширины), справа панель доказательств (блок со светлым фоном). Структура панели: одна крупная цифра (88–96px) → что это такое (1 строка) → контекст (2–3 строки) → объект сравнения и дельта (с формулой) → «Смотреть детализацию ›».
14- Слайд 1: верхний ряд из трёх крупных цифр, внизу — общий процесс или структура (что и где происходит). Внутри схемы разместите карточки со ссылками на конкретные слайды («с. 2 ›»).
15- Графики и цифры должны заполнять всё пространство. Никаких пустых полос под контентом.
16- Используйте все цифры из материалов (графики, панели, выноски, доказательства). Рассчитывайте дельты и доли, показывайте формулы. Не придумывайте цифры, которых нет в материалах.
17- Главный объект выделяйте основным цветом, объекты сравнения — светлыми градиентами, остальное — серым. Одна крупная цифра на слайд.
18- Кликабельные элементы должны быть очевидными: используйте «›», «Нажмите, чтобы...», рамки при наведении, однократную подсветку кольцом при переходе на слайд. Столбцы и точки при наведении показывают подсказку с текстом «Значение, Название, Источник».
19
20### Одно взаимодействие на слайд (вытекает из структуры)
21Добавьте ровно одно действие на каждый слайд, позволяющее читателю проверить утверждение из заголовка. Выбирайте действие исходя из структурного типа заголовка.
22- Пирамида (вывод/доказательства) → клик для перехода к деталям. Панель доказательств справа (с указанием источника; добавляйте почти на каждом слайде).
23- Классификация (сегментация) → переключение критериев (способ агрегации, метрика, год) для изменения порядка всех столбцов.
24- Сравнение (разница) → предыдущее состояние плавно переходит в текущее, дельта/разница остаётся в виде пунктирной линии.
25- Причинность (причина/следствие) → ползунок меняет условие, результат пересчитывается. Показывайте формулу на экране.
26- Решение проблемы (разрыв/решение) → включение/отключение решений, чтобы заполнить или оставить разрывы.
27- Последовательность (процесс/этапы/время) → сборка по шагам, персонаж движется по процессу, маркер «Сейчас» на таймлайне.
28Не добавляйте анимации, не связанные с заголовком. Количественные анимации должны рассчитываться на основе значений.
29
30### Панель доказательств (выезжает справа по клику)
31- Ширина 720px. Выезжает справа, затемняя фон. Закрывается через X, Esc или клик по фону.
32- Структура сверху вниз: контекст места («Текущий статус > Название элемента») → утверждение (1–2 строки) → вкладки (максимум 2, например, Детализация / Источники и допущения) → небольшой график или таблица → источник.
33- Сюда помещайте подробные цифры, которые не поместились на основном слайде. Добавляйте почти на каждом слайде.
34
35### Презентация в целом
36- Включите навигацию с приближением от обзорного первого слайда к конкретным страницам. Позвольте переходить от решений к слайдам с доказательствами.
37- Клавиши: → и Пробел — вперёд, ← — назад, цифры — переход к слайду, Esc — закрыть/назад, O — обзор всех слайдов, D — автодемонстрация (курсор-стрелка следует по сценарию, завершает обзором. Пометьте интерактивные элементы атрибутами data-demo).
38- Слайды собираются примерно за 3 секунды: заголовок → основной график (столбцы растут от 0 с задержкой 60 мс) → цифры → панель доказательств. Используйте CSS-переходы и задержки; если применяете JS, комбинируйте requestAnimationFrame с таймером на 50 мс.
39- Поддерживайте URL-параметр #static и настройку «Уменьшить движение», чтобы показывать финальное собранное состояние (для интерактивных слайдов — состояние, где видно утверждение из заголовка, например, все решения ВКЛЮЧЕНЫ). Презентация должна читаться и как статичная.
40- Масштабируйте холст 1920x1080 под размер экрана. Внешние загрузки ограничьте шрифтом Google Fonts Noto Sans JP.
41
42### Минимальные стандарты (только если нет промпта для создания презентации выше)
431. Составьте реестр цифр из материалов (Элемент, Значение, Дата, Источник, Выборка). Отсутствующие цифры отмечайте как «xx» с примечанием. Элементы без значений ставьте в конец рейтинга.
442. Одна мысль на слайд. Заголовки — это законченные предложения, объединяющие факт и оценку, максимум 36 символов в строке. Избегайте двойной структуры «А. Б», подсчётов вроде «Есть 3...» или обрывочных фраз, заканчивающихся существительным.
453. Сначала напишите все заголовки, проверьте вертикальную логику (Обзор → Доказательства → Решение) и только потом стройте графики.
464. Выбирайте тип графика исходя из структурной цели заголовка (см. «Одно взаимодействие» выше).
475. Названия графиков: «Что, Когда, Единица измерения». Никаких оценок в названиях. Указывайте источник и в подвале слайда, и в панели доказательств.
486. Цвета: 1 основной, 3 светлых градиента, серый. Основной цвет по умолчанию #1976D2. Акцентный (янтарный #D97706) используется только один раз во всей презентации. Минимальный размер шрифта 18px.
497. Не заявляйте о причинно-следственной связи там, где есть только корреляция. Оценки подписывайте как «Оценка», указывая формулу и допущения прямо на экране.
50
51### Вывод результата
52- HTML: в Claude — как Artifact, в ChatGPT — как Canvas (или единый блок кода, если ни того, ни другого нет). Пишите всё за один проход. Ограничивайте количество слайдов и объединяйте компоненты в функции, чтобы сократить код. Если генерация оборвалась, продолжайте тот же документ по команде пользователя «продолжить» (не просите копировать и вставлять вручную).
53- Первая строка указывает метод: «Контент = Промпт для презентации / Интерактивность = Интерактивный блок» или «Только интерактивный блок (для контента применены упрощённые правила)».
54- Список слайдов (Заголовок/Структура/Действие/Содержание панели доказательств), Реестр цифр и Инструкции размещайте ВНЕ HTML (в теле ответа), кратко. Не внутри HTML.
55- Целевой общий размер HTML — около 40 КБ. При необходимости сокращайте текст (НЕ сокращайте графики, панели доказательств и действия).
56- В конце предложите 2–3 варианта дальнейшего улучшения и попросите пользователя выбрать.
57
58### Финальная проверка
59Перед выводом результата проверьте и исправьте: на каждом слайде есть «действие для проверки заголовка» и «панель доказательств с источником» / Нет придуманных цифр / Нет пустых полос, наложений, выхода за границы или текста меньше 18px / Окончания заголовков единообразны на всех слайдах (не везде «нужно...») / Сценарий автодемонстрации не ссылается на несуществующие элементы.
60
61(Далее следует код одного примера слайда. Наличие примеров значительно повышает качество. Полная версия с кодом доступна на note.)