Vibe Coding con Claude Code: 4 agentes IA colaborando sin código
SERIE · 2 videos

Claude Code · Cursor AI · AWS · Sin código

Vibe Coding en Español:
Agentes IA con Claude Code

No te voy a enseñar a programar. Te voy a enseñar a pedir.

Un equipo de 4 agentes IA — diseñador, desarrollador, arquitecto y SEO — que se coordinan solos. Resultado: sitio web completo, desplegado en producción, sin escribir una línea de código.

El concepto

¿Qué es Vibe Coding?

Vibe coding es construir software sin programar — solo pidiendo. No lees el código que genera la IA. No necesitas saber PHP, CSS ni cómo conectarte a un servidor. Confías en el resultado y corriges conversando. El término lo acuñó Andrej Karpathy en 2025: "forget that the code even exists."

Esta serie va un paso más allá del vibe coding clásico. Si pedir directamente a Claude es la base, el comando /agents de Claude Code te permite definir un equipo de especialistas persistentes — cada uno con su metodología, restricciones y criterios de evaluación propios — y dejar que el equipo entero resuelva el problema. Tú no intermedias. Solo pides, apruebas y corriges.

"Es como conversar con alguien y él hace todo. Uno le va pidiendo. Yo lo veo como que amplifica tu cerebro."

Qué se usó en esta serie

Dos videos, tres herramientas, un flujo completo de inicio a producción.

Claude Code

Parte 1

Creación de agentes con /agents, coordinación del equipo e implementación del sitio web. Toda la conversación ocurre en la terminal.

Cursor AI

Parte 2

Editor visual conectado a Claude Sonnet 4.5. Gestión de archivos, configuración del dominio y deploy al servidor. Otra forma de hacer vibe coding, más visual.

AWS Lightsail

Parte 2

Servidor LAMP donde se desplegó el sitio vía SSH/SCP. Cursor manejó toda la conexión y configuración — sin abrir la terminal manualmente.

Parte 1 · 13 min

Creando el equipo de agentes

El comando /agents en Claude Code crea agentes con personalidad, especialidad y metodología propia. Le describes el agente en lenguaje natural y Claude genera el prompt completo — incluyendo metodología de trabajo, criterios de evaluación y restricciones.

Cuando les das una tarea conjunta, no trabajan en paralelo ciegos — se preguntan entre sí. El agente de SEO fue el primero en hablar: "¿En qué país opera el psicólogo? Esto afecta keywords locales, competencia y estrategia de búsqueda." Nadie le dijo que preguntara. Simplemente era lo que necesitaba saber.

El equipo creado

1

🎨 Diseñador

Experto en diseño gráfico web para psicólogos. Trabaja con tendencias 2025, evalúa el contexto clínico y define la arquitectura visual antes de que el desarrollador escriba una línea.

2

💻 Desarrollador

Senior en PHP, HTML y CSS. Sigue los patrones del diseñador y recibe el contexto de todos los otros agentes antes de implementar. Resultado: 1.860 líneas de CSS, 614 de animaciones, formulario PHP y robots.txt.

3

🏗️ Arquitecto & Contenido

Agente multifacético: define la estructura del sitio y el contenido editorial. Experto en arquitectura de información y contenido para psicología clínica.

4

📈 SEO & Marketing

El primero en pedir información: "¿En qué país opera el psicólogo? Esto afecta keywords locales, competencia y estrategia de búsqueda." Generó una estrategia SEO completa con keywords, volumen mensual, long tail y checklist de prelanzamiento.

Parte 2 · 15 min

De la propuesta al servidor

Después de que diseñador, arquitecto y SEO terminaron su parte, entró el desarrollador con todo el contexto del equipo. Implementó con aprobación en cada archivo creado:

1.860

líneas de CSS

614

líneas de animaciones JS

1

formulario PHP

~60 min

fase Claude Code

Luego el proyecto pasó a Cursor AI — otra forma de vibe coding, más visual. Desde ahí: configuración del dominio nicolasneira.dev, conexión SSH al servidor en AWS Lightsail, subida de archivos vía SCP y troubleshooting en vivo. Todo resuelto conversando.

Troubleshooting real — sin edición

Imagen no se mostraba

Causa: Se creó un SVG pero se guardó con extensión .jpg

→ "Modifica el sitio para que reconozca .svg y no .jpg"

Barra roja tapaba el nombre

Causa: Clase CSS crisis-bar con z-index incorrecto

→ "La barrita roja me está tapando mi nombre. Por favor, corregir y subir al servidor."

Nombre equivocado en producción

Causa: Quedó como Nicolás Neira López

→ "Cambia el nombre a Dr. Nicolás Neira en todo el sitio web"

Es un pingpong constante. La IA no es automática — pero amplifica lo que pedís.

