v0 es rápido y su salida predeterminada es reconocible como v0: las mismas superficies neutras, la misma tipografía Geist/Inter, las mismas tarjetas redondeadas. Eso está bien para un prototipo, pero está mal para una marca. Debido a que v0 se basa en shadcn/ui y Tailwind, usará con gusto un conjunto de tokens y una combinación tipográfica diferente si se los proporcionas; el truco consiste en entregarle un sistema completo y coherente en lugar de solo algunas elecciones de color sueltas.

Aquí tienes el kit gratuito ambient-sage, renderizado a partir de sus tokens reales. Este es el sistema coherente que entregas a v0: colores semánticos, fuentes y tratamientos, no solo una paleta:

1. 1

   Pega el DESIGN.md como resumen

   Abre la página del kit en la galería (por ejemplo, /kits/ambient-sage) y copia su DESIGN.md: la intención, el sistema tipográfico, el espaciado, los tratamientos de componentes, los motivos y las reglas de qué hacer y qué no hacer. Pégalo en el chat de v0 y dile que lo siga para todo lo que construya.

2. 2

   Aplica los tokens mediante el registro de shadcn

   Una vez que hayas conectado la salida de v0 a un proyecto (vía GitHub o Descarga), ejecuta el comando del registro del kit allí para instalar sus variables CSS en tu tema de shadcn:

   Copy

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

3. 3

   O pega las variables CSS directamente

   ¿No tienes configuración de shadcn? Copia la exportación de variables CSS del kit desde su página y pega los bloques :root y .dark en tu hoja de estilos global. Los componentes generados por v0 ya hacen referencia a --background, --primary y similares.

4. 4

   Pide a v0 que reconstruya sobre el sistema

   Ahora escribe prompts normalmente: v0 renderiza basándose en tus tokens y sigue las reglas del DESIGN.md.

   Copy

   Build a pricing page. Use only the design tokens already in
   the theme and follow the DESIGN.md I pasted.

Introducir tres colores de marca en v0 te dará tres colores y muchos valores predeterminados no definidos para los otros 25 roles: estados hover, texto atenuado, bordes, series de gráficos, modo oscuro. Un kit define todos los 28 roles semánticos en modo claro y oscuro, para que v0 nunca tenga que improvisar los valores intermedios. Esa es la diferencia entre una aplicación con tema y una simplemente recoloreada. Lee explicación de los tokens de color semánticos para ver la lista completa de roles.

La misma idea se aplica en otros constructores web: Lovable y Bolt. Para agentes de codificación, comienza con la guía fundamental.