threejs-world-prompt

Prompt visual insignia (Three.js / WebGL)

Esta habilidad convierte una visión vaga en un prompt al nivel de los ejemplos de calibración en references/examples.md. La fuerza de un prompt así no proviene de la longitud, sino de que cada decisión que el modelo tomaría por defecto, y la tomaría de manera mediocre, ya está tomada: la forma, el fotograma inicial, la idea única, la mecánica principal, la paleta y la ley de renderizado, el ritmo, los criterios de aceptación, qué se puede sacrificar por rendimiento y qué nunca.

Archivos de referencia: cuándo leerlos

• references/forms.md: siempre, una vez que la forma esté decidida. Cada forma tiene su propio esqueleto de secciones.
• references/anatomy.md: siempre antes de escribir. Los bloques comunes a todo prompt y los umbrales de cada nivel (micro / medio / máximo / especificación).
• references/patterns.md: módulos opcionales (ritmos, anclas de continuidad, acoplamiento de sistemas, estado diegético, prueba de experto, lentes de cámara, calibración de tono, higiene de implementación, fórmulas de cierre). Léelo cuando elijas módulos en la ronda 3-4.
• references/realism.md: siempre después de la ronda 0. El presupuesto de realismo: qué funciona y qué se desmorona en cada nivel, variantes de código repetitivo, palancas que elevan el techo, advertencias honestas para el usuario.
• references/archetypes.md: arquetipos de temas, un catálogo de giros, estrategias de apertura, la paleta de técnicas.
• references/examples.md: prompts de calibración, uno o dos por forma. Lee solo el(los) ejemplo(s) que coincidan con la forma y el nivel elegidos. No copies contenido de ellos.

Cómo llevar a cabo la conversación

Regla general: el usuario tiene la visión, tú tienes el conocimiento. No preguntes sobre lo que ya sabes (una paleta de Monet, nombres de instrumentos en una Cessna, tipos de proyectiles pirotécnicos). Propón respuestas concretas y pregunta si encajan. Cada ronda: resume lo que está decidido en pocas palabras, propón decisiones por defecto y haz 1-3 preguntas sobre lo que realmente no sabes. Para opciones cerradas, usa una herramienta con opciones cliqueables si está disponible.

"Continúa / elige tú mismo" = acepta tus propias propuestas. Salta las rondas que el usuario ya ha respondido. Objetivo: 2-5 intercambios antes de un borrador, no un interrogatorio. Si el primer mensaje es rico, fusiona las rondas 0-2 en una.

Ronda 0: Forma y nivel

• Forma (detalles en forms.md): mundo explorable / película lineal / página o UI intervenida / juguete-campo de juegos / instrumento material / simulador / proceso en el tiempo (control deslizante) / espectáculo en bucle / minijuego / especificación técnica. Las formas se pueden combinar (por ejemplo, película + UI intervenida); entonces una de ellas es la forma principal.
• Presupuesto de realismo (detalles en realism.md): estilizado (fidelidad a un lenguaje visual: pintura, impresión, fotografía, arte lineal), físico (fenómenos computados desde primeros principios: óptica, mecánica, ondas, órbitas) o fotográfico (debe verse como grabación de la realidad). Cuando el usuario quiera fotográfico, pregunta también sobre el contrato de producción: ¿puede el modelo usar activos externos (HDRI, texturas PBR escaneadas, modelos glTF, imágenes generadas)?, ¿está permitido WebGPU?, y ¿es una sola ejecución en un solo archivo o un proyecto iterativo en Claude Code con fotogramas de referencia y un bucle de corrección? Si la visión contiene cosas que se desmoronan proceduralmente (personas, rostros, animales, tejidos, pelaje en primer plano), dilo claramente y propón una de estas opciones: aumentar el presupuesto, inclinarse hacia la estilización, u ocultar el punto débil (silueta, movimiento, oscuridad, granulado, distancia).
• Nivel: micro (~80-150 palabras, un objetivo, jugable de inmediato), medio (~350-550, una interacción, secciones cortas), máximo (~1100-1900, anatomía completa), especificación (formato de ingeniería con requisitos y barreras de seguridad, para cuando el riesgo es técnico más que estético). Por defecto, máximo, pero propón un nivel inferior cuando la visión sea simple.

Ronda 1: Ancla, giro, idea central

• Ancla: qué reconoce el espectador de inmediato y por qué (un cuadro que todos han visto; la página que leyeron hace un segundo; la imagen de una bestia que escupe fuego que todo lector lleva en la cabeza).
• Estrategia de apertura: ancla → giro (mantener un fotograma reconocible, el primer movimiento revela el giro) o pico primero (abrir directamente en la imagen pico, "ya X"). Propón 2-3 giros si el usuario no tiene ninguno.
• Idea central: una frase en torno a la cual gira todo (por ejemplo "un puerto hecho enteramente de faroles de papel, y una campana de marea que los enciende en una ola"). Sin ella, el prompt se desparrama.

Ronda 2: Ley de estilo y legibilidad

Propón esto tú mismo y deja que el usuario lo corrija: la composición exacta del primer fotograma (elementos, cantidades, posiciones), una paleta en colores nombrados, la ley de renderizado, 3-4 antipatrones ("No construyas..."), y una regla de legibilidad (cada capa se lee de un vistazo; para un ambiente oscuro: oscuro, pero nunca turbio). Opcionalmente, un amplificador de contraste (por ejemplo, belleza que haga que la destrucción duela).

Ronda 3: Héroe, mecánica, estado

• Material/objeto héroe y sus estados; la unidad de densidad ("mil millones de [unidades]") y la técnica.
• Control héroe / mecánica héroe: una interacción nombrada directamente como la héroe (control deslizante de tiempo, rebobinar, botón de activación, caminar, pincel). En formas lineales: la línea de tiempo y sus ritmos.
• Estado diegético: qué estado lee el espectador del mundo en lugar de la interfaz de usuario (por ejemplo "el haz del faro ES el indicador").
• Plano tesis: un plano que resuma toda la pieza.

Ronda 4: Movimiento, tiempo, módulos

Ritmo y su justificación dentro del mundo, la doctrina de movimiento (al menos 5 sistemas independientes), un ciclo o secuencia con un clímax. Elige módulos de patterns.md que encajen con el tema: propónlos, no preguntes por cada uno por separado.

Ronda 5: Interacción, cámara, rendimiento, tono

Modos de cámara (incluyendo lentes de renderizado), preajustes o una lista de planos, 1 control héroe + 2-3 controles + modo foto (o menos), la lista de elementos que nunca se sacrifican para el selector de calidad, calibración de tono para temas difíciles, prohibiciones de expansión del alcance. Idioma del prompt: inglés por defecto.

Escribir el prompt

1. Esqueleto: los bloques compartidos de anatomy.md + las secciones de la forma de forms.md + los módulos elegidos de patterns.md. Los encabezados #### nombran la idea, no solo el tema ("REBOBINAR - LA FUNCIÓN HÉROE", "EL FARO - LA TORMENTA QUE CONVOCASTE").
2. Modo imperativo, denso, concreto. Cada punto es una decisión. Números, nombres y la taxonomía del dominio en lugar de adjetivos.
3. Código repetitivo técnico siempre, en la variante elegida para el presupuesto de realismo y el contrato de producción (realism.md): una sola ejecución sin activos, una sola ejecución con activos, o un proyecto iterativo. Siempre DPR ≤ 2 y un objetivo de velocidad de fotogramas declarado en un portátil actual normal, en tus propias palabras.
4. Los niveles máximo y especificación terminan con un párrafo de barra de aceptación (criterios de aceptación) antes de la línea "En una frase". El nivel medio recibe una versión de una frase.
5. Ejecuta la lista de verificación, corrige, y solo entonces entrégalo. Entrega el prompt en un bloque de código o como un archivo .md si es largo o el usuario prefiere un archivo. Debajo, 2-3 frases sobre las decisiones que tomaste por el usuario; variantes en una frase.

Lista de verificación antes de entregar

Común:

• Primera frase: forma + nivel de ambición + una imagen héroe con 4-6 características específicas.
• "No construyas ..." (3-4 antipatrones) y un reformulación "Construye ..."; una línea "Idea central:" (obligatorio en micro/medio, puede integrarse en la reformulación en máximo).
• Párrafo de densidad: "mil millones de [unidades] ... Consigue esto con [técnica], no con [alternativa barata]".
• Primer fotograma coincide con la estrategia de apertura; "Sin cartel de título, menú, pantalla de carga ni texto de instrucciones"; indicio sin tutorial si hay interacción.
• Regla de legibilidad declarada explícitamente (de un vistazo + bajo inspección; oscuro ≠ turbio).
• Control héroe / mecánica nombrada como la héroe, con requisitos estrictos (suavidad, bidireccionalidad, precomputación).
• Al menos 5 sistemas de movimiento independientes; prueba de fotograma congelado.
• "De cerca sigue siendo válido" + siluetas legibles desde lejos.
• Cada característica mencionada es visible, se mueve o se puede ver; elimina aquellas que no se puedan mostrar.
• Prohibiciones de expansión del alcance (qué no añadir).
• Calibración de tono, si el tema es oscuro, violento o históricamente doloroso.
• Rendimiento: técnica por tipo de elemento, LOD, lista de elementos que nunca se sacrifican ("... nunca se intercambia"), higiene (pausa fuera de pantalla, dispose, sin explosión de memoria).
• Barra de aceptación (máximo/especificación) y una línea "En una frase: ...".
• El presupuesto de realismo se nombra en el prompt en una frase ("realismo aquí significa..."), el código repetitivo coincide con el contrato de producción, y la barra de aceptación incluye un criterio de realismo de realism.md.
• Ningún fotograma clave depende de algo que se desmorone en el presupuesto dado; o el punto débil está oculto (silueta, distancia, movimiento, luz) o se aumenta el presupuesto.
• Las secciones requeridas por la forma (forms.md) están presentes.
• Longitud dentro del rango del nivel; si es demasiado largo, corta repeticiones, no decisiones.

Límites

• El redactado de las frases de ejemplo en los archivos de referencia y en examples.md nunca aparece en el prompt tal cual. Toma la estructura y las decisiones, y escribe cada frase con tus propias palabras, incluyendo fórmulas técnicas y el párrafo de aceptación.

• Las obras de dominio público están bien. Para obras protegidas, personajes, monstruos o marcas conocidos (incluyendo los de juegos y películas), propón un diseño original "en el espíritu de" y descríbelo mediante tus propios rasgos, sin elementos reconocibles del original.

• El prompt debe ser factible en un navegador. Las cosas que no son realistas en WebGL (simulación completa de fluidos, física global de millones de cuerpos) se traducen a un truco que dé la misma impresión (una burbuja de simulación local, un shader, instanciación, mallas de morfología activadas), y el prompt nombra ese truco.