Tecnicas Avanzadas de Vibe Coding
Mas Alla de lo Basico
Has construido proyectos reales --- una landing page, una app SaaS full-stack, una API publica y funcionalidades potenciadas por IA. Sabes como hacer prompts, iterar, depurar y publicar. Pero hay otro nivel.
Las tecnicas en esta leccion no tratan sobre construir una funcionalidad especifica. Tratan sobre construir todo tu flujo de trabajo de desarrollo. Los servidores MCP conectan tu IA a herramientas y datos externos. El Plan Mode te ayuda a abordar funcionalidades complejas y multi-archivo sin perder coherencia. Los comandos slash personalizados te permiten automatizar tareas repetitivas. Los subagents dividen y conquistan. Los hooks ejecutan scripts automaticamente en respuesta a eventos.
Estas tecnicas se acumulan con el tiempo. Cada una ahorra minutos al dia. Combinadas, ahorran horas a la semana. A lo largo de meses construyendo, cambian lo que es posible para un desarrollador independiente o un equipo pequeno.
Servidores MCP a Profundidad
Que es MCP
MCP significa Model Context Protocol. Es un estandar abierto que permite a las herramientas de IA comunicarse con servicios externos y fuentes de datos a traves de una interfaz unificada. Piensa en ello como un adaptador universal: en lugar de construir integraciones personalizadas para cada herramienta, te conectas a traves de MCP y todo habla el mismo idioma.
Antes de MCP, si querias que Claude Code interactuara con tu base de datos, tenias que copiar datos manualmente en la conversacion. Con MCP, Claude Code se conecta directamente a tu base de datos, lee esquemas, ejecuta consultas y usa los resultados en contexto --- todo sin que copies y pegues nada.
Arquitectura de MCP
La arquitectura es directa:
- MCP Client: La herramienta de IA (Claude Code, Cursor, etc.) que inicia las solicitudes
- MCP Server: Un pequeno programa que expone herramientas, recursos y prompts al cliente
- Tools: Funciones que la IA puede invocar (ej. consultar una base de datos, crear un issue en GitHub, enviar un mensaje en Slack)
- Resources: Datos que la IA puede leer (ej. esquema de base de datos, contenido de archivos, documentacion de APIs)
- Prompts: Plantillas de prompts predefinidas que el servidor proporciona
El cliente descubre lo que ofrece el servidor, y la IA decide cuando y como usar esas capacidades basandose en el contexto de la conversacion.
Servidores MCP Preconstruidos
El ecosistema MCP ya tiene servidores para herramientas comunes:
| Servidor | Que Hace | |----------|---------| | Database | Consultar PostgreSQL, MySQL, SQLite directamente | | Filesystem | Leer y escribir archivos fuera del directorio del proyecto | | GitHub | Crear issues, revisar PRs, gestionar repositorios | | Notion | Leer y actualizar paginas y bases de datos de Notion | | Slack | Enviar mensajes, leer canales | | Figma | Leer archivos de diseno, extraer specs de componentes | | Memory | Grafo de conocimiento persistente entre sesiones | | Playwright | Automatizar interacciones del navegador |
Instalar un servidor preconstruido tipicamente significa agregar una entrada de configuracion. Por ejemplo, agregar el servidor MCP de GitHub a Claude Code:
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
}
}
}
En Windows, puede que necesites usar cmd /c npx como comando para evitar problemas de shell.
Una vez configurado, Claude Code puede crear issues en GitHub, revisar diffs de pull requests, buscar en repositorios y mas --- todo a traves de conversacion natural.
Construyendo tu Propio Servidor MCP
Los servidores preconstruidos cubren herramientas comunes, pero tu proyecto tiene necesidades unicas. Construir un servidor MCP personalizado te permite darle a tu IA acceso directo a tus datos y operaciones especificos.
Cuando construir uno:
- Tienes un esquema de base de datos personalizado que la IA necesita entender
- Quieres que la IA interactue con una API interna
- Necesitas herramientas especializadas no cubiertas por los servidores existentes
La estructura minima del servidor:
// mcp-server/index.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
const server = new Server(
{
name: "flowtask-mcp",
version: "1.0.0",
},
{
capabilities: {
tools: {},
resources: {},
},
}
);
// Registrar una herramienta
server.setRequestHandler("tools/list", async () => ({
tools: [
{
name: "get_tasks",
description: "Get tasks from FlowTask, optionally filtered by status",
inputSchema: {
type: "object",
properties: {
status: {
type: "string",
enum: ["TODO", "IN_PROGRESS", "DONE"],
description: "Filter by task status",
},
},
},
},
],
}));
// Manejar llamadas a herramientas
server.setRequestHandler("tools/call", async (request) => {
if (request.params.name === "get_tasks") {
const { status } = request.params.arguments || {};
const tasks = await fetchTasksFromDatabase(status);
return {
content: [
{
type: "text",
text: JSON.stringify(tasks, null, 2),
},
],
};
}
});
// Iniciar el servidor
const transport = new StdioServerTransport();
await server.connect(transport);
Ejemplo: Servidor MCP de FlowTask
Construyamos un servidor MCP que conecte Claude Code directamente a la base de datos de FlowTask:
Build an MCP server for FlowTask that exposes:
Tools:
- get_tasks: List tasks with optional status/priority filters
- create_task: Create a new task in a specified project
- update_task_status: Change a task's status
- get_project_summary: Get task counts and status breakdown for a project
Resources:
- database_schema: The current Prisma schema
- task_statistics: Real-time stats (total, completed today, overdue)
Package it as a standalone Node.js script that connects via stdio.
Con este servidor ejecutandose, puedes decirle a Claude Code cosas como "muestrame todas las tareas vencidas en el proyecto de Marketing" y consultara tu base de datos real y respondera con datos reales.
Configurando MCP en Claude Code
Los servidores MCP se configuran en .claude/settings.json a nivel de proyecto o en tu configuracion global:
{
"mcpServers": {
"flowtask": {
"command": "node",
"args": ["./mcp-server/index.js"],
"env": {
"DATABASE_URL": "file:./prisma/dev.db"
}
},
"github": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
}
}
}
}
Cada servidor se ejecuta como un proceso separado. Claude Code se comunica con ellos a traves de entrada/salida estandar. Puedes ejecutar multiples servidores simultaneamente, y la IA usara las herramientas que sean relevantes para la tarea actual.
Dominio del Plan Mode
Plan Mode es la funcionalidad de Claude Code para abordar trabajo complejo y de multiples pasos. En lugar de ejecutar inmediatamente, la IA primero crea un plan detallado, tu lo revisas y ajustas, y luego lo ejecuta paso a paso.
Cuando Usar Plan Mode
Plan Mode brilla para:
- Funcionalidades complejas que tocan muchos archivos (nuevo sistema de autenticacion, refactorizaciones mayores)
- Decisiones arquitectonicas donde quieres pensar el enfoque antes de comprometerte
- Migraciones de multiples pasos (cambiar esquema de base de datos, actualizar todo el codigo afectado, ejecutar tests)
- Funcionalidades que no has construido antes donde la planificacion reduce el riesgo de tomar el camino equivocado
Para cambios pequenos y bien definidos (corregir un typo, agregar una clase CSS, crear un componente simple), omite Plan Mode y haz el prompt directamente. Agrega sobrecarga que no vale la pena para tareas sencillas.
Escribiendo Prompts de Plan Efectivos
Un buen prompt de plan define el objetivo, las restricciones y el alcance:
Plan a notification system for FlowTask.
Requirements:
- In-app notifications (bell icon with unread count in the nav bar)
- Email notifications for task assignments and due date reminders
- User preferences for which notifications they receive
- Notification center page showing all notifications with read/unread state
Constraints:
- Use the existing Resend integration for emails
- Store notifications in the database (new Notification model)
- Don't add any new external dependencies
- Keep the notification check efficient (don't query on every page load)
Plan this feature before implementing. Show me the database changes,
new files to create, existing files to modify, and the implementation order.
Revisando y Modificando Planes
La IA producira un plan paso a paso. Revisalo cuidadosamente:
- Tiene sentido el esquema de base de datos? Verifica tipos de campo, indices y relaciones.
- Es logico el orden de implementacion? Los cambios de base de datos deben venir antes del codigo que los usa.
- Faltan pasos? El plan podria omitir comandos de migracion, actualizaciones de tests o ajustes de interfaz.
- Es el alcance correcto? Si el plan es demasiado ambicioso, pide reducir el alcance. Si le falta algo, agregalo.
Modifica el plan antes de la ejecucion:
Good plan, but make these changes:
- Skip email notifications for now, focus on in-app only
- Use Server-Sent Events instead of polling for real-time updates
- Add the notification preference toggles to the existing settings page
instead of creating a new page
Iterando sobre Planes
Los planes son documentos vivos. Despues de la primera fase de implementacion, podrias darte cuenta de que el enfoque necesita ajustes:
The notification system is working for in-app notifications. Now let's
plan phase 2: adding email notification support. We already have the
Notification model and the preference settings. Plan the email delivery
layer using the existing Resend integration.
Este enfoque de planificacion iterativa --- planificar, ejecutar, evaluar, re-planificar --- mantiene funcionalidades complejas en el camino correcto sin sobre-planificar desde el inicio.
Patrones de Refactorizacion Multi-Archivo
La refactorizacion es donde el vibe coding realmente brilla frente al desarrollo tradicional. Cambios que tomarian horas de edicion manual cuidadosa a traves de docenas de archivos se convierten en un solo prompt.
Renombrando a Traves del Codebase
Rename the "Task" model to "WorkItem" throughout the entire codebase.
This includes:
- Prisma schema (model name, relation names)
- All TypeScript types and interfaces
- All import statements
- All variable names that reference Task/task
- All API routes and endpoints
- All UI components that display task data
- All test files
Run the Prisma migration after updating the schema. Run all tests after
the rename to verify nothing broke.
La IA trabajara metodicamente a traves de cada archivo. Esta es una refactorizacion que le tomaria a un desarrollador humano una hora o mas de tedioso buscar-y-reemplazar, con el riesgo constante de olvidar algo.
Extrayendo Utilidades Compartidas
I notice we have duplicated date formatting logic in 5 different components.
Extract a shared utility:
1. Find all places where dates are formatted for display
2. Create a lib/format.ts file with formatDate, formatRelativeTime, and
formatDateRange functions
3. Replace all duplicated date formatting with calls to these utilities
4. Make sure the output format stays identical
El Protocolo de Seguridad
Para cualquier refactorizacion, sigue esta secuencia:
- Commit del estado actual funcional
- Refactoriza usando prompts de IA
- Testea para verificar que nada se rompio
- Commit del codigo refactorizado
Si los tests fallan despues de la refactorizacion, siempre puedes revertir al commit previo. Esta red de seguridad hace que la refactorizacion agresiva no tenga riesgo:
git add . && git commit -m "chore: snapshot before refactoring"
# ... hacer la refactorizacion ...
npm run test
# Si los tests pasan:
git add . && git commit -m "refactor: extract date formatting utilities"
# Si los tests fallan:
git checkout . # Revertir todo
Migrando Patrones
A veces quieres cambiar un patron arquitectonico completo:
Migrate all data fetching from client-side useEffect + fetch to Next.js
Server Components with server-side data fetching. Go file by file:
1. Identify all components that fetch data in useEffect
2. For each one, move the data fetching to the page-level Server Component
3. Pass the data as props to Client Components that need interactivity
4. Remove the loading states that are no longer needed (data arrives
with the initial HTML)
5. Keep Client Components only for interactive elements
Process one file at a time and test between each migration.
Comandos Slash Personalizados
Los comandos slash personalizados automatizan prompts repetitivos. En lugar de escribir las mismas instrucciones cada vez, creas un archivo de comando y lo invocas con un nombre corto.
Creando Comandos
Crea un directorio .claude/commands/ en tu proyecto:
mkdir -p .claude/commands
Cada comando es un archivo Markdown. El nombre del archivo (sin extension) se convierte en el nombre del comando.
Ejemplo: /deploy-check
<!-- .claude/commands/deploy-check.md -->
Before deploying, check the following:
1. Run `npm run build` and verify it succeeds with no errors
2. Run `npm run test` and verify all tests pass
3. Check for any TypeScript errors with `npx tsc --noEmit`
4. Check for linting issues with `npm run lint`
5. Verify no secrets are committed (search for API keys, passwords, tokens)
6. Check that .env.example is up to date with all required variables
Report a summary: what passed, what failed, and whether it's safe to deploy.
Ahora en Claude Code, escribes /deploy-check y todos esos pasos se ejecutan automaticamente.
Ejemplo: /add-feature
<!-- .claude/commands/add-feature.md -->
Add a new feature to the application. The feature is: $ARGUMENTS
Steps:
1. Plan the feature (database changes, new files, modified files)
2. Present the plan for review
3. After approval, implement step by step
4. Write tests for the new feature
5. Run all tests to ensure nothing broke
6. Create a git commit with a descriptive message
Follow the project conventions in CLAUDE.md.
El placeholder $ARGUMENTS se reemplaza con lo que escribas despues del nombre del comando: /add-feature user profile avatars.
Ejemplo: /review
<!-- .claude/commands/review.md -->
Review the current git diff for:
1. **Bugs**: Logic errors, off-by-one errors, null pointer risks
2. **Security**: SQL injection, XSS, exposed secrets, missing auth checks
3. **Performance**: N+1 queries, unnecessary re-renders, missing indexes
4. **Style**: Consistency with project conventions, naming, formatting
5. **Types**: Missing or incorrect TypeScript types
For each issue found, explain the problem and suggest a fix. Rate the
overall quality: Ship It, Needs Minor Changes, or Needs Major Changes.
Ejemplo: /test-all
<!-- .claude/commands/test-all.md -->
Run the complete test suite and analyze results:
1. Run `npm run test` and capture output
2. If any tests fail, analyze the failures
3. For each failure, determine if it's a real bug or a flaky test
4. Suggest fixes for real bugs
5. Report: total tests, passed, failed, and execution time
Subagents y Ejecucion Paralela
Los subagents son agentes de IA independientes que manejan subtareas mientras tu continuas trabajando en la tarea principal. Son como delegar trabajo a un miembro del equipo que regresa con resultados.
Que son los Subagents
Cuando despachas un subagent desde Claude Code, se ejecuta como un proceso separado con su propio contexto. Puede leer archivos, ejecutar comandos y producir output --- todo independientemente de tu sesion principal. Obtienes los resultados cuando el subagent termina.
Cuando Usar Subagents
Los subagents funcionan mejor para:
- Tareas independientes: Escribir tests mientras implementas funcionalidades
- Investigacion: Analizar la documentacion de una libreria mientras construyes con ella
- Trabajo paralelo: Generar seeds de base de datos mientras construyes la interfaz
- Code review: Tener un subagent revisando tus cambios mientras sigues construyendo
Despachando Trabajo
En Claude Code, puedes pedir que el trabajo se haga en paralelo:
While I work on the task creation form, use a subagent to:
1. Write comprehensive tests for the existing project CRUD operations
2. Cover create, read, update, delete, and edge cases
3. Use vitest with the test database
I'll review the tests when they're ready.
El subagent trabaja de forma independiente. No necesitas esperarlo. Cuando termina, ves los resultados y puedes integrarlos o ajustarlos.
Revisando el Output del Subagent
Siempre revisa el output del subagent antes de hacer commit. El subagent trabaja con contexto limitado comparado con tu sesion principal, asi que podria:
- Usar patrones desactualizados que cambiaste antes en la sesion
- Omitir convenciones especificas del proyecto
- Hacer suposiciones sobre la estructura de archivos que son incorrectas
Trata el output del subagent como un pull request de un miembro del equipo: revisalo, sugiere cambios si es necesario e integralo cuando cumpla tus estandares.
Hooks para Automatizacion
Los hooks son scripts que se ejecutan automaticamente cuando ocurren eventos especificos en Claude Code. Conectan el puente entre el desarrollo asistido por IA y tu toolchain local.
Que son los Hooks
Un hook es un script (shell, Python, Node.js o cualquier ejecutable) que Claude Code dispara en puntos especificos de su flujo de trabajo. Los configuras en .claude/settings.json:
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"command": "npx prettier --write $FILE_PATH"
}
],
"PreToolUse": [
{
"matcher": "Bash",
"command": "echo 'Running command: $TOOL_INPUT'"
}
],
"Stop": [
{
"command": "npm run lint"
}
]
}
}
Tipos de Hooks
| Hook | Cuando se Ejecuta | Caso de Uso | |------|-------------------|-------------| | PreToolUse | Antes de que la IA use una herramienta | Validacion, logging | | PostToolUse | Despues de que la IA usa una herramienta | Formateo, linting | | Stop | Cuando la IA termina su respuesta | Verificaciones finales | | SessionStart | Cuando comienza una nueva sesion | Configuracion del entorno |
Ejemplo: Auto-Formateo Despues de Cada Edicion
Cada vez que Claude Code edita o escribe un archivo, Prettier se ejecuta automaticamente:
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"command": "npx prettier --write $FILE_PATH"
}
]
}
}
Esto significa que nunca necesitas pedirle a la IA que formatee el codigo --- sucede automaticamente. El codigo en tu repositorio siempre esta formateado correctamente.
Ejemplo: Lint Antes de Cada Commit
{
"hooks": {
"PreToolUse": [
{
"matcher": "Bash(.*git commit.*)",
"command": "npm run lint"
}
]
}
}
Si el linter encuentra errores, el hook falla y el commit se bloquea. Esta es tu red de seguridad contra hacer commit de codigo con problemas obvios.
Ejemplo: Notificar al Completar Tarea
{
"hooks": {
"Stop": [
{
"command": "node .claude/scripts/notify.js"
}
]
}
}
El script notify.js podria enviar una notificacion de escritorio, publicar en Slack o registrar la finalizacion. Esto es especialmente util para tareas de larga duracion donde te has movido a otra cosa mientras esperas.
Construyendo Scripts de Hooks Personalizados
Los hooks pueden ser mas sofisticados que una sola linea. Crea un directorio de scripts:
mkdir -p .claude/scripts
Un hook de validacion que verifica problemas de seguridad comunes:
// .claude/scripts/security-check.js
const fs = require("fs");
const path = process.argv[2]; // Ruta del archivo pasada por el hook
if (!path) process.exit(0);
const content = fs.readFileSync(path, "utf-8");
const patterns = [
/password\s*=\s*["'][^"']+["']/i,
/api[_-]?key\s*=\s*["'][^"']+["']/i,
/secret\s*=\s*["'][^"']+["']/i,
];
for (const pattern of patterns) {
if (pattern.test(content)) {
console.error(`WARNING: Possible secret detected in ${path}`);
process.exit(1);
}
}
Construyendo tu Entorno de Desarrollo Personal con IA
Todo en esta leccion --- servidores MCP, Plan Mode, comandos personalizados, subagents, hooks --- se une para formar tu entorno de desarrollo personal. Esta no es una configuracion unica. Evoluciona con cada proyecto.
CLAUDE.md Global
Tu archivo CLAUDE.md global vive en tu directorio home y se aplica a cada proyecto. Contiene tus preferencias personales:
# Global Preferences
## Language
- Code comments in English
- Variable names in English
- Commit messages in English
## Code Style
- Use ES modules (import/export)
- Prefer TypeScript with strict mode
- Use async/await
- Destructure imports
## Workflow
- Always run tests after changes
- Prefer small, focused commits
- Use conventional commits
Este archivo significa que nunca necesitas re-explicar tus preferencias. Cada sesion de Claude Code comienza con este contexto.
Configuraciones Especificas por Proyecto
Cada proyecto obtiene su propio CLAUDE.md con detalles de arquitectura, convenciones y estado actual. Actualizalo a medida que el proyecto evoluciona:
## Current State
- Authentication: complete (NextAuth + GitHub)
- Projects CRUD: complete
- Tasks CRUD: complete with kanban view
- API: v1 endpoints complete, documentation pending
- Next: notification system
Coleccion de Servidores MCP
Con el tiempo, construyes una coleccion de servidores MCP para tus herramientas comunes:
- Servidor de base de datos para tu proyecto actual
- Servidor de GitHub para gestion de repositorios
- Servidor de Notion para documentacion de proyectos
- Servidor de Memory para contexto persistente
El settings.json de cada proyecto referencia los servidores que necesita. Los proyectos nuevos pueden reutilizar servidores de proyectos anteriores.
Biblioteca de Comandos Personalizados
Construye comandos para tareas que repites entre proyectos:
.claude/commands/
deploy-check.md # Verificacion pre-despliegue
add-feature.md # Planificacion e implementacion de funcionalidades
review.md # Code review
test-all.md # Ejecutar y analizar tests
security-audit.md # Verificar problemas de seguridad
performance-check.md # Analizar rendimiento
db-migrate.md # Flujo de migracion de base de datos
Comparte tu biblioteca de comandos entre proyectos manteniendolos en un repositorio git y creando symlinks en cada proyecto.
Hooks para tu Flujo de Trabajo
Tu configuracion de hooks se estandariza:
- PostToolUse: auto-formateo con Prettier
- PreToolUse: registrar comandos para depuracion
- Stop: ejecutar linter, notificar al completar
- SessionStart: verificar variables de entorno, confirmar conexion a base de datos
Haciendo Cada Sesion Mas Rapida que la Anterior
El efecto acumulativo es poderoso. Tu primer proyecto con Claude Code podria tomar dias. El quinto toma horas. El vigesimo toma una tarde. No porque los proyectos sean mas simples, sino porque:
- Tus archivos CLAUDE.md estan probados en batalla y son precisos
- Tus servidores MCP le dan a la IA acceso directo a las herramientas que necesita
- Tus comandos personalizados eliminan la escritura repetitiva de prompts
- Tus hooks atrapan errores automaticamente
- Tus prompts de planificacion estan refinados tras docenas de iteraciones
Esta es la meta-habilidad del vibe coding: construir el entorno que hace que construir sea mas rapido. Cada hora que inviertes en tu configuracion paga dividendos en cada proyecto futuro.
Que Sigue
Ahora has dominado las tecnicas avanzadas que separan a los usuarios casuales de IA de los power users. Servidores MCP, Plan Mode, comandos personalizados, subagents y hooks te dan un flujo de trabajo de desarrollo que es tanto mas rapido como mas confiable que los metodos tradicionales.
En el Modulo V, pasamos de construir a lanzar. Cubriremos como llevar tu proyecto a produccion con infraestructura adecuada, optimizar para SEO y crecimiento, y monetizar tu producto. Tienes las habilidades para construir cualquier cosa --- ahora aprendamos a lanzarla al mundo.