Contenido del curso
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:
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:
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:
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.
Jhon Pazos
Estudiante
Javier Eduardo Morón Mendoza
Estudiante
camilo plata
Estudiante
Jose Figueroa
Estudiante
José Luis Mendez Marcano
Estudiante
Andrea Zapata Montoya
Team Platzi
Ricardo Ernesto Pimentel Cornejo
Estudiante
Adrian Esteban Forero Aguirre
EstudianteHola, ya obtuve el certificado del curso. Creo que estoy entre los 500 primeros. Cómo puedo obtener el cupón de Devin?
Ve a la página del curso y reclámalos desde navegador de escritorio (no sé sí también sirve en móvil) https://platzi.com/cursos/usar-ia/
Devin es un agente de IA que crea, prueba y despliega software en una computadora virtual dedicada Para apps sin base de datos, un stack liviano (Vite, React, TypeScript, Tailwind, local storage) funciona mejor Con Vercel conectado al repo, cada commit de Devin dispara un redespliegue automatico
Al guardar los datos en local ( en el navegador ) , cuando ya cierras la session , lo datos pierden ? Vercel soporta que podamos usar una db como squilite y mantiene los datos ?
Ya termine el curso! Donde recibo el cupon?
Ve a la página del curso y reclámalos desde la pagina del curso https://platzi.com/cursos/usar-ia/
Sirve para cualquier persona y no pasa nada en que ayuda
Crea tu primera página web usando IA
1. Idea central
La idea principal del tema es que hoy puedes crear una página web funcional usando inteligencia artificial sin programar manualmente, siempre que sepas dar buenas instrucciones, elegir un stack adecuado y usar un flujo de publicación con herramientas como Devin, GitHub y Vercel.
Lo esencial no es solo “hacer una web”, sino entender este proceso:
En otras palabras, el curso muestra que la IA ya no sirve solo para responder preguntas, sino también para actuar como agente de desarrollo.
2. Desarrollo conceptual
Antes de seguir, este diagrama resume el flujo completo explicado en el tema:
🟢 Devin como agente de desarrollo
Devin no se presenta aquí como un simple chatbot, sino como un agente de IA.
¿Qué significa eso? Un chatbot normal suele:
Un agente como Devin además puede:
La diferencia práctica es enorme: no solo sugiere, sino que opera sobre una computadora virtual.
🟡 La computadora virtual por sesión
Cada sesión tiene una máquina virtual dedicada. Esto significa que la IA no está “imaginando” el proceso, sino que está trabajando en un entorno real de ejecución.
Esto permite que:
Por qué importa: porque convierte una instrucción en un flujo real de desarrollo, no solo en texto explicativo.
🟢 El prompt como especificación inicial
En este tema, el usuario no programa: especifica. La instrucción dada fue una especie de requerimiento de producto:
Esto enseña una idea clave de la IA aplicada al desarrollo: quien sabe pedir bien, diseña mejor el resultado.
🟡 Qué es el stack
El stack es el conjunto de tecnologías usadas para construir una solución.
Se divide normalmente en:
En este caso, como el proyecto debía ser simple y sin base de datos, Devin ajustó el stack a algo más liviano.
🟡 El stack elegido y su lógica
La propuesta aceptada fue:
¿Por qué este stack tiene sentido?
Esto enseña un principio importante: la mejor tecnología no es la más compleja, sino la más adecuada al problema.
🟢 Local storage
El local storage permite guardar datos directamente en el navegador del usuario.
Qué resuelve:
Limitación importante:
Por tanto, es ideal para prototipos, utilidades personales y pruebas rápidas, pero no para sistemas multiusuario o críticos.
🟡 Visualización en tiempo real con Live Browser
La opción Go to Live Browser permite ver cómo la app aparece mientras Devin la construye.
Esto tiene valor pedagógico porque:
También ayuda a validar si el resultado va alineado con lo pedido.
🟡 Resultado funcional generado
La app final incluye:
Esto muestra que un prompt bien dado puede producir algo más que una landing page: puede producir una aplicación con lógica de uso real.
🔴 Integración con GitHub y error 401
Cuando Devin intenta crear o subir el repositorio y aparece un error 401, el problema no es de “la IA” como capacidad general, sino de autenticación.
401 suele significar: el sistema no está autorizado porque la credencial no es válida, expiró o no tiene permisos suficientes.
Aquí aparece un aprendizaje técnico muy importante:
Solución aplicada:
Esto enseña una mentalidad correcta: cuando falla la automatización, hay que desbloquear el flujo, no abandonar el proyecto.
🟢 Qué es coautoría en commits
Cuando el commit queda con tu usuario y con Devin AI Integration, se evidencia una forma de trabajo híbrida:
Esto es importante porque cambia la noción tradicional de autoría en desarrollo de software.
🟡 Despliegue con Vercel
El deploy consiste en convertir un proyecto del repositorio en una web accesible públicamente.
Flujo:
La idea clave aquí es que tener código funcionando localmente no equivale a tener una web publicada. Hace falta un servicio que la hospede y la sirva por Internet.
🟡 Actualizaciones automáticas
Una vez GitHub y Vercel están conectados, cada nuevo commit puede disparar un redeploy.
Eso crea un pipeline muy potente:
Esto convierte la IA en parte de un flujo moderno de desarrollo continuo.
🟢 Cambio de tema visual: dark mode
El ejemplo del cambio a modo oscuro enseña que no solo puedes construir desde cero, sino también iterar sobre una app ya creada.
Ese paso es importante porque en el mundo real el desarrollo casi nunca termina en la primera versión. Lo habitual es:
3. Conceptos implícitos
Hay varios conceptos que el curso presupone o menciona de forma indirecta:
4. Teoría complementaria relevante
Diferencia entre crear, probar y desplegar
Son tres etapas distintas:
Muchos principiantes confunden estas tres cosas y creen que si “ya se ve” en una máquina virtual, ya está en Internet. No necesariamente.
Qué gana el usuario con IA en desarrollo
La IA reduce barreras en:
Pero no elimina la necesidad de pensar en:
Cuándo usar local storage y cuándo no
Sí conviene cuando:
No conviene cuando:
Vite vs Next.js en este contexto
No se dice de forma explícita, pero el ajuste de stack sugiere esto:
Principio subyacente: no sobreingenierizar un proyecto pequeño.
5. Ejemplos prácticos
Ejemplo cotidiano
Una persona quiere registrar cuánto gasta en transporte, comida y ocio cada día.
No necesita usuarios, pagos ni servidor.
Una app con local storage es suficiente.
Ejemplo profesional
Un freelance quiere crear una herramienta interna para registrar horas trabajadas por proyecto. Necesita algo rápido, funcional y privado en su navegador. Puede usar IA para generar el prototipo en una tarde.
Ejemplo académico
Un estudiante quiere una web para llevar control de tareas, fechas de entrega y prioridades. Puede pedirle a una IA una app minimalista con filtros, categorías y almacenamiento local.
Ejemplo de crecimiento del proyecto
Empiezas con local storage, pero luego quieres:
En ese punto ya no basta el modelo inicial y tendrías que migrar a back-end + base de datos.
6. Analogía
Piensa en Devin como un arquitecto-operario digital.
Pero tú sigues siendo quien define:
La IA construye, pero la dirección del proyecto sigue siendo humana.
7. Errores comunes
1. Creer que IA = magia total
Confusión: pensar que la IA siempre resuelve todo sola. Cómo evitarlo: entender que también depende de permisos, credenciales, contexto y calidad del prompt.
2. Elegir un stack demasiado grande
Confusión: usar herramientas complejas para un problema simple. Cómo evitarlo: elegir la solución mínima suficiente.
3. Confundir “funciona en vivo” con “ya está desplegado”
Confusión: creer que verlo en el navegador remoto significa que ya está público. Cómo evitarlo: distinguir entorno de desarrollo vs. entorno publicado.
4. No entender la limitación del local storage
Confusión: pensar que los datos estarán disponibles en cualquier dispositivo. Cómo evitarlo: recordar que el almacenamiento local pertenece al navegador específico.
5. Dar instrucciones ambiguas
Confusión: pedir “hazme una app de gastos” sin restricciones ni criterios. Cómo evitarlo: especificar objetivo, alcance, estilo, almacenamiento y comportamiento esperado.
6. Asustarse ante errores técnicos como 401
Confusión: asumir que el proyecto fracasó. Cómo evitarlo: interpretar el error como un bloqueo puntual del flujo, no como el fin del proceso.
8. Mnemotecnia
Para recordar el flujo del tema, puedes usar:
P-E-V-S-D-A
Frase guía:
“Pide, Elige, Ve, Sube, Despliega, Ajusta.”
9. Conexiones con otros temas
Este tema se conecta directamente con:
10. Aplicación práctica
Cómo usar este conocimiento hoy mismo:
11. Resumen para repaso rápido
12. Autoevaluación
Responda estas preguntas directamente en el chat si desea, y yo le daré retroalimentación detallada una por una o todas juntas.
Comprensión
local storage puede reemplazar una base de datos en este proyecto?Aplicación
Análisis
Evaluación / creación
13. Glosario
tech stack14. Plan de repaso sugerido
Basado en la curva del olvido de Ebbinghaus:
A las 24 horas
Repase:
local storage,Más propenso al olvido:
A los 3 días
Repase:
local storage,Más propenso al olvido:
A la semana
Repase:
Se retiene mejor naturalmente:
Al mes
Repase:
Objetivo del repaso al mes: pasar de recordar el ejemplo a transferir el método a otros proyectos.