Vibe coding: crea tú mismo una pequeña aplicación

Con el vibe coding describes con tus propias palabras lo que quieres crear. El asistente escribe el código, te muestra el resultado y lo ajusta según tus comentarios. No necesitas saber programar. Así puedes crear, por ejemplo, un quiz de práctica, un pequeño juego o una herramienta útil para tu clase.

Solo necesitas la aplicación de escritorio. No tienes que instalar Node.js ni git: la aplicación ya los incluye.

1. Elige una carpeta de trabajo

Crea una carpeta vacía en tu ordenador, por ejemplo Quiz-mates, y elígela como carpeta de trabajo de tu chat. Cómo se hace se explica en Acceso a archivos locales. El asistente solo trabaja en esta carpeta.

2. Describe lo que quieres

Explica con el mayor detalle posible lo que quieres crear. Por ejemplo:

Crea un quiz de cálculo para 4.º de primaria como una sola página HTML. Diez preguntas sobre las tablas de multiplicar hasta el 10, con botones grandes, una puntuación al final y un botón para volver a empezar.

El asistente muestra una página sencilla como esta con el servidor web integrado de la aplicación. El resultado aparece en el navegador integrado: el botón Navegador (el icono del globo) a la derecha de la barra superior. Encontrarás más información en Servidores locales y el navegador integrado.

¿No te convence? Di simplemente qué hay que cambiar:

Pon los botones en verde y, si una respuesta es incorrecta, muestra la correcta.

Tus propias fotos y dejar mirar al asistente

Adjunta una foto a tu mensaje y pide:

Pon esta foto en la página web.

El asistente guarda la foto en la carpeta del proyecto, por ejemplo en img/, y la coloca en la página. También funciona con una imagen que el asistente acaba de crear para ti.

¿Algo no está bien en la página del navegador integrado? Pide:

Mira qué falla en la página.

El asistente revisa entonces el texto, una captura de pantalla y los mensajes de error de la página. Consulta Dejar que el asistente mire.

Cuando el asistente abre él mismo una página en el navegador integrado, espera a que se cargue y ve sus mensajes de error, como un error de script o un archivo que no se carga. Los corrige antes de decir que funciona. Después prueba la página como un usuario: hace clic en botones, rellena campos, pulsa teclas y corrige los errores que aparecen. Que todo funcione como quieres lo compruebas tú.

3. Aplicaciones más grandes

Si quieres algo más grande, como una aplicación con varias pantallas, el asistente puede crear un proyecto con, por ejemplo, Vite y React:

Crea en esta carpeta una aplicación de React con Vite para un quiz de vocabulario. Instálalo todo, inicia la aplicación y muestra el resultado.

Iniciar un proyecto así (por ejemplo con npm create vite@latest) lo apruebas en la tarjeta de comando. Después, el asistente instala paquetes. Eso también lo apruebas, o activas Permitir instalaciones de paquetes sin preguntar. Consulta Instalar paquetes. ¿No quieres una tarjeta para cada comando? Elige Confiar en este proyecto en la primera tarjeta.

4. Guarda versiones

Una versión es una instantánea de tu proyecto. Si un cambio no te gusta, puedes volver a una versión anterior. En un buen momento, pide al asistente:

Guarda una versión.

La primera vez, el asistente inicia un historial de versiones para la carpeta. Los archivos que parecen secretos, como contraseñas o claves (también claves de API de Google), nunca entran en una versión. El asistente te avisa cuando omite algo.

5. Sube tu proyecto a GitHub

En GitHub guardas tu proyecto en línea. Así tienes una copia de seguridad y puedes seguir trabajando en él desde otro ordenador.

Conectar GitHub

Cada persona conecta su propia cuenta de GitHub. ¿Aún no tienes cuenta? Crea primero una gratis en github.com/signup.

1. Ve a Configuración y busca el panel GitHub en Estado del escritorio.
2. Haz clic en Conectar GitHub. La aplicación muestra un código y abre github.com/login/device en tu navegador.
3. Introduce el código en GitHub (con Copiar código lo copias) y concede el permiso. Si la página no se ha abierto, haz clic en Abrir GitHub.
4. El panel muestra ahora Conectado como @tu-nombre.

Qué pide GitHub. GitHub muestra la aplicación AI-School Desktop de HandiHow-B-V y pide acceso a tus repositorios (repo): lectura y escritura, también en repositorios privados. Este acceso es necesario para crear y actualizar tu proyecto. Acepta solo si la página está en github.com.

¿Código caducado? El código vale unos 15 minutos. Si ha caducado, vuelve a hacer clic en Conectar GitHub.

Repositorios de una organización, como la organización de GitHub de tu centro:

• Si la organización restringe las aplicaciones de terceros, haz clic en Request (solicitar acceso) junto a la organización en la pantalla de autorización. También puedes hacerlo después en github.com/settings/applications > AI-School Desktop.
• Una persona propietaria de la organización lo aprueba en Settings > Third-party access > OAuth application policy de la organización.
• Sin esa aprobación funcionan tus propios repositorios, pero no los de la organización.

¿Usar otra cuenta? Haz clic en Desconectar y cierra la sesión de github.com en el navegador (o usa una ventana privada) antes de volver a conectar. Si no, GitHub usa la cuenta con la que ya has iniciado sesión.

nota

Las versiones antiguas de la aplicación muestran «El inicio de sesión con GitHub aún no está disponible en esta versión de la aplicación.» En ese caso, actualiza la aplicación.

Publicar y actualizar

Después, pide por ejemplo:

Sube este proyecto a GitHub.

El asistente muestra una tarjeta con la dirección exacta y las etiquetas Integrado en la aplicación y Red activada. Haz clic en Ejecutar para continuar o en Rechazar para detenerlo. Un repositorio nuevo es privado, salvo que pidas uno público. Si la dirección no es github.com o el repositorio pasa a ser público, la tarjeta te avisa. Al publicar en línea, ves qué archivos se van a enviar.

Más adelante puedes decir, por ejemplo:

• "Publica la nueva versión." El asistente envía tus nuevas versiones a GitHub.
• "Trae la versión más reciente." El asistente obtiene los cambios de GitHub.
• "Descarga el proyecto https://github.com/naam/project en esta carpeta." El asistente descarga un proyecto existente.

También puedes descargar un proyecto público sin conectar GitHub. Para publicar en línea y crear un repositorio nuevo necesitas la conexión.

6. Consejos de seguridad

• Los repositorios nuevos son privados. Haz uno público solo si todo el mundo puede ver el código.
• No pongas nunca contraseñas, claves ni otros secretos en tu aplicación.
• ¿Usas una clave de API de Google (empieza por AIza, como la clave web de una aplicación de Firebase)? Ponla en un archivo que el asistente deja fuera de las versiones, como .env. Si la clave se queda en tu código, ese archivo no se publica en línea.
• Comprueba siempre la dirección en la tarjeta antes de hacer clic en Ejecutar.
• La conexión se guarda cifrada con tu cuenta de usuario en este ordenador. El asistente nunca ve tu clave de GitHub. Si trabajas en un ordenador compartido, haz clic en Desconectar al terminar.
• Desconectar solo elimina la conexión de este ordenador. Si quieres retirar el acceso por completo, hazlo en GitHub, en Settings > Applications.