Lección 05: De Prototipo a Producción
- El 45% del código generado por IA contiene fallos de seguridad (Veracode 2026). Los PRs con código IA tienen 2.74x más vulnerabilidades.
- El testing no es opcional: prueba manualmente, genera tests con la propia IA y revisa edge cases como inputs vacíos, datos incorrectos y permisos.
- Git es tu red de seguridad. Commits frecuentes permiten revertir cuando la IA rompe algo. Sin Git, un prompt mal formulado puede destruir horas de trabajo.
- Usa la propia IA para refactorizar su código: "revisa este código y mejora la estructura sin cambiar la funcionalidad".
- Antes de lanzar, pasa el checklist de producción: seguridad, testing, variables de entorno, HTTPS y estructura de carpetas.
El Problema: De "Funciona" a "Es Seguro"
Vibe coding es extraordinario para prototipos. Describes lo que quieres, la IA genera código, y en minutos tienes algo funcional. Pero "funciona" no significa "está listo para producción".
Hay un gap significativo entre un prototipo que hace lo que pides y una aplicación que puedes desplegar con confianza. Esa distancia se cubre con testing, seguridad y control de versiones.
Estos números no significan que debas dejar de usar vibe coding. Significan que necesitas un proceso de revisión antes de llevar tu código a producción. Esta lección te da exactamente eso: un framework práctico para pasar de prototipo a producto.
Testing del Código Generado
La IA genera código que compila y se ejecuta. Pero eso no garantiza que funcione correctamente en todos los escenarios. El testing es la primera línea de defensa entre tu prototipo y tus usuarios reales.
Antes de automatizar nada, ejecuta la aplicación y pruébala como lo haría un usuario real. Parece obvio, pero muchos vibe coders confían ciegamente en el output de la IA.
- Flujo principal: Navega por el happy path completo. Regístrate, haz login, completa la acción principal y cierra sesión.
- Edge cases: Envía formularios vacíos, introduce datos incorrectos (letras donde esperan números), prueba con conexión lenta.
- Permisos: Intenta acceder a rutas protegidas sin autenticación. Intenta ver datos de otro usuario.
- Estados inesperados: ¿Qué pasa si el usuario hace clic dos veces en "Enviar"? ¿Qué ocurre al recargar a mitad de un proceso?
Una de las ventajas del vibe coding: puedes pedirle a la propia IA que genere tests para el código que acaba de crear.
- Tests unitarios: "Genera tests unitarios para la función de autenticación. Incluye edge cases y errores esperados."
- Tests de integración: "Crea tests para el endpoint /api/users. Prueba respuestas exitosas, errores 400, 401 y 500."
- Revisión de seguridad: "Revisa este código buscando SQL injection, XSS, API keys expuestas y falta de validación."
Cuanto más específico sea tu prompt, mejores serán los tests generados.
Los tests deben cubrir específicamente estos escenarios que la IA suele ignorar:
- Inputs vacíos y null: Campos obligatorios sin valor, arrays vacíos, objetos undefined.
- Caracteres especiales: Comillas, <script>, caracteres Unicode en campos de texto.
- Límites numéricos: Números negativos, cero, valores extremadamente grandes.
- Concurrencia: Múltiples peticiones simultáneas al mismo endpoint.
- Timeouts: ¿Qué pasa cuando una API externa no responde?
# Pedir tests unitarios Tú: Genera tests unitarios para la función de autenticación que acabas de crear. Incluye edge cases y errores esperados. # Pedir tests de integración Tú: Crea tests de integración para el endpoint /api/users. Prueba respuestas exitosas, errores 400, 401 y 500. # Pedir revisión de seguridad Tú: Revisa este código buscando vulnerabilidades: SQL injection, XSS, API keys expuestas y falta de validación de inputs.
No te limites a pedir tests genéricos. Sé específico: "genera tests para inputs vacíos, strings con caracteres especiales, y valores null en los campos obligatorios". Cuanto más preciso sea el prompt, mejores serán los tests.
Seguridad del Código Generado por IA
La seguridad es el área donde el código generado por IA falla con más frecuencia. La IA prioriza que el código funcione, no que sea seguro.
Las 5 vulnerabilidades más comunes
- API keys hardcoded: La IA pone las claves directamente en el código fuente en lugar de usar variables de entorno. Crítico si tu repositorio es público.
- SQL injection: Concatenación de strings en queries SQL en vez de usar parámetros preparados. Un atacante puede modificar tus consultas.
- XSS (Cross-Site Scripting): Renderizar datos del usuario sin sanitizar. Cualquier input puede convertirse en código ejecutable en el navegador.
- Falta de validación de inputs: Aceptar cualquier dato sin verificar tipo, longitud o formato. La IA asume que los usuarios envían datos correctos.
- Autenticación débil: Tokens sin expiración, passwords sin hashing, sesiones que no se invalidan al cerrar sesión.
Revisa siempre los archivos .env, .env.local y cualquier archivo de configuración. La IA con frecuencia crea archivos .env con valores reales incluidos. Asegúrate de que .env esté en tu .gitignore antes del primer commit.
Checklist de seguridad básica
- Variables de entorno: Todas las API keys, secrets y credenciales en archivos
.env, nunca en el código fuente. - Validación de inputs: Todo dato que viene del usuario debe validarse en tipo, longitud y formato antes de procesarse.
- HTTPS obligatorio: Sin excepciones. Cualquier despliegue en producción debe usar HTTPS.
- Autenticación robusta: Hashing de passwords (bcrypt), tokens con expiración, protección CSRF.
- Headers de seguridad: Content-Security-Policy, X-Content-Type-Options, X-Frame-Options, Strict-Transport-Security.
- Dependencias actualizadas: Ejecuta
npm audito equivalente. Las dependencias desactualizadas son un vector de ataque común.
Control de Versiones con Git
Git es tu red de seguridad más importante en vibe coding. Sin control de versiones, un prompt mal formulado puede destruir funcionalidad que costó horas construir, sin posibilidad de recuperarla.
¿Por qué Git es imprescindible?
En desarrollo tradicional, Git gestiona la colaboración entre desarrolladores. En vibe coding, Git cumple un rol adicional: protegerte de la propia IA. Cuando le pides que "mejore" una función y el resultado rompe tres cosas más, necesitas poder revertir.
# Iniciar repositorio git init git add . git commit -m "versión inicial del prototipo" # Antes de cada sesión de vibe coding git add . git commit -m "estado estable antes de cambios" # Si la IA rompe algo: revertir git checkout . > Todos los cambios no commiteados se descartan # Subir a GitHub como backup git remote add origin https://github.com/tu-usuario/tu-repo.git git push -u origin main
Regla de Oro del Vibe Coding con Git
Haz commit antes de cada prompt significativo. Si el estado actual funciona, guárdalo. Los commits son gratis. Recuperar código perdido no lo es. GitHub y GitLab sirven además como backup automático de tu proyecto.
Flujo práctico para vibe coders
- Inicia el repo antes de escribir el primer prompt.
git init+ primer commit. - Commit después de cada feature funcional. No esperes a tener "todo terminado". Guarda cada avance que funcione.
- Usa mensajes descriptivos. "funciona login" es mejor que "cambios". En dos semanas no recordarás qué hiciste.
- Sube a remoto. GitHub o GitLab. Es tu backup y tu portafolio. Un repo con historial de commits demuestra progreso real.
Refactoring: Limpiar el Código de la IA
El código generado por IA funciona, pero no siempre es limpio. La IA tiende a generar funciones largas, repetir lógica en lugar de extraer funciones reutilizables, y usar nombres de variables poco descriptivos.
El refactoring es el puente entre código que funciona y código que se puede mantener.
Señales de que el código necesita limpieza
- Funciones de más de 50 líneas: Si una función hace demasiadas cosas, necesita dividirse.
- Código duplicado: La IA suele copiar y pegar bloques similares en vez de crear funciones reutilizables.
- Nombres genéricos: Variables como
data,result,temp,handleClicksin contexto. - Lógica de negocio mezclada con UI: Todo en un componente monolítico en vez de separar responsabilidades.
- Console.log por todas partes: La IA deja logs de depuración que no deberían llegar a producción.
Usar la IA para refactorizar
La misma IA que generó el código puede limpiarlo. El truco está en ser específico con lo que quieres mejorar:
# Refactoring general Tú: Revisa este código y mejora la estructura sin cambiar la funcionalidad. # Extraer funciones Tú: Identifica código duplicado en estos archivos y extrae funciones reutilizables. # Mejorar nombres Tú: Renombra variables y funciones para que sean autodescriptivas. Sigue las convenciones de JavaScript/TypeScript. # Limpiar para producción Tú: Elimina todos los console.log, comentarios innecesarios y código muerto.
Haz commit antes de refactorizar. Si la IA cambia algo que rompe la funcionalidad durante el refactoring, puedes revertir al estado anterior con git checkout . y volver a intentarlo con un prompt diferente.
Arquitectura: Estructura que Escala
Cuando vibe codeas un prototipo, la estructura de archivos suele ser caótica. Todo en una carpeta, componentes monolíticos, estilos inline. Esto funciona para prototipos, pero se convierte en un problema cuando el proyecto crece.
Estructura de carpetas coherente
La IA tiende a crear todos los archivos en la raíz del proyecto. Antes de seguir añadiendo features, organiza en una estructura predecible:
src/para todo el código fuentesrc/components/para componentes de UI reutilizablessrc/pages/osrc/routes/para las páginas o rutassrc/lib/osrc/utils/para funciones auxiliares y lógica de negociosrc/api/para endpoints y lógica del servidorpublic/para assets estáticos
Naming conventions
Establece convenciones de nombres desde el principio y comunícalas a la IA en tu prompt. Esto reduce el caos a medida que el proyecto crece:
- Archivos: kebab-case para archivos (
user-profile.tsx), PascalCase para componentes (UserProfile.tsx) - Variables y funciones: camelCase (
getUserById,isAuthenticated) - Constantes: UPPER_SNAKE_CASE (
API_BASE_URL,MAX_RETRIES)
Separación de concerns
El principio más importante: cada archivo debe tener una sola responsabilidad. La IA genera componentes que mezclan UI, lógica de negocio, llamadas a API y estilos. Separar estas capas hace que el código sea más fácil de entender, testear y modificar.
¿Cuándo pasar de vibe coding a desarrollo profesional?
Vibe coding tiene un límite natural. Estas señales indican que tu proyecto ha crecido más allá de lo que el vibe coding puede manejar:
- Usuarios reales con datos sensibles: Si manejas información personal, financiera o de salud, necesitas auditorías de seguridad profesionales.
- Requisitos regulatorios: GDPR, PCI-DSS, HIPAA. El cumplimiento normativo no se puede "vibe codear".
- Equipo creciente: Cuando hay más de una persona trabajando en el código, necesitas code reviews, CI/CD, y estándares documentados.
- Escala: Miles de usuarios concurrentes requieren optimización de rendimiento, caching y monitorización que van más allá del vibe coding.
.env en .gitignore.npm audit sin vulnerabilidades críticas.Preguntas Frecuentes
Sobre llevar vibe coding a producción
git init, git add, git commit y git push. Puedes aprenderlos en 10 minutos y te ahorrarán horas de frustración.