Design system pour fondateurs :pas besoin de designer

Un design system pour fondateurs, c'est ce qui permet à un produit construit par l'IA d'avoir l'air professionnel sans designer : des design tokens, une bibliothèque de composants qui vous appartient et des règles que l'IA sait suivre. J'ai construit 1 480 composants de production sans en concevoir un seul de zéro.

Tableaux de bord, formulaires, tableaux, modales, graphiques, assistants en plusieurs étapes. Chacun semble appartenir au même produit. Chacun fonctionne en mode sombre. Et rien de tout cela ne vient d'un talent de designer. Cela vient du fait d'avoir pris chaque décision de design exactement une fois — puis d'avoir fait réutiliser cette décision 1 480 fois par l'IA.

Pourquoi un design system pour fondateurs compte : les applications construites par l'IA dérivent vers l'incohérence

Voici la partie la plus difficile quand on construit avec l'IA, et ce n'est pas le code. C'est la cohérence. L'IA peut vous construire un bel écran. Mais ira-t-il avec les cent derniers écrans ? Mêmes couleurs, mêmes espacements, mêmes formes de boutons ?

Sans système, non. Demandez trois boutons sur trois jours différents et vous obtenez trois bleus différents, trois marges intérieures différentes, trois rayons d'angle différents. Chacun paraît bien isolé. Ensemble, ils crient « prototype ». C'est de la dette de design, et elle se cumule exactement comme la dette technique : chaque nouvel écran est une nouvelle décision de design, et chaque nouvelle décision est une nouvelle chance de dériver.

Un designer corrigerait cela en imposant son goût. Un design system le corrige en supprimant complètement la décision.

Les design tokens : décider une fois, réutiliser partout

Les design tokens sont les constantes de l'apparence de votre produit — une courte liste de valeurs approuvées que chaque écran doit utiliser. Au lieu de « un bleu quelconque », il y a la couleur de marque. Au lieu d'écarts arbitraires, une échelle d'espacement. Au lieu de tailles de texte libres, une échelle typographique.

Le but n'est pas l'esthétique — c'est que les tokens transforment le design d'un jugement subjectif en une simple recherche. Et l'IA est spectaculaire pour les recherches. Une fois vos tokens en place, « fais que ce soit beau » devient « utilise les tokens », une consigne que l'IA peut vraiment suivre.

shadcn/ui : des composants professionnels qui vous appartiennent

Les tokens vous donnent les ingrédients. Pour les composants eux-mêmes, j'utilise shadcn/ui — et la raison est propre au développement avec l'IA. Ce n'est pas une bibliothèque de composants traditionnelle qu'on installe comme une boîte noire scellée. Elle vous donne le code réel de 77 composants superbement conçus, entièrement accessibles et prêts pour la production — boutons, formulaires, boîtes de dialogue, tableaux, onglets, notifications — que vous copiez dans votre propre projet. Ils vous appartiennent. Vous pouvez les modifier.

Pourquoi cela compte : quand un composant est une boîte noire, l'IA ne voit pas à l'intérieur, alors elle invente ses propres styles autour. Quand le code du composant vit dans votre projet, l'IA le lit, apprend le schéma et construit de nouveaux composants conformes — même structure, mêmes tokens, même comportement. La mise en place m'a pris 15 minutes. Ces 77 primitives sont devenues la fondation de mes 1 480 composants fonctionnels, avec l'accessibilité et le mode sombre gérés dès le premier jour.

12 semainesVotre carrière en entreprise n'a jamais été le planPostulez au Solopreneur Accelerator.Postuler →

Les variantes : apprendre vos règles à l'IA

La dernière pièce, ce sont les variantes — des versions nommées de chaque composant pour chaque situation. Un bouton n'est pas stylé au cas par cas ; il vient avec un menu fixe : par défaut, secondaire, contour, fantôme, danger. Petit, moyen, grand. C'est tout.

Le bénéfice est que le langage remplace le style. Quand je dis à l'IA « crée un bouton de suppression », elle sait qu'il faut utiliser la variante danger. Personne ne choisit une nuance de rouge. Personne ne choisit une marge. La décision a été prise une fois, lors de la définition de la variante, et chaque bouton de suppression du produit est identique pour toujours.

Le même principe « décider une fois » traverse toute la base de code, pas seulement l'interface — c'est comment un seul schéma a été étendu à 633 services côté données. Et il se combine avec l'autre moitié du soin visuel : gérer les états de chargement, d'erreur et de vide dont chaque écran a besoin. Le système plus les états, c'est ce qui donne à une application construite par l'IA l'allure d'un produit.

Comment briefer l'IA sur votre design system

Une fois le système en place, chaque demande de composant suit la même forme : nommer le schéma à copier, nommer les tokens à utiliser, nommer les états à gérer. Par exemple :

Crée une carte d'histoire de réussite. Suis le schéma de la carte de métrique existante. Utilise les tokens standard de carte, les tailles standard de titre et de texte, et la couleur de marque pour le fond de l'icône. Inclus le mode sombre et l'accessibilité au clavier, comme le composant de référence.

L'IA génère un composant conforme à votre produit du premier coup — parce que vous ne lui avez pas demandé de concevoir, vous lui avez demandé de se conformer. Vous êtes l'architecte ; le système est votre code de la construction.

Pour le garder rigoureux, je fais chaque mois un court audit : chercher les couleurs codées en dur qui devraient être des tokens, les espacements aléatoires qui devraient suivre l'échelle, les styles du mode clair dont la paire en mode sombre manque, et les styles ponctuels répétés qui devraient devenir une variante. Trente minutes par mois maintiennent 1 480 composants cohérents comme un seul système.

Et il y a un effet cumulatif dont personne ne parle : votre bibliothèque de composants sert de données d'entraînement à votre IA. Chaque composant bien construit lui enseigne vos schémas. Après 100 composants, elle construit comme vous. Après 1 000, la dérive a complètement disparu.

Le livreThe Solopreneur RevolutionLuis Gonçalves sur la création d'une activité de solopreneur avec l'IA, sans quitter son emploi.Obtenir le livre →

Questions fréquentes

Dois-je embaucher un designer pour mon SaaS ?

Pas pour un produit construit en solo. Un design system — tokens, composants dont vous êtes propriétaire, variantes nommées — vous donne une interface professionnelle et cohérente sans compétences en design. Un designer devient utile plus tard, pour la marque et le marketing, pas pour garder vos boutons du même bleu.

Que sont les design tokens, en langage simple ?

Une courte liste de valeurs de design approuvées : vos couleurs, vos tailles d'espacement, vos tailles de texte, l'arrondi de vos angles. Chaque écran doit choisir dans la liste au lieu d'inventer des valeurs. Cela transforme « fais que ce soit beau » en une règle que l'IA peut suivre mécaniquement.

Qu'est-ce que shadcn/ui et pourquoi est-il adapté au développement avec l'IA ?

C'est une collection de 77 composants d'interface prêts pour la production dont vous copiez le code dans votre propre projet au lieu de l'installer comme une bibliothèque scellée. Comme le code est visible, l'IA peut le lire et reproduire les schémas — les nouveaux composants ressemblent donc aux anciens au lieu d'inventer de nouveaux styles.

Comment empêcher l'IA d'inventer de nouveaux styles ?

Référencez, ne décrivez pas. Chaque demande nomme un composant existant comme schéma et les tokens à utiliser — « suis le schéma de la carte de métrique » vaut mieux que n'importe quel adjectif. Faites ensuite un audit mensuel des couleurs codées en dur et des espacements hors échelle, et regroupez les styles répétés dans des variantes nommées.