Design, code et IA, dans un seul workflow

• La direction visuelle du jeu est l'un des critères principaux du jeu. J'ai défini une ambiance bois, calme, avec des bruitages légers et de la musique douce. Une couche de technologie discrète pour que l'écran ne reste pas figé.
• Après une veille sur l'outillage technique, j'ai choisi Godot, piloté avec Claude Code. Le design system est utile pour le développement des prochains niveaux.
• Mon backlog est synchronisé entre Claude, GitHub et Notion. Il est automatiquement maintenu par les agents et reste modifiable à la main. Comme dans un fonctionnement agile, où chaque agent dispose de tâches et de tickets attribués.
• Aucun marketing prévu : c'est un projet d'apprentissage sans coût financier. Une monétisation légère est prévue dans la prochaine release.

• Je voulais un site statique, modifiable sans effort. Ni CMS ni créateur de portfolio en ligne : je garde la main sur tout. Textes, images et projets vivent dans des fichiers YAML que des templates Astro lisent. Pour ajouter ou cacher un projet, j'édite simplement un fichier texte. Stack : Astro 5 en sortie statique, Tailwind CSS 3 et GitHub Pages pour le déploiement.
• J'ai fixé les règles et les contraintes de l'agent dans un recueil d'environ 120 lignes, allégé de 4,3k à 1,6k tokens lors de la dernière refactorisation.

• Les applications de suivi courantes misent sur la performance ou l'esthétique, et peuvent poser problème à l'échelle individuelle. Il appartient à chacun de garder la maîtrise de ses objectifs et de ses données personnelles. Les données saisies à la main sont difficiles à exploiter efficacement. De plus, entre deux consultations, l'accompagnement des patients peut être compliqué.

• Veille concurrentielle sur le Play Store et l'App Store. J'ai comparé les différents environnements et les outils de conception de jeu mobile compatibles avec l'IA.
• En testant la version physique du jeu, j'ai constaté que les règles sont simples mais ne se devinent pas. Comme aux échecs : on voit les cases, pas les coups permis. Le jeu doit donc les enseigner. Un casse-tête physique se manipule en 3 dimensions, alors qu'un écran fixe appauvrit l'expérience et la durée d'utilisation. Il faut donc des éléments qui encouragent la durée d'utilisation.

• J'ai fait un benchmark de portfolios seniors et une veille sur les attentes des entreprises tech françaises et américaines.
• J'ai testé mes maquettes Figma auprès de 7 personnes différentes, sur mobile, desktop et tablette. Le wording et la copie ont été relus par des professionnels de secteurs différents (design, ergonomie, etc.) pour vérifier que le texte se comprend. La conclusion : m'appuyer davantage sur ma méthodologie et ma technique que sur le rendu visuel final.

• Une feuille de règles dans les paramètres, et une aide visuelle des coups légaux qu'on peut désactiver.
• Un onboarding en trois étapes explique le but et les trois règles. On peut le relancer depuis les paramètres. Il se joue sur une planche de simulation, pour ne pas spoiler le début de la solution.
• Pause réflexive : on déplace les pions librement sur deux axes et on peut les lancer, avec des sons. Ça ne compte pas comme un coup, le pion revient tout seul.

• J'ai listé les pages, leur contenu ainsi que les fonctionnalités, afin de générer des wireframes. J'en ai tiré une liste des composants pour l'UI kit.

Écran de jeuPause et abandonRéglagesTeaser

• J'ai rassemblé la bibliothèque Material Design 3, le design system d'Android, sur GitHub pour que mes agents la lisent. Pour la direction visuelle, je suis parti de textures libres de droit que j'ai modifiées à partir de tokens mis en place pour traduire les essences de bois en langage d'interface. J'ai posé ces textures sur les composants natifs de Material 3. Du bois brut, avec une fine couche high-tech. L'UI kit est adapté à Android, hautement personnalisé et cohérent sur l'ensemble de l'interface.

• J'ai produit les wireframes et les maquettes haute fidélité sur Figma, ainsi que le design system, l'UI kit et les tokens. Le site est mobile first, mais pensé responsive pour des présentations sur ordinateur portable. Les composants sont donc déclinés pour tous les appareils (mobile, tablette, desktop).

Accueil

1 / 6

• Les design tokens sont des variables Figma, en deux collections : Primitive (123 variables) et Semantic (71). Les tokens sémantiques pointent vers les primitives, et les deux alimentent le fichier de tokens lu par le code.

tokens.js → tailwind.config.mjs → component

// 1. src/styles/tokens.js
const primitives = {
  color: {
    gray: { 300: "#d1d5dc" },
    "accent-action": { 400: "#7f98fa" },
  },
};

const semantic = {
  colors: {
    "stroke-primary": primitives.color["accent-action"][400],
    "stroke-neutral-primary": primitives.color.gray[300],
  },
};

// 2. tailwind.config.mjs
colors: {
  ...tokens.semantic.colors,
},

// 3. Footer.astro
<button class="border border-stroke-neutral-primary rounded-full">

Extrait du code des tokens exportés, affiché volontairement.

• Godot, piloté surtout avec Claude Code au départ, puis avec DeepSeek et Gemini.
• Un écran à la fois, avec des arrêts et des captures avant et après. Je valide sur un vrai téléphone avant de passer au suivant. Je n'ai écrit aucun code applicatif à la main. Mon travail technique fut l'audit et la vérification.

• Mon agent Claude Code lit le dépôt en temps réel et suit mes fichiers de contraintes, mon contexte et mes skills. Un skill me permet de formater en YAML la rédaction de mes projets. L'agent ne fait que structurer le texte, qui reste modifiable à la main à tout moment.

• Des tests automatiques couvrent les règles du jeu, la mise en page, les tailles de police et les cibles tactiles. Des proches ont testé le jeu avant la publication pour valider la compréhension des règles, l'ergonomie de l'interface ainsi que le style visuel du jeu.
• Le contraste est calculé depuis les tokens : les exceptions assumées sont tranchées et documentées. J'ai passé des captures dans une simulation de daltonisme. Les pions se distinguent aussi par leur forme, leur ombre et un symbole gravé.

• Disponible sur le Play Store depuis le 10 novembre 2026, en accès anticipé, ouvert à tous.
• La prochaine release contiendra la monétisation via AdMob. Elle s'appuie sur le principe d'itération de résolution de casse-tête, sans insister ni gêner le jeu.

Fiche Google Play

• GitHub me permet de pousser le site en production sur mon propre domaine. Les différentes branches me laissent tester avant de passer en production sur la branche principale, liée à mon domaine. Côté SEO : URL canoniques, alternatives de langue, Open Graph et données structurées.
• Après avoir testé plusieurs outils de suivi analytique, j'ai gardé Umami : plus léger, il ne collecte pas de données privées, donc plus adapté à un portfolio à faible trafic.
• Sur six mois (mai à novembre 2026), 75 % des visites arrivent en direct, probablement via les liens UTM de mes CV, et 17 % par recherche organique. Depuis la traduction du site en français en juillet 2026, la France est passée de 6 % à 20 % du trafic. Les États-Unis restent autour de 50 %.