Prompts de Lovable para diseño: qué funciona, qué se desvía y por qué

Las colecciones populares de prompts de Lovable se prueban en funcionalidades, donde el éxito es binario: el flujo de auth existe o no existe. Los prompts de diseño se juzgan de la misma manera ('¿ha cambiado la página?'), y bajo esa prueba, 'usa un tema oscuro moderno con acentos vibrantes' aprueba. La página cambió. Lo que nadie vuelve a comprobar es la quinta pantalla, donde el acento vibrante ha vuelto a deslizarse hacia indigo-500 y el tema oscuro ha recuperado la rampa de slate predeterminada, porque la instrucción residía en una conversación que no dejaba de crecer. Ese deslizamiento tiene un nombre, design drift, y los prompts de adjetivos son su principal alimento.

Vale la pena ser precisos con el mecanismo: Lovable no ignora las instrucciones de estilo, las *aproxima*, y las aproximaciones se acumulan. 'Cálido' se convierte en un cálido ligeramente diferente en cada generación. Un valor hex no puede desviarse: o es #b45309 o no lo es. Ese es todo el truco detrás de los prompts que se mantienen: sustituir cada adjetivo por un valor.

Un prompt de diseño duradero para Lovable tiene cinco partes. Si falta una, el modelo rellena el hueco con los valores predeterminados, que es como las aplicaciones acaban siendo medianamente distintivas, lo cual resulta peor que cualquiera de los dos extremos.

1. Línea de autoridad. Una frase que declare el sistema a continuación como la única fuente de verdad y prohíba colores o fuentes inventadas. Sin ella, los prompts de funcionalidades posteriores tienen prioridad sobre el contexto de diseño.
2. Design tokens de color completos, ambos modos. Roles semánticos (background, primary, muted-foreground…) con valores exactos para modo claro *y* oscuro. Omitir el modo oscuro delega todo el segundo tema a los valores predeterminados.
3. Una combinación de fuentes con nombre y funciones. Qué familia se usa para los encabezados, cuál para el cuerpo y qué pesos existen. 'Usa fuentes bonitas' produce Inter.
4. Valores de escala. Escala tipográfica, espaciado, radio. Estos son los detalles que delatan una aplicación construida con valores predeterminados más rápido que el color.
5. Reglas: lo que se debe y no se debe hacer. Un puñado de prohibiciones ('sin degradados púrpuras, sin iconos de emoji, sin radio uniforme') más los motivos que hacen que el diseño sea reconociblemente suyo.

Make the app look modern and premium, with a dark theme
and vibrant accent colors. Less generic please.

Use #0c0a09 as the app background and #fbbf24 as the primary
accent. Headings in Fraunces (600), body in Inter. Border
radius 2px everywhere. No gradients.

Use the design system below for everything you build in this
project. It is the single source of truth for color, typography,
spacing, and visual style. Do not invent your own palette,
fonts, or component styling.

[ …the kit's full DESIGN.md: 28 semantic tokens in light and
dark, the font pairing, type scale, spacing, radius, shadows,
motifs, do's and don'ts… ]

La tercera estructura no es práctica de escribir a mano: un sistema real implica cientos de decisiones. Esa es la razón real por la que el diseño mediante prompts se estanca. Un prompt de diseño duradero resulta ser un documento, y nadie quiere escribir un documento en un cuadro de chat. Por eso entregamos cada kit como ese documento: explore la galería de temas de Lovable, elija un kit, copie su prompt y péguelo una vez.

1. 1

   Empezar de cero: péguelo como primer mensaje

   Pegue el prompt de diseño completo antes de describir cualquier funcionalidad, para que la primera generación ya esté alineada con el sistema. Adaptar un sistema a una aplicación construida con valores predeterminados requiere varias rondas de corrección.

2. 2

   Para cualquier proyecto a largo plazo: muévalo a Knowledge

   Settings → Knowledge es contexto permanente: se aplica a cada generación sin necesidad de ser reenviado, lo que lo convierte en el hogar resistente al drift. El contexto del chat envejece; Knowledge no.

3. 3

   Cuando el drift aparezca de todos modos: señale el sistema, no el síntoma

   Diga 'sigue el sistema de diseño para el estilo de la tarjeta' en lugar de volver a describir la tarjeta. Volver a describir genera una segunda verdad ligeramente diferente; señalar vuelve a anclar la original.