Bolt génère des applications entières à partir d'un prompt, mais chaque nouvel écran peut introduire de nouvelles décisions de style. Comme Bolt exécute npm dans le navigateur, vous pouvez installer le même ensemble de tokens que vous utiliseriez localement et lui fournir des règles écrites pour les générations futures.

1. 1

   Assurez-vous que le projet utilise shadcn/ui

   Les starters React + Tailwind de Bolt fonctionnent très bien. Si le projet n'est pas encore initialisé avec shadcn, lancez d'abord npx shadcn@latest init dans le terminal de Bolt.

2. 2

   Ajoutez les tokens du kit

   Lancez la commande du registre du kit directement dans le terminal de Bolt. Cela écrit les variables CSS du kit (tous les 28 rôles sémantiques, mode clair + sombre) dans votre thème.

   Copy

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

3. 3

   Collez le DESIGN.md comme brief

   Ouvrez la page du kit dans la galerie (ex: /kits/ambient-sage), copiez son fichier DESIGN.md, et collez-le dans le chat de Bolt avec l'instruction de le suivre pour tout ce qu'il construit.

4. 4

   Procédez au prompt en utilisant le système

   Vous pouvez maintenant construire normalement : Bolt utilise vos tokens installés et respecte le fichier DESIGN.md.

   Copy

   Build a landing page using only the theme's design tokens
   and the DESIGN.md rules: don't add new colors or fonts.

L'élément du registre à l'adresse https://identityforge.io/r/<slug>.json contient chaque rôle sémantique, de sorte que Bolt n'improvise pas les valeurs qu'une palette isolée laisserait indéfinies : texte atténué, bordures, états de survol, mode sombre, séries de graphiques. C'est ce qui permet à une application Bolt d'avoir l'air conçue plutôt qu'assemblée. Voir explication des tokens de couleur sémantiques.

Le même modèle s'applique à v0 et Lovable. Pour les agents de codage comme Claude Code et Cursor, commencez par le guide pilier.