Vibe coding, susurrándole a la IA
Buenas prácticas de prompting
- Para obtener buenos resultados hay que planificar antes de escribir prompts.
- Construye por partes, usa contenido real y apóyate en términos de diseño.
No pidas «hazme una web entera»: mejor divídela en partes.
Hazme todas las preguntas que necesites para entender bien lo que quiero antes de empezar.
Fase 1: sienta las bases
Planifica
Qué es, para quién, por qué lo usarán y cuál es la acción principal que deben hacer.
Mapea el recorrido
De lo primero que ve el usuario a la acción final. Basta un boceto: portada, ventajas y botón.
Define el diseño
Elige el estilo al principio (tranquilo y elegante, atrevido, premium…) y guárdalo en Conocimiento
Crea una web de una sola página para una app de ahorro pensada para jóvenes que trabajan como freelance. Estética atrevida y expresiva. El botón principal: «Empieza a ahorrar».
Fase 2: piensa en sistemas
Por componentes, no por páginas
Cabecera, ventajas, testimonios, precios… de uno en uno. Arreglar un bloque es más fácil que rehacer la página.
Con contenido real
Nada de «lorem ipsum»: el texto de verdad descubre antes los problemas de diseño. También puedes partir de un diseño de Figma.
Lenguaje atómico
Nombra las piezas: tarjetas (cards), insignias (badges), interruptores (toggles), desplegables, modales, avisos (toasts)…
Palabras de estilo
Minimal, premium, cinematic, playful… Y concreta: mejor «colores saturados y atrevidos» que «colorido».
Crea una tarjeta con la foto de perfil, el nombre y un botón de seguir. Añade una insignia de verificado que muestre un tooltip al pasar el ratón.
Fase 3: construye con precisión
Patrones de prompt
Recetas que se repiten (título, contenido y acción). Ve guardando las que te funcionan.
Imágenes y vídeos por URL
Pega el enlace y di dónde va, cómo se ve y para qué sirve.
Qué cambiar y qué no tocar
Pon límites: «solo en la página de pedidos», «no toques el inicio de sesión».
Señala lo que quieres cambiar
Con selecciona el elemento en la vista previa y usa verbos precisos (cambia, sustituye, ajusta), no «mejóralo».
Cambia el texto del botón a «Empezar», aumenta el espacio horizontal a 24px y mantén el fondo y la fuente.
Fase 4: itera y publica
Piensa en el backend
Qué ve quien ha iniciado sesión y quien no, qué datos vienen de la base de datos y qué pasa mientras carga, si está vacío o si falla.
Un cambio cada vez
Cada prompt se construye sobre lo anterior: comprueba cada resultado antes de seguir.
Marca los hitos
Cuando algo funcione, márcalo con en el historial para poder volver a esa versión.
Prueba ideas en un borrador
Para un cambio grande o arriesgado, crea un borrador (pulsando el nombre del proyecto): si te gusta, lo aceptas; si no, lo borras.
Si el usuario ha iniciado sesión, muestra su foto y su nombre arriba a la derecha; si no, un botón «Iniciar sesión» que lleve a la pantalla de acceso.
Para saber más
En la documentación de Lovable (en inglés).