//50K_MILESTONE← volver al hub
trabajar con IA en código

Vibecoding:
tu visión + IA

Un mini curso para usar asistentes y agentes dentro de tu editor, tu terminal y tu proyecto local. Aprende a pedir cambios claros, revisar lo que genera la IA y avanzar sin perder el control.

5 módulos30 min1 práctica guiada
01 / CONTEXTOQué cambiaIA dentro del flujo
02 / SETUPInstalaciónClaude Code & Codex
03 / PEDIDOCómo pedirContexto y límites
04 / AGENTECómo revisarCambios en tu repo
05 / ENTREGACómo cerrarPruebas y criterio
módulo 01 · contexto

La IA ya está en tu flujo de trabajo

6 min
ObjetivoEntender dónde encaja la IA y qué decisiones siguen siendo tuyas.

Hoy puedes trabajar con IA desde el mismo lugar donde escribes y ejecutas código: el editor, el terminal y el repositorio. Puedes pedir una función, explicar un error, modificar varios archivos o ejecutar una tarea con un agente.

Eso no elimina el trabajo de desarrollo. Cambia el reparto: tú defines el resultado y validas el cambio; la IA ayuda con la implementación.

tú
DecidesProblema, alcance y criterio de éxito.
→
IA
ProponeCódigo, opciones, cambios y preguntas.
→
tú + pruebas
VerificasRevisas, ejecutas y aceptas solo lo correcto.
Regla simple Si no puedes describir qué debe cambiar y cómo comprobarlo, todavía no es un buen pedido para la IA.

El flujo real dentro del editor

Asistente

Te ayuda a completar, explicar o editar una parte pequeña mientras trabajas en un archivo.

Agente

Puede inspeccionar el proyecto y proponer cambios en varios archivos. Tú revisas el plan y el diff.

módulo 02 · herramientas

Instalación e integración en tu editor y terminal

7 min
ObjetivoInstalar y conectar Claude Code, OpenAI Codex/Copilot o Cursor en tu máquina para empezar a trabajar localmente.

Para hacer vibecoding necesitas combinar dos capas de interacción: el terminal (donde viven los agentes CLI de repositorio completo) y el editor (donde trabajas visualmente en cada archivo).

1. Agente CLI en terminal: Claude Code / Codex CLI

Los agentes de terminal leen todo tu proyecto, buscan archivos, ejecutan comandos de prueba y realizan cambios multi-archivo automáticamente.

terminal · instalación y login
01
02
03
04
05
06
# 1. Instalar Claude Code en Node.js npm install -g @anthropic-ai/claude-code claude login # 2. Iniciar sesión y dar contexto de tu repo cd tu-proyecto claude

2. Asistente visual en el editor: Cursor / VS Code

Integra asistentes inline en tu editor de código preferido para autocompletar e iterar línea por línea:

Cursor / Windsurf

Editores nativos con IA. Usa Cmd/Ctrl + K para editar selección y Cmd/Ctrl + L para abrir el panel de conversación con contexto del repo.

VS Code + Copilot / Continue

Instala las extensiones oficiales desde la pestaña de Extensions (Ctrl+Shift+X). Configura tu clave de API y vincula la extensión a tu cuenta.

3. Configuración de API Keys y permisos

Variables de entorno (.env)
export ANTHROPIC_API_KEY="tu_clave_api_aqui" export OPENAI_API_KEY="tu_clave_api_aqui"
Seguridad primero Agrega siempre .env a tu archivo .gitignore para evitar subir credenciales privadas o claves pagadas a GitHub.

Checklist de inicio rápido

módulo 03 · pedido

Un buen pedido tiene contexto y límites

7 min
ObjetivoPasar de “hazme una app” a una tarea concreta que se pueda revisar.

La IA responde mejor cuando conoce el contexto que tú ya tienes en la cabeza. No necesitas escribir un texto enorme. Necesitas dar la información correcta, en orden.

pedido.md · una tarea clara
01
02
03
04
05
06
Objetivo: añadir validación al formulario de contacto. Contexto: HTML y JavaScript sin framework. El formulario está en contact.html. Reglas: no cambies el diseño; usa mensajes en español. Criterios: email válido, nombre obligatorio, errores visibles. Entrega: modifica solo los archivos necesarios y explica el diff. Antes de editar: dime qué archivos vas a tocar y por qué.

La estructura que funciona