El flujo completo

De cero a producción, paso a paso.

1

Creas el equipo con /agents

Describes cada agente en lenguaje natural. Claude genera el prompt completo con metodología y criterios. Tú revisas y ajustas.

2

Das la tarea al equipo

"Crea un sitio web básico donde se comuniquen todos los agentes. Quiero ofrecer mis servicios de psicología. Es importante que tenga un formulario de contacto. Por favor que sea una one page y que todos los agentes se comuniquen entre sí para generar una propuesta."

3

Los agentes se coordinan solos

SEO pide contexto de país y especialidad. Arquitecto define la estructura. Diseñador propone el estilo. Todo sin que tú intermedies.

4

El desarrollador implementa

1.860 líneas de CSS, animaciones, formulario PHP, robots.txt y .gitignore. Con el contexto completo de los otros tres.

5

Switch a Cursor AI

Abres el proyecto en Cursor. Le das el archivo .pem, la IP pública y el usuario del servidor.

6

Deploy automático a producción

Cursor conecta por SSH, sube los archivos con SCP, configura permisos y verifica que el sitio responde. Tú solo apruebas cada paso.

Preguntas frecuentes

Las dudas más comunes sobre vibe coding, /agents y el flujo de esta serie.

¿Necesito saber programar para hacer vibe coding?

+

No. El concepto central es "no programar, sino pedir". Solo necesitas saber describir lo que quieres. En los videos construimos un sitio web completo y lo desplegamos en producción sin escribir una sola línea de código manualmente.

¿Qué es el comando /agents en Claude Code?

+

Es un comando nativo de Claude Code que crea agentes persistentes con especialidades definidas. Le describes el agente en lenguaje natural — modelo, especialidad, restricciones — y Claude genera el prompt completo automáticamente, incluyendo metodología de trabajo y criterios de evaluación. Tú solo revisas y ajustas.

¿Los agentes se coordinan solos o hay que intermediar?

+

Se coordinan solos cuando les das una tarea conjunta. En el video, el agente de SEO fue el primero en hablar sin que nadie se lo pidiera: preguntó por el país y la especialidad del psicólogo porque necesitaba esa información para definir la estrategia de keywords. El arquitecto, el diseñador y el desarrollador se alimentaron del trabajo de los anteriores.

¿Cuánto tiempo toma construir un sitio web así?

+

En el video: 60 minutos para un sitio completo con diseño, 1.860 líneas de CSS, animaciones, formulario de contacto PHP, estrategia SEO y deploy a producción en AWS Lightsail. El tiempo depende principalmente de qué tan claro sea el prompt inicial y de cuántas correcciones se hagan durante el proceso.

¿Qué diferencia hay entre Claude Code y Cursor AI?

+

Claude Code es terminal — más control, ideal para crear y coordinar agentes con /agents, orquestar tareas y trabajar de forma conversacional. Cursor AI es visual — un IDE completo que también puede usar Claude Sonnet y que permite ver los cambios en el código en tiempo real. En el video se usan en secuencia: Claude Code para crear el equipo de agentes e implementar, Cursor para gestión de archivos, configuración del servidor y deploy vía SSH/SCP.

¿El código generado sirve para producción?

+

En el video el sitio quedó funcionando en producción en AWS Lightsail con dominio real. Hubo troubleshooting real: un error de SVG guardado como JPG, un elemento CSS que tapaba el nombre. Todo se resolvió conversando. El código es funcional y un punto de partida sólido, pero siempre requiere revisión antes de producción real.

¿Funciona para proyectos distintos a sitios web?

+

Sí. Los agentes que creas con /agents pueden especializarse en cualquier dominio — apps, APIs, scripts de automatización, análisis de datos. El sitio del psicólogo es solo un ejemplo del flujo completo. Lo importante es el concepto: definir expertos, darles contexto y dejar que se coordinen.

¿Puedo usar otros modelos además de Claude Sonnet?

+

Sí. Al crear un agente con /agents en Claude Code, puedes elegir el modelo. En el video se usa Claude Sonnet para todos los agentes. Cursor AI también puede configurarse con otros modelos. Lo relevante es que el patrón de coordinación entre agentes funciona independientemente del modelo que elijas.

Canal YouTube

@NicolasNeiraGarcia

Vibe Coding · Claude Code · ADK · A2A · Automatización

Más tutoriales de vibe coding y agentes IA en el canal

Suscribirse ›

También en el canal

AS

Agent Skills

Agentes que ejecutan habilidades y se descubren entre sí — Python, ADK, Claude Code y A2A Protocol.

ADK

Google ADK + A2A

SequentialAgent coordina 7 agentes que construyen un IDP completo comunicándose vía artefactos A2A.