Por qué Lovable necesita un sistema de diseño
Lovable es excelente convirtiendo un prompt en una aplicación funcional, pero su apariencia por defecto es genérica 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 reales y seguir reglas escritas; solo tienes que hacer que esas reglas sean persistentes para que se apliquen a cada generación, no solo a aquella en la que las mencionaste.
El kit que le darás
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Dashboard
Welcome back — here's how AmbientSage is performing today.
Active users
15.1k
+5%Trending up this month
vs. previous 30 days
MRR
$49.1k
+3%Strong recurring growth
Net of churn
Retention
89%
+2%Engagement above target
Rolling 28-day window
NPS
69
+3Meets growth projections
Survey · n=1,204
Total revenue
Last 12 months
$49.1k+18.2%
Recent sales
You closed 265 deals this month.
Alex Rivera
alex@ambientsage.com
Mira Okonkwo
mira@ambientsage.com
Jonas Feld
jonas@ambientsage.com
Sana Qureshi
sana@ambientsage.com
Theo Lindgren
theo@ambientsage.com
Recent transactions
View all| Customer | Status | Date | Amount |
|---|---|---|---|
AR Alex Rivera Founder & CEO | Paid | 2m ago | $1,999.00 |
MO Mira Okonkwo Head of Product | Pending | 1h ago | $39.00 |
JF Jonas Feld Design Lead | Processing | 3h ago | $299.00 |
SQ Sana Qureshi Engineering Lead | Paid | Yesterday | $99.00 |
TL Theo Lindgren Brand Director | Refunded | 2d ago | $2,400.00 |
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Dale el kit a Lovable
- 1
Pon el DESIGN.md en el Knowledge del proyecto
Abre la página del kit en la gallery (por ejemplo, /kits/ambient-sage), copia su
DESIGN.mdy pégalo en Project settings > Knowledge. Lovable mantiene el Project Knowledge como contexto persistente para futuras generaciones. - 2
Conéctate a GitHub y aplica los tokens
Usa la integración de GitHub de Lovable y, luego, en el repo conectado, ejecuta el comando de 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 pega las variables CSS en el chat
¿Prefieres quedarte en Lovable? Copia la exportación de variables CSS del kit desde su página y pídele a Lovable que configure el
:rooty.darkde tu hoja de estilos global exactamente con esos valores. - 4
Construye sobre el sistema
Escribe tus prompts como de costumbre; ahora Lovable aplicará el tema con tus tokens y respetará el
DESIGN.mden el Knowledge.Add a dashboard. Use the design tokens and follow the DESIGN.md in Project Knowledge. Do not add new colors or fonts.
El Knowledge es lo que hace que funcione
La razón más común por la que un constructor de IA ignora tu sistema de diseño es que las reglas se mencionaron una vez y se olvidaron. Poner el DESIGN.md en el Knowledge de Lovable lo convierte en una instrucción permanente, manteniendo la consistencia a medida que la aplicación crece.
Una URL, todo el tema
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 tanto en modo claro como oscuro, por lo que Lovable nunca tendrá que improvisar estados hover, texto atenuado, bordes o colores de gráficos. Consulta semantic color tokens explained para saber qué son esos roles y por qué son importantes.
El mismo enfoque funciona en v0 y Bolt. Para agentes de codificación basados en terminal, consulta la guía fundamental.
Preguntas frecuentes
¿Cómo le doy un sistema de diseño a Lovable?
Pega el DESIGN.md del kit en el Project Knowledge de Lovable para que se aplique a cada prompt, luego aplica los tokens del kit: ya sea ejecutando `npx shadcn add https://identityforge.io/r/<slug>.json` en el repositorio conectado a GitHub, o pegando las variables CSS del kit en la hoja de estilos del proyecto.
¿Por qué poner el DESIGN.md en 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 por lo que los constructores pierden la identidad de marca. El Knowledge mantiene las reglas de diseño vigentes a medida que la aplicación crece.
¿Necesito conectar GitHub?
Solo para la opción de `shadcn add`. En su lugar, puedes pegar directamente las variables CSS exportadas del kit y pedirle a Lovable que configure la hoja de estilos global con esos valores.