Lovable tiene dos modos que cambian por completo la velocidad y la precisión con la que construyes una app: edit mode y chat mode. Si estás creando un proyecto y quieres hacer cambios pequeños sin reescribir medio código, o planificar features sin gastar créditos de más, estos modos son tu mejor aliado.

¿Cómo funciona edit mode en Lovable?

El edit mode te permite hacer cambios visuales directos sobre la interfaz, sin pasar por un prompt completo. Esto es clave cuando solo quieres ajustar un detalle puntual y no arriesgarte a que la IA modifique cosas que no le pediste.

Para activarlo, vas al botón edit en la esquina inferior izquierda [01:00]. Al hacer clic, se activa un selector que te deja elegir cualquier elemento de UI dentro de tu aplicación. En el ejemplo de la app de renombrar fotos, Harry selecciona el header y aparecen varias opciones útiles.

¿Qué puedo modificar con edit mode?

Una vez seleccionado el elemento, tienes tres caminos rápidos:

• Edit content: cambia el texto directamente, sin esperar a que corra un prompt.
• Edit spacing: ajusta márgenes y padding para agrandar o reducir el espacio del elemento.
• Edit styles: modifica el tamaño de fuente, haciéndolo más grande o más pequeño.

En la demo, el texto del header se cambia a "perfect photo organization with AI" y se conserva el tamaño 7XL porque ya se veía bien [02:30]. La edición se guarda al instante como un visual edit, sin que Lovable tenga que reescribir código.

¿Cuándo usar edit mode en lugar de un prompt? Cuando el cambio es pequeño y específico, como ajustar texto, espaciado o tamaño de fuente. Es más rápido y evita que la IA modifique partes del proyecto que no querías tocar.

¿Para qué sirve chat mode en Lovable?

El chat mode está en la esquina inferior derecha del prompt box [03:30] y te permite conversar con tu proyecto sin hacer cambios reales. Lovable lee tu code base, entiende contexto y te responde, todo gastando menos créditos que un prompt de edición.

Es ideal para dos escenarios: cuando estás atascado con errores y necesitas que Lovable revise todo el proyecto, o cuando quieres armar un plan antes de construir algo nuevo. La idea es simple: primero planeas, luego ejecutas.

¿Cómo armar un plan de landing page con chat mode?

En la demo, Harry pide a Lovable un plan para añadir cuatro secciones nuevas a la landing page: features and benefits, pricing, testimonials y footer, además del hero que ya existía. Usar listas dentro del prompt ayuda a que Lovable separe bien las ideas.

Lovable primero lee la welcome page actual para entender el contexto, y luego propone un plan completo:

• Features and benefits: smart AI recognition, batch processing, organized structure, time saving.
• Pricing: tres tiers, free, pro y business.
• Testimonials: sección con pruebas sociales.
• Footer: cierre del sitio.

El plan no solo cubre contenido, también propone un design approach para cada sección, lo cual da mucho contexto antes de tocar código.

¿Qué es CRO y cómo aplicarlo en tu landing?

Antes de implementar el plan, conviene refinarlo. Aquí entra el concepto de CRO o conversion rate optimization, un término estándar de la industria que se refiere a optimizar una página para conseguir más clics y clientes.

¿Qué es CRO en una landing page? Es la práctica de diseñar cada sección para maximizar conversiones, usando trust signals, CTAs claros y mensajes orientados al beneficio del usuario.

Harry pide dos ajustes al plan inicial: aplicar conversion rate optimization a cada sección y eliminar la mención a batch processing, porque esa funcionalidad no estará en la app [06:30]. Lovable adapta el plan en segundos, añade trust signals y reorganiza el contenido con enfoque de conversión.

¿Cómo se ve el resultado final?

Al hacer clic en Implement the Plan, Lovable ejecuta la edición usando el plan refinado en lugar de un prompt suelto. Esto alinea mucho mejor el output con lo que querías construir.

Entre los componentes generados aparecen:

1. Un features component con el mensaje "Stop wasting hours organizing photos".
2. Un pricing component con los tres planes definidos.
3. Un testimonials component con la línea "Loved by thousands of users worldwide".
4. Un footer que cierra la experiencia.

La página incluye un CTA visible y un trust signal del tipo "trusted by 10,000-plus photographers", justo lo que se pidió con el enfoque CRO.

¿Cómo revisar los cambios que hizo Lovable?

Después de ejecutar el plan, hay dos formas rápidas de auditar lo que pasó. El botón Show All lista todos los archivos editados, en este caso los componentes de features, pricing, testimonials y footer. El botón Code te deja inspeccionar el código de cada componente generado.

La diferencia entre trabajar solo con prompts y combinar ambos modos es enorme: edit mode para cambios quirúrgicos y chat mode para planear antes de construir. Esa combinación reduce errores, ahorra créditos y mantiene tu proyecto alineado con la visión original.

¿Ya probaste chat mode para desbloquear un error en tu code base? Cuéntame en los comentarios cómo te fue.