Tarea 5: Vibe Coding

🎯 ¿Qué es el Vibe Coding?

Vibe Coding es un nuevo paradigma de programación donde tú describes lo que quieres en lenguaje natural y la IA escribe, modifica y ejecuta el código directamente en tu ordenador. A diferencia de los artefactos/lienzos (Tarea 4), aquí la IA maneja archivos reales y puede crear proyectos completos con múltiples archivos, bases de datos y despliegues.

📝 El diseño fundamental ha cambiado Antes, programar significaba escribir código línea a línea. Ahora, herramientas como Claude Code y Codex permiten que la IA lea, cree y modifique archivos directamente en tu proyecto. Tú diriges, la IA implementa.

📌 Herramientas disponibles

Herramienta	Proveedor	Características
Claude Code	Anthropic	Terminal con acceso completo al sistema de archivos. Muy potente para proyectos complejos
Codex	OpenAI	Integrado en ChatGPT, accesible temporalmente para cuentas gratuitas. Ejecuta en la nube, trabaja sobre repositorios GitHub
Antigravity	Google	Equivalente de Google, integrado en el ecosistema Gemini

🚀 Guía paso a paso

Crea un repositorio en GitHub

Lo primero es crear un repositorio donde vivirá nuestro proyecto. GitHub es la plataforma estándar para almacenar código.

Ve a github.com e inicia sesión (o crea una cuenta si no tienes)
Haz clic en el botón «+» (arriba a la derecha) → «New repository»
Ponle un nombre descriptivo, por ejemplo: taller-ia-economia
Marca «Public» (así podremos desplegarlo luego)
Marca «Add a README file»
Haz clic en «Create repository»

Creación de repositorio en GitHub — GitHub — creación de nuevo repositorio

Conecta la herramienta de vibe coding

Dependiendo de la herramienta que uses:

Opción A: Codex (ChatGPT)

En ChatGPT, busca la opción «Codex» en el menú
Conecta tu cuenta de GitHub cuando te lo pida
Selecciona el repositorio que acabas de crear

Codex conectando al repositorio de GitHub — ChatGPT Codex — interfaz vinculando el repositorio de GitHub

Opción B: Claude Code

Abre un terminal en tu ordenador
Clona el repositorio: git clone https://github.com/tu-usuario/taller-ia-economia
Entra en la carpeta: cd taller-ia-economia
Lanza Claude Code: claude

Claude Code ejecutándose en el terminal — Claude Code — terminal listo para recibir instrucciones en lenguaje natural

Pide la construcción del sitio web desde cero

Ahora viene lo interesante. Describe lo que quieres construir:

Quiero crear un sitio web sobre economía española.
El sitio debe tener:

1. Una página principal con un diseño atractivo
2. Una sección con datos del PIB, desempleo e
   inflación de España (últimos 20 años)
3. Gráficos interactivos con esos datos
4. Una sección de preguntas frecuentes sobre
   la economía española
5. Un formulario de contacto simple

Usa HTML, CSS y JavaScript.
Diseño moderno y responsive.
    

La IA creará múltiples archivos: index.html, style.css, script.js, y posiblemente una carpeta data/ con los datos.

La IA creando los archivos del proyecto — Vibe coding — la IA genera la estructura de archivos y escribe código del proyecto

Añade una base de datos e interactividad avanzada

Podemos ir más allá y añadir datos reales. Pide a la IA que incorpore una base de datos:

Ahora quiero que añadas datos reales. Crea un archivo
JSON con datos económicos de España (PIB, desempleo,
inflación) desde 2005 hasta 2025. Haz que los gráficos
lean de ese archivo.

Además, añade:
- Un comparador que permita seleccionar dos indicadores
  y verlos superpuestos en un gráfico
- Una tabla de datos que se pueda ordenar y filtrar
- Un buscador por año
    

Sitio web con gráficos interactivos y tabla de datos — Resultado — sitio web generado con gráficos interactivos y tabla de datos económicos

💡 Itera con libertad El poder del vibe coding es que puedes seguir pidiendo cosas: «cambia los colores», «añade una página de metodología», «haz que la tabla se exporte a CSV», etc. La IA modificará directamente los archivos.

Sube los cambios a GitHub

Una vez satisfecho con el resultado, sube el código al repositorio.

Con Codex

Codex crea automáticamente un pull request (solicitud de extracción) en tu repositorio. Solo tienes que revisarlo y aceptarlo en GitHub.

Con Claude Code

Pide a Claude Code que suba los cambios:

Sube todos los cambios al repositorio de GitHub con
un mensaje de commit descriptivo.
    

Repositorio en GitHub con los archivos del proyecto — GitHub — repositorio con los archivos del proyecto subidos por la IA

Despliega en Netlify

Para que tu web sea accesible en internet, la desplegamos en Netlify, un servicio gratuito de hosting.

Ve a netlify.app y crea una cuenta (puedes usar tu cuenta de GitHub)
Haz clic en «Add new site» → «Import an existing project»
Selecciona GitHub como proveedor
Busca y selecciona tu repositorio taller-ia-economia
Deja la configuración por defecto y haz clic en «Deploy»
En unos segundos, tendrás una URL pública para tu sitio

Despliegue en Netlify — importar repositorio de GitHub — Netlify — proceso de importar el repositorio de GitHub para el despliegue

Sitio web desplegado y accesible en Netlify — Netlify — URL pública del sitio web generado, accesible en internet

💡 Despliegue automático Netlify se conecta a tu repositorio de GitHub. Cada vez que subas cambios, el sitio se actualiza automáticamente. Esto es muy conveniente para iterar.

💭 Conceptos clave

📝 ¿Qué ha cambiado?

Antes: aprendes a programar → escribes código → ejecutas → corriges errores
Ahora: describes lo que quieres → la IA programa → tú revisas y diriges
El nuevo paradigma: la IA maneja archivos directamente, no solo sugiere código
Tu rol cambia de «programador» a «director de proyecto»

⚠️ Consideraciones

Claude Code requiere una suscripción de pago o API credits
Codex suele requerir ChatGPT de pago, ahora mismo usable gratuitamente
Es recomendable tener nociones básicas de lo que es HTML/CSS para poder guiar mejor, pero no necesario
Revisa siempre el código generado antes de desplegarlo en producción

← Anterior: Web interactiva Siguiente: API →