Por qué Lovable necesita un sistema de diseño
Lovable es excelente convirtiendo un prompt en una aplicación funcional, pero su aspecto predeterminado es genérico y tiende a desviarse a medida que la aplicación crece: cada nueva funcionalidad implica una nueva decisión de estilo. Debido a que utiliza Tailwind y shadcn, puede construir basándose en un conjunto de tokens real y seguir reglas escritas; solo tiene que hacer que esas reglas sean persistentes para que se apliquen a cada generación, y no solo a aquella en la que las mencionó.
El kit que le proporcionará
Mauve Broadcast
Live renderRendered from the kit's actual tokens, fonts, and treatments
Typography
Anton + Space Mono
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Entregue el kit a Lovable
- 1
Coloque el DESIGN.md en el Project Knowledge
Abra la página del kit en la galería (por ejemplo, /kits/ambient-sage), copie las secciones de reglas de su DESIGN.md (intención, motivos, lo que se debe y no se debe hacer, tratamiento de componentes) en Project settings > Knowledge. El Knowledge tiene un límite de 10.000 caracteres y un DESIGN.md completo de un kit puede triplicar esa cifra, por lo que pegue las reglas y deje que la instalación del registro en el siguiente paso gestione los valores exactos de los tokens. Lovable mantiene el Knowledge como contexto persistente para cada generación.
- 2
Conecte con GitHub y aplique los tokens
Utilice la integración de GitHub de Lovable y, a continuación, en el repositorio conectado, ejecute el comando del registro del kit para instalar sus variables CSS en el tema de shadcn:
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
O pegue las variables CSS en el chat
¿Prefiere quedarse en Lovable? Copie la exportación de variables CSS desde la página del kit y pida a Lovable que configure el
:rooty el.darkde su hoja de estilos global exactamente con esos valores. - 4
Construya sobre el sistema
Escriba los prompts como de costumbre; ahora Lovable aplica el tema con sus tokens y obedece el DESIGN.md en el Knowledge.
Add a dashboard. Use the design tokens and follow the DESIGN.md in Project Knowledge. Do not add new colors or fonts.
Funciones de diseño propias de Lovable
Lovable también ofrece primitivas que conviene conocer: Skills (playbooks bajo demanda que el agente aplica a tareas coincidentes), Design guidance (selección de vistas previas de diseño antes de la construcción) y, en los planes Enterprise, proyectos de sistema de diseño nativos que envían tokens y componentes a las aplicaciones consumidoras. El Knowledge más el registro sigue siendo la ruta independiente del plan y mantiene sus tokens idénticos en todas las herramientas que utilice.
El Knowledge es lo que garantiza la persistencia
La razón más común por la que un constructor de IA ignora su sistema de diseño es que las reglas se mencionaron una vez y se olvidaron. Colocar las reglas de diseño en el Knowledge de Lovable las convierte en una instrucción permanente, manteniendo la coherencia a medida que la aplicación crece.
Una URL, el tema completo
Cada kit público expone un elemento estable del registro de shadcn en https://identityforge.io/r/<slug>.json. Esa URL contiene los 28 roles semánticos en modo claro y oscuro, por lo que Lovable nunca tiene que improvisar estados de hover, texto atenuado, bordes o colores de gráficos. Consulte explicación de los tokens de color semánticos para saber cuáles son esos roles y por qué son importantes.
El mismo enfoque funciona en v0 y Bolt. Para agentes de código basados en terminal, consulte la guía fundamental.
Preguntas frecuentes
¿Cómo asigno un sistema de diseño a Lovable?
Coloque las reglas de diseño del kit en el Project Knowledge de Lovable para que se apliquen a cada prompt (el Knowledge tiene un límite de 10.000 caracteres, así que pegue las secciones de reglas, no el archivo completo), y luego aplique los tokens del kit: ejecute npx shadcn add https://identityforge.io/r/<slug>.json en el repositorio conectado a GitHub, o pegue las variables CSS del kit en la hoja de estilos del proyecto.
¿Por qué poner el DESIGN.md en el Knowledge en lugar de en un prompt?
El Knowledge es un contexto permanente que se aplica a cada generación. Un prompt puntual se olvida en el siguiente mensaje, que es la razón por la cual los constructores se desvían de la marca. El Knowledge mantiene las reglas de diseño vigentes a medida que la aplicación crece.
¿Es necesario conectar GitHub?
Solo para la ruta de shadcn add. En su lugar, puede pegar las variables CSS exportadas del kit directamente y pedir a Lovable que configure la hoja de estilos global con esos valores.
Fuentes
- Knowledge - Lovable Docs: Knowledge permite definir instrucciones persistentes por proyecto o espacio de trabajo, configurables en Project settings > Knowledge, con un límite de 10.000 caracteres.
- Sistemas de diseño - Lovable Docs: Lovable ofrece proyectos nativos de sistema de diseño en los planes Enterprise que despliegan design tokens y componentes hacia los proyectos que los consumen.
Fuentes
- Knowledge - Lovable Docs: Knowledge permite definir instrucciones persistentes por proyecto o espacio de trabajo, configurables en Project settings > Knowledge, con un límite de 10.000 caracteres.
- Design systems - Lovable Docs: Lovable ofrece proyectos nativos de sistema de diseño en los planes Enterprise que despliegan design tokens y componentes hacia los proyectos que los consumen.