Vibe Coding es una forma de programar utilizando herramientas de inteligencia artificial para acelerar el desarrollo de aplicaciones. En el estado actual de las herramientas ya son super potentes y permiten desarrollos funcionales con un par de prompts. No me puedo ni imaginar cómo sigue esto.

Uno de los beneficios de Vibe Coding, es la velocidad, la creatividad y lo económico que pasa a ser tener un desarrollo funcional pero entre sus desventajas sin dudas se destaca la calidad del código y la mantenibilidad.

Pasos para Vibe Coding según Goncy:

1. Definir la Idea: Comienza con una idea clara de lo que deseas crear.
2. Usar Herramientas de IA: Utiliza herramientas como V0.dev o Cursor para generar código rápidamente.
3. Iterar Rápidamente: Realiza múltiples iteraciones para ajustar y mejorar la aplicación.
4. Prototipar: Crea un prototipo funcional en poco tiempo para validar la idea.
5. Refactorizar: Una vez que tengas un prototipo, refactoriza el código para mejorar su estructura y calidad.
6. Documentar Decisiones: Mantén un registro de las decisiones tomadas durante el proceso para futuras referencias.
7. Pruebas y Validación: Realiza pruebas con usuarios reales para obtener retroalimentación y ajustar la aplicación.
8. Escalar y Mantener: A medida que el proyecto crece, asegúrate de que el código sea mantenible y escalable.

“El objetivo es aprender y divertirse mientras hacés código sin preocuparte tanto por la estructura y la perfección.”

Claude Code Session Management Commands puede ayudar también.

En este mismo sentido es muy útil este hilo que dejo a continuación:

1. Clavala desde tu primer prompt
   Siempre arranco dentro de mi GPT personalizado, SnackPrompt, y saco el prompt completo para la landing. Incluye el layout, la estructura, la tipografía y el estilo de diseño. Lo copio y pego en Lovable con una referencia visual y me da un punto de partida limpio.
2. Prepará la documentación técnica antes de arrancar
   No te metas a ciegas. Tener listo el diseño de base de datos, el plan de desarrollo de UI, el MVP y el plan de implementación. Mantenelo simple, generalo en la etapa de planificación con GPT o Gemini. Después lo pegás en Lovable como archivos .md.
   Así Lovable entiende el producto desde el principio.
3. Usá REVERT como punto de guardado
   Usá ese botón MUCHO. Si algo se rompe, con un clic volvés atrás.
   Te permite testear más rápido y sin estrés.
4. Usá capturas de pantalla. Siempre.
   Lovable entiende mejor las imágenes que el texto. En lugar de explicar tu problema en 10 líneas, mandá una captura. Agregá una línea con el contexto: qué está mal y qué querés cambiar. Usá la herramienta de selección para marcar la parte exacta.
   Ese contexto extra ayuda muchísimo. Los resultados son mucho más precisos.
5. Sistema de diseño
   Asegurate de que Lovable no esté hardcodeando colores. Pedile que guarde tu paleta completa en tailwind.config.ts. A veces lo hace solo, pero a veces hay que pedírselo. Nunca uses valores hex directo en los componentes, rompe la consistencia después.
6. ¿La primera versión salió mal? Empezá de nuevo
   Si ajustaste mil veces y sigue sin funcionar, tiralo. Rehacé el prompt. Arrancá de cero.
   No se puede arreglar una base rota. Las mejores versiones que hice fueron siempre en el segundo intento.
7. ¿Tu UI se ve genérica?
   Usá componentes prearmados de librerías como Magic UI, 21st.dev o Aceternity UI.
   Para animaciones, bajate efectos de Unicorn Studio. Yo recomiendo 21st.dev: copiás el código del componente, lo pegás como prompt en Lovable y te reemplaza el elemento al toque. Súper limpio, súper rápido.
8. Agregá auth y pagos después del frontend
   Cuando termines la UI (según tu plan de dev), integrá Supabase y armá la estructura de la base de datos. Después sumá login y pagos. Lovable adapta el resto de la app según esos sistemas. Si los agregás tarde, se rompe todo. Usá Supabase para auth y Stripe para pagos. Siempre funciona.
9. Usá el sync de GitHub con criterio
   Cuando estés al 70–80% del proyecto, Lovable puede trabarse con features complejas. No pierdas tiempo ni tokens. Sincronizá el repo con GitHub, abrilo en Cursor, debugueá y terminá la funcionalidad ahí. Después traé los cambios a Lovable para el toque final.
10. Subí imágenes así
    Arrastrá la imagen, seleccioná la sección donde va, y pedile a Lovable que la suba.
    La guarda en Supabase Storage, genera el link público y lo conecta automáticamente.
    Mucho más rápido que subir los assets a mano.
11. Optimización móvil
    Cuando tengas la versión desktop lista, pedile: “Hacé toda la página responsive y optimizala para mobile.” Lovable normalmente lo hace bien. Después revisá cada página a mano. A veces se rompe el layout de desktop, así que revisá antes de publicar.

That's my exact system.

I've learned all these tips and tricks after working on numerous client projects and using Lovable almost daily.

If you're building with Lovable, bookmark this.

It'll save you hours of struggle.

— Prajwal Tomar (@PrajwalTomar_) June 15, 2025

Vibe Coding es el punk del software

Rick Rubin presenta bastante bien la cosa, con toda la parafernalia y un poco de bait, por qué no:

lovable.dev es otra herramienta que recomiendo para iniciarse en vibe coding:

lovable shipped – ep 01 idea generation and validation https://t.co/HwC4N3lLag

— Lovable (@lovable_dev) June 16, 2025