Pourquoi v0 a besoin d'un design system
v0 est rapide et son rendu par défaut est reconnaissable entre mille : les mêmes surfaces neutres, la même typographie Geist, les mêmes cartes arrondies. C'est acceptable pour un prototype, mais inapproprié pour une marque. Comme v0 s'appuie sur shadcn/ui et Tailwind, il utilisera volontiers un autre ensemble de tokens et un autre couple typographique si vous lui en fournissez un ; l'astuce consiste à lui donner un système complet et cohérent plutôt que quelques choix de couleurs isolés.
Le kit que vous allez lui fournir
Voici le kit gratuit amber-sportswear-editorial rendu à partir de ses tokens réels. C'est un système de ce type — avec des couleurs sémantiques, des polices et des traitements plutôt qu'une simple palette — que vous devez transmettre à v0 (les commandes ci-dessous utilisent ambient-sage, un autre kit gratuit) :
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
Donner le kit à v0
- 1
Coller le DESIGN.md comme brief
Ouvrez la page du kit dans la galerie (ex: /kits/ambient-sage) et copiez son DESIGN.md : l'intention, le système typographique, l'espacement, le traitement des composants, les motifs, ainsi que les règles à suivre et à éviter. Collez-le dans le chat v0 et demandez à v0 de s'y référer pour tout ce qu'il construit.
- 2
Appliquer les tokens via le registre shadcn
Une fois que vous avez connecté le rendu de v0 à un projet (via GitHub ou Download), exécutez la commande de registre du kit pour installer ses variables CSS dans votre thème shadcn :
npx shadcn add https://identityforge.io/r/ambient-sage.json - 3
Ou coller les variables CSS directement
Pas de configuration shadcn ? Copiez l'export des variables CSS depuis la page du kit et collez les blocs
:rootet.darkdans votre feuille de style globale. Les composants générés par v0 font déjà référence à--background,--primaryet consorts. - 4
Demander à v0 de reconstruire sur le système
Vous pouvez maintenant prompter normalement : v0 génère le rendu selon vos tokens et suit les règles du DESIGN.md.
Build a pricing page. Use only the design tokens already in the theme and follow the DESIGN.md I pasted.
v0 dispose désormais d'un flux natif pour les design systems
La documentation actuelle de v0 décrit les Design Systems 2.0 : vous ajoutez des sources (repos GitHub, frames Figma, liens ou fichiers joints), optionnellement un v0.json, et v0 enregistre le design system comme une compétence dans votre espace de travail. Le DESIGN.md d'un kit et son URL de registre s'insèrent exactement comme ces sources. La méthode via le registre shadcn décrite dans ce guide s'appuie sur l'ancienne page de registre de v0 et fonctionne toujours dans le projet exporté ou connecté.
L'URL du registre est l'artefact partageable
Chaque kit public expose un élément de registre shadcn stable à l'adresse https://identityforge.io/r/<slug>.json. Cette URL unique contient l'ensemble des tokens : transmettez-la à v0, à un collègue ou à un autre développeur pour obtenir un thème identique.
Pourquoi c'est mieux qu'une palette choisie à la main
Donner trois couleurs de marque à v0 vous donne trois couleurs et beaucoup de valeurs par défaut non définies pour les 25 autres rôles : états de survol, texte atténué, bordures, séries de graphiques, mode sombre. Un kit définit les 28 rôles sémantiques en mode clair et sombre, v0 n'a donc jamais à improviser les valeurs intermédiaires. C'est toute la différence entre une application thémée et une application recolorée. Consultez l'explication des tokens de couleurs sémantiques pour la liste complète des rôles.
Même principe pour les autres constructeurs web : Lovable et Bolt. Pour les agents de code, commencez par le guide pilier.
FAQ
Comment donner un design system à v0 ?
Collez le fichier DESIGN.md du kit dans le chat v0 comme brief, et appliquez les tokens du kit via son élément de registre shadcn (npx shadcn add https://identityforge.io/r/<slug>.json) ou en collant ses variables CSS dans votre thème. Le rendu shadcn/Tailwind de v0 utilisera alors vos tokens.
v0 prend-il en charge les registres shadcn ?
v0 génère du code shadcn/ui, donc l'élément de registre d'un kit s'installe proprement dans le projet qu'il produit. Vous exécutez npx shadcn add <registry-url> dans ce projet (via la synchronisation GitHub ou après téléchargement), puis continuez à prompter v0 pour utiliser le thème.
Puis-je faire cela sans shadcn ?
Oui. Copiez l'export des variables CSS depuis la page du kit et collez les blocs :root et .dark dans votre feuille de style globale. Les noms des tokens sémantiques restent les mêmes dans les deux cas.
Sources
- Design Systems - v0 Docs : le workflow actuel de v0 pour les design systems consiste à ajouter des sources (repos, Figma, liens, pièces jointes) et à enregistrer le design system en tant que compétence ; le guide sur le registre shadcn est désormais marqué comme obsolète.
Sources
- Design Systems - v0 Docs: Le workflow actuel de v0 pour les design systems consiste à ajouter des sources (repos, Figma, liens, pièces jointes) et à enregistrer le design system en tant que compétence ; le guide sur le registre shadcn est désormais marqué comme obsolète.