Crea tu primera página web usando IA

Crear una página web con inteligencia artificial hoy es tan simple como dictarle un comando de voz a una herramienta como Devin, la plataforma de Cognition que traduce tus ideas en código funcional y desplegado en internet. Si estás empezando en IA aplicada al desarrollo, este flujo te muestra cómo pasar de una idea a un proyecto público sin escribir una sola línea manualmente.

¿Qué es Devin y cómo funciona su versión en la nube?

Devin es un ecosistema de inteligencia artificial creado por Cognition que puedes usar de tres formas: en la nube desde devin.ai, instalado en tu computador como Devin Desktop, o en la terminal con Devin CLI. Para esta práctica trabajamos con la versión cloud, que tiene una interfaz muy parecida a la de un ChatGPT, Claude o Gemini, pero orientada a generar aplicaciones y páginas web completas.

La gran diferencia frente a un chat común: cada sesión de Devin dispone de una computadora virtual dedicada. Del lado izquierdo tú escribes o dictas la instrucción, y del lado derecho ves en tiempo real qué está ejecutando esa máquina, línea por línea.

¿Qué es Devin en pocas palabras? Es un agente de IA que crea, prueba y despliega software por ti, trabajando con Git, navegadores y terminales en una computadora virtual asignada a cada sesión.

¿Cómo pedirle a Devin que cree una web con comandos de voz?

El proyecto de ejemplo es un tracker de gastos diarios, semanales y mensuales. En lugar de escribir, se usa el comando de voz de Devin con esta instrucción: quiero crear una web donde pueda guardar registro de mis gastos diarios, semanales y mensuales, solo funcionará sin bases de datos, tiene que ser intuitiva y minimalista, recomiéndame qué stack debo utilizar antes de ejecutar.

Ahí aparece una palabra clave: stack. El stack es la lista de tecnologías con las que se construye una pieza de software, y suele dividirse en tres capas:

• Front-end: la parte visual que ve el usuario.
• Back-end: la lógica que maneja los datos.
• Base de datos: donde se almacena la información.

Devin responde con una primera propuesta usando Next.js 15, React 19, Supabase, Tailwind, Resend API, Expo Push y React Email. Pero como le pedimos algo minimalista y sin base de datos, ajusta la recomendación a un stack más liviano.

¿Qué stack recomienda Devin para una web sin base de datos?

La segunda propuesta, que sí aceptamos, incluye tecnologías más ligeras y pensadas para almacenamiento local:

• Vite: framework moderno, competencia directa de Next.js.
• React: la librería para construir componentes de interfaz.
• TypeScript: añade tipado y seguridad sobre JavaScript.
• Tailwind: sistema de estilos utilitario para el diseño.
• Local storage: memoria local del navegador que reemplaza la base de datos.

El local storage es clave aquí: guarda los datos directamente en el navegador del usuario, ya sea en computador, tablet o móvil, sin necesidad de servidores.

¿Cómo ver la web en vivo mientras Devin la construye?

Dentro de la interfaz existe la opción Go to Live Browser, que abre un navegador remoto en la computadora virtual de Devin. Ahí ves la aplicación tomar forma en tiempo real: primero una ventana en blanco, luego los componentes apareciendo a medida que el agente escribe el código.

En poco más de cinco minutos, Devin entrega una app llamada Mis gastos con selector de moneda, monto, categoría, fecha, nota opcional, un botón para agregar gasto, tres pestañas (diaria, semanal y mensual), gráfica por categoría y opciones de exportar e importar. El log de Git muestra 729 líneas nuevas y 243 eliminadas, señal de que reemplazó una base de código default del framework.

¿Qué es el local storage? Es el espacio de almacenamiento que cada navegador reserva para guardar datos de una web específica. No requiere servidor y persiste aunque cierres la pestaña.

¿Qué hacer si Devin se bloquea con GitHub?

Cuando Devin intenta crear el repositorio, aparece un error 401, que indica que la llave de seguridad de GitHub está expirada. Ojo con este detalle: el token de GitHub no es lo mismo que un token de IA, aquí se refiere a una credencial de acceso al repositorio.

La solución más limpia es crear un repositorio vacío en tu cuenta, pasarle la URL a Devin y pedirle que suba ahí el proyecto. En segundos, Devin publica la rama main con dos autores en el commit: el bot Devin AI Integration y tu propio usuario, lo cual queda registrado como coautoría compartida.

¿Cómo desplegar la web en Internet con Vercel?

Tener la app corriendo en la computadora virtual de Devin no basta si quieres compartirla. El paso que falta se llama despliegue o deploy, y la forma más sencilla de hacerlo es con Vercel.

El flujo es directo:

1. Crear una cuenta en vercel.com.
2. Entrar a la sección de proyectos y elegir Add New Project.
3. Seleccionar el repositorio de GitHub que Devin acaba de crear.
4. Confirmar el framework detectado (Vite, en este caso) y presionar Deploy.

Al terminar el proceso, Vercel entrega una URL pública. Al abrirla, la misma aplicación que veíamos en el navegador remoto de Devin queda accesible para cualquier persona con el enlace.

¿Cómo pedirle cambios a Devin y que se reflejen en producción?

Con Vercel enlazado al repositorio, cada commit que Devin suba dispara un nuevo despliegue automático. Para probarlo, la instrucción fue: no quiero que sea de color claro el fondo, quiero que sea un dark mode y que subas los cambios.

Devin edita los estilos, y como el proyecto usa React con Vite (que es reactivo), los componentes van cambiando de color en vivo dentro del navegador remoto. Al terminar, hace commit en la rama main, Vercel detecta el cambio y redespliega. Refrescas el mismo link y la app ya está en modo oscuro, sin tocar una sola línea de código a mano.

¿Qué es un deploy? Es el proceso de tomar el código de tu repositorio y publicarlo en un servidor accesible desde Internet, generando una URL que cualquier persona puede visitar.

Si te encontraste con términos muy técnicos durante el proceso, cópialos a tu chat de IA favorito y pídele que te los explique con tus propias palabras. Cuéntame en los comentarios qué app quieres construir con Devin.