Tutorial perezoso: deja que la IA construya todo tu mundo
El tutorial anterior te hacía rellenar cada campo a mano. En este, el mismo trabajo se lo das al Asistente IA.
Vamos a construir el mismo juego: "The Imposters", survival horror post-apocalíptico en el que juzgas si quien está en la puerta es humano o monstruo y tienes que sobrevivir 14 noches. Esta vez, quien construye es el Asistente IA.
¿Qué es el Asistente IA?
El Asistente IA es la IA integrada en el lienzo. Edita tu carta directamente: dile en lenguaje normal «añádeme una variable de vida» y la variable aparece en el lienzo.
Cómo funciona:
- Describes lo que necesitas
- El asistente hace los cambios y los ves aparecer en vivo en el lienzo
- Al terminar cada ronda, abajo en el lienzo aparece una franja, El último turno del asistente, que dice cuántas cosas añadió, cambió y quitó
- ¿No te gusta? Pulsa Deshacer este turno para echar atrás la ronda entera, o simplemente dile qué tiene que arreglar
Además guarda un punto de restauración antes de cambiar tu carta, así que puedes volver atrás desde ⋮ → Historial de cambios ∠( ᐛ 」∠)＿
Paso 1: Crea el mundo y abre el asistente
Esta parte aún la haces tú:
- Pulsa Crear a la izquierda
- Elige Proyecto en blanco y luego Lienzo
- Escribe el nombre en el campo de arriba a la izquierda:
The Imposters - Pulsa Asistente IA, a la derecha de la segunda fila de la barra superior
El chat del asistente se abre a la derecha. A partir de ahora, ese es tu espacio de trabajo principal.
Paso 2: Dile a la IA lo que quieres
Las conversaciones nuevas empiezan en Idear, donde puedes hablar de la idea sin modificar la carta. Revisa el alcance propuesto y elige Empezar a construir para ejecutarlo o Seguir ideando para continuar la conversación. En este tutorial también puedes cambiar a Construir debajo del campo de texto para editar la carta directamente.
Envíale el concepto completo del juego de una vez. Cuantos más detalles des, mejor será el resultado.
Copia y pega esto para empezar:
Constrúyeme un juego de survival horror post-apocalíptico similar a «No, I'm not a Human».
Ambientación: El apocalipsis ha comenzado. La ciudad está invadida por «Visitantes», entidades
que se ven exactamente como humanos. El jugador está solo en casa, y cada noche alguien viene a llamar.
El jugador debe juzgar si el visitante es humano o monstruo y decidir si abre la puerta.
Reglas del juego:
- El juego dura 14 días (14 noches)
- Noche: 2–3 visitantes por noche, el jugador juzga observando por la mirilla y conversando en la puerta
- Día: explorar libremente las habitaciones y usar objetos
- Rasgos de los Visitantes: dientes antinaturalmente uniformes, pupilas anormales, textura de piel extraña
- Rasgos humanos: imperfecciones normales: caries, ojeras, cicatrices
Necesito estas variables:
- player_hp (vida, 0–5, por defecto 3): -1 al ser atacado por un Visitante; a cero si el Desconocido Pálido entra
- energy_current (energía, 0–8, por defecto 3): los registros y disparar cuestan 1 punto; la mirilla y hablar son gratis; se restaura al máximo de día
- game_day (día, 1–14): aumenta en 1 tras cada ciclo completo noche-día
- game_phase (fase): "Night" o "Day"
- player_has_gun (si está armado, por defecto true): disparar cuesta 1 de energía
Escríbeme una entrada de configuración del sistema, un mensaje de apertura, y entradas de lore
disparadas por palabras clave (evento de llamada, observación por la mirilla, búsqueda de habitación).
Además, constrúyeme un componente raíz (`index.tsx`) estilo monitor CRT que mantenga la cáscara
externa `<Chat renderBubble={(msg) => ...} />` y personalice las burbujas:
- Título de fase noche/día (extrae «🌑 **NOCHE X**» o «☀️ **DÍA X**» de las respuestas de la IA, renderiza como
resplandor verde CRT / título ámbar con efecto de scanlines)
- Animación de golpes (extrae el ***texto con triple asterisco***, renderiza como texto rojo grande temblando)
- Botones de opción clicables (extrae las opciones A/B/C/D/E tras «Opciones sugeridas:», clic para autoenviar)
- Barra de estado HUD inferior (fuente monoespaciada, muestra energía/vida/estado armado)
- Estética general negro-verde de fin del mundoPaso 3: Míralo trabajar
El asistente se pone manos a la obra. En el chat ves lo que va haciendo, y el lore, las variables y los comportamientos que escribe aparecen en el lienzo sobre la marcha.
Si el trabajo es grande, primero te dice más o menos cuánto tardará y cuánto costará, y espera a que le des luz verde. Usar el asistente gasta saldo.
Sigue trabajando en segundo plano
Una vez enviada la petición, puedes salir del editor o ponerte con otra carta. Cuando termine, necesite que decidas algo o se detenga, aparece un aviso en la app. Pulsa el aviso para volver.
¿Y si no te gusta?
Si algo se ve mal (por ejemplo, el valor por defecto de una variable es incorrecto), dile al asistente qué cambiar: «el valor por defecto de health debería ser 100, no 50». Para descartar una ronda entera, pulsa Deshacer este turno.
Paso 4: Revisa y afina
Cuando el asistente termine, repasa en el lienzo lo que ha construido:
- Personaje y mundo y Lore por palabra clave: ¿la configuración está bien? ¿Hay suficientes entradas por palabra clave?
- Variables: ¿los tipos, valores iniciales, rangos y Reglas de comportamiento tienen sentido?
- Apertura: ¿el mensaje de apertura tiene la atmósfera adecuada?
- Interfaz del jugador (en el centro de la barra superior): ¿la interfaz se ve como querías?
Paneles → Listas a página completa muestra el lore, las variables y los comportamientos en tablas de una sola página, y así se revisa mucho más rápido.
Si hay que ajustar algo, tienes dos opciones:
- Seguir charlando: dile al asistente «acorta el mensaje de apertura» o «cambia el color de la barra de vida a rojo oscuro»
- Editar tú mismo: haz clic en una fila del lienzo y cámbiala, igual que en el tutorial manual
Si solo quieres cambiar ciertas partes, selecciónalas antes en el lienzo (Ctrl + clic para elegir varias) y luego háblale al asistente. Se centrará en lo que hayas seleccionado.
Después pulsa Portada y resumen, a la derecha del lienzo, y rellena la portada, la descripción y el idioma en Ajustes de la carta.
Paso 5: Prueba y publica
Pulsa Jugar a la derecha de la barra superior. La lista de comprobación es la misma que en el tutorial manual:
| Qué comprobar | Cómo verificarlo |
|---|---|
| Aparece el mensaje de apertura | El primer mensaje se muestra automáticamente al entrar |
| Panel de estado | Se ve el HUD con la energía, la vida y si vas armado |
| Los valores cambian | Las variables cambian tras las interacciones; Este turno → Cada valor te dice por qué |
| El lore por palabra clave se activa | Mencionar «mirilla» hace que la IA siga las reglas |
¿Encontraste un problema al probar? Díselo al asistente: «al probar vi que la vida nunca baja, ¿puedes revisar las reglas de comportamiento de la variable health?». También puede jugar pruebas él mismo y leer lo que pasó.
Cuando todo funcione, pulsa No publicado arriba a la derecha, repasa la lista y pulsa Publicar. En el diálogo, añade etiquetas, elige el modo de contenido (Limitado o Sin límites) y la visibilidad, y publica.
Consejos para trabajar con el asistente
1. Que el primer mensaje sea lo más detallado posible
Cuanto más contexto tenga el asistente, menos correcciones harán falta. Intenta incluir en el primer mensaje:
- El género del juego y la mecánica central
- Qué variables necesitas y qué significa cada una
- El estilo y la atmósfera
- Qué tipo de interfaz quieres
2. Ve por pasos en vez de intentar acertar a la primera
Si tu mundo es complejo, no intentes meterlo todo en un solo mensaje. Divídelo:
Ronda 1: «Constrúyeme un juego de survival horror; empieza por la configuración del sistema, las variables y el mensaje de apertura»
→ revisar
Ronda 2: «Ahora añade las entradas de lore: evento de llamada, observación por la mirilla y búsqueda de habitación»
→ revisar
Ronda 3: «Por último, reescribe el componente raíz con una interfaz de horror oscuro que muestre la vida y el día»
→ revisar3. Da feedback concreto
❌ «La interfaz no se ve bien»: la IA no sabe qué está mal ✅ «La barra de vida es muy fina, dóblale la altura. El fondo es muy claro, ponlo negro puro #000»: la IA sabe exactamente qué cambiar
4. Revisa la interfaz sobre la marcha
Cuando el asistente cambie index.tsx, pulsa Interfaz del jugador en el centro de la barra superior para ver el resultado. Si no te convence, sigue hablando con él.
5. Deja notas adhesivas
Si tienes demasiadas ideas para explicarlas de golpe, pégalas en el lienzo como notas adhesivas y dile al asistente «haz todo lo que dicen las notas». Lee todas las notas y sabe a qué está pegada cada una.
Manual o asistente: comparación
| Tutorial manual | Tutorial con el asistente | |
|---|---|---|
| Tiempo necesario | 30-60 minutos | 5-15 minutos |
| Lo que aprendes | Qué significa cada campo y cómo usarlo | Cómo trabajar bien con la IA |
| Para quién | Quien quiere entender el motor a fondo | Quien quiere publicar rápido |
| Control | Controlas cada detalle | La IA hace casi todo y tú afinas |
Lo que mejor funciona
Haz primero el tutorial manual una vez para entender los conceptos básicos del motor. Luego usa el asistente: si sabes lo que está haciendo, le darás mejores instrucciones y verás antes los errores.
Siguientes pasos
- ¿Quieres profundizar en una función? Empieza por Escribir buenas entradas, Diseñar el estado del juego o Comportamientos
- ¿Quieres ver cómo se combinan las funciones? Explora los ejemplos de las páginas de recetas
- ¿Quieres que tu mundo luzca mejor? Consulta la Guía de UI personalizada
- ¿Prefieres tu propio Claude, ChatGPT o Cursor? Mira Conecta tu propia IA