Comment obtenir des résultats soignés avec les kits de design IA

Etablissez comme règle que chaque composant utilise les design tokens du système global, jamais des couleurs ou des tailles de police codées en dur. Ajoutez cela aux instructions de votre projet (CLAUDE.md, .cursorrules ou équivalent) :

## Design system

Every component must use the global design system via semantic tokens.
Use `bg-background`, `text-foreground`, `bg-card`, `text-primary`,
`border-border`, etc. Never hardcode colors like `bg-neutral-950` or
`text-white`. Typography uses the heading and body font variables, not
literal font-family values.

Before submitting a component, verify it contains zero hardcoded color
or font values. Run a review pass if needed.

Quand chaque composant puise dans la même couche de tokens, changer de kit de design repeint tout le produit. Sans cette règle, le premier kit s'applique proprement et chaque modification ultérieure implique de traquer des valeurs codées en dur dans cinquante fichiers.

Un agent qui construit un dropdown de zéro obtiendra quelque chose qui marche à peu près. Un agent qui stylise un dropdown Radix UI avec les tokens de votre kit obtiendra un composant accessible, navigable au clavier, animé et visuellement cohérent. Le travail d'interaction est déjà résolu, l'agent n'a plus qu'à appliquer l'apparence.

Les bibliothèques de composants qui fonctionnent le mieux avec les kits de design :

• [shadcn/ui](https://ui.shadcn.com/) copie les composants dans votre projet en tant que code source. Ils utilisent déjà des variables CSS, donc les tokens d'un kit de design s'intègrent directement. Identity Forge fournit un registre shadcn qui installe les tokens d'un kit en une seule commande.
• [Radix UI](https://www.radix-ui.com/) fournit les primitives non stylisées sous shadcn. Utilisez-le directement quand vous voulez un contrôle total sur le markup et le style tout en conservant le comportement d'accessibilité et d'interaction.
• [Base UI](https://base-ui.com/) est une autre bibliothèque de primitives non stylisées avec une API minimale. Utile quand le niveau d'abstraction de Radix semble trop lourd pour votre cas d'usage.

La séparation est la même dans chaque cas : la bibliothèque gère le comportement (gestion du focus, navigation au clavier, annonces pour les lecteurs d'écran, verrouillage du scroll, placement des portails) et le kit de design gère l'apparence (couleurs, typographie, espacement, formes, élévation). Vous pouvez changer le kit sans toucher aux composants, ou changer la bibliothèque de composants sans toucher au kit.

Avant de vous engager sur un kit de design, générez quelques images de ce à quoi le produit pourrait ressembler. Les modèles d'image sont bons en ambiance, composition et relations de couleurs. Ils sont mauvais pour produire un système à partir duquel on peut construire. Utilisez-les pour la première étape, pas pour la seconde.

1. 1

   Générer des images d'ambiance

   Utilisez un modèle d'image (gpt-image-1 fonctionne bien via la CLI Codex) pour explorer des directions visuelles. Générez trois à cinq options avec des ambiances différentes.

   Copy

   codex exec "generate an image of a SaaS dashboard with warm, earthy tones and generous whitespace"

2. 2

   Choisir la direction

   Choisissez l'image qui capture ce que le produit devrait dégager. Vous choisissez une ambiance, pas un layout.

3. 3

   Créer le kit

   Laissez votre agent créer un kit de design dans Identity Forge qui correspond à la direction choisie. Ou utilisez le pipeline d'extraction pour extraire les tokens d'une référence existante.

4. 4

   Maintenir dans Identity Forge

   A partir de là, le kit est la source de vérité. Affinez-le dans Studio, versionnez-le et exportez-le vers votre agent. L'image vous a donné la direction ; le kit la maintient cohérente.

Les modèles d'image sont bons pour la partie exploration. Ils ne sont pas bons pour produire quelque chose à partir de quoi un agent peut construire directement. Une image ne peut pas dire à un agent quel border-radius utiliser sur une card. Un kit le peut.

La technique la moins utilisée : au lieu d'accepter la première version d'une section, demandez à votre agent de construire trois variations avec des layouts, des densités ou des schémas d'emphase différents.

Build three variations of the pricing section:
1. A compact horizontal layout with all plans visible at once
2. A card-based layout with the recommended plan highlighted
3. A comparison table with feature rows

Use the active design kit for all three. Keep each in a
separate component file so I can compare them side by side.

Cela coûte quelques minutes supplémentaires de temps d'agent et évite au projet de ressembler au résultat par défaut du modèle. L'agent applique le même kit de design à chaque variation, donc les trois sont cohérentes avec la marque. Vous choisissez celle qui correspond au contenu, à l'audience et au rythme de la page.

Rien de tout cela n'est difficile en soi. C'est l'accumulation qui compte. Les tokens imposés signifient que le kit contrôle réellement l'apparence. De bonnes primitives de composants signifient que les interactions fonctionnent simplement. Une vraie référence visuelle signifie que l'ambiance est intentionnelle, pas accidentelle. Et choisir parmi trois options signifie que le layout s'adapte au contenu plutôt qu'au résultat par défaut du modèle. Le résultat donne l'impression que quelqu'un a pris des décisions de design, parce que c'est le cas.