Técnicas Avanzadas de Vibe Coding
Más Allá de lo Básico
Has construido proyectos reales --- una landing page, una app SaaS full-stack, una API pública y funcionalidades potenciadas por IA. Sabes cómo hacer prompts, iterar, depurar y publicar. Pero hay otro nivel.
Las técnicas en esta lección no tratan sobre construir una funcionalidad específica. 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 automáticamente en respuesta a eventos.
Estas técnicas se acumulan con el tiempo. Cada una ahorra minutos al día. Combinadas, ahorran horas a la semana. A lo largo de meses construyendo, cambian lo que es posible para un desarrollador independiente o un equipo pequeño.
Servidores MCP a Profundidad
Qué es MCP
MCP significa Model Context Protocol. Es un estándar abierto que permite a las herramientas de IA comunicarse con servicios externos y fuentes de datos a través de una interfaz unificada. Piensa en ello como un adaptador universal: en lugar de construir integraciones personalizadas para cada herramienta, te conectas a través de MCP y todo habla el mismo idioma.
Antes de MCP, si querías que Claude Code interactuara con tu base de datos, tenías que copiar datos manualmente en la conversación. 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 pequeño 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, documentación de APIs)
- Prompts: Plantillas de prompts predefinidas que el servidor proporciona
El cliente descubre lo que ofrece el servidor, y la IA decide cuándo y cómo usar esas capacidades basándose en el contexto de la conversación.
Servidores MCP Preconstruidos
El ecosistema MCP ya tiene servidores para herramientas comunes:
| Servidor | Qué 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 páginas y bases de datos de Notion | | Slack | Enviar mensajes, leer canales | | Figma | Leer archivos de diseño, extraer specs de componentes | | Memory | Grafo de conocimiento persistente entre sesiones | | Playwright | Automatizar interacciones del navegador |
Instalar un servidor preconstruido típicamente significa agregar una entrada de configuración. 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 más --- todo a través de conversación natural.
Construyendo tu Propio Servidor MCP
Los servidores preconstruidos cubren herramientas comunes, pero tu proyecto tiene necesidades únicas. Construir un servidor MCP personalizado te permite darle a tu IA acceso directo a tus datos y operaciones específicos.
Cuándo construir uno:
- Tienes un esquema de base de datos personalizado que la IA necesita entender
- Quieres que la IA interactúe con una API interna
- Necesitas herramientas especializadas no cubiertas por los servidores existentes
La estructura mínima 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 ejecutándose, puedes decirle a Claude Code cosas como "muéstrame todas las tareas vencidas en el proyecto de Marketing" y consultará tu base de datos real y responderá con datos reales.
Configurando MCP en Claude Code
Los servidores MCP se configuran en .claude/settings.json a nivel de proyecto o en tu configuración 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 través de entrada/salida estándar. Puedes ejecutar múltiples servidores simultáneamente, y la IA usará 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 múltiples pasos. En lugar de ejecutar inmediatamente, la IA primero crea un plan detallado, tú lo revisas y ajustas, y luego lo ejecuta paso a paso.
Cuándo Usar Plan Mode
Plan Mode brilla para:
- Funcionalidades complejas que tocan muchos archivos (nuevo sistema de autenticación, refactorizaciones mayores)
- Decisiones arquitectónicas donde quieres pensar el enfoque antes de comprometerte
- Migraciones de múltiples pasos (cambiar esquema de base de datos, actualizar todo el código afectado, ejecutar tests)
- Funcionalidades que no has construido antes donde la planificación reduce el riesgo de tomar el camino equivocado
Para cambios pequeños 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 producirá un plan paso a paso. Revísalo cuidadosamente:
- ¿Tiene sentido el esquema de base de datos? Verifica tipos de campo, índices y relaciones.
- ¿Es lógico el orden de implementación? Los cambios de base de datos deben venir antes del código que los usa.
- ¿Faltan pasos? El plan podría omitir comandos de migración, 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, agrégalo.
Modifica el plan antes de la ejecución:
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. Después de la primera fase de implementación, podrías 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 planificación iterativa --- planificar, ejecutar, evaluar, re-planificar --- mantiene funcionalidades complejas en el camino correcto sin sobre-planificar desde el inicio.
Patrones de Refactorización Multi-Archivo
La refactorización es donde el vibe coding realmente brilla frente al desarrollo tradicional. Cambios que tomarían horas de edición manual cuidadosa a través de docenas de archivos se convierten en un solo prompt.
Renombrando a Través 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 trabajará metódicamente a través de cada archivo. Esta es una refactorización que le tomaría a un desarrollador humano una hora o más 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 refactorización, sigue esta secuencia:
- Commit del estado actual funcional
- Refactoriza usando prompts de IA
- Testea para verificar que nada se rompió
- Commit del código refactorizado
Si los tests fallan después de la refactorización, siempre puedes revertir al commit previo. Esta red de seguridad hace que la refactorización 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 patrón arquitectónico 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 extensión) 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 automáticamente.
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 después 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 Ejecución Paralela
Los subagents son agentes de IA independientes que manejan subtareas mientras tú continúas trabajando en la tarea principal. Son como delegar trabajo a un miembro del equipo que regresa con resultados.
Qué 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 sesión principal. Obtienes los resultados cuando el subagent termina.
Cuándo Usar Subagents
Los subagents funcionan mejor para:
- Tareas independientes: Escribir tests mientras implementas funcionalidades
- Investigación: Analizar la documentación de una librería 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 sesión principal, así que podría:
- Usar patrones desactualizados que cambiaste antes en la sesión
- Omitir convenciones específicas 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: revísalo, sugiere cambios si es necesario e intégralo cuando cumpla tus estándares.
Hooks para Automatización
Los hooks son scripts que se ejecutan automáticamente cuando ocurren eventos específicos en Claude Code. Conectan el puente entre el desarrollo asistido por IA y tu toolchain local.
Qué son los Hooks
Un hook es un script (shell, Python, Node.js o cualquier ejecutable) que Claude Code dispara en puntos específicos 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 | Cuándo se Ejecuta | Caso de Uso | |------|-------------------|-------------| | PreToolUse | Antes de que la IA use una herramienta | Validación, logging | | PostToolUse | Después de que la IA usa una herramienta | Formateo, linting | | Stop | Cuando la IA termina su respuesta | Verificaciones finales | | SessionStart | Cuando comienza una nueva sesión | Configuración del entorno |
Ejemplo: Auto-Formateo Después de Cada Edición
Cada vez que Claude Code edita o escribe un archivo, Prettier se ejecuta automáticamente:
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"command": "npx prettier --write $FILE_PATH"
}
]
}
}
Esto significa que nunca necesitas pedirle a la IA que formatee el código --- sucede automáticamente. El código en tu repositorio siempre está 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 código con problemas obvios.
Ejemplo: Notificar al Completar Tarea
{
"hooks": {
"Stop": [
{
"command": "node .claude/scripts/notify.js"
}
]
}
}
El script notify.js podría enviar una notificación de escritorio, publicar en Slack o registrar la finalización. Esto es especialmente útil para tareas de larga duración donde te has movido a otra cosa mientras esperas.
Construyendo Scripts de Hooks Personalizados
Los hooks pueden ser más sofisticados que una sola línea. Crea un directorio de scripts:
mkdir -p .claude/scripts
Un hook de validación 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 lección --- servidores MCP, Plan Mode, comandos personalizados, subagents, hooks --- se une para formar tu entorno de desarrollo personal. Esta no es una configuración única. 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 sesión de Claude Code comienza con este contexto.
Configuraciones Específicas por Proyecto
Cada proyecto obtiene su propio CLAUDE.md con detalles de arquitectura, convenciones y estado actual. Actualízalo 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
Colección de Servidores MCP
Con el tiempo, construyes una colección de servidores MCP para tus herramientas comunes:
- Servidor de base de datos para tu proyecto actual
- Servidor de GitHub para gestión de repositorios
- Servidor de Notion para documentación 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 manteniéndolos en un repositorio git y creando symlinks en cada proyecto.
Hooks para tu Flujo de Trabajo
Tu configuración de hooks se estandariza:
- PostToolUse: auto-formateo con Prettier
- PreToolUse: registrar comandos para depuración
- Stop: ejecutar linter, notificar al completar
- SessionStart: verificar variables de entorno, confirmar conexión a base de datos
Haciendo Cada Sesión Más Rápida que la Anterior
El efecto acumulativo es poderoso. Tu primer proyecto con Claude Code podría tomar días. El quinto toma horas. El vigésimo toma una tarde. No porque los proyectos sean más simples, sino porque:
- Tus archivos CLAUDE.md están 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 automáticamente
- Tus prompts de planificación están refinados tras docenas de iteraciones
Esta es la meta-habilidad del vibe coding: construir el entorno que hace que construir sea más rápido. Cada hora que inviertes en tu configuración paga dividendos en cada proyecto futuro.
Qué Sigue
Ahora has dominado las técnicas 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 más rápido como más confiable que los métodos tradicionales.
En el Módulo V, pasamos de construir a lanzar. Cubriremos cómo llevar tu proyecto a producción 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.