Retour au portfolio
Lifedesigner — orbe lumineux flottant au-dessus d'une table, atmosphère cinéma
Issue #042026

Concept studio · IA MCP-native

Lifedesigner.

Un life designer voice-first qui vit dans ton IA existante — pas dans une nouvelle fenêtre de chat.

Statut
Live · Open-source · 48h de build
Année
2026
Catégorie
Concept studio · IA MCP-native

Le pitch

04 chapters

Et si ton IA ne vivait pas dans une fenêtre de chat ? Aujourd'hui les produits IA se ressemblent tous : un input texte, une sidebar, un bouton flottant qui ouvre encore une conversation. Pour avoir de l'aide sur ta vie, il faut aller vers l'IA — ouvrir l'app, formuler le prompt, ré-expliquer ton contexte à chaque fois.

Je voulais l'inverse : une IA qui vit là où tu es déjà, qui sait ce qu'il y a sur ton agenda, et qui agit dans ta semaine avant même que tu demandes. Pas un coach productivité, pas un habit tracker. Plus proche d'un ami qui aurait accès à ton journal.

La bonne surface pour un agent de design de vie, ce n'est pas une nouvelle app — c'est l'agent à l'intérieur de l'app que tu utilises déjà.

Tout le site tourne autour d'une persona : Maria, 31 ans, product designer à Brooklyn qui a perdu ses runs du samedi matin après un déménagement. La page raconte ses trois mois avec le designer : ce qu'il lit (Gmail, Calendar, Strava), ce qu'il demande (« imagine ton samedi matin idéal »), ce qu'il écrit (un programme de 12 semaines de micro-habitudes), ce qui change (elle court 10 km le samedi de la semaine 12, sans rien forcer d'autre).

MCP est ce qui rend ça possible. La bonne surface pour un agent de design de vie, ce n'est pas une nouvelle app — c'est l'agent à l'intérieur de l'app que tu utilises déjà. Lifedesigner se branche sur Claude, ChatGPT, Open Web UI ou Cursor via un seul endpoint MCP.

La stack

Front

Next.js 14 (App Router)TypeScript strictCSS Modules

Graphique & voix

WebGL 1 (raw, no Three.js)Web Audio APIWeb Speech API

IA & outils

Claude DesignClaude CodeMCPEdge runtime · OG images

Création

04 steps

Comment je l'ai construit en 48 heures.

Designé dans Claude Design en un après-midi. Le hero, le concept de l'orbe, le rythme des sections, le copy initial. Étonnamment fort pour le travail éditorial et atmosphérique.

Buildé dans Claude Code en ~48 heures. Scaffold du projet Next.js, shaders WebGL, composants React, i18n, déploiement.

Quatre orbes partagent un seul fragment shader d'environ 80 lignes — hero, mini-orbe dans l'input YourTurn, orbe collante en bas à droite qui suit le scroll, footer. Du bruit FBM warpé donne le corps tournant des couleurs. Premultiplied alpha pour fixer le bug de compositing iOS Safari.

Pas de Three.js, pas de Tailwind, pas de UI library, pas de next-intl. Le claim du projet est minimal, donc les dépendances le sont aussi. Bilingue EN/FR avec un i18n custom de ~5 KB.

Liens

Lifedesigner