Bolt estructura aplicaciones completas a partir de un prompt, pero cada nueva pantalla puede introducir nuevas decisiones de estilo. Como Bolt ejecuta npm en el navegador, puedes instalar el mismo conjunto de tokens que usarías localmente y darle reglas escritas para futuras generaciones.

1. 1

   Asegúrate de que el proyecto use shadcn/ui

   Los starters de React + Tailwind de Bolt funcionan bien. Si el proyecto aún no está inicializado con shadcn, ejecuta primero npx shadcn@latest init en la terminal de Bolt.

2. 2

   Añade los tokens del kit

   Ejecuta el comando del registro del kit directamente en la terminal de Bolt. Esto escribe las variables CSS del kit (los 28 roles semánticos, light + dark) en tu tema.

   Copy

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

3. 3

   Pega el DESIGN.md como el brief

   Abre la página del kit en la galería (por ejemplo, /kits/ambient-sage), copia su DESIGN.md y pégalo en el chat de Bolt con una instrucción para que lo siga en todo lo que construya.

4. 4

   Haz prompts basados en el sistema

   Ahora construye normalmente: Bolt usará tus tokens instalados y seguirá el 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.

El elemento del registro en https://identityforge.io/r/<slug>.json contiene cada rol semántico, por lo que Bolt no improvisa los valores que una paleta suelta dejaría indefinidos: texto atenuado, bordes, estados hover, modo oscuro, series de gráficos. Eso es lo que hace que una aplicación de Bolt parezca diseñada en lugar de simplemente ensamblada. Consulta explicación de los tokens de color semánticos.

El mismo patrón se aplica a v0 y Lovable. Para agentes de codificación como Claude Code y Cursor, comienza con la guía fundamental.