Stratège, designer, développeur, architecte IA et enseignant. Une seule personne, cinq regards sur chaque projet.
Promenez le cadre sur la page : dessous, la même page vue par un autre métier.Faites défiler : la bande montre la page vue par un autre métier.
30projets, de la marque à l’IA
8établissements où j’enseigne
350–500étudiants par an (estimation 2026)
2applications publiées sur l’App Store
Positionnement · marque personnelle
ThomasGayraudUn nom, pas un logo : on retient une personne.
Stratège, designer, développeur, architecte IA et enseignant. Une seule personne, cinq regards sur chaque projet.
Promesse : une seule personne tient les cinq bouts d'un projet.
Pour : écoles, partenaires, pairs, étudiants, jurys. Ce site ne vend rien : il montre.
Ce que j'ai refusé
Vendre sur ce site.
Un logo à décoder à la place d'un nom.
Des chiffres sans source.
Une IA là où un algorithme suffit.
Faire défiler un récit à la place du visiteur.
30 ✓preuve : les fiches de ce site
8 ✓preuve : Université de Lorraine, IAE Metz, MyDigitalSchool, Pigier, WIN Sport School, ESNA, CCI Formation, etc.
350–500 ✓preuve : Estimation 2026, toutes promotions confondues
2 ✓preuve : Makers Campus et Sentier, liens sur leurs fiches
Grille 12 colonnes · gouttière 24 px · ligne de base 12 px
ThomasGayraudRecursive · mesuré à l'ouverture
Stratège, designer, développeur, architecte IA et enseignant. Une seule personne, cinq regards sur chaque projet.signes par ligne
Contraste encre / papier : mesuré à l'ouverture
4:5 · point focal : le regard, au tiers haut
30chiffres tabulaires
8alignés sur la ligne de base
350–500tiret demi-cadratin entre deux nombres
2corps mesuré à l'ouverture
// src/app/page.tsxextrait réel
ThomasGayraud
<Scene base="thomas" loupe="ia" vues={VUES} adresse><Calque vue="code" gabarit="heros">…</Calque></Scene>// Six calques, les mêmes zones : le cadre découpe celui du regard choisi.
// Une phrase, aucun superlatif, aucun chiffre sans source.
// photo réelle, jamais générée :
// le regard IA la démasquerait
export const CHIFFRES = { projets: 30, etablissements: 8, etudiantsParAn: "350–500", appsAppStore: 2 } as const;
// chaque valeur porte sa source dans src/content/
Stratège, designer, développeur, architecte IA et enseignant. Une seule personne, cinq regards sur chaque projet.
Cinq compétences reliées à 30 projets dans le graphe du site : c'est ce que les assistants citent.
Les données de la page disent qui je suis, ce que je fais et pour qui : sans elles, une machine devine.
visage
Ce que la page dit aux machines« Thomas Gayraud, assis sur un tabouret dans un studio aux murs terracotta, chemise blanche et lunettes rondes. »
Thomas corrigeCe que la photo ne dit pas : je cadre, je dessine, je code, j’outille avec l’IA et je transmets.
30CreativeWork reliés à #thomas
7EducationalOrganization : la machine en lit 7 sur 8
350–500chiffre daté et sourcé : citable
2liens vérifiables vers l'App Store
Leçon : se présenter en dix secondes
ThomasGayraud1Qui ? Un nom, en grand. Pas de logo à décoder.
Stratège, designer, développeur, architecte IA et enseignant. Une seule personne, cinq regards sur chaque projet.
2Quoi ? Une phrase, sans adjectif inutile.
3Une invitation à explorer, pas à acheter.
4Un vrai visage, au travail si possible.
305 Des preuves…
8… avec leurs sources.
À vous : écrivez votre phrase en vingt mots, sans « passionné » ni « expert ».
Le sixième regard · les cinq encres ensemble
Je construis pour qu’on puisse se passer de moi.
La seule phrase du site qui dit pourquoi.
Le Coffre aux Souvenirsla gérante met son site à jour seule, en parlant à son assistant
Le workshopdes étudiants en marketing codent en pilotant un agent IA
Honey24 étudiants, des maquettes à la mise en ligne
Makers Campuschaque promotion a son espace, avec un seul compte
IA · ce que lit une machine
Regard affiché : Thomas. Dans le cadre : IA.Promenez le cadre, choisissez un regard (1 à 6), déployez-le (Entrée). Maintenez ⇧ pour le prisme.La bande change de regard : balayez-la pour en changer, appuyez longuement pour le prisme.
L'index vivant
Huit projets, cinq regards
Chaque projet avec son empreinte : le poids de chaque métier. Le cadre devient une règle de lecture, et chaque ligne change de sens selon le regard.
Un dossier, cinq regards · Le Coffre aux Souvenirs
Les vrais artefacts, pas des captures
Le code réel du connecteur, le mode d'emploi que lit l'agent, la voix de marque donnée à l'IA. Chaque dossier s'ouvre sur son regard dominant.
Dossier · Client · 2026
Le Coffre aux Souvenirs
Le site d’une brocante salon de thé, son back-office, et un connecteur qui permet à la gérante de mettre son site à jour en parlant à son assistant IA.
Design, développement et architecture IA En ligne depuis juin 2026, connecteur IA depuis octobre 2026
13outils pour son assistant IA
10écrans de back-office
244tests : 210 unitaires, 34 de bout en bout
10pages de guide de prise en main
Le problème avant la solution
Le Coffre aux Souvenirs
Le vrai utilisateur du site, c’est la gérante. Si elle ne peut pas le tenir seule, le site s’arrête.
Avant : un site WordPress réalisé avec IN’pact Agency. Après : un site sur mesure qu’elle met à jour seule, puis en parlant à son assistant.
Choix : Le connecteur passe par ses identifiants du back-office, rien de plus.
Ce que j'ai refusé
Un outil de plus à apprendre.
Un agent qui a plus de droits qu’elle.
Publier sans qu’elle le demande.
13 ✓preuve : serveur MCP du projet, octobre 2026
10 ✓preuve : dépôt du projet, octobre 2026
244 ✓preuve : dépôt du projet, octobre 2026
10 ✓preuve : guide remis à la gérante
Ce que le projet donne à voir · titre mesuré à l'ouverture
Le Coffre aux Souvenirs
Le ton de marque est donné à l’IA, pas seulement aux humains.
« Ton du site : tutoiement, chaleureux, un peu espiègle ; emojis rares. Écris comme la gérante parlerait à ses clients. »
Menu du salon de thé, évènements, blog, objets à la vente, presse, contact : dix écrans, une seule grammaire.
16:10 · mesuré à l'ouverture
13chiffres tabulaires
10alignés sur la ligne de base
244corps mesuré à l'ouverture
10une encre par regard, jamais seule
// apps/mcp/src/mcp/serveur.tsextrait réel
Le Coffre aux Souvenirs
// architecture
→ Site public : Next.js
→ Back-office : React (Vite)
→ API Hono, données PocketBase
→ Connecteur MCP : 13 outils
// SANS ÉTAT : l'autorisation est rejugée à chaque POST// (un jeton révoqué mord tout de suite).constserveur = newMcpServer(IDENTITE_SERVEUR, {
capabilities: { tools: {} },
instructions: INSTRUCTIONS_SERVEUR,
});
// Le serveur ne garde rien entre deux requêtes : un accès retiré l’est immédiatement.
{ outils: 13, ecrans: 10, tests: 244, pages: 10 }
Le mode d’emploi que lit l’agent
Le Coffre aux Souvenirs
Décrire les contenus avant toute première écriture.
Vérifier l’existant avant de créer : pas de doublon.
Évènements et articles créés en brouillon : publier seulement si elle le demande.
Une suppression est définitive : montrer l’élément, attendre un « oui » explicite.
La gérante met son site à jour en parlant à son assistant IA.
Décrivez votre projet en une phrase : vous recevez les cinq regards, selon mes règles. Rien n'est enregistré, et aucun formulaire de contact ne se cache derrière.
Exemple · votre projetUne boulangerie de village qui veut vendre ses brioches en ligne.
StratégieLe vrai problème : les clients du dimanche devant une vitrine vide. Réserver la veille. Indicateur : la part des fournées vendues avant l'ouverture.
DesignMontrer d'abord l'heure limite de commande et la photo du jour. Contrainte : tout se lit d'une main, sur un téléphone.
CodeEn deux jours : une page, trois produits, un formulaire de réservation, un e-mail au boulanger. Pas de paiement en ligne au début.
IAIci, un algorithme suffit : une liste de réservations. Plus tard, peut-être, prévoir les fournées à partir de l'historique.
TransmettreÀ la fin, le boulanger change seul ses produits et ses horaires, depuis son téléphone.
Cinq regards selon les règles de Thomas Gayraud · exemple rédigé à la main
