O Bolt estrutura aplicativos inteiros a partir de um prompt, mas cada nova tela pode introduzir novas decisões de estilo. Como o Bolt executa npm no navegador, você pode instalar o mesmo conjunto de tokens que usaria localmente e fornecer regras escritas para gerações futuras.

1. 1

   Certifique-se de que o projeto usa shadcn/ui

   Os starters de React + Tailwind do Bolt funcionam bem. Se o projeto ainda não estiver inicializado com shadcn, execute npx shadcn@latest init no terminal do Bolt primeiro.

2. 2

   Adicione os tokens do kit

   Execute o comando de registro do kit diretamente no terminal do Bolt. Ele gravará as variáveis CSS do kit (todos os 28 papéis semânticos, light + dark) no seu tema.

   Copy

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

3. 3

   Cole o DESIGN.md como o briefing

   Abra a página do kit na galeria (ex: /kits/ambient-sage), copie o DESIGN.md e cole no chat do Bolt com uma instrução para segui-lo em tudo o que ele construir.

4. 4

   Faça prompts baseados no sistema

   Agora construa normalmente: o Bolt usará seus tokens instalados e seguirá o 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.

O item do registro em https://identityforge.io/r/<slug>.json carrega cada papel semântico, para que o Bolt não improvise valores que uma paleta solta deixaria indefinidos: texto suave, bordas, estados de hover, modo escuro, séries de gráficos. É isso que faz um app do Bolt parecer projetado em vez de apenas montado. Veja tokens de cores semânticas explicados.

O mesmo padrão se aplica ao v0 e ao Lovable. Para agentes de codificação como Claude Code e Cursor, comece pelo guia fundamental.