Portfolio design & IA first · Design produit × IA first

Case study // Design produit × IA first

D'une base graphique de 2025 à un design system synchronisé et un site Astro en production, avec des agents IA tenus par des règles.

Client: Projet exploratoire personnel • Olin.os
Rôle: Senior Product Designer (conception, design system, mise en production, orchestration d'agents IA)
Squad: Josselin Hillion, seul responsable de bout en bout, en orchestrant des agents IA (Claude Code, Antigravity)
Durée: 12 jours • 20 septembre → 1er octobre 2026
Stack: Figma • Astro • Claude Code • Stylelint • Vercel

Exploratoire
IA first, sous contrainte
En production

⚡ Scanner la synthèse 90 s

Page d'accueil du portfolio Olin.os : titre en dégradé violet et bleu, mascotte en fenêtre, bouton d'appel. — Le résultat en production, produit par la méthode que raconte ce cas.

01 // Les challenges

Démontrer vite. Montrer en entretien pro une capacité à vibe coder avec une charte cohérente et contrôlée.
Éviter la dérive. Une IA qui produit vite sans cadre multiplie les écarts de design.
Tenir un projet exploratoire. Aucun processus défini au départ, une base graphique de 2025 pour seul point d'appui.

02 // L’approche

Foncer sans cadre. Propositions graphiques, boucle Figma et IA, cas complets en ligne dès le 21/09.
Écrire le système. Figma en MCP, 16 skills, un premier atome et ses variables Figma.
Contraindre l'IA. Playbook, linter de tokens, refonte Astro par lots.

03 // Le résultat

Un design system synchronisé. 32 fiches, variables Figma et tokens CSS reliés par une commande de synchronisation.
Un site Astro livré. 51 composants et 5 pages en production sur olindesign.fr en 12 jours.
Une compétence validée. Vibe code design system first validé en entretien pro, passage au round suivant.

12 joursdu 20/09 au 01/10/2026
114jalons tracés dans le journal de bord
51composants Astro, 5 pages
32fiches du design system, synchronisé avec Figma

Vous avez l’essentiel. Deux chemins :

on en discute ?Découvrir le cadrage & les 4 étapes

Je suis parti d'une base graphique de 2025, posée pour mon approche freelance. L'objectif immédiat : une démonstration en entretien pro. L'objectif de fond : trouver comment lier vibe coding et design system synchronisé pour une approche IA first, mais contrainte.

Ce que le projet devait prouver

Aller vite. Livrer des cas complets en ligne en quelques jours, avec une charte cohérente.
Tenir le cadre. Rendre l'écart au design system visible et arbitré, jamais silencieux.
Être reproductible. Transformer ce qui a marché en méthode réutilisable pour les cas suivants.

Acte 01 // 20-21 septembre 2026Phase 1/6

Foncer sans cadre

Aller vite sur la direction artistique pour avoir une matière réelle plutôt qu'un plan.

Je suis parti de ma base de 2025 et j'y suis allé à fond, sans me poser de questions sur la direction artistique. Dès le 20/09, une première proposition de landing en canvas spatial ; le 21/09, une seconde, asymétrique et néobrutaliste, après retour sur Figma.

Le plus dur : ne pas penser en design system. Je le laissais volontairement de côté pour dégrossir au plus vite la stratégie du site et les cadrages graphiques, et me concentrer sur la mise à disposition visuelle des cas d'usage par le vibe code.

Proposition n°1 (canvas et minimap)
Proposition n°2 (hero asymétrique, atelier)
Export Figma vectoriel

Hero de la première landing : direction graphique explorée sans cadre, phase 1 du projet. — ↳ À gauche, la direction explorée à la volée début septembre ; à droite, le site tel qu'il est aujourd'hui.

Hero du site Astro actuel : même promesse, désormais construite sur un design system. — ↳ À gauche, la direction explorée à la volée début septembre ; à droite, le site tel qu'il est aujourd'hui.

Acte 02 // 21-23 septembre 2026Phase 2/6

La boucle Figma ↔ IA, premier cas en ligne

Un draft qui passe par Figma, se modifie, puis se réinjecte via l'IA va plus vite qu'un aller-retour classique.

J'ai réintégré le draft dans Figma pour le modifier, puis je l'ai réinjecté via l'IA, avec un prompt directeur Google Stitch pour piloter l'exploration.

Des cas complets, rédigés à partir de la matière que j'avais en local et agencés selon une structure narrative, sont partis en ligne sur Vercel dès le 21/09, pour tenir l'échéance de l'entretien. C'était rapide, cohérent côté charte, et encore sans système derrière.

Cas complets en ligne
Prompt directeur Google Stitch
Direction artistique validée

Schéma de la boucle : draft, Figma, IA, avec réinjection du draft modifié, puis cas complets en ligne sur Vercel le 21 septembre. — ↳ La boucle Figma et IA, puis la V1 mobile qu'elle a produite, avant le design system.

Haut de la maquette mobile de la première version du portfolio, avant la construction du design system. — ↳ La boucle Figma et IA, puis la V1 mobile qu'elle a produite, avant le design system.

Acte 03 // 24 septembre 2026Phase 3/6

Écrire le système

Le jour où la démo est prête, la vraie question devient : comment tenir cette vitesse sans perdre le cadre ?

La démonstration faite, j'ai voulu explorer le lien entre vibe coding et design system synchronisé, pour une approche IA first mais contrainte. Le 24/09, j'ai branché Figma Desktop en MCP, intégré 16 skills et construit mon premier atome, le Button Primary, avec ses variables Figma et ses propriétés V2.

La collection de variables Olin / Core Tokens est née ce jour-là. Les planches Colors et Button montrent la suite : des primitives, des rôles sémantiques, des modes clair et sombre, et la parité avec le code Astro.

Atome Button / Primary production-ready
Variables Figma et tokens CSS
Commande /sync-tokens

Planche Colors dans Figma : neutres, encres et cockpit, chaque couleur reliée à ses rôles sémantiques. — ↳ Des primitives aux rôles sémantiques, puis le premier atome : une matrice Hierarchy × State.

Matrice Hierarchy par State du Button dans Figma : primary, secondary et ghost, cinq états. — ↳ Des primitives aux rôles sémantiques, puis le premier atome : une matrice Hierarchy × State.

Acte 04 // 28-30 septembre 2026Phase 4/6

Règles, garde-fous et lots

Une IA tenue par des fichiers de règles et un linter produit plus propre qu'une IA libre.

Le 28/09, je repars sur un worktree Astro dédié. Le 29/09, le playbook « Vibecoding Frugal & Design System First » fixe les règles de travail avec l'IA. Le 30/09, je veux m'assurer de l'étanchéité du système et du cadrage de l'IA : Claude Code met en place, sous mon cadrage, un linter Stylelint qui bloque toute valeur hors tokens et rend l'exception visible dans un registre d'arbitrages.

L'agent construit le garde-fou qui le contraint lui-même. La landing se construit ensuite par lots, jusqu'aux cas Excibat, DataCity et Royal Canin. Le second cerveau et les agents qui rendent cela possible auront leur propre cas.

Playbook Vibecoding Frugal & Design System First
Linter de tokens et registre d'arbitrages
Lots 1 à 4 de la refonte Astro

Terminal : le linter Stylelint refuse une couleur hexadécimale et un espacement brut, quatre erreurs. — ↳ Démonstration sur un fichier de test : une couleur et un espacement hors tokens sont bloqués par le linter.

Acte 05 // 1er octobre 2026Phase 5/6

Livrer

Le système prouve sa valeur le jour où il produit un site en production.

Le 01/10, `astro check` passe à zéro erreur et le site Astro bascule en production sur olindesign.fr. Le résultat : 51 composants, 5 pages, un design system de 32 fiches synchronisé avec Figma.

Site Astro en production
Sitemap et pages FR/EN
Design system synchronisé

Landing du site Olin.os en production sur desktop : stickers clients et fenêtre Olin.md. — ↳ Le site livré, sur desktop et sur mobile.

Hero du site Olin.os en production sur mobile, composition recomposée pour l'écran étroit. — ↳ Le site livré, sur desktop et sur mobile.

Acte 06 // 1er octobre 2026Phase 6/6

La page que tu lis

La meilleure preuve de la méthode est la page elle-même, produite par elle.

Cette page n'a pas été écrite d'un jet. Elle est passée par un protocole : cadrage, ressources, faits sourcés, structure, narration, visuels, brouillon, revue du design system, audit d'expérience, mise en ligne. Chaque fait vient d'un fichier relié à ses sources, chaque écart au design system demande mon arbitrage, rien ne part en ligne sans mon go.

L'issue concrète de cette démarche : une compétence de vibe code design system first validée en entretien pro, et le passage au round suivant.

Protocole de création de cas à portes de validation
Fichier de faits sourcés

Grille du protocole de création de cas : dix portes de G0 à G7, avec pour chacune ce que Claude prépare, ce que Josselin tranche et le livrable produit. — ↳ Le protocole en dix portes : chacune demande un go écrit avant la suivante.

Voir les preuves de plus près :

Ouvrir le schéma FigJam du protocole

❖ Design System synchroniséVariables Figma ↔ tokens CSS32 fiches, une collection de variables, une commande de synchronisation

Le design system est synchronisé, pas connecté au sens de Code Connect : les variables Figma Olin / Core Tokens et les tokens CSS sont reliés par la commande /sync-tokens.

6 fondations, 9 atomes, 12 molécules, 4 organismes, 1 assets
Modes clair et sombre dans les planches Figma

❖ Garde-fousPlaybook, linter, arbitragesCe qui rend l'IA fiable sans la ralentir : un linter, un registre, des arbitrages écrits

Le playbook fixe les règles de travail, le linter bloque toute valeur hors tokens au pré-commit et au build, et un registre garde la trace de chaque dérogation.

Stylelint au pré-commit et à prebuild
Registre d'arbitrages : l'exception est visible, jamais silencieuse

❖ Vitesse et cadreHors-sol d'abord, cadre ensuiteLe cadre est né de la vitesse, pas l'inverse : 12 jours, 114 jalons, un process émergent

La phase 1 a servi à livrer vite et à prouver une charte cohérente en entretien. La phase 2 a servi à contraindre l'IA. L'ordre compte : sans la matière de la phase 1, les règles de la phase 2 n'auraient eu rien à tenir.

❖ Recul critiqueCe qu'il reste à améliorerUn portfolio exploratoire, donc inachevé : Code Connect, CMS, vélocité

Code Connect n'est pas en place : le design system est synchronisé mais pas connecté, chantier inscrit en roadmap. Aucune mesure d'heures ni de vélocité avant/après.

Dettes du design system dans Figma à résorber
Mail à basculer sur le domaine, ancien site à nettoyer
Rôles de deux cas à valider, édition du contenu à explorer

🎯 The so what? // Ce que ce cas démontre pour vos produits

01 // Méthode

Un process se construit en produisant.

Aucun processus n'existait le 20 septembre. Le cadre est né de 114 jalons répartis sur 12 jours, pas d'un plan préalable : chaque règle est apparue quand un besoin est devenu réel.

02 // Garde-fous

Les garde-fous comptent plus que la vitesse.

Le linter, branché au pré-commit et au build, refuse les valeurs brutes. Il rend l'exception visible, avec un registre d'arbitrages, plutôt que de l'interdire.

03 // Posture

Le designer devient chef d'orchestre.

Seul responsable de bout en bout, il fixe les règles, tranche chaque écart au design system et valide chaque porte avant que les agents n'avancent.

Cette exploration en appelle une autre : le second cerveau et les agents IA qui la rendent possible. Bientôt ici. Besoin de plus d'informations ?

Planifier un call découverte (15 min)Tous les projets →

Synthèse de la mission & impact

Un projet exploratoire, pas un plan