> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md). # Vibe Coding con IA Crea escenas de Decentraland con asistentes de IA usando Creator Hub y las SDK Skills oficiales de Decentraland (npx skills add decentraland/sdk-skills). Crea scenes de Decentraland describiendo lo que quieres. Un asistente de IA se encarga por ti del código SDK7, la arquitectura ECS y la estructura del proyecto. Tanto si eres un creador por primera vez como un desarrollador experimentado, la "vibe coding" asistida por IA te permite pasar de una idea a una scene en ejecución en minutos, en lugar de horas. {% hint style="info" %} **💡 Consejo**: No necesitas saber TypeScript para empezar. Los asistentes de IA pueden generar código funcional de scene a partir de descripciones en lenguaje natural. {% endhint %} ## ¿Qué es Vibe Coding? Vibe coding significa crear scenes manteniendo una conversación con un asistente de IA en lugar de escribir cada línea de código a mano. Describes lo que quieres — "una taberna medieval con puertas clicables y música de fondo" — y la IA escribe código SDK7 correcto y listo para desplegar. Este enfoque funciona en cualquier nivel de experiencia: * **Principiantes y no desarrolladores** — Pasa de cero a una scene funcional sin escribir código manualmente. * **Desarrolladores experimentados** — Omite el código repetitivo. Deja que la IA se encargue de la sincronización multiplayer, la estructura inicial de la UI y la configuración de despliegue mientras te concentras en las decisiones creativas. * **Equipos y estudios** — Prototipa conceptos de scene rápidamente antes de comprometer recursos de desarrollo completos. ## Usa el Asistente de IA en el Creator Hub La forma más rápida de empezar es la función integrada del Creator Hub [Asistente de IA](/creator/content-creator-es/scene-editor/extender-con-codigo/ai-assistant.md). Ve tu scene abierta, edita entities, components, smart items y código por ti, y puede ejecutar la preview para comprobar su propio trabajo. Instala automáticamente en tu proyecto las skills de abajo, así que no hay nada que configurar más allá de iniciar sesión en una CLI de programación. Es una función experimental, desactivada de forma predeterminada. ## Combina un editor de código con IA Usa un editor de código de IA de propósito general como [Cursor](https://www.cursor.com/) o VS Code con GitHub Copilot o Claude AI. Decentraland proporciona una carpeta de contexto para que estas herramientas entiendan el SDK. 1. Abre el Creator Hub y crea o abre una scene. 2. Haz clic en el **< > CODE** botón para abrir tu editor de código. 3. Usa el asistente de IA integrado del editor (el chat de Cursor, Copilot, etc.) para generar o modificar código. ## Instala Skills para cualquier agente de IA Skills son conjuntos de instrucciones predefinidos que enseñan a tu agente de IA cómo trabajar con el SDK de Decentraland. Cada skill cubre un tema específico, como crear scenes, añadir modelos 3D o configurar multiplayer, así que la IA ya conoce los patrones, APIs y restricciones correctos sin que tengas que explicárselos. Instalar skills significa menos errores y mejores resultados desde el primer prompt. ```bash # Elige qué skills de Decentraland instalar desde un selector interactivo npx skills add decentraland/sdk-skills # O instala todas las skills de Decentraland npx skills add decentraland/sdk-skills --all # O elige skills específicas npx skills add decentraland/sdk-skills --skill create-scene # Instala globalmente (disponible en todos los proyectos) npx skills add decentraland/sdk-skills -g ``` Esto copia los archivos de las skills a la configuración de tu agente para que conozca los patrones y restricciones de Decentraland. ## Actualización de Skills Nuevas skills se añaden con el tiempo, y las existentes se mejoran. Para obtener las versiones más recientes, vuelve a ejecutar el comando de instalación con `--all`: ```bash # Actualiza cada skill instalada y descarga las nuevas npx skills add decentraland/sdk-skills --all ``` Ejecutando `add` de nuevo vuelve a obtener el repositorio, así que actualiza las skills que ya tienes e instala cualquier otra que se haya añadido desde tu primera instalación. Si instalaste skills globalmente, añade `-g` a este comando también. {% hint style="warning" %} **📔 Nota**: No uses `npx skills update` para esto. Solo actualiza las skills que ya están en tu máquina, así que cualquier skill añadida al repositorio después de tu última instalación se omite silenciosamente. Usa siempre `npx skills add decentraland/sdk-skills --all` en su lugar. {% endhint %} ## Skills de IA disponibles Cuando instalas skills en tu agente, están disponibles las siguientes capacidades: | Skill | Qué hace | | ---------------------- | -------------------------------------------------------------------------------------- | | `sdk-scenes` | Punto de entrada con directrices para el agente e índice de todas las skills temáticas | | `create-scene` | Estructura un nuevo proyecto de scene SDK7 desde cero | | `migrate-sdk6-to-sdk7` | Migra una scene heredada de SDK6 a SDK7 | | `add-3d-models` | Añade modelos 3D (`.glb`/`.gltf`) con posicionamiento, escalado y colliders | | `add-interactivity` | Pointer events, triggers, raycasts | | `build-ui` | UI en espacio de pantalla 2D con React-ECS — HUDs, menús y diálogos | | `animations-tweens` | Animaciones de modelos GLTF con Animator, tweens de SDK | | `multiplayer-sync` | Multiplayer peer-to-peer usando networking CRDT | | `authoritative-server` | Headless Multiplayer Server para scenes validadas por servidor (BETA) | | `audio-video` | Efectos de sonido, música, audio streaming y reproductores de video | | `audio-analysis` | Datos de amplitud y frecuencia en tiempo real para scenes reactivas al audio | | `deploy-scene` | Despliega scenes en Genesis City (basado en LAND) | | `deploy-worlds` | Despliega scenes en Worlds (espacios 3D personales) | | `optimize-scene` | Optimización del rendimiento, límites de scene y buenas prácticas | | `camera-control` | Detección del modo de cámara, cámara cinemática, cámaras virtuales | | `composites` | Referencia del formato de archivo Composite para contenido estático de scene | | `lighting-environment` | Iluminación dinámica, sombras, skybox, fog y configuración del environment | | `particle-system` | Efectos de partículas — fuego, humo, chispas, nieve y fuegos artificiales | | `npcs` | Personajes no jugadores — biblioteca NPC Toolkit y enfoques manuales | | `player-avatar` | Posición del player, perfil, personalización del avatar y attachments | | `player-physics` | Fuerzas físicas — impulsos, knockback y fuerzas continuas | | `nft-blockchain` | Visualización de NFT e interacciones blockchain/cripto | | `advanced-rendering` | Billboard, TextShape, materiales PBR y materiales de video | | `advanced-input` | Lectura de input a nivel de System y control del movimiento del player | | `scene-runtime` | APIs de runtime transversales — trabajo async, HTTP y mensajería | | `script-components` | Clases de script component para el Creator Hub | | `game-design` | Patrones de diseño de juegos, límites de scene y presupuestos de rendimiento | | `unity-explorer-mcp` | Controla un Explorer en ejecución para probar y verificar una scene in-world | Nota: Algunas de estas skills implican obtener modelos 3D u otros assets de catálogos de assets gratuitos. El agente de IA siempre debe obtener la confirmación del usuario antes de descargar cualquier asset nuevo a un proyecto de scene. ## Deja que la IA vea tu scene in-world Normalmente la IA escribe código y *tú* ejecutas la preview, la miras y comunicas qué está mal. El cliente de escritorio de Decentraland puede cerrar ese ciclo: incluye opcionalmente un **MCP server** que permite a un agente de IA mirar y controlar directamente el Explorer en ejecución. El agente toma sus propias capturas de pantalla, lee la salida de la consola de la scene, mueve al player, hace clic en objetos y comprueba si la scene realmente hace lo que se le pidió construir — luego corrige lo que encuentra y vuelve a mirar. Esto convierte la vibe coding de "describe, espera, revisa" en un ciclo que el agente puede ejecutar casi por sí solo. {% hint style="info" %} **💡 Consejo**: Instala el `unity-explorer-mcp` instala la skill antes de probar esto. Le enseña al agente todo el flujo de trabajo — cómo iniciar el cliente, cómo encuadrar capturas de pantalla útiles, cómo contrastar lo que ve con el estado real de la scene y cómo recuperarse cuando la scene deja de cargar. ```bash npx skills add decentraland/sdk-skills --skill unity-explorer-mcp ``` {% endhint %} ### Lo que necesitas * El **cliente de escritorio de Decentraland** instalado (el mismo que el Creator Hub lanza para las previews). * Un agente de IA que pueda conectarse a servidores MCP mediante HTTP — Claude Code, Cursor, Cline, VS Code con una extensión compatible con MCP, y otros. * Un SDK actualizado en tu scene: ejecuta `npm i @dcl/sdk@latest` si el `--mcp` flag siguiente se rechaza como una opción desconocida. ### 1. Inicia la scene con el MCP server habilitado Desde la carpeta de tu scene: ```bash npm run start -- --mcp ``` Esto hace lo que `npm run start` siempre hace — sirve tu scene en `http://127.0.0.1:8000` y la recarga en caliente cada vez que guardas un archivo — y además inicia el cliente de escritorio con el MCP server escuchando en `http://127.0.0.1:8123/unity-explorer-mcp`. Inicia sesión cuando se abra el cliente. El agente solo puede empezar a trabajar una vez que hayas pasado la pantalla de inicio de sesión y se haya cargado el world. ### 2. Conecta tu agente de IA al server En **Claude Code**, regístralo una vez: ```bash claude mcp add --transport http --scope user explorer http://127.0.0.1:8123/unity-explorer-mcp ``` En **cualquier otro cliente MCP**, añade el server de la forma en que lo documente ese client, usando estos detalles: | Configuración | Valor | | ------------- | --------------------------------------------------------------------------------------------------------------- | | Transporte | Streamable HTTP (no stdio — no hay ningún comando que ejecutar, el server vive dentro del cliente en ejecución) | | URL | `http://127.0.0.1:8123/unity-explorer-mcp` | | Autenticación | Ninguno | | Nombre | `explorer` | Muchos clientes usan un archivo de configuración JSON para esto (`.cursor/mcp.json`, `mcp.json`, y similares — consulta la documentación de tu client para conocer los nombres exactos de las claves): ```json { "mcpServers": { "explorer": { "type": "http", "url": "http://127.0.0.1:8123/unity-explorer-mcp" } } } ``` Reinicia o recarga tu cliente de IA después de registrar el server, para que detecte la conexión. Si el agente dice que las herramientas de Explorer no están disponibles, la causa habitual es que el client no estaba en ejecución cuando el agente se inició — vuelve a conectar el server (en Claude Code, ejecuta `/mcp`) con el Explorer abierto. {% hint style="info" %} **¿Es seguro?** El server solo se ejecuta mientras inicias el cliente con `--mcp`, solo acepta conexiones desde tu propia máquina (`127.0.0.1`), y rechaza las solicitudes que provienen de páginas web. Nada queda expuesto a internet, y está completamente desactivado en un inicio normal del cliente. {% endhint %} ### 3. Pide lo que quieres y deja que lo verifique Con el server conectado, pide trabajo como lo harías normalmente — la diferencia es que ahora el agente puede comprobar sus propios resultados: > "Añade un cofre del tesoro en el centro del parcel que se abra al hacer clic, luego acércate y haz clic para confirmar que la tapa se anima." > "El letrero de neón se ve demasiado tenue. Toma una captura de pantalla, ajusta la intensidad de emisión y muéstrame un antes y después." > "Algo va mal con el elevator. Sube a la plataforma, observa los logs y dime por qué no se mueve." Tras bambalinas, el agente puede: * **Consulta** — tomar capturas de pantalla, leer la `console.log` salida y los errores de console.log, comprobar si la scene se cargó o falló, listar las entities de la scene e inspeccionar sus components, y leer la posición del player y de la cámara. * **Controlar** — mover y teletransportar al player, caminar en una dirección con colisiones reales, apuntar la cámara, colocar una cámara libre para una toma específica, cambiar los camera modes, hacer clic en objetos de la scene, enviar mensajes de chat y `/commands`, activar emotes y recargar la scene. * **Medir** — leer recuentos en vivo del contenido de la scene (triangles, entities, textures, materials y más) frente a los límites de Decentraland, clasificar qué modelos 3D contribuyen más a esa carga desde cualquier punto de vista y muestrear la tasa de fotogramas real que experimenta el player en cualquier punto. ### Úsalo para optimizar tu scene Como el agente puede medir además de ver, puedes encargarle directamente tareas de rendimiento. Puede comprobar tu scene frente a los [limitaciones de la escena](/creator/content-creator-es/scenes-sdk7/optimizacion/scene-limitations.md), identificar qué modelos 3D son los más pesados, medir la tasa de fotogramas en puntos específicos y, lo más importante, volver a medir después de hacer cambios para demostrar que ayudaron: > "Comprueba si mi scene está dentro de los límites de contenido de Decentraland y dime qué presupuesto está más cerca del tope." > "La scene se siente entrecortada cerca de la fuente. Quédate allí, mide la tasa de fotogramas y dime qué modelos cuestan más desde ese punto." > "Optimiza la scene: encuentra qué está reduciendo la tasa de fotogramas, arréglalo y muéstrame mediciones de antes y después." Para obtener los mejores resultados, instala la `optimize-scene` skill junto con `unity-explorer-mcp`, para que el agente también conozca las mejores prácticas de optimización de Decentraland. Consulta [Optimización del rendimiento](/creator/content-creator-es/scenes-sdk7/optimizacion/performance-optimization.md#optimize-with-ai) para obtener más información sobre este flujo de trabajo, incluido cómo combinarlo con el Blender MCP server para automatizar correcciones en los propios modelos 3D. ### Consejos * **Pide pruebas, no afirmaciones.** "Verificar con una captura de pantalla" o "confirmar desde los logs" es lo que hace que este flujo de trabajo valga la pena. Un buen agente comprueba ambas cosas: los píxeles pueden verse bien mientras el estado subyacente está roto, y viceversa. * **Las capturas de pantalla consumen tokens.** Cada captura de pantalla que el agente mira consume parte de su contexto. Si quieres un recorrido visual largo — una animación a lo largo del tiempo, un recorrido por muchos puntos — pídele que capture frames en archivos y solo lea los que importan. La `unity-explorer-mcp` skill incluye un script que hace exactamente esto. * **Guarda una sola vez, no cinco seguidas.** Los guardados sucesivos rápidos pueden hacer que el client cargue un bundle a medio escribir y deje caer la scene por completo, lo que requiere reiniciar el client para recuperarla. Pide al agente que agrupe sus cambios en un único guardado. * **Mantén el client abierto.** Si lo cierras, la conexión se cae y el agente pierde sus ojos. Volver a iniciarlo con el mismo comando lo recupera. * **Los teleports se comportan de forma distinta en el desarrollo local de scenes.** Moverse entre parcels con `/goto` no está permitido allí, así que el agente debe reposicionar al player dentro de la scene en lugar de teletransportarlo. ## Consejos para hacer prompts eficaces Obtener los mejores resultados de la IA consiste en dar prompts claros y específicos. Aquí tienes algunos consejos: ### Sé específico sobre lo que quieres En lugar de: > "Haz que mi scene sea mejor" Prueba: > "Añade una puerta en la posición (8, 0, 8) que se abra con una animación de rotación al hacer clic y reproduzca un efecto de sonido de chirrido" ### Haz referencia a elementos existentes > "Haz que el botón rojo sobre la mesa active el ascensor para subir" ### Pide una cosa a la vez Divide las solicitudes complejas en pasos: 1. "Añade una UI de marcador en la esquina superior derecha" 2. "Añade un contador que aumente cuando el player haga clic en el objetivo" 3. "Muestra el valor del contador en el marcador" ### Itera y perfecciona Después de cada cambio: 1. Previsualiza la scene (haz clic **Reproducir** en Creator Hub, o `npm run start` en la línea de comandos) 2. Comprueba qué funciona y qué no 3. Dile a la IA qué ajustar: "Mueve el NPC 2 metros a la izquierda y haz que mire al player" ### Prompts de ejemplo Para ejecutarse sobre una clonación limpia de [sdk7-scene-template](https://github.com/decentraland/sdk7-scene-template/). #### Ejemplo de prompt 1 ``` Quiero que descartes el código actual de la scene y hagas un juego de laberinto pequeño y simple, en 1 parcel; las paredes pueden ser cubos y deben tener collision. El juego debe empezar cuando el player entre realmente en el laberinto por el punto A y terminar cuando salga por el punto B (la única salida del laberinto). Quiero que añadas 3 puertas diferentes en el laberinto, con las que haya que interactuar mediante input de puntero para abrirlas y pasar. Debes verificar que el player realmente pueda jugar y ganar ``` #### Ejemplo de prompt 2 ``` Quiero que descartes el código actual de la scene y construyas un juego de plataformas simple. Tienes que verificar que el juego se pueda ganar antes de considerarlo terminado. ``` ## Con qué puede ayudar la IA * Estructurar nuevas scenes a partir de una descripción * Añadir y posicionar modelos 3D * Escribir manejadores de clic e interactividad * Crear UI (HUDs, menús y diálogos) * Configurar sincronización multiplayer * Configurar el Multiplayer Server para anti-cheat * Añadir audio, video y streaming * Crear animaciones y tweens * Optimizar el rendimiento de la scene * Preparar scenes para el deployment * Depurar problemas en el código existente * Probar y verificar visualmente una scene en un Explorer en ejecución (ver [Deja que la IA vea tu scene in-world](#let-the-ai-see-your-scene-in-world)) ## Limitaciones Aunque las herramientas de IA son potentes, ten en cuenta lo siguiente: * **Previsualiza siempre** — El código generado por IA puede no verse exactamente como esperas. Ejecuta una preview para verificarlo. * **Los límites de scene siguen aplicando** — La IA no puede eludir los [limitaciones de la escena](/creator/content-creator-es/scenes-sdk7/optimizacion/scene-limitations.md) (recuento de triangles, tamaños de archivo, límites de parcel). * **Lógica de juego compleja** — Para mecánicas de juego complejas, puede que tengas que guiar a la IA paso a paso o refinar su salida manualmente. * **Modelos 3D personalizados** — La IA puede hacer referencia a assets gratuitos existentes o cargar modelos que tú proporciones, pero no puede crear modelos 3D desde cero (a menos que uses otras herramientas como el Blender official MCP server al mismo tiempo). ## Siguientes pasos * [SDK Quick Start](/creator/content-creator-es/scenes-sdk7/primeros-pasos/sdk-101.md) — Aprende los fundamentos de SDK7 * [Combínalo con código](/creator/content-creator-es/scene-editor/extender-con-codigo/overview.md) — Mezcla la edición visual con código * [Multiplayer Server](/creator/content-creator-es/scenes-sdk7/networking/authoritative-servers.md) — Multiplayer con servidor autoritativo * [Ejemplos de scenes](https://studios.decentraland.org/resources?sdk_version=SDK7) — Explora scenes de ejemplo en busca de inspiración * [Recursos útiles](/creator/content-creator-es/scenes-sdk7/primeros-pasos/useful-resources.md) — Más herramientas de IA, bibliotecas de assets y add-ons para acelerar tu flujo de trabajo --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/primeros-pasos/vibe-coding.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.