Claude Code Club · Cuaderno de estudio
Etapa 6 — Build a Game

🛠️ Anatomía de un buen spec de juego (copia este patrón)

Lo que te llevarás: una plantilla reutilizable para escribir el primer prompt de cualquiera de los otros 9 juegos — para no volver a quedarte mirando una ventana de Claude Code en blanco.

Infografía: anatomía de un spec de juego
Nombre · objetivo · controles · condición de victoria · condición de derrota — «copia este patrón para siempre».

La guía de Click The Target no iba en realidad de ese juego. Iba de un patrón que usarás en cada build que hagas — juego, landing, agente, lo que sea. Todo buen primer prompt a Claude tiene cuatro secciones, en este orden:

  1. El contenedor. Una frase que dice qué tipo de cosa quieres y cómo va empaquetada. Para juegos, casi siempre: «un juego de navegador de una página como un único index.html autocontenido (HTML + CSS + JavaScript en línea, sin build tools)». Memoriza esa línea — es la que evita que Claude monte un proyecto React con 400 dependencias cuando solo querías un Snake.
  2. El gameplay (el qué). Mecánicas en viñetas; cada viñeta es una regla. Ejemplos:
    • «La serpiente crece un segmento al comer.»
    • «El juego acaba al chocar con la pared o consigo misma.»
    • «La velocidad sube un 5% cada 5 comidas.»
    No es código: son reglas que un niño podría leer. Si una regla necesita una coma, son dos reglas — pártela. Las reglas cortas sobreviven a la traducción a código; las largas se implementan a medias.
  3. La UI (el look). Dónde vive cada cosa en pantalla: marcador arriba a la derecha, título arriba al centro, fuente grande, fondo oscuro. No intentes diseñar bonito aquí — eso llega en la pasada de pulido. Solo coloca cosas: Claude es buenísimo colocando lo que describes.
  4. El remate (el «ya»). La última línea, siempre una de estas: «Muéstrame una vista previa en vivo» / «Arranca una vista previa mientras construyes» / «Ábrelo en el navegador al terminar». Sin el remate, Claude termina y espera educadamente. Con él, juegas en 30 segundos.

📋 La plantilla, lista para robar (traducida)

Rellena 5 huecos y publica un juego
Constrúyeme un juego de navegador de una página llamado «[NOMBRE]» como un único index.html autocontenido (HTML + CSS + JavaScript en línea, sin build tools, sin dependencias). Gameplay: - [Regla 1] - [Regla 2] - [Regla 3] - [Regla 4] UI: - [Dónde vive el marcador] - [Dónde vive el título] - [Fondo / rollo de color] - Funciona en móvil (táctil) y escritorio (clic). Muéstrame una vista previa en vivo.

Eso es todo el patrón. Imprímelo, hazle captura, mételo en tu app de notas — cada vez que elijas un juego del menú, rellenas esta plantilla y ya tienes el 90%.

Cuándo desviarse

La plantilla es el primer prompt. Después no escribes otra plantilla — pasas a iteraciones cortas y conversacionales: «la bola va muy rápida», «añade un botón Reiniciar», «en el móvil los botones son muy pequeños». Eso no es romper el patrón; es lo que viene después. La mayoría intenta embutir cada iteración en un mega-prompt. No: un spec, luego una conversación. Ese es el flujo entero.

🔊 Si tu juego lleva sonido, pide siempre «Web Audio API, sin archivos externos». Si lleva persistencia (récords, mejores tiempos), di «guarda en localStorage». Esas dos frases evitan el 90% de los momentos de principiante de «¿y este archivo dónde va?».
Fuente: Claude Code Club · Aula · Etapa 6 «Build a Game» — lección «Anatomía de un buen game spec».
Añadido al cuaderno: 7 de julio de 2026. Traducción al español para estudio personal.