Convierte Slides de IA en presentaciones interactivas: El marco de las 6 estructuras

1【Prompt de presentación interactiva v2.1】
2Texto completo omitido por restricciones de longitud; cópialo y pégalo desde note.
3
4## Adición: Hacerlo interactivo
5Usa este bloque añadido al prompt de creación de presentación anterior. Pega los materiales debajo de este bloque (mantén intacta la línea "Pegar materiales debajo de esto" del prompt anterior).
6
7### Prioridad
8- El contenido (manejo de números, titulares, lógica, plantillas, estándares de dibujo, 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; reemplázalo con una lista de páginas y un registro de números (incluye los elementos de diseño requeridos del prompt anterior en estos dos).
10- Haz preguntas solo una vez antes de empezar, y únicamente si el propósito o la audiencia no están claros a partir de los materiales/contexto. De lo contrario, usa tu criterio, anota las suposiciones y escribe todo de una sola vez.
11
12### Plantilla de página (Igualar los visuales al ejemplo de abajo)
13- Páginas 2-3: Gráfico principal a la izquierda (60% de ancho), panel de evidencia a la derecha (caja con fondo claro). Estructura del panel: Un número grande (88-96px) → Qué es (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, la parte inferior muestra el flujo/estructura general (qué está pasando dónde). Coloca tarjetas que enlacen a páginas específicas ("p.2 ›") dentro del flujo.
15- Los gráficos y números llenan el marco. Sin bandas vacías debajo del contenido.
16- Usa todos los números de los materiales (gráficos, paneles, llamadas de atención, evidencia). Calcula variaciones/ratios y muestra las fórmulas. No inventes números que no estén en los materiales.
17- El sujeto principal usa el color primario, las comparaciones usan tonos de degradado claro, el resto en gris. Un número grande por página.
18- Haz que los elementos clicables sean obvios: Usa "›", "Clic para...", bordes al pasar el cursor, resaltado circular una vez al entrar a la página. Las barras/puntos muestran 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 el juicio 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; incluir en casi todas las páginas).
23- Clasificación (Segmentación) → Cambiar criterios (vista de agregación, 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) → El control deslizante ajusta la condición, recalcula el resultado. Mostrar la fórmula en pantalla.
26- Resolución de problemas (Brecha/Solución) → Activar/desactivar soluciones para llenar/dejar brechas.
27- Secuencia (Flujo/Proceso/Tiempo) → Ensamblar secuencialmente, el actor se mueve por el proceso, marcador de "Ahora" en la línea de tiempo.
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 720px. Se desliza desde la derecha, atenúa el fondo. Ciérralo con X, Esc o haciendo clic en el fondo.
32- Estructura de arriba hacia abajo: Contexto de ubicación ("Estado actual > Nombre del elemento") → Juicio (1-2 líneas) → Pestañas (máx. 2, ej., Desglose / Fuentes y suposiciones) → Gráfico/tabla pequeño → Fuente.
33- Coloca aquí los números detallados que no caben en la página principal. Incluir 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 hasta páginas específicas. Permite saltar de las soluciones a las páginas de evidencia.
37- Teclas: → y Espacio para siguiente, ← para anterior, Números para saltar, Esc para cerrar/volver, O para vista general de todas las páginas, D para demostración automática (el cursor de flecha 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 60ms) → Números → Panel de evidencia. Usa transiciones/retrasos CSS; si usas JS, combina requestAnimationFrame con un temporizador de 50ms.
39- Soporta 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 el juicio del titular sea visible, ej., todas las soluciones ACTIVADAS). También debe poder leerse como una presentación estática.
40- Escala el lienzo de 1920x1080 para ajustarse a la pantalla. Las cargas externas limitadas a Google Fonts Noto Sans JP.
41
42### Estándares mínimos (Solo si no hay un prompt de creación de presentación anterior)
431. Crea un registro de números a partir de los materiales (Elemento, Valor, Fecha, Fuente, Población). Marca los números 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 juicio, máximo 36 caracteres/línea. Evita la estructura de dos partes "A. B", el conteo "Hay 3..." o fragmentos que terminen en sustantivos.
453. Escribe primero todos los titulares, verifica 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" arriba).
475. Títulos de los gráficos: "Qué, Cuándo, Unidad". Sin juicios 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. Primario predeterminado #1976D2. El acento (Ámbar #D97706) se usa solo una vez en toda la presentación. Tamaño mínimo de fuente 18px.
497. No afirmes causalidad a partir de correlación. Etiqueta las estimaciones como "Estimación" con la fórmula y las suposiciones en pantalla.
50
51### Salida
52- HTML: Claude como Artifact, ChatGPT como Canvas (o un solo bloque de código si no hay ninguno). Escribe todo de una sola 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 pegar manualmente).
53- La línea 1 indica el método: "Contenido = Prompt de presentación / Interactividad = Bloque interactivo" o "Solo bloque interactivo (se aplicaron reglas simplificadas de contenido)".
54- La lista de páginas (Titular/Estructura/Operación/Contenido del panel de evidencia), el Registro de números y las Instrucciones van FUERA del HTML (en el cuerpo de la respuesta), de forma breve. No dentro del HTML.
55- Apunta a un tamaño total de HTML de ~40KB. 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### Verificació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" / Sin números inventados / Sin bandas vacías, superposiciones, desbordamientos o texto <18px / Terminaciones de titulares consistentes entre páginas (no todas "debería...") / El guion de demostración automática no hace referencia a elementos inexistentes.
60
61(El código de una página de ejemplo va aquí. Incluir ejemplos mejora significativamente la calidad. La versión completa con código está en note.)