Hello à tous,
Bienvenue dans cette 83ᵉ édition ! Avec le début de l’été, la dernière édition remonte à 4 semaines et difficile de jongler avec les demandes d’intégration de l’IA dans les process opérationnelles. On travaille avec de super boites (Doctolib, Ledger, InfraVia, Newfund, ..) et pour les mettre en valeur, on a refait notre site. Une occasion de vous partager notre méthode pour le faire avec l’IA. C’est le sujet de cette édition.
Vous pouvez cliquer sur le ❤️ au-dessus ou en fin de newsletter si vous appréciez le contenu, ça m’aide beaucoup ! 🙏
Voici le sommaire de la semaine :
💼 Créer et déployer son site web avec Claude (Design, Code)
🗞️ 3 actus importantes : Anthropic, OpenAI et les revenus du marché de l’IA
📝 Loop Engineering, kesako ?
⏳ Temps de lecture : 12 min
Me retrouver ailleurs :
🧑💻 Mes réseaux : Linkedin, Youtube
📞 Des besoins en IA : Prendre RDV
Ces dernières années, je passais toujours par Webflow pour avoir un site propre. Un template acheté avec quelques ajustements faisait l’affaire, mais une vraie dépendance → chaque modification passait par l’interface, chaque nouvelle section demandait de bidouiller...
L’outil est puissant mais reste technique avec des notions indispensables en frontend.
Le mois dernier, on a refait notre site web à 100% avec Claude Design et Claude Code. Site custom, CMS open source, édition en langage naturel, déployé sur Vercel en 1 clic.
Je vous partage tout le process, étape par étape, pour que vous puissiez reproduire tout ça.
Webflow / Wordpress & co sont de très bons outils, mais on paie un abonnement pour un site construit sur un template, avec des limites de personnalisation et une friction à chaque édition.
Avec l’arrivée de Claude Design et la maturité de Claude Code, l’équation a changé. On peut désormais :
créer un site 100% custom, aligné sur sa charte, sans partir d’un template
éditer le contenu en langage naturel (”ajoute un cas client dans la section références sur la base du document en pièce jointe”)
mettre en place des routines Claude qui publient du contenu régulièrement sur le site
Pour commencer, on a fait un 1er jet sur Claude Design pour générer les maquettes et itérer visuellement sur chaque section. Vous pouvez choisir l’option “prototype” et directement partager votre demande, y inclure des screenshots de sites concurrents ou d’inspiration. Je vous conseille de jeter un oeil à Dribbble pour avoir des idées.
Comme vous le voyez sur le screenshot, dans mon cas, j’avais déjà crée un design.md. Un fichier qui permet de générer des visuels en suivant ma charte graphique (police, couleur, …).
J’avais mentionné dans cette newsletter comment créer son design.md en quelques minutes. Je vous invite à y jeter un oeil.
Une fois que j’ai cette 1ère version que je peux déjà éditer sur Claude Design dans le fond et la forme, je vais pouvoir basculer sur Claude Code pour l’avoir en local sur mon ordinateur et tester toutes les sections.
Rien de plus simple, il suffit de partage le résultat à Claude Code :
Cela permet de transformer les maquettes en vrai code, gérer les modifications et aller plus loin. L’idéal est de basculer sur un IDE comme VS Code mais vous pouvez rester sur Claude Code Web.
À ce moment là, vous aurez en local sur un dossier “Site Web” tout le code généré par Claude Design. Vous aurez alors 2 options :
Continuer avec la même logique pour les autres pages de votre site
Rester dans Claude Code pour développer les autres pages avec la base que vous avez
De mon côté, j’ai une préférence pour repartir depuis Claude Design à minima pour faire des sections dédiées que je n’ai pas encore.
La qualité est largement meilleure sur Claude Design que sur Claude Code même en utilisant des skills (j’explique cette partie plus bas). Ici par exemple la section “approche sectorielle” que j’ai fait de manière isolé :
Conseil pour économiser vos crédits → utilisez le panneau de tweaks de Claude Design. Il génère des sliders et des palettes que vous manipulez en temps réel (couleurs, typos, espacements) sans envoyer de nouveaux prompts. Chaque aller-retour évité, c’est des tokens non utilisés ;)
Quand vous avez basculé sur Claude Code, vous avez la main pour itérer. À partir de ce moment là, voici plusieurs étapes à suivre pour arriver à un résultat final satisfaisant.
1️⃣ Utiliser un claude.md (et le faire vivre)
Avant de générer quoi que ce soit, on a créé un fichier claude.md. C’est le document que Claude lit systématiquement avant chaque action. Pensez-y comme le brief permanent du projet.
Dedans, on a mis :
le contexte entreprise : qui est Tandem, notre positionnement, notre audience
l’arborescence du site : pages, sections, navigation
les règles du projet : toujours tester en local avant de pousser sur GitHub, invoquer le skill de design avant d’écrire du code front
Ce fichier évolue en permanence. Au fil du projet, vous y ajoutez vos préférences et vos corrections récurrentes pour ne pas les répéter à chaque prompt.
Un aperçu de notre claude.md ici :
Ajoutez un fichier voice.md avec votre ton, votre style et quelques exemples de textes. J'en parlais déjà dans mon édition sur Claude Cowork, le principe est identique. Sans lui, Claude écrit un copywriting générique. Avec, les textes du site sonnent comme vous dès la première version.
2️⃣ Les skills : le garde-fou design
Le skill frontend-design, dispo directement chez Anthropic vous aide à ajouter un peu d’épaisseur à votre site. Avec, les rendus sont plus modernes et professionnels, même avec un prompt minimal.
Tous les modèles ont été entraînés sur les mêmes templates SaaS. Sans garde-fou, on retrouve les mêmes tics sur chaque projet : la police Inter partout, les dégradés violet-bleu, les cards imbriquées dans des cards. Vous les avez forcément déjà vus sur des dizaines de landing pages
Pour aller plus loin, je vous invite à creuser Impeccable que j’ai pas mal utilisé.
Les skills que je viens de partager, c’est de la connaissance design injectée dans le code. C’est ce qui fait la différence, entre un proto vibecodé et un site qu’on peut montrer à un client.
3️⃣ La boucle de captures d’écran
Plus bas, je parle du concept de “loop”. Pour permettre à Claude d’itérer, vous pouvez lui demander de prendre lui-même des captures d’écran de ce qu’il construit (via Puppeteer, il installe tout seul), de les analyser, et de corriger : padding, margin, alignements, contrastes.
Au lieu de jouer au correcteur à chaque itération, vous récupérez une version déjà propre.
⚠️ Attention avec les éléments animés. Ce n’est pas pris en compte dans le screenshot
4️⃣ S’inspirer de sections existantes
Pas besoin de tout inventer. Des sites comme 21st.dev regorgent de composants : backgrounds animés, boutons, heros, effets de scroll.
La logique est simple → vous repérez un composant qui vous plaît, vous copiez son code ou son prompt, et vous demandez à Claude de l’intégrer dans votre site en l’adaptant à votre charte. En quelques minutes, vous avez un élément dynamique qui aurait demandé des heures à un dev.
Un exemple ici pour une section de comparaison :
C’est LE point sous-estimé. Claude est puissant, mais si vous ne savez pas nommer ce que vous voulez, vous allez multiplier les allers-retours.
Un site web a un vocabulaire précis : le hero (la première section visible avec le titre principal), le CTA (le bouton d’action), le padding et la margin (les espacements),..
La différence est concrète. Dire “le CTA du hero manque de contraste, augmente le padding vertical de la section” produit un résultat en 1 itération VS “c’est pas top en haut”..
Pas besoin d’être développeur, mais quelques heures à comprendre ce champ lexical vous feront gagner des dizaines d’allers-retours.
Point important → réfléchissez à votre arborescence AVANT de générer. Quelles pages, quelles sections par page, quel parcours utilisateur. Claude exécute très bien, il ne pense pas votre site à votre place
Sur un site, certaines pages sont uniques (accueil, contact) et d’autres se répètent avec le même format : les articles de blog, les cas clients. Si tout est codé “en dur”, chaque nouvel article demande de repasser par Claude Code. Pas viable au quotidien.
C’est le rôle d’un CMS : le contenu vit séparément du code. Vous créez un template une fois (la mise en page d’un article), chaque nouveau contenu vient s’y afficher automatiquement.
De notre côté, on est parti sur Sanity, un CMS headless avec un back-office visuel. L'équipe marketing crée et édite les articles sans toucher au code, comme sur Webflow, sans payer l'abonnement.
Et comme le contenu est structuré, on peut brancher Claude dessus. Deux usages concrets :
l’édition en langage naturel : “ajoute cette référence client dans le CMS avec ce titre et ce résumé”, et c’est publié
les routines de contenu : des tâches programmées sur Claude qui génèrent et ajoutent du contenu régulièrement sur le site (articles de veille, mises à jour de pages)
Si votre site est un simple site vitrine de 4-5 pages fixes, sans publication régulière, vous pouvez très bien vous passer d’un CMS. Inutile de complexifier
À ce stade, votre site tourne en localhost, il n’existe que sur votre machine. Si vous envoyez l’URL à quelqu’un, il ne verra rien. Pour le rendre accessible, il faut 2 briques, toutes les deux gratuites.
GitHub, pour stocker tous vos fichiers en ligne avec l’historique complet des versions, chaque modification est tracée et réversible.
Vercel, c’est la vitrine. Il prend le code stocké sur GitHub et le transforme en site accessible sur le web.
Voici les étapes à suivre :
Créez un compte sur GitHub, puis demandez simplement à Claude Code : “crée un repository et pousses-y le code du site”. Il vous demandera de vous authentifier une fois, puis il gère tout. Cela permettra de synchroniser Github et vos fichiers locaux.
Créez un compte sur Vercel en vous connectant avec votre compte GitHub (ça simplifie tout).
Sur Vercel, créez un projet pour importer votre repo Github, puis déployer. 60 secondes plus tard, votre site est en ligne sur une URL du type monsite.vercel.app.
Pour votre propre nom de domaine (wearetandem.ai dans notre cas), direction les settings du projet, onglet Domains. Vercel vous guide pas à pas pour la configuration.
Un aperçu de quelques pages, je vous invite à regarder le site entier ici.
Dès que c’est fait, quand vous dites à Claude Code “pousse les changements sur GitHub”, Vercel détecte la mise à jour et déploie la nouvelle version en 30 secondes. Une fois configuré, vous n’y touchez plus.
Ici, voici l’historique des push github vers Vercel :
Trois points de friction qu’on a rencontrés :
1️⃣ Les micro-modifications → l’édition conversationnelle est géniale pour créer, mais frustrante pour corriger une coquille. Changer deux mots de copywriting peut demander de prompter, attendre la boucle, vérifier, pousser. Là où un CMS classique, c’est 10 secondes. C’est exactement pour ça qu’on a mis Sanity sur la partie contenu : le structurel passe par Claude, l’éditorial passe par le back-office.
2️⃣ Les patterns répétitifs sur Claude Design. En enchaînant les générations, on retrouve des structures similaires (mêmes layouts, mêmes effets). D’où l’importance des inspirations externes type 21st.dev pour casser ces automatismes.
3️⃣ La connaissance web nécessaire. On ne le répétera jamais assez : l’outil ne remplace pas la compréhension. Arborescence, logique de sections, mots-clés SEO, hiérarchie de l’information, tout ça reste du travail.
En 2014, j’apprenais à coder du front : HTML, CSS, JavaScript, et je refaisais des sites intégralement avec Bootstrap. Des semaines de travail pour un résultat correct.
Douze ans plus tard, la création d’un site web avancé n’a jamais été aussi simple. En quelques jours, avec Claude + Github + Vercel, on peut avoir un résultat supérieur à la majorité des sites sur le web.
Le bilan dépend surtout de votre profil :
Vous avez une bonne culture tech : foncez, c’est un accélérateur énorme et vous gardez le contrôle total.
Vous partez de zéro avec des attentes standards, l’IA fait 80% du travail, le résultat sera très correct pour un site vitrine. C’est là que le potentiel est le plus fou.
Vous êtes entre les deux, avec des exigences précises mais sans les mots pour les exprimer : il faudra être patient, ce sera du ping-pong avec l’outil.
Au début, ne soyez pas trop ambitieux et commencez par 1 landing page, pas le site complet. Posez votre claude.md, activez le skill frontend design (ou Impeccable), et prenez le réflexe de la boucle screenshot. Vous comprendrez vite le potentiel.
Depuis la dernière édition, beaucoup de nouveautés chez Anthropic, avec plusieurs annonces :
Claude Tag : Claude devient un membre d’équipe sur Slack. On le tague (@Claude) dans un canal, on lui délègue une tâche, et il travaille en asynchrone pendant qu’on fait autre chose. Il mémorise le contexte des canaux, planifie des tâches futures et peut prendre des initiatives.
Claude Sonnet 5 : le nouveau modèle intermédiaire s’approche des performances d’Opus 4.8 (raisonnement, usage d’outils, code) pour un prix bien inférieur : 2 $/million de tokens en entrée et 10 $/million en sortie jusqu’au 31 août. C’est le modèle par défaut des plans Free et Pro.
Fable 5 et Mythos 5 de retour : après 3 semaines de suspension liée à des contrôles à l’export imposés par le gouvernement américain (suite à un contournement des garde-fous cyber découvert par des chercheurs d’Amazon), l’accès est rétabli depuis le 1er juillet. Anthropic en profite pour lancer, avec Amazon, Microsoft et Google, un cadre commun d’évaluation des “jailbreaks” de modèles IA.
Côté outils : Claude Code sur desktop intègre désormais un navigateur sandboxé, permettant à Claude de consulter des docs, cliquer et interagir avec des sites comme il le fait avec un serveur local.
→ Intéressant ici avec la résolution d’un bug en prod.
L’épisode Fable 5 montre aussi que la régulation des modèles les plus capables devient un vrai sujet géopolitique → un gouvernement peut suspendre l’accès à un modèle du jour au lendemain.
👉 Claude Tag / Claude Sonnet 5 / Fable 5 et Mythos 5
OpenAI déploie GPT-5.6 avec trois modèles : Sol (le modèle phare), Terra (l’équilibré) et Luna (l’économique). Le positionnement est clair : plus d’intelligence par token et de meilleures performances par dollar, en visant directement Claude Fable 5 d’Anthropic.
Les tarifs sont agressifs avec Sol à 5 $ / 30 $ par million de tokens en entrée/sortie, contre 10 $ / 50 $ pour Claude Fable. (On en parle plus bas)
On retrouve un nouveau mode “ultra”, plusieurs agents coordonnés en parallèle pour accélérer les tâches complexes.
Point intéressant sur le design d’interfaces et les livrables professionnels (présentations, documents, modèles financiers), avec un meilleur respect des formats de référence. Exemple ici pour des slides :
Exemple ici pour un site web :
La guerre des modèles se joue aussi sur le coût par tâche accomplie, plus que sur les benchmarks bruts. Cette pression sur les prix est une bonne nouvelle quand on pense à l’explosion du prix des tokens (et notre dépendance). L’intelligence des modèles avancées devient plus abordable, et le choix du modèle est un vrai arbitrage économique selon les cas d’usage.
👉 Annonce OpenAI / Review complète de Matthew Berman
OpenAI présente GPT-Live, une nouvelle génération de modèles vocaux qui alimente ChatGPT Voix, utilisé par plus de 150 millions de personnes chaque semaine. Je vous invite à voir la vidéo plus bas, le point important est la rupture architecturale.
Le modèle est “full-duplex”, il écoute et parle simultanément, comme dans une vraie conversation.
Il peut être interrompu, marquer son attention (”mmh”, “compris”), ou rester silencieux quand vous réfléchissez
Pour les questions complexes, il délègue en arrière-plan à GPT-5.5 (recherche web, raisonnement) tout en continuant la conversation
Après les agents vocaux évoqués dans nos précédentes éditions, GPT-Live confirme que la voix devient une interface sérieuse. La combinaison conversation naturelle + délégation à un modèle puissant en arrière-plan ouvre la voie à des agents vocaux capables de traiter de vraies tâches (support client, prise de rendez-vous, hotline), et non plus seulement de répondre à des questions simples.
Exponential View a publié le premier chiffrage “bottom-up” et dédupliqué de l’économie de l’IA générative, côté demande. Un travail pour répondre à la question : les revenus de l’IA sont-ils réels ?
Les points clés :
110 milliards de dollars de revenus générés sur les 12 derniers mois, avec un rythme annualisé qui dépasse déjà 175 milliards
Une croissance environ 3 fois plus rapide que les vagues précédentes de l’Internet ou du mobile
Les revenus attribuables aux hyperscalers (Amazon, Google, Microsoft) couvrent tout juste la dépréciation des infrastructures IA construites
La baisse des prix dope la demande → chaque baisse de 10 % du prix des tokens entraîne 12 à 18 % de consommation en plus, donc une dépense totale qui continue d’augmenter
Les revenus de l’IA sont bien réels et croissent plus vite que toutes les vagues technologiques précédentes. Les entreprises sont sorties de la phase des pilotes, mais restent au début du passage à l’échelle : c’est maintenant que l’écart se creuse entre celles qui structurent leur adoption et les autres.
Tout le monde parle de “loops” dans l’utilisation des modèles d’IA, il était temps de faire une explication complète ici.
Le point de départ, c’est cette phrase de Boris Cherny, le créateur de Claude Code : “My job is to write loops.”
Il ne prompte plus ses agents. Il écrit des boucles qui les promptent à sa place.
Concrètement, quand vous utilisez l’IA, vous répondez à deux questions à chaque session : qu’est-ce qui déclenche le travail, et qu’est-ce qui décide qu’il est terminé.
Une boucle, c’est un système qui répond à ces deux questions sans vous.
Il en existe 4 types, chacun pour un usage différent (schéma ci-dessous) :
1️⃣ Turn-based → vous promptez, l’agent exécute, vous relisez. À garder quand le besoin est encore flou et que chaque résultat change la demande suivante.
2️⃣ Goal-based (commande /goal). Vous fixez un critère de succès, un évaluateur vérifie, et renvoie l’agent au travail quand ce n’est pas atteint. Idéal quand le résultat est mesurable
3️⃣ Time-based (commande /loop ou /schedule) : un déclencheur horaire relance la même tâche, même ordi fermé.
4️⃣ Proactive : un événement déclenche la boucle, sans humain présent. L’agent trie, traite, et un second agent vérifie le travail avant de clore.
2 réflexes pour exploiter les loops :
➡️ Ne construisez une boucle que si la tâche revient chaque semaine. Pour du one-shot, inutile de sur-intellectualisé..
➡️ Définissez “terminé” par un critère objectif (un test qui passe, un livrable validé), jamais par le jugement de l’agent. Un agent qui note son propre travail, ça ne marche pas.
Un exemple avec du SEO loop où l’agent scanne les positions, identifie les pages qui décrochent et fait la mise à jour des contenu.
D’avoir lu cette édition jusqu’au bout.
Si ça vous a plu, pensez à cliquer sur le ❤️ juste en dessous et partagez votre point de vue en commentaire👇🏼
Vous pouvez aussi partager la newsletter à votre entourage (ça me booste beaucoup 🙏) et gagner des cadeaux 🎁
1 parrainage = 1 hack personnalisé
3 parrainages = +400 outils IA triés par thématique et vertical métier
5 parrainages = 30 min de coaching sur votre problématique
À très vite !
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.