Por qué v0 necesita un sistema de diseño
v0 es rápido y su resultado predeterminado es reconociblemente v0: las mismas superficies neutras, la misma tipografía Geist, las mismas tarjetas redondeadas. Eso es aceptable para un prototipo, pero incorrecto para una marca. Debido a que v0 construye sobre shadcn/ui y Tailwind, utilizará gustosamente un conjunto de tokens y una combinación tipográfica diferente si se los proporciona; el truco consiste en entregarle un sistema completo y coherente en lugar de unas pocas elecciones de color aisladas.
El kit que le proporcionará
Aquí tiene el kit gratuito amber-sportswear-editorial renderizado a partir de sus tokens reales. Un sistema como este, con colores semánticos, fuentes y tratamientos en lugar de una paleta suelta, es lo que se entrega a v0 (los comandos a continuación utilizan ambient-sage, otro kit gratuito):
Amber Sportswear Editorial
Live renderRendered from the kit's actual tokens, fonts, and treatments
Typography
Archivo Black + Barlow
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Entregue el kit a v0
- 1
Pegue el DESIGN.md como brief
Abra la página del kit en la galería (por ejemplo, /kits/ambient-sage) y copie su DESIGN.md: la intención, el sistema tipográfico, el espaciado, los tratamientos de componentes, los motivos y las reglas de estilo. Péguelo en el chat de v0 e indique a v0 que lo siga para todo lo que construya.
- 2
Aplique los tokens mediante el registro de shadcn
Una vez que haya conectado el resultado de v0 a un proyecto (vía GitHub o descarga), ejecute allí el comando del registro del kit para instalar sus variables CSS en su tema de shadcn:
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
O pegue las variables CSS directamente
¿No tiene configurado shadcn? Copie la exportación de variables CSS desde la página del kit y pegue los bloques
:rooty.darken su hoja de estilos global. Los componentes generados por v0 ya hacen referencia a--background,--primaryy similares. - 4
Pida a v0 que reconstruya basándose en el sistema
Ahora escriba el prompt normalmente: v0 renderizará basándose en sus tokens y seguirá las reglas del DESIGN.md.
Build a pricing page. Use only the design tokens already in the theme and follow the DESIGN.md I pasted.
v0 ahora tiene un flujo nativo de sistemas de diseño
La documentación actual de v0 describe los Design Systems 2.0: usted añade fuentes (repositorios de GitHub, frames de Figma, enlaces o archivos adjuntos), opcionalmente un v0.json, y v0 guarda el sistema de diseño como una habilidad en su espacio de trabajo. El DESIGN.md de un kit y su URL de registro encajan exactamente como esas fuentes. La ruta del registro de shadcn de esta guía se basa en la página de registro heredada de v0 y sigue funcionando en el proyecto exportado o conectado.
La URL del registro es el artefacto compartible
Cada kit público expone un elemento de registro de shadcn estable en https://identityforge.io/r/<slug>.json. Esa única URL contiene todo el conjunto de tokens: entréguela a v0, a un compañero de equipo o a otro desarrollador y obtendrán el mismo tema.
Por qué esto es mejor que una paleta seleccionada a mano
Introducir tres colores de marca en v0 le dará tres colores y muchos valores predeterminados indefinidos para los otros 25 roles: estados hover, texto atenuado, bordes, series de gráficos, modo oscuro. Un kit define los 28 roles semánticos tanto en modo claro como oscuro, por lo que v0 nunca tiene que improvisar los valores intermedios. Esa es la diferencia entre una aplicación con tema y una simplemente recoloreada. Lea explicación de los tokens de color semánticos para ver la lista completa de roles.
La misma idea se aplica a otros constructores web: Lovable y Bolt. Para agentes de código, comience en la guía fundamental.
Preguntas frecuentes
¿Cómo asigno un sistema de diseño a v0?
Pegue el DESIGN.md del kit en el chat de v0 como brief y aplique los tokens del kit mediante su elemento del registro de shadcn (npx shadcn add https://identityforge.io/r/<slug>.json) o pegando sus variables CSS en su tema. El resultado de shadcn/Tailwind de v0 se renderizará entonces basándose en sus tokens.
¿Es v0 compatible con los registros de shadcn?
v0 genera código de shadcn/ui, por lo que el elemento del registro de un kit se instala limpiamente en el proyecto que produce. Ejecute npx shadcn add <registry-url> en ese proyecto (vía sincronización de GitHub o tras la descarga) y continúe pidiendo a v0 que utilice el tema.
¿Puedo hacer esto sin shadcn?
Sí. Copie la exportación de variables CSS desde la página del kit y pegue los bloques :root y .dark en su hoja de estilos global. Los nombres de los tokens semánticos son los mismos en ambos casos.
Fuentes
- Design Systems - v0 Docs: el flujo de trabajo actual de sistemas de diseño de v0 añade fuentes (repositorios, Figma, enlaces, adjuntos) y guarda el sistema de diseño como una habilidad; la guía del registro de shadcn está marcada como legacy.
Fuentes
- Design Systems - v0 Docs: El flujo de trabajo actual de sistemas de diseño de v0 añade fuentes (repositorios, Figma, enlaces, adjuntos) y guarda el sistema de diseño como una habilidad; la guía del registro de shadcn está marcada como legacy.