01 · objetivo
Qué debe pasarDescribe el resultado, no la solución.
+
02 · contexto
Dónde estáArchivos, stack, restricciones.
+
03 · criterios
Cómo sabrásCasos que deben funcionar.
Prompt listo para usar
Revisa este componente. Primero explica qué hace y señala los riesgos. Después propón un plan de 3 pasos. No edites todavía. Cuando te confirme, haz un cambio pequeño y muestra el diff.

Specs, contexto y SKILLS — la memoria externa de tu proyecto

La IA olvida tu repo entre sesiones. La solución es dejarle 3 archivos de memoria en el proyecto para que siempre sepa qué construir y cómo.

spec
SpecQué debe hacer una feature. 1 archivo por tarea, con criterios.
→
contexto
Archivos de contextoReglas globales: stack, estilo y decisiones.
→
skill
SKILLReceta reutilizable que la IA invoca sola.
Spec — ejemplo mínimo

Un archivo corto en specs/login.md:

Objetivo: login con email
Contexto: Next.js, Prisma, sin librería extra
Reglas: mensajes en ES, no tocar UI
Criterios:
- email válido y no vacío
- muestra error visible
- test para email inválido
Contexto + SKILL — reutilizables

AGENT.md / .cursorrules → stack, comandos y estilo siempre.

# AGENT.md
Stack: Next.js 14 + TS
Tests: npm test
Estilo: mensajes ES, commits cortos

SKILL = carpeta en .agent/skills/ con una receta (ej: /review, /test) que la IA ejecuta sin que repitas el prompt.

Resumen en 30s
  • Spec = qué construir ahora.
  • Contexto = lo que siempre aplica.
  • SKILL = cómo hacerlo repetible.

Con esos 3, dejas de explicar lo mismo y empiezas a delegar.

Cómo usarlos
  • Crea un spec por tarea.
  • Mantén un AGENT.md vivo.
  • Guarda tus prompts que funcionan como SKILLs.

La IA los lee sola al iniciar.

Consejo práctico Divide una tarea grande en cambios que puedas probar. “Construye todo el dashboard” es difícil de revisar. “Crea la tabla de usuarios con estos 3 estados” sí.
módulo 04 · agente

Deja que el agente avance, no que decida por ti

6 min
ObjetivoUsar un agente de código con un ciclo seguro: plan, cambio pequeño, diff y prueba.

Un agente puede leer el repositorio, buscar usos de una función, editar varios archivos y ejecutar comandos. Esa capacidad es útil cuando el trabajo tiene varios pasos, pero aumenta la importancia de revisar cada cambio.

1 · plan
Pregunta primeroQué va a tocar y qué puede salir mal.
→
2 · cambio
Acota el alcanceUn objetivo, pocos archivos.
→
3 · diff
Revisa antes de probarEntiende cada línea que cambió.
agent · propuesta de cambio
01
02
03
04
05
06
// Plan del agente 1. Buscar dónde se guarda el estado del formulario. 2. Añadir una función de validación aislada. 3. Conectar la función al evento submit. 4. Añadir casos de prueba para email vacío e inválido. // Archivos previstos: contact.js, contact.test.js

Antes de aceptar un cambio, comprueba esto

Importante Nunca pegues secretos, tokens, contraseñas o datos privados en un chat o herramienta de IA. Usa variables de entorno y revisa qué información compartes.
módulo 05 · entrega

La última palabra la tienen las pruebas

6 min
ObjetivoTerminar cada interacción con evidencia: qué cambió, cómo lo probaste y qué queda pendiente.

La IA puede escribir código convincente y aun así equivocarse. Cerrar bien una tarea significa ejecutar el proyecto, probar el caso principal, probar un caso de error y revisar el diff.

No es suficiente
“La IA dijo que ya quedó.”
Sí es evidencia
“npm test pasó: 12 tests. Probé email inválido. Diff revisado.”

Prompt de cierre

Pide una revisión final
Revisa el cambio completo como si fueras reviewer. Resume qué cambió, qué archivos tocaste, qué pruebas ejecutaste y qué casos todavía no están cubiertos. Si encuentras un riesgo, no lo ocultes: explica cómo reproducirlo.

Tu checklist de entrega

curso completado

Ya tienes un método para trabajar con IA.

Define el resultado. Da contexto. Pide un plan. Revisa el diff. Ejecuta pruebas. Repite hasta que el cambio sea correcto.

Practicar con 50 retos →