Fable Studio

¿Qué hace Fable Studio?

De una frase nace una pieza terminada: un único archivo HTML que se ejecuta al instante, se ve bien, suena bien y es apto para una grabación de pantalla en formato vertical.

El skill se encarga de las partes propensas a errores. assets/starter.html contiene un esqueleto base probado (renderizado con efecto lumínico, cámara, sonido, pantalla de inicio, modo de grabación, control de película y viaje en el tiempo). Tú solo escribes la escena, es decir, el contenido. De esta manera, toda tu atención se centra en el diseño y la historia.

Flujo de trabajo

1. Elegir modo

Modo	Cuándo usarlo	Instrucciones	Plantilla	Ejemplo
Mundo	Un lugar, un objeto, un ambiente para explorar. "Construye…", "Escena", "Mundo", "Calle", "Paisaje"	modes/mundo.md	assets/scene-mundo.js	ejemplos/mundo-tokio.js
Película	Una historia con principio y fin. "Cortometraje", "Animación sobre…", "cuenta", "Autorretrato"	modes/pelicula.md	assets/scene-pelicula.js	ejemplos/pelicula-punto.js
Viaje en el Tiempo	Una evolución a lo largo del tiempo. "Historia de…", "Evolución", "de X hasta hoy", "los próximos 30 años"	modes/viaje-en-el-tiempo.md	assets/scene-viaje-en-el-tiempo.js	ejemplos/viaje-en-el-tiempo-humanidad.js

Si no está claro, elige Mundo. No preguntes. El valor de este skill reside en que una sola frase es suficiente.

2. Leer

Lee en este orden, y solo esto:

1. references/engine.md (todos los componentes del esqueleto base y los errores comunes de la biblioteca)
2. las instrucciones de tu modo
3. el ejemplo de tu modo. Muestra el nivel de exigencia en cuanto a densidad y cuidado. Adopta la metodología, no el tema.

Si es necesario: references/visuals.md (recetas para luz, niebla, neón, agua, partículas), references/audio.md (música y efectos de sonido), references/styles.md (estilos prefabricados), references/performance.md (fluidez en el móvil).

3. Desarrollar la frase en un concepto

El humano escribe una frase. La calidad surge de que tú mismo la conviertas en un concepto completo antes de escribir código. Decide mentalmente:

• Imagen central: ¿Qué imagen debe quedarse grabada? Todo lo demás está a su servicio.
• Ambiente y paleta: de dos a tres colores principales más un color base oscuro. Pocos colores se ven más sofisticados que muchos.
• Luz: ¿De dónde viene? ¿Qué brilla por sí mismo?
• Profundidad: primer plano, plano medio, fondo. Niebla y escala de tamaños.
• Movimiento: al menos tres capas que se muevan de forma independiente (por ejemplo, lluvia, tráfico, carteles).
• Cámara: un recorrido con intención, no un giro aleatorio.
• Sonido: un paisaje sonoro más música que combine con el ambiente.
• Interacción o dramaturgia: ¿Qué sucede al tocar (Mundo), cómo se desarrolla el arco (Película), qué estaciones (Viaje en el Tiempo)?

Este concepto no lo muestras por adelantado. Lo construyes.

4. Construir

Escribe solo la escena en un archivo scene.js, partiendo de la plantilla de tu modo. Luego:

python3 scripts/construir.py scene.js <nombre>.html

El script inserta la escena en el esqueleto base, verifica la sintaxis y advierte sobre cosas que no existen aquí. El esqueleto base nunca se modifica. Si algo falta, constrúyelo en la escena.

Si no puedes ejecutar comandos: proporciona assets/starter.html completo y sin cambios, y reemplaza solo el marcador de posición /*__SCENE__*/ por tu escena.

Reglas fijas, porque el resultado debe funcionar en todas partes (incluso como artifact en la aplicación Claude):

• Un solo archivo. Sin imágenes, fuentes, modelos ni sonidos externos. Todo se genera en el código.
• La única biblioteca es three.js r128, ya está cargada en el esqueleto base. No hay módulos adicionales como OrbitControls, EffectComposer o Loader. La cámara y el efecto lumínico los proporciona el esqueleto base.
• Sin localStorage, sin import, sin un segundo <script>.
• Textos en pantalla en el idioma del humano.

5. Lista de verificación de calidad

Antes de entregar, repasa esta lista. Cada punto tiene una razón: sin él, el resultado parece una demo técnica en lugar de una pieza terminada.

• Imagen instantánea: Detrás de la pantalla de inicio ya se ve la escena. Nada está negro o vacío.
• Profundidad: La niebla está configurada, hay objetos cercanos y lejanos.
• Brillo con medida: Algunas pocas superficies brillan intensamente (brillo 2 a 4), el resto permanece oscuro. Si todo brilla, nada brilla.
• Tres capas en movimiento más movimiento de cámara.
• Densidad: La escena consta de cientos de partes (mediante FS.inst), no un espacio vacío con cinco cubos.
• Sonido: Paisaje sonoro y música comienzan con el botón de inicio, lo suficientemente bajos para ser agradables.
• Formato vertical: La imagen central está en el centro de la pantalla y funciona también en 9:16.
• Título, subtítulo e instrucciones de uso están configurados mediante FS.setup.
• Hechos (solo Viaje en el Tiempo y películas documentales): Cada número y cada fecha es correcto. Las predicciones están marcadas como predicción.

6. Verificar

Si puedes ejecutar comandos, prueba realmente:

node scripts/verificar.js <nombre>.html

Esto inicia la página en un navegador invisible en formato horizontal y vertical, reporta errores y guarda dos imágenes. Mira las imágenes y corrige hasta que no haya errores y la imagen cumpla con la lista de verificación de calidad. Si no hay navegador disponible, lee tu escena línea por línea comparándola con la sección "Errores comunes" en references/engine.md. Los errores más frecuentes son erratas en nombres de variables y funciones que no existen en three.js r128.

7. Entregar

• En la aplicación Claude: como artifact HTML, para que se ejecute al instante y se pueda compartir.
• En Claude Code: como archivo en la carpeta del proyecto, con la indicación de que se abra en el navegador.

La respuesta es breve: una frase sobre lo que se ha creado, los controles (arrastrar, desplazar, tocar, tecla R o botón "9:16" para el modo de grabación) y tres sugerencias de variantes, cada una una frase que el humano puede simplemente devolver.

Si más tarde la página muestra un mensaje de error rojo, el humano te lo envía. Corrige la causa en la escena y vuelve a construir.

Modo de grabación

El botón "9:16" o la tecla R cambian a formato vertical sin elementos de control. En Mundo, la cámara se mueve automáticamente; en Película y Viaje en el Tiempo, comienzan desde el principio. Así, con una grabación de pantalla, se obtiene directamente un video para Reels, TikTok o Shorts. Menciónalo en tu respuesta, para muchos ese es el propósito real.