Lovable est excellent pour transformer un prompt en une application fonctionnelle, mais son apparence par défaut est générique et elle dérive à mesure que l'application grandit : chaque nouvelle fonctionnalité devient une nouvelle décision de style. Comme il utilise Tailwind et shadcn, il peut construire en s'appuyant sur un véritable ensemble de tokens et suivre des règles écrites ; il vous suffit de rendre ces règles persistantes pour qu'elles s'appliquent à chaque génération, et pas seulement à celle où vous les avez mentionnées.

1. 1

   Ajoutez le fichier DESIGN.md dans la Knowledge du projet

   Ouvrez la page du kit dans la gallery (par exemple, /kits/ambient-sage), copiez son fichier DESIGN.md, puis collez-le dans Project settings > Knowledge. Lovable conserve la Project Knowledge comme contexte persistant pour les générations futures.

2. 2

   Connectez GitHub et appliquez les tokens

   Utilisez l'intégration GitHub de Lovable, puis, dans le dépôt connecté, exécutez la commande de registre du kit pour installer ses variables CSS dans le thème shadcn :

   Copy

   npx shadcn add https://identityforge.io/r/ambient-sage.json

3. 3

   Ou collez les variables CSS dans le chat

   Vous préférez rester dans Lovable ? Copiez l'export des variables CSS du kit depuis sa page dédiée et demandez à Lovable de configurer le :root et le .dark de votre feuille de style globale avec exactement ces valeurs.

4. 4

   Construisez sur la base du système

   Prompté comme d'habitude ; Lovable utilise désormais vos tokens pour le thème et respecte le fichier DESIGN.md présent dans la Knowledge.

   Copy

   Add a dashboard. Use the design tokens and follow the
   DESIGN.md in Project Knowledge. Do not add new colors or fonts.

Chaque kit public expose un élément de registre shadcn stable à l'adresse https://identityforge.io/r/<slug>.json. Cette URL contient les 28 rôles sémantiques en mode clair et sombre, de sorte que Lovable n'a jamais besoin d'improviser les états de survol, le texte atténué, les bordures ou les couleurs des graphiques. Consultez l'explication des tokens de couleur sémantiques pour comprendre ces rôles et leur importance.

La même approche fonctionne dans v0 et Bolt. Pour les agents de codage basés sur le terminal, consultez le guide pilier.