Du design system au code : la dernière étape de mon POC IA

Dans les articles précédents, je vous ai montré comment j'ai installé mon environnement de travail avec l'IA. D'ailleurs, n'hésitez pas à le consulter avant la lecture de cet article : 

1. Partage d'expérience sur une première intégration d'IA
2. Rendre vos conversations plus performantes dans Claude

Voici donc la dernière étape de ce POC : la façon dont je fabrique mes outils, de la charte graphique jusqu'au code, avec Claude Design et Claude Code.

Étape 1 : un design system issu de la bible de marque

Tout part de la bible de marque : couleurs, typographies, ton, règles d'usage. Dans Claude Design, j'en tire un design system, c'est-à-dire une bibliothèque de règles et de composants (boutons, titres, espacements, états) que l'on réutilise partout.

L'intérêt est simple : je ne réinvente pas l'identité à chaque page. Si un bouton est défini une fois, il est identique sur toutes les pages, et si je le modifie, il change partout.

Un outil d'autant plus utile qu'il me permet d'encadrer aussi les réalisations de mon Directeur de la communication. La charte graphique devient une véritable bibliothèque, visible dans mes couvertures de posts LinkedIn 🎨.

Étape 2 : des maquettes pour garder une unité

Sur la base de ce design system, je génère des maquettes d'interface (les UI mockups). Elles donnent à chaque page la même allure, et surtout elles disent clairement ce qui doit être construit, avant d'écrire une ligne de code.

C'est aussi un bon moyen de discuter avec un client : une maquette se critique mieux qu'un cahier des charges.

L'interface de Claude Design me permet de tester mes interactions avec mes pages, et donc de valider un parcours utilisateur cohérent avec la finalité de l'outil.

Étape 3 : Claude Code dans l'IDE

Les maquettes sont ensuite confiées à Claude Code, qui travaille directement dans l'environnement de développement (l'IDE). Il crée les fonctionnalités et les écrans en suivant les maquettes fournies. Mon rôle est de lui donner un cadre : j'ai ainsi, dans mon socle Cœur, un brief en .md avec toutes mes règles de code pour Claude. Le Cœur est la base préconstruite (connexion, back-office, sécurité) installée dans tous mes développements : je ne repars jamais de zéro, et Claude Code construit sur des fondations déjà posées.

Je n'ai plus qu'à transmettre à Claude Code mes briefs techniques ou fonctionnels, pour le faire coder, itération par itération, les différents cas d'usage que j'ai prévus pour le projet. Très concrètement, dans l'IDE, je lui décris une itération de bout en bout, afin qu'il produise une fonctionnalité complète que je pourrai valider, fonctionnellement et techniquement, avant de la "sauvegarder" (push). Je vous en parle juste après 👇.

Étape 4 : la revue de code et la refactorisation, c'est moi

C'est l'étape que je ne délègue pas. Une fois le code produit, je fais la revue de code, puis la refactorisation, c'est-à-dire la réorganisation du code sans changer ce qu'il fait. Deux objectifs :

• m'assurer que l'on ne crée pas de code inutile ;
• vérifier que l'application est performante.

Une IA peut produire beaucoup de code très vite, et le plus gros risque est d'en accumuler plus que nécessaire. La relecture par une personne qui sait coder reste, selon moi, ce qui distingue un outil durable d'un outil qui fonctionne le jour de la démo.

Pourquoi cette chaîne me convient

Elle suit l'ordre naturel d'un projet : on décide de l'identité, on la dessine, on la construit, on la vérifie. Chaque étape produit quelque chose que je peux relire. Et l'IA accélère les étapes où elle produit plus efficacement que moi (créer des maquettes fonctionnelles, rédiger une première version du code), pas la responsabilité de ce qui est livré.

Un cas concret : le site que vous lisez

Le site codapia.fr, sur lequel vous lisez cet article, a été construit avec cette chaîne : design system issu de la bible de marque, maquettes pour chaque page, Claude Code dans l'IDE, puis revue de code et refactorisation par mes soins.

Il existe en réalité deux versions, et la comparaison est parlante.

La première version était un site de deux pages, avec un back-office sobre. Elle m'a demandé un peu plus d'une semaine de travail, avec Claude en simple assistant, pour le débogage.

La version actuelle est un tout autre objet : un site complet avec une page d'accueil, Méthode, Diagnostic, Outils métier, Pilotage, Projet, Contact et mentions légales, un blog avec ses catégories, et un back-office pour gérer soi-même les contenus (articles, événements, sujets de veille réglementaire, exemples d'outils, réalisations, messages reçus). Il produit aussi un plan de site, un flux RSS et le balisage utile aux moteurs de recherche. Elle m'a demandé, elle aussi, un peu plus d'une semaine, pour un livrable qui, développé comme la première version, m'aurait demandé plus de trois semaines (selon mes estimations).

Même durée, mais un rendu beaucoup plus fourni. C'est ce que change le cadre posé en amont : quand le design system, les maquettes et mes règles de code existent déjà, l'IA n'a plus à deviner, et mon temps va au contrôle plutôt qu'à la réécriture.

C'est mon terrain d'essai, et le résultat est public : vous pouvez le parcourir et juger si ce site qui est ma pierre angulaire de mon activité, tient sa promesse.