Lección 03: El Arte del Prompting para Código
- La calidad del software generado depende directamente de la calidad del prompt. No es magia, es comunicación precisa.
- Un buen prompt sigue la estructura Contexto, Tarea, Formato, Restricciones. Cada elemento reduce la ambigüedad del output.
- Un PRD de una página mejora drásticamente los resultados al darle a la IA una referencia persistente del proyecto completo.
- El vibe coding funciona como conversación iterativa, no como un comando único. Prompt, evalúa, ajusta, repite.
- Los errores más comunes son prompts vagos, peticiones demasiado largas y aceptar el output sin probarlo.
Por qué el Prompting Importa
En vibe coding, tú no escribes código. Escribes instrucciones para que la IA lo haga por ti. Eso significa que tu única herramienta de desarrollo es el lenguaje natural. Si la instrucción es vaga, el resultado será mediocre. Si es precisa, el resultado puede ser sorprendentemente bueno.
El prompting para código no es lo mismo que conversar con un chatbot. No basta con "hazme una app". Necesitas comunicar requisitos, restricciones, comportamientos esperados y contexto técnico.
La diferencia entre un resultado utilizable y uno que descartas suele estar en una o dos frases adicionales en el prompt. Piensa en cada prompt como un brief para un desarrollador que no conoce tu proyecto. Cuanto mejor sea el brief, menos ida y vuelta necesitarás.
Principios Fundamentales del Prompting
Sé específico
La especificidad es la diferencia entre un resultado genérico y uno que puedes usar directamente. Compara estos dos enfoques:
El primer prompt produce algo genérico: quizás una plantilla con datos placeholder. El segundo produce un componente funcional con la estructura exacta que necesitas. La IA no puede adivinar tus requisitos; tu trabajo es eliminar la ambigüedad.
Una tarea por prompt
Divide las peticiones grandes en pasos pequeños y enfocados. En lugar de pedir "crea una app de gestión de tareas con autenticación, base de datos, panel de admin y notificaciones por email", haz prompts individuales para cada funcionalidad:
- Primer prompt: Crea la estructura base del proyecto con React y Tailwind.
- Segundo prompt: Añade un formulario para crear tareas con título, descripción y prioridad.
- Tercer prompt: Implementa la lista de tareas con filtros por estado y prioridad.
Cada prompt construye sobre el anterior. La IA puede concentrarse en una sola responsabilidad y tú puedes verificar cada paso antes de avanzar.
Describe comportamiento, no implementación
Dile a la IA qué debe pasar, no cómo implementarlo. Cuando describes el comportamiento, la IA elige la implementación más adecuada. Cuando dictas el código, limitas sus opciones y aumentas la probabilidad de errores.
Da contexto
La IA no tiene acceso a tu mente. Si trabajas con un stack específico, tienes restricciones de diseño o necesitas compatibilidad con algo existente, dilo explícitamente. El contexto evita que la IA tome decisiones que contradicen tus requisitos:
- Stack: "Usa Next.js 14 con App Router y Tailwind CSS"
- Restricciones: "No uses librerías externas para el formulario"
- Estilo: "Tema oscuro con fondo #111111 y acentos en morado"
- Existente: "El proyecto ya tiene Prisma configurado con PostgreSQL"
Estructura de un Buen Prompt
Un prompt efectivo para vibe coding sigue un patrón de cuatro bloques. No necesitas usar etiquetas formales, pero sí cubrir cada área:
Veamos un ejemplo completo aplicando los cuatro bloques:
# Contexto Estoy construyendo una app de seguimiento de hábitos con React + TypeScript + Tailwind. Tema oscuro. # Tarea Crea un componente HabitCard que muestre: - Nombre del hábito - Racha actual (días consecutivos) - Grid de los últimos 30 días (verde = completado, gris = no) - Botón para marcar el día actual como completado # Formato Un solo archivo TSX con los tipos inline. Usa Tailwind para estilos, sin CSS externo. # Restricciones No uses librerías de calendario externas. No hagas fetch a ningún API, usa datos mock. El componente debe ser responsive.
Este prompt tiene menos de 15 líneas y le da a la IA toda la información necesaria para generar un componente funcional en el primer intento. La clave no es la longitud, sino la cobertura de los cuatro bloques.
PRD como Herramienta de Prompting
Un PRD (Product Requirements Document) es un documento de una página que describe tu proyecto completo. No es un documento formal de 50 páginas; es una referencia concisa que le da a la IA el mapa del territorio antes de que empiece a construir.
¿Por qué funciona? Porque elimina la necesidad de repetir contexto en cada prompt. En lugar de explicar el stack, el objetivo y las restricciones cada vez, le pasas el PRD como referencia y tus prompts pueden ser más cortos y enfocados.
## Objetivo App de seguimiento de hábitos para uso personal. MVP funcional en 1 sesión de vibe coding. ## Funcionalidades core - Crear, editar y eliminar hábitos - Marcar hábitos como completados por día - Visualizar rachas y estadísticas semanales - Persistencia local (localStorage) ## Stack React 18 + TypeScript + Tailwind CSS Vite como bundler. Sin backend. ## Restricciones - Tema oscuro obligatorio - Mobile-first - Sin dependencias externas excepto React y Tailwind - Máximo 5 archivos de componentes
Con este PRD en el contexto de la IA, un prompt tan simple como "crea el componente de estadísticas semanales" genera un resultado coherente con el resto del proyecto. La IA sabe que debe usar React con TypeScript, tema oscuro, sin dependencias externas y con datos de localStorage.
Wireframes y Sketches
Un dibujo vale más que mil palabras de prompt. Antes de escribir instrucciones complejas sobre layout, dibuja lo que quieres. No necesitas herramientas profesionales:
- Papel y móvil: Dibuja el layout a mano y toma una foto. Muchas herramientas de vibe coding aceptan imágenes como input.
- Excalidraw: Herramienta gratuita para wireframes rápidos con aspecto de boceto. Ideal para layouts y flujos.
- Figma: Si ya tienes un diseño en Figma, exporta capturas de secciones específicas y úsalas como referencia visual.
El wireframe complementa al prompt textual. La IA interpreta la disposición visual y la combina con tus instrucciones escritas. Es la diferencia entre decir "pon una sidebar a la izquierda" y mostrar exactamente cómo se distribuyen los elementos.
El Loop de Iteración
El vibe coding no es un disparo único. Es una conversación con la IA donde cada prompt construye sobre el resultado anterior. El flujo natural es:
Cada iteración debe ser un ajuste preciso, no una reescritura completa. En lugar de reformular todo el prompt cuando algo falla, identifica qué parte específica no funciona y da feedback enfocado:
Si después de 3 iteraciones el resultado sigue sin ser lo que necesitas, el problema probablemente está en el prompt original. No sigas iterando sobre una base débil.
Iterar sobre una base mala solo produce resultados ligeramente menos malos. Haz un paso atrás y replantea desde cero.
Técnicas Avanzadas de Prompting
Una vez que dominas la estructura básica, estas técnicas te permiten abordar tareas más complejas con mayor precisión:
Pseudo-código para lógica compleja
Cuando la lógica de negocio es compleja, el lenguaje natural puede ser ambiguo. El pseudo-código elimina esa ambigüedad sin necesitar que escribas código real.
Usa pseudo-código para describir reglas de negocio, flujos condicionales y cálculos. La IA lo traduce al lenguaje y framework que estés usando.
Implementa esta lógica de precios: SI el usuario tiene plan premium: precio = precio_base * 0.8 // 20% descuento SI además tiene código de cupón válido: precio = precio * (1 - cupon.porcentaje) SI el precio final es menor que precio_mínimo: precio = precio_mínimo Siempre mostrar el precio original tachado junto al precio final.
Referencias a archivos con @mentions
En herramientas como Cursor o Claude Code, puedes referenciar archivos específicos con @ para que la IA los tenga en contexto. Esto es crítico cuando tu prompt depende de código existente.
- Referencia directa: "Mira
@src/types/user.tsy crea un formulario de registro que use esos tipos" - Consistencia: "Sigue el mismo patrón de
@src/components/ProductCard.tsxpara crear OrderCard" - Debugging: "El error está en
@src/api/checkout.tslínea 45, el total no incluye impuestos"
Las @mentions son más efectivas que copiar y pegar código porque le dan a la IA el archivo completo con su contexto, no solo un fragmento.
Pedir explicación antes de implementar
Para tareas complejas, pide que la IA explique su plan antes de ejecutar. Esto te permite corregir el rumbo antes de que genere cientos de líneas de código.
- "Antes de implementarlo, explícame cómo vas a estructurar la autenticación y qué librerías piensas usar"
- "Dame un plan de 5 pasos para refactorizar este módulo, sin escribir código todavía"
Esta técnica es especialmente útil para arquitectura, migraciones y refactorizaciones. Valida la dirección antes de invertir tiempo en generar código que quizás tengas que descartar.
Prompt chaining: secuencias conectadas
El prompt chaining es la técnica de diseñar una secuencia de prompts donde cada uno construye sobre el output del anterior. En lugar de un prompt gigante, creas una cadena deliberada:
- Prompt 1: "Crea la estructura de datos y los tipos TypeScript para la app"
- Prompt 2: "Usando esos tipos, crea las funciones de acceso a datos con localStorage"
- Prompt 3: "Ahora crea los componentes de UI que consuman esas funciones"
- Prompt 4: "Añade manejo de errores y estados de carga a los componentes"
Cada prompt tiene un alcance reducido, la IA no pierde el hilo, y tú puedes verificar cada capa antes de construir la siguiente.
Errores Comunes de Prompting
Después de observar cientos de sesiones de vibe coding, estos son los patrones que más afectan la calidad del output:
Ejemplos Prácticos: Buenos vs Malos Prompts
Cada par muestra el mismo objetivo abordado de forma ineficaz y eficaz. La diferencia no es la complejidad del prompt, sino su precisión.
El prompting es una habilidad que se entrena
No esperes dominar el prompting en tu primera sesión. Como cualquier habilidad, mejora con la práctica deliberada. Guarda tus mejores prompts como plantillas, analiza los que funcionan y los que no, y construye un repertorio personal que puedas reutilizar entre proyectos.
Preguntas Frecuentes
Sobre prompting para vibe coding