Azdmjiny/html-ppt-creator

Creador de Presentaciones HTML

Crea un deck de diapositivas HTML claro e intencional visualmente que se abra directamente en un navegador. Por defecto, genera un único presentation.html autocontenido con CSS y JavaScript en línea y sin paso de compilación.

Flujo de Trabajo

1. Inspecciona el resumen del usuario, texto fuente, datos, activos de marca y la ubicación de salida solicitada.
2. Infiere valores predeterminados razonables para detalles faltantes. Pregunta solo cuando la audiencia, el propósito, el idioma, la cantidad de diapositivas o la dirección visual cambiarían materialmente el resultado y no se puedan inferir.
3. Diseña una secuencia concisa de diapositivas. Dale a cada diapositiva un único objetivo y un título útil; elimina la repetición antes de codificar.
4. Elige un sistema visual que se adapte al tema. Define propiedades personalizadas de CSS para color, tipografía, espaciado, bordes, sombras y movimiento, y luego úsalas de manera consistente.
5. Copia assets/starter.html como base al empezar desde cero. Reemplaza todas las diapositivas de ejemplo y los tokens de tema, en lugar de tratar el estilo de ejemplo como un tema obligatorio.
6. Implementa el deck completo. Usa elementos semánticos <section class="slide">, un escenario fijo de 16:9 que se escala al viewport, y navegación por teclado, clic y toque.
7. Lee references/QUALITY.md antes de la QA final. Abre el deck en un navegador cuando el control del navegador esté disponible, inspecciona cada diapositiva, corrige desbordamientos y defectos de interacción, y luego entrega el archivo HTML.

No introduzcas un punto de control de planificación ni requieras aprobación capítulo por capítulo a menos que el usuario solicite un flujo de trabajo iterativo.

Contrato de Salida

• Produce presentation.html por defecto. Usa una carpeta con múltiples archivos solo cuando el usuario lo solicite o el deck realmente necesite activos locales reutilizables o lógica de aplicación sustancial.
• Mantén el deck predeterminado funcional sin conexión: CSS y JavaScript en línea; usa imágenes y fuentes locales o incrustadas. Evita dependencias de CDN a menos que el usuario las apruebe.
• Preserva los hechos proporcionados, las restricciones de redacción, las citas, los logotipos y las reglas de marca. Nunca inventes estadísticas o fuentes.
• Incluye una diapositiva de título, un cuerpo coherente y una diapositiva de cierre con propósito cuando sea apropiado; no fuerces estos elementos cuando el formato solicitado diga lo contrario.
• Soporta ArrowLeft, ArrowRight, Space, PageUp, PageDown, Home y End; soporta navegación por clic/toque y gestos de deslizamiento. Usa F para pantalla completa.
• Muestra un contador de diapositivas sutil o un indicador de progreso. Mantén los controles visualmente discretos y seguros para la presentación.
• Agrega CSS de impresión para que cada diapositiva se imprima como una página apaisada y los controles decorativos estén ocultos.
• Respeta prefers-reduced-motion. Usa el movimiento con moderación y nunca dependas de la animación para revelar información esencial.
• No agregues notas del orador, guiones de narración, audio, reproducción automática, ayudas de grabación, líneas de tiempo de video o infraestructura de TTS a menos que se solicite explícitamente.

Reglas de Contenido y Visuales

• Haz una afirmación principal por diapositiva. Prefiere de 3 a 6 elementos de apoyo concisos en lugar de párrafos.
• Usa la forma visual adecuada para la relación: comparación, proceso, línea de tiempo, jerarquía, métrica, cita, imagen, gráfico o diagrama.
• Prefiere contenido real, SVG simple, diagramas CSS y gráficos significativos sobre relleno decorativo.
• Mantén una jerarquía sólida y un espacio en blanco generoso. Diseña para ver a distancia, no para leer documentos.
• Mantén un tema coherente en todo el deck, permitiendo variedad de diseño. Evita que todas las diapositivas tengan la misma cuadrícula de tarjetas redondeadas.
• Evita el estilo genérico de IA: gradientes púrpura gratuitos, brillo excesivo, paneles de vidrio aleatorios, decoración con emojis, cromo de aplicación falso y gráficos ornamentales sin datos.
• Asegura contraste de texto, estados de enfoque visibles, texto alternativo útil y un orden de lectura DOM sensato.
• Si el contenido no cabe, acórtalo o divide la diapositiva. No reduzcas el tamaño del texto del cuerpo hasta que técnicamente quepa.

Edición de Decks Existentes

Preserva la arquitectura actual y el lenguaje de diseño a menos que el usuario solicite un rediseño. Realiza el cambio coherente más pequeño y luego vuelve a verificar la navegación, la numeración de diapositivas, el desbordamiento, el diseño de impresión y la escala responsiva.

Verificación de Finalización

Antes de reportar la finalización:

1. Verifica los mensajes, números, citas y orden de diapositivas solicitados.
2. Prueba los límites de la primera/última diapositiva y cada método de navegación.
3. Inspecciona todas las diapositivas en tamaño de escritorio 16:9 y al menos un viewport más pequeño.
4. Revisa texto recortado, colisiones, tipos pequeños, medios rotos, errores de consola y desplazamiento accidental.
5. Confirma que el archivo se abre sin un paso de compilación y sigue siendo utilizable sin conexión a menos que se hayan aprobado dependencias externas.
6. Corrige cada fallo antes de entregar el resultado.