Convierte Slides de IA en presentaciones interactivas: el marco de 6 estructuras

1【Prompt de presentación interactiva v2.1】
2Texto completo omitido por limitaciones de longitud; cópialo y pégalo desde note.
3
4## Adición: hazla interactiva
5Usa este bloque añadido al final del prompt de creación de presentación anterior. Pega los materiales debajo de este bloque (mantén intacta la línea "Pega los materiales debajo de esto" del prompt anterior).
6
7### Prioridad
8- El contenido (manejo de cifras, titulares, lógica, plantillas, estándares de diseño, verificación) sigue el prompt de creación de presentación anterior.
9- El formato de salida prioriza este bloque: HTML interactivo de un solo archivo, 3 páginas (4 si los materiales son extensos), titulares de máximo 36 caracteres por línea (sin saltos de línea). No generes un documento de diseño aparte; sustitúyelo por una lista de páginas y un registro de cifras (incluye en estos dos los elementos de diseño requeridos del prompt anterior).
10- Haz preguntas solo una vez antes de empezar, y únicamente si el propósito o la audiencia no quedan claros a partir de los materiales o el contexto. De lo contrario, usa tu criterio, anota las suposiciones y escribe todo de una sola vez.
11
12### Plantilla de página (iguala el aspecto visual al ejemplo de abajo)
13- Páginas 2-3: gráfico principal a la izquierda (60 % del ancho), panel de evidencia a la derecha (caja con fondo claro). Estructura del panel: un número grande (88-96 px) → qué representa (1 línea) → contexto (2-3 líneas) → objetivo de comparación y variación (con fórmula) → "Ver desglose ›".
14- Página 1: fila superior con 3 números grandes, parte inferior con el flujo o estructura general (qué ocurre y dónde). Coloca dentro del flujo tarjetas que enlacen a páginas específicas ("p.2 ›").
15- Los gráficos y números deben llenar el marco. Sin bandas vacías debajo del contenido.
16- Usa todas las cifras de los materiales (gráficos, paneles, llamadas de atención, evidencias). Calcula variaciones/ratios y muestra las fórmulas. No inventes cifras que no estén en los materiales.
17- El elemento principal usa el color primario, las comparaciones usan tonos degradados claros y el resto va en gris. Un solo número grande por página.
18- Haz que los elementos clicables sean evidentes: usa "›", "Haz clic para...", bordes al pasar el cursor, un resaltado circular al entrar en la página. Las barras y puntos deben mostrar un tooltip con "Valor, Nombre, Fuente" al pasar el cursor.
19
20### Una interacción por página (derivada de la estructura)
21Añade exactamente una operación por página que permita al lector verificar la conclusión del titular. Elige la operación según el tipo de estructura del titular.
22- Pirámide (Conclusión/Evidencia) → Clic para profundizar. Panel de evidencia a la derecha (con fuente; inclúyelo en casi todas las páginas).
23- Clasificación (Segmentación) → Cambiar criterios (vista agregada, métrica, año) para reordenar todas las barras.
24- Comparación (Diferencia) → El estado anterior se transforma en el actual, dejando la variación/diferencia como línea punteada.
25- Causalidad (Causa/Efecto) → Un control deslizante ajusta la condición y recalcula el resultado. Muestra la fórmula en pantalla.
26- Resolución de problemas (Brecha/Solución) → Activar/desactivar soluciones para cubrir/dejar brechas.
27- Secuencia (Flujo/Proceso/Tiempo) → Ensamblaje secuencial, el actor avanza por el proceso, marcador de "Ahora" en la línea temporal.
28No añadas animaciones que no estén relacionadas con el titular. Las animaciones cuantitativas deben calcularse a partir de los valores.
29
30### Panel de evidencia (se desliza desde la derecha al hacer clic)
31- Ancho de 720 px. Se desliza desde la derecha y atenúa el fondo. Ciérralo con X, Esc o haciendo clic en el fondo.
32- Estructura de arriba abajo: contexto de ubicación ("Estado actual > Nombre del elemento") → conclusión (1-2 líneas) → pestañas (máx. 2, p. ej., Desglose / Fuentes y suposiciones) → gráfico/tabla pequeño → fuente.
33- Coloca aquí las cifras detalladas que no caben en la página principal. Inclúyelo en casi todas las páginas.
34
35### Presentación general
36- Habilita la navegación con zoom desde la vista general de la página 1 hacia páginas específicas. Permite saltar de las soluciones a las páginas de evidencia.
37- Teclas: → y Espacio para avanzar, ← para retroceder, Números para saltar, Esc para cerrar/volver, O para la vista general de todas las páginas, D para demostración automática (el cursor sigue el guion, termina con la vista general. Etiqueta los elementos interactivos con nombres data-demo).
38- Las páginas se ensamblan en ~3 segundos: titular → gráfico principal (las barras crecen desde 0, escalonadas 60 ms) → números → panel de evidencia. Usa transiciones/retrasos CSS; si usas JS, combina requestAnimationFrame con un temporizador de 50 ms.
39- Admite el parámetro URL #static y la configuración "Reducir movimiento" para mostrar el estado final ensamblado (para páginas interactivas, muestra el estado donde la conclusión del titular sea visible, p. ej., todas las soluciones ACTIVADAS). También debe poder leerse como una presentación estática.
40- Escala el lienzo de 1920x1080 para ajustarlo a la pantalla. Las cargas externas se limitan a Google Fonts Noto Sans JP.
41
42### Estándares mínimos (solo si no se usa el prompt de creación de presentación anterior)
431. Crea un registro de cifras a partir de los materiales (Elemento, Valor, Fecha, Fuente, Población). Marca las cifras faltantes como "xx" con una nota. Deja al final los elementos sin valores.
442. Un mensaje por página. Los titulares son oraciones completas que combinan hecho y conclusión, con un máximo de 36 caracteres por línea. Evita la estructura bipartita "A. B", los conteos tipo "Hay 3..." o los fragmentos que terminan en sustantivo.
453. Escribe primero todos los titulares, comprueba el flujo vertical (Panorama general → Evidencia → Solución) antes de crear los gráficos.
464. Elige el tipo de gráfico según la intención estructural del titular (ver "Una interacción" más arriba).
475. Títulos de los gráficos: "Qué, Cuándo, Unidad". Sin conclusiones en los títulos. Incluye la fuente tanto en el pie de página como en el panel de evidencia.
486. Colores: 1 primario, 3 degradados claros, gris. Color primario predeterminado #1976D2. El acento (Ámbar #D97706) se usa solo una vez en toda la presentación. Tamaño mínimo de fuente 18 px.
497. No afirmes causalidad basándote solo en correlación. Etiqueta las estimaciones como "Estimación" e incluye la fórmula y las suposiciones en pantalla.
50
51### Salida
52- HTML: Claude como Artifact, ChatGPT como Canvas (o un único bloque de código si no hay ninguna de las dos opciones). Escríbelo todo de una vez. Limita las páginas y consolida los componentes en funciones para acortar el código. Si se corta, continúa el mismo documento cuando el usuario diga "continuar" (no pidas que pegue nada manualmente).
53- La línea 1 indica el método: "Contenido = Prompt de presentación / Interactividad = Bloque interactivo" o "Solo bloque interactivo (se aplican reglas de contenido simplificadas)".
54- La lista de páginas (Titular/Estructura/Operación/Contenido del panel de evidencia), el Registro de cifras y las Instrucciones van FUERA del HTML (en el cuerpo de la respuesta), de forma breve. No dentro del HTML.
55- Tamaño total objetivo del HTML: ~40 KB. Recorta texto si es necesario (NO recortes gráficos, paneles de evidencia ni operaciones).
56- Termina con 2-3 sugerencias para mejorar aún más y pide al usuario que elija.
57
58### Comprobación final
59Antes de generar la salida, revisa y corrige: cada página tiene una "operación para verificar el titular" y un "panel de evidencia con fuente" / Ninguna cifra inventada / Sin bandas vacías, superposiciones, desbordamientos ni texto <18 px / Finales de titulares consistentes entre páginas (no todos terminados en "debería...") / El guion de demostración automática no hace referencia a elementos inexistentes.
60
61(Aquí sigue el código de una página de ejemplo. Incluir ejemplos mejora significativamente la calidad. La versión completa con código está en note.)