cerulean

Cerulean: presentaciones por escenas que cambian en cada paso

Tú diseñas y Cerulean construye. Escribes tres archivos: el guion en JSON, las escenas programadas en JS y la piel en CSS. scripts/build.py los valida y los convierte en un HTML autónomo con el visor incluido.

Cada escena es una idea contada en 2 a 4 pasos. A la izquierda va una tarjeta de pasos. A la derecha va una ilustración programada para esa escena: el objeto real del tema, con su propia coreografía, que avanza suave con cada paso y tiene vida propia (flota, fluye, late). También puede ser una captura o foto que se acerca y se rotula. Que cada escena se vea y se mueva distinto es lo que hace buena una presentación de Cerulean.

Cada presentación tiene además su propia identidad visual, que diseñas tú para ese tema: el mundo donde vive (sus objetos), la paleta, las tipografías, el ritmo de fondos y una piel CSS escrita entera para ella. Una presentación sobre seguridad parece una consola; una de historia, un impreso de época. Dos temas distintos no deben parecer de la misma colección, y tapando el título se debe adivinar de qué trata.

Flujo

1. Entender el encargo. Necesitas el tema, el contenido (apuntes, puntos, texto pegado) y, si las hay, las imágenes. Si solo dan el tema, desarróllalo con conocimiento general bien establecido. No interrumpas para pedir imágenes: si falta alguna, deja su espacio reservado. Por defecto: español, de 5 a 9 escenas.

2. Leer la guía, una vez. Lee references/direccion.md (la identidad visual), references/formato.md (el JSON) y references/escenas.md (el kit, el tiempo y el catálogo de animaciones por tipo de idea). assets/ejemplo.js tiene 7 escenas completas: léelo solo si dudas de cómo resolver algo.

3. Diseñar la identidad con el proceso de direccion.md: el mundo del tema (dónde vive y de 6 a 10 objetos reconocibles), el mood, la paleta sacada de esa escena, las tipografías que usaría ese mundo, el ritmo y el movimiento, cada uno con su línea en why. Pasa la prueba de genericidad: tapando el título, ¿se adivina el tema?

4. Escribir el guion en presentaciones/<tema>.json: textos, pasos, notas y el bloque design. Crea la carpeta si no existe. Reparte "fondo" y "papel" según el ritmo.

5. Escribir la piel en presentaciones/<tema>.css: la tarjeta, la portada, los títulos, los rótulos, los detalles y las entradas, como se verían en ese mundo (qué se puede vestir y qué no, en direccion.md).

6. Planear las escenas antes de programar: para cada una, qué tipo de idea explica (idea), su metáfora en una frase (form) con un objeto del mundo del tema, y qué cambia en cada paso. Al menos 3 tipos de idea, ninguna metáfora repetida. Usa imagen solo para cosas reales que la persona quiere mostrar (su app, un producto, un lugar).

7. Programar las escenas en presentaciones/<tema>.js (escena("nombre", (K) => {…})), con su "draw" en el JSON. De 20 a 60 líneas por escena. Dibuja el artefacto del mundo, plano por defecto (ver escenas.md).

8. Generar y revisar:

   python "<carpeta de esta skill>/scripts/build.py" presentaciones/<tema>.json
   

   Escribe presentaciones/<tema>.html. Corrige los avisos (nombres sin escena, errores de sintaxis, imágenes pendientes, dirección visual incompleta, piel rechazada, falta de variedad, parecido con una presentación anterior). Si tienes navegador, revisa sin gastar en capturas:

   • Sirve la vista previa: python "<carpeta de esta skill>/scripts/preview.py" presentaciones/<tema>.json en segundo plano, y abre http://localhost:8767.
   • Ejecuta JSON.stringify(CERULEAN_REPORT()) en la página. Dice qué escenas tienen errores, piezas fuera del lienzo o pasos en los que no cambia nada, y qué textos no se leen bien con la piel (legibilidad). Corrige y vuelve a ejecutarlo; la página se recarga sola.
   • Haz una sola captura de la vista general (botón "Todas" o tecla G) para juzgar el conjunto: que la identidad se note (colores, letra, estilo de dibujo) y que las escenas no se parezcan entre sí. No captures paso por paso: es lo que más tiempo y tokens gasta.

9. Entregar. Da la ruta del HTML y explica en pocas líneas cómo se usa:

   • → o espacio avanza, ← retrocede.
   • F pantalla completa, N notas, G vista general.
   • E modo edición: corregir textos, arrastrar imágenes y mover o cambiar de tamaño la tarjeta y la ilustración (asas ✥ y ⤡). "Descargar copia" guarda un HTML con los cambios.
   • El botón PDF la guarda con una escena por página.

   Si quedaron imágenes pendientes, termina con su lista: escena, qué debe mostrar y el nombre presentaciones/imagenes/escena-<n>.png.

Reglas que no se negocian

• No inventes cifras, fechas, citas, nombres ni estudios. Las cifras que aparecen en una escena salen del contenido o de conocimiento muy establecido, y están también en el texto del paso.
• No pongas una imagen inventada o cualquiera en lugar de una real que falta: deja el espacio reservado.
• Cada escena tiene su propia ilustración y su propia coreografía, y cambia en cada paso.
• Cada presentación tiene su propia identidad, diseñada para su tema: su mundo, su paleta, sus tipografías y su piel. La paleta, las tipografías y el aspecto por defecto no son una elección.
• Nunca edites assets/ para una presentación concreta: el visor y el kit son comunes a todas.