Перетворіть AI Slides на інтерактивні презентації для глибокого аналізу: фреймворк із 6 структур

1【Промпт для інтерактивної презентації v2.1】
2Повний текст опущено через обмеження обсягу; будь ласка, скопіюйте його з note.
3
4## Додаток: Зробіть її інтерактивною
5Використовуйте цей блок, додавши його до промпту для створення презентації вище. Вставляйте матеріали під цим блоком (залиште рядок "Paste materials below this" із попереднього промпту без змін).
6
7### Пріоритети
8- Контент (робота з цифрами, заголовки, логіка, шаблони, стандарти малювання, перевірка) підпорядковується промпту для створення презентації вище.
9- Формат виводу має пріоритет у цьому блоці: інтерактивний HTML в одному файлі, 3 сторінки (4, якщо матеріалів багато), заголовки максимум 36 символів на рядок (без перенесення). Не виводьте окремий дизайн-документ; замініть його списком сторінок і реєстром цифр (включіть необхідні елементи дизайну з попереднього промпту в ці два пункти).
10- Ставте запитання лише один раз перед початком роботи, і тільки якщо мета чи аудиторія незрозумілі з матеріалів/контексту. В іншому випадку дійте на власний розсуд, фіксуйте припущення та пишіть усе за один підхід.
11
12### Шаблон сторінки (візуально має відповідати зразку нижче)
13- Сторінки 2-3: основний графік ліворуч (60% ширини), панель доказів праворуч (блок зі світлим фоном). Структура панелі: одна велика цифра (88-96px) → що це таке (1 рядок) → контекст (2-3 рядки) → об'єкт порівняння та дельта (з формулою) → "Переглянути деталізацію ›"
14- Сторінка 1: верхній ряд із 3 великими цифрами, внизу — загальний потік/структура (що і де відбувається). Розмістіть картки з посиланнями на конкретні сторінки ("p.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- Увімкніть навігацію з наближенням від огляду на сторінці 1 до конкретних сторінок. Дозвольте переходи від рішень до сторінок із доказами.
37- Клавіші: → і Пробіл для наступної, ← для попередньої, Цифри для переходу, Esc для закриття/повернення, O для огляду всіх сторінок, D для автодемонстрації (курсор-стрілка рухається за сценарієм, завершує оглядом. Позначайте інтерактивні елементи атрибутами data-demo).
38- Сторінки збираються приблизно за 3 секунди: Заголовок → Основний графік (стовпці ростуть від 0 із затримкою 60ms) → Цифри → Панель доказів. Використовуйте CSS transitions/delays; якщо використовуєте JS, поєднуйте requestAnimationFrame із таймером на 50ms.
39- Підтримуйте параметр URL #static та налаштування "Reduce Motion" для показу фінального зібраного стану (для інтерактивних сторінок показуйте стан, де висновок із заголовка видимий, наприклад, усі рішення УВІМКНЕНІ). Має читатися і як статична презентація.
40- Масштабуйте канву 1920x1080 під розмір екрана. Зовнішні завантаження обмежені лише Google Fonts Noto Sans JP.
41
42### Мінімальні стандарти (лише якщо немає промпту для створення презентації вище)
431. Створіть реєстр цифр із матеріалів (Елемент, Значення, Дата, Джерело, Сукупність). Позначте відсутні цифри як "xx" із приміткою. Елементи без значень розміщуйте в кінці рейтингу.
442. Одне повідомлення на сторінку. Заголовки — це повні речення, що поєднують факт і висновок, максимум 36 символів на рядок. Уникайте двочастинної структури "A. B", підрахунків на кшталт "Є 3..." або фрагментів, що закінчуються іменником.
453. Спочатку напишіть усі заголовки, перевірте вертикальну логіку (Огляд→Докази→Рішення) перед створенням графіків.
464. Обирайте тип графіка залежно від структурної мети заголовка (див. "Одна взаємодія" вище).
475. Назви графіків: "Що, Коли, Одиниця виміру". Жодних висновків у назвах. Вказуйте джерело і в нижньому колонтитулі сторінки, і на панелі доказів.
486. Кольори: 1 основний, 3 світлі градієнти, сірий. Основний за замовчуванням #1976D2. Акцентний (Amber #D97706) використовується лише один раз у всій презентації. Мінімальний розмір шрифту 18px.
497. Не стверджуйте про причинно-наслідковий зв'язок лише на основі кореляції. Позначайте оцінки як "Оцінка" з формулою та припущеннями на екрані.
50
51### Вивід
52- HTML: у Claude як Artifact, у ChatGPT як Canvas (або одним блоком коду, якщо ні те, ні інше недоступне). Пишіть усе за один підхід. Обмежуйте кількість сторінок і об'єднуйте компоненти у функції, щоб скоротити код. Якщо генерація обірвалася, продовжуйте той самий документ після команди користувача "continue" (не просіть копіювати вручну).
53- У першому рядку вкажіть метод: "Контент = Промпт для презентації / Інтерактивність = Інтерактивний блок" або "Лише інтерактивний блок (застосовано спрощені правила для контенту)".
54- Список сторінок (Заголовок/Структура/Дія/Вміст панелі доказів), Реєстр цифр, Інструкції мають бути ПОЗА межами HTML (у тілі відповіді), коротко. Не всередині HTML.
55- Цільовий загальний розмір HTML ~40KB. За потреби скорочуйте текст (НЕ скорочуйте графіки, панелі доказів, взаємодії).
56- Завершіть 2-3 пропозиціями щодо подальшого покращення та попросіть користувача обрати.
57
58### Фінальна перевірка
59Перед виводом перегляньте та виправте: кожна сторінка має "дію для перевірки заголовка" та "панель доказів із джерелом" / Немає вигаданих цифр / Немає порожніх смуг, накладань, виходу за межі або тексту <18px / Закінчення заголовків узгоджені на всіх сторінках (не всі мають закінчуватися на "слід...") / Сценарій автодемонстрації не посилається на неіснуючі елементи.
60
61(Далі йде код однієї зразкової сторінки. Додавання зразків суттєво підвищує якість. Повна версія з кодом доступна на note.)