Por que o v0 precisa de um design system
O v0 é rápido e sua saída padrão é reconhecidamente v0: as mesmas superfícies neutras, a mesma tipografia Geist, os mesmos cards arredondados. Isso é aceitável para um protótipo, mas errado para uma marca. Como o v0 constrói sobre shadcn/ui e Tailwind, ele usará com prazer um conjunto de tokens e pares tipográficos diferentes se você os fornecer; o segredo é entregar um sistema completo e coerente, em vez de algumas escolhas de cores soltas.
O kit que você fornecerá
Aqui está o kit gratuito amber-sportswear-editorial renderizado a partir de seus tokens reais. Um sistema como este — com cores semânticas, fontes e tratamentos, em vez de apenas uma paleta solta — é o que você entrega ao v0 (os comandos abaixo usam o ambient-sage, outro 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 o kit ao v0
- 1
Cole o DESIGN.md como o brief
Abra a página do kit na galeria (ex: /kits/ambient-sage) e copie seu DESIGN.md: a intenção, o sistema tipográfico, o espaçamento, os tratamentos de componentes, os motivos e as diretrizes do que fazer e o que não fazer. Cole-o no chat do v0 e diga ao v0 para segui-lo em tudo o que construir.
- 2
Aplique os tokens via registro do shadcn
Depois de conectar a saída do v0 a um projeto (via GitHub ou Download), execute o comando de registro do kit para instalar suas variáveis CSS no seu tema shadcn:
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
Ou cole as variáveis CSS diretamente
Sem configuração do shadcn? Copie a exportação de variáveis CSS da página do kit e cole os blocos
:roote.darkem sua folha de estilos global. Os componentes gerados pelo v0 já fazem referência a--background,--primarye outros. - 4
Peça ao v0 para reconstruir com base no sistema
Agora faça o prompt normalmente: o v0 renderiza com base nos seus tokens e segue as regras do DESIGN.md.
Build a pricing page. Use only the design tokens already in the theme and follow the DESIGN.md I pasted.
O v0 agora possui um fluxo nativo de design systems
A documentação atual do v0 descreve o Design Systems 2.0: você adiciona fontes (repositórios GitHub, frames do Figma, links ou anexos de arquivos), opcionalmente um v0.json, e o v0 salva o design system como uma skill no seu workspace. O DESIGN.md de um kit e sua URL de registro encaixam-se exatamente como essas fontes. A rota de registro do shadcn neste guia baseia-se na página de registro legada do v0 e ainda funciona no projeto exportado ou conectado.
A URL do registro é o artefato compartilhável
Cada kit público expõe um item de registro estável do shadcn em https://identityforge.io/r/<slug>.json. Essa única URL carrega todo o conjunto de tokens: entregue-a ao v0, a um colega de equipe ou a outro desenvolvedor e eles terão o tema idêntico.
Por que isso é melhor do que uma paleta escolhida a dedo
Inserir três cores de marca no v0 garante a você três cores e muitos padrões indefinidos para as outras 25 funções: estados de hover, texto suavizado, bordas, séries de gráficos, modo escuro. Um kit define todas as 28 funções semânticas em modo claro e escuro, para que o v0 nunca precise improvisar os valores intermediários. Essa é a diferença entre um app tematizado e um app apenas recolorido. Leia explicação sobre tokens de cores semânticas para a lista completa de funções.
A mesma ideia em outros construtores web: Lovable e Bolt. Para agentes de código, comece pelo guia fundamental.
FAQ
Como eu dou um design system ao v0?
Cole o DESIGN.md do kit no chat do v0 como briefing e aplique os tokens pelo item do registro shadcn (npx shadcn add https://identityforge.io/r/<slug>.json) ou cole as variáveis CSS do kit no seu tema. O código shadcn/Tailwind gerado pelo v0 passa a usar os seus tokens.
O v0 suporta registros do shadcn?
O v0 gera código shadcn/ui, portanto, o item de registro de um kit é instalado perfeitamente no projeto que ele produz. Você executa npx shadcn add <registry-url> nesse projeto (via sincronização com GitHub ou após o download) e continua solicitando ao v0 que use o tema.
Posso fazer isso sem o shadcn?
Sim. Copie a exportação de variáveis CSS da página do kit e cole os blocos :root e .dark em sua folha de estilos global. Os nomes dos tokens semânticos são os mesmos de qualquer maneira.
Fontes
- Design Systems - v0 Docs: o fluxo de trabalho atual de design systems do v0 adiciona fontes (repositórios, Figma, links, anexos) e salva o design system como uma skill; o guia do registro shadcn é marcado como legado.
Fontes
- Design Systems - v0 Docs: O fluxo de trabalho atual de design systems do v0 adiciona fontes (repositórios, Figma, links, anexos) e salva o design system como uma skill; o guia do registro shadcn é marcado como legado.