Comment créer un site web animé avec Claude Code en une soirée

Pour en savoir plus sur le travail avec les modèles, consultez la documentation Ailoot.

Pourquoi reconnaît-on dès le premier écran qu’un site a été créé par une IA ?#

Vous demandez à un agent de monter une page d’atterrissage. Quarante minutes plus tard, vous avez un site fonctionnel : les sections sont en place, la mise en page s’adapte à l’écran et les boutons fonctionnent. Et presque aussitôt, vous avez l’impression de l’avoir déjà vu quelque part.

La raison est mécanique. Le modèle a été entraîné sur un vaste ensemble de pages terminées, et cet ensemble était fortement biaisé.

Des milliers de tutoriels et de modèles de départ ont repris cette couleur, faussant l’échantillon, et le modèle a appris que les boutons sont violets. Le même mécanisme s’applique aux polices, aux coins arrondis et aux ombres.

Entre-temps, le « style IA » a changé. Dans la documentation de sa compétence frontend-design, Anthropic décrit aujourd’hui d’autres styles.

Le problème fondamental : le slop apparaît lorsqu’il n’y a rien de précis à copier et que le modèle fait simplement la moyenne de tous les styles du web.

Ici, le « slop » désigne un travail généré par une machine, ramené à un résultat générique sans style distinctif.

En pratique, l’agent a besoin d’une grammaire de design restreinte plutôt que d’une tâche ouverte. Si vous dites « rends-le beau », il fait la moyenne. Si vous lui donnez une palette précise, quelques polices et un élément visuel distinctif, il construit à partir de ces choix.

Le mouvement est le signal le plus visible dans ce tableau. Même une page statique à la typographie parfaite ressemble encore à un modèle, parce que les sites vivants respirent : des éléments apparaissent pendant le défilement, le curseur déclenche des réactions et les transitions entre les écrans ne s’interrompent pas brutalement.

De quoi avez-vous besoin pour créer un site web animé avec Claude Code ?#

Passons les outils en revue un par un, car les tarifs prêtent à confusion.

GSAP est la bibliothèque d’animation qui se trouve derrière une part notable des sites web primés. Webflow l’a achetée en octobre 2024, et les rumeurs selon lesquelles tout était devenu gratuit ont commencé presque immédiatement. Ce n’est pas tout à fait exact : à l’époque, Webflow avait confirmé que les tarifs existants resteraient en vigueur. La bibliothèque est devenue gratuite fin avril 2025, avec la version 3.13.

La version 3.13 indique précisément que les extensions auparavant payantes, comme SplitText et MorphSVG, sont également devenues gratuites, y compris pour un usage commercial. La version actuelle en juillet 2026 est gsap@3.15.0.

Gratuit ne signifie toutefois pas open source. La licence reste propriétaire et interdit de créer avec GSAP un éditeur visuel d’animations concurrent de Webflow. Il n’y a aucune restriction pour les sites web, les projets clients ou les travaux commerciaux.

La compétence frontend-design d’Anthropic est un ensemble de consignes qui modifie la façon dont l’agent travaille sur une interface. La description de son dépôt indique :

La méthode se déroule en deux étapes. D’abord, l’agent met au point un système de tokens : quatre à six couleurs nommées, des polices pour au moins deux rôles, un schéma de mise en page sous forme d’esquisses textuelles et un élément visuel distinctif pour la page. Ensuite, il critique son propre plan au regard de la tâche. Ce n’est qu’après cela qu’il écrit le code.

La publication parle de 75 compétences, la description du dépôt en répertorie 78 et l’arborescence des fichiers en compte 91 aujourd’hui. L’auteur le dit ouvertement : vérifiez le dépôt à l’aide d’une commande de recherche, car sa description n’est pas à jour.

Comment empêcher Claude Code de produire des modèles génériques ?#

Commençons par le fichier de règles, car il s’applique à chaque requête et ne coûte rien.

Un point de départ utile est un bloc de garde-fous anti-modèles. Le principe est simple : répertorier les choix précis vers lesquels le modèle tend par défaut et les interdire explicitement.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

Le bloc est volontairement écrit en anglais : le modèle suit les consignes techniques courtes plus précisément dans la langue de la documentation.

La ligne sur l’animation figure dans la liste des interdictions avec celles sur les couleurs et les ombres pour une raison. L’opacité sur le premier écran nuit directement à la mesure de vitesse, comme nous le verrons plus loin.

Ensuite, la compétence. Les compétences officielles d’Anthropic peuvent être installées au moyen du plugin :

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

À noter : les compétences de design ne peuvent pas être installées individuellement ; le plugin example-skills les installe toutes les douze d’un coup. Si vous n’en voulez qu’une, copiez le dossier manuellement : Claude Code le détectera sans redémarrer la session :

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

D’autres compétences de cette collection peuvent être utiles : theme-factory, qui propose dix thèmes prêts à l’emploi et exige une confirmation humaine avant de les appliquer ; web-artifacts-builder, pour créer avec React à l’aide de composants prêts à l’emploi ; et algorithmic-art, pour les graphismes génératifs. Un article distinct explique en détail comment choisir des compétences pour une tâche : comment choisir des compétences pour Claude Code.

Les règles et la compétence se complètent : les règles interdisent les mauvais choix et la compétence impose une méthode — système d’abord, critique ensuite, code en dernier.

Tout ce qui compte ici se joue avant la requête. Vous ajoutez à l’avance dans son contexte les contraintes que l’agent devra respecter, et la formulation de la consigne elle-même importe à peine. Cette approche s’appelle l’ingénierie du contexte, et le fichier CLAUDE.md en est la première brique. La combinaison clone IA + second cerveau + ingénierie du contexte aide à transformer Claude, d’un générateur de résultats moyens, en un outil fidèle à votre style.

Où trouver des directions visuelles et des consignes d’animation prêtes à l’emploi ?#

Voici les techniques de mouvement qu’elle propose : animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Si vous ne programmez pas, les directions visuelles prêtes à l’emploi sont plus importantes pour vous. Au lieu de la vague consigne « fais quelque chose de moderne », choisissez-en une et donnez au modèle la grammaire restreinte qui lui manquait :

• clean-minimal-beige-light-mode - minimalisme beige clair
• dark-glass-clean-layout - verre sombre
• documentary-brutalist-agency - style documentaire brutaliste
• editorial-portfolio-chapters - portfolio divisé en chapitres, comme un magazine
• orange-clean-paper-saas - site de service au style papier avec un accent orange
• solar-duotone-bold - traitement bicolore audacieux
• tech-green-dark-mode-modern - style tech sombre avec du vert
• light-mode-paper-technical - papier technique clair

Il existe aussi des compétences techniques pour les graphismes et effets 3D : threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Le dépôt ne propose pas de commande d’installation : l’auteur indique clairement dans la feuille de route qu’il en ajoutera une une fois la méthode d’intégration choisie. Pour Claude Code, la seule consigne est :

Une option d’installation est présentée ci-dessous. Cette commande ne figure pas dans le dépôt ; il s’agit d’une recommandation d’installation :

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Quelques mots sur les bibliothèques de consignes payantes, puisque la question revient souvent. Le service motionsites.ai vend un ensemble de consignes prêtes à l’emploi pour des sections : en juillet 2026, il coûte 239 dollars par an, ou 349 dollars au tarif promotionnel en paiement unique au lieu de 759 dollars, sans formule mensuelle. L’auteur n’est pas indiqué et il n’y a pas de page « À propos ». Il existe aussi un site presque homonyme, au singulier, et la compatibilité avec Claude Code n’est mentionnée que sur ce site. Je ne recommande pas cet achat, mais il est utile de connaître cette option.

Comment fournir en une ligne une documentation GSAP à jour à un agent ?#

Un problème courant avec les bibliothèques d’animation est que l’agent se souvient d’une ancienne façon de les connecter. Il importe un module depuis un ancien chemin, enregistre une extension comme on le faisait il y a deux ans, et le code ne fonctionne pas.

La solution consiste à ajouter vous-même la documentation au contexte. GSAP la fournit dans un format facile à exploiter par les machines :

https://gsap.com/llms.txt

Le fichier fait environ 25 kilo-octets à ce jour. Chaque page de documentation est également disponible en version Markdown : il suffit d’ajouter .md à l’URL.

En pratique, cela ressemble à ceci :

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

La bibliothèque Motion (anciennement Framer Motion) possède le même fichier, encore plus volumineux. Motion est distribuée sous licence MIT et reste véritablement open source ; sa version actuelle est motion@12.42.2. Si le projet utilise React et ne nécessite que des apparitions simples, vous pouvez choisir Motion ; pour des scènes de défilement complexes, utilisez GSAP avec l’extension ScrollTrigger.

Il existe aussi des options intégrées au navigateur qui n’utilisent pas de bibliothèque. Les transitions d’état d’une page via l’API View Transitions sont prises en charge par tous les navigateurs depuis le 14 octobre 2025, mais uniquement au sein d’une même page ; la version entre plusieurs pages n’est pas du tout prise en charge par Firefox. Les animations de défilement CSS ne sont pas encore prises en charge par tous les navigateurs : Chrome les accepte, Safari les a récemment adoptées, mais dans Firefox, il faut les activer manuellement dans les paramètres. Elles ne fonctionneront donc pas pour les lecteurs ordinaires. Demandez à l’agent de vérifier d’abord si le navigateur les prend en charge ; si ce n’est pas le cas, qu’il conserve la transition standard.

Comment transformer un site web qui vous plaît en consigne ?#

La façon la plus courante d’expliquer ce que vous voulez consiste à montrer un exemple. Avec un agent, cela ne fonctionne pas directement : il ne voit pas le site web, il voit du texte.

La compétence video-to-superprompt comble cet écart. La description de son dépôt : transformer une vidéo de référence en une consigne détaillée à reproduire ou dont s’inspirer. Elle analyse l’enregistrement par couches : narration, mise en page, mouvement, typographie, graphismes 3D. Le résultat est une consigne prête à l’emploi.

Sa règle principale est formulée avec insistance :

La deuxième compétence, html-to-interaction-prompts, travaille à partir du code source : elle repère tout ce qui bouge — réactions au curseur, graphismes 3D, effets de défilement, couches animées à des vitesses différentes — et décompose la page en consignes distinctes, une pour chaque section, bouton, état au survol ou effet. Son principe est de considérer le comportement du code source comme la vérité et de ne pas inventer d’effets à partir d’une capture d’écran lorsque le code est disponible.

La troisième, stitched-full-page-capture, résout un problème pratique. Une capture normale de la page entière de sites avec chargement différé et graphismes 3D est grise et vide, car la capture a lieu avant le rendu. La compétence fait défiler la page écran par écran, attend que tout soit stabilisé, puis assemble le résultat.

Il existe aussi une solution sans capture vidéo : connecter l’agent à une bibliothèque d’exemples d’interfaces en ligne au moyen de MCP. Le serveur officiel de Mobbin s’installe avec une seule commande :

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Ensuite, ouvrez une nouvelle session, sélectionnez le serveur dans la liste et connectez-vous dans le navigateur. L’agent accède alors à des captures d’écran d’applications réelles et fonctionnelles : plus de 621 500 écrans sont répertoriés. Il s’agit de captures de produits terminés, et non de composants ou de code. Attention : le serveur Mobbin ne fonctionne pas avec l’offre gratuite ; il est disponible dans les offres payantes (en juillet 2026). Un article distinct sur Google Stitch explique comment connecter des services externes à un agent et utiliser la même méthode pour apporter un système de design dans Claude Code.

Étape par étape : créer un site web animé en une soirée#

1. Configurer un projet

   Si vous n’avez pas encore de projet, commencez par un dossier vide. Créez-le, ouvrez-le dans un terminal et lancez claude depuis ce dossier. Pour votre première consigne, demandez une structure de départ : « crée une structure de site web monopage pour mon entreprise (décris son activité), en HTML et CSS simples, sans bibliothèques ». Une série de fichiers apparaît : c’est la racine du projet, où tout se passera désormais.

2. Ajouter les règles dans CLAUDE.md

   Copiez le bloc Anti-Generic Guardrails dans un fichier CLAUDE.md à la racine du projet. S’il n’y en a pas, demandez à l’agent de le créer. Les règles sont écrites pour Tailwind ; si votre structure de départ utilise du CSS simple, dites à l’agent : « applique ces principes au CSS classique » — le sens des règles ne change pas. Consultez une analyse de quatre règles pour CLAUDE.md pour comprendre le fonctionnement du fichier et savoir quoi y ajouter.

3. Installer la compétence frontend-design

   Utilisez le plugin example-skills ou copiez le dossier frontend-design, comme décrit plus haut. Vous pouvez vérifier que la compétence a été chargée avec la commande /doctor.

4. Choisir une direction visuelle

   Une seule, pas deux ou trois. Mélanger le style documentaire brutaliste au minimalisme beige produit exactement la moyenne que vous cherchez à éviter.

5. Créer une page statique

   Sans la moindre animation. Commencez par la typographie, l’espacement et la grille. Demandez à l’agent de démarrer un aperçu local et ouvrez l’adresse qu’il vous donne. Pour consulter la page sur votre téléphone, dites : « lance-le pour qu’il soit accessible sur les autres appareils de mon réseau », et l’agent vous donnera une adresse.

6. Ajouter une scène animée

   Une seule. En général, il s’agit du premier écran : le titre apparaît et une couche d’arrière-plan se déplace plus lentement que le premier plan. Fournissez à l’agent le fichier llms.txt de la bibliothèque et décrivez la scène concrètement — ce qui bouge, où et pendant combien de millisecondes. Laissez l’opacité de côté sur le premier écran ; une section distincte explique plus bas pourquoi.

7. Ajouter une règle de réduction des animations

   Appliquez la règle CSS et la préparation JavaScript de réduction des animations décrites dans la section accessibilité. Vérifiez la page avec cette préférence activée avant publication.

8. Publier et vérifier la vitesse

   Publiez sur un service d’hébergement statique gratuit : Vercel, Netlify ou GitHub Pages. Demandez à l’agent : « publie ce projet sur Vercel et donne-moi le lien ». Après la publication seulement, vérifiez l’URL obtenue avec PageSpeed Insights : le service fonctionne avec des URL publiques et ne peut pas accéder à une page locale. Regardez la mesure « Largest Contentful Paint » — le temps nécessaire au rendu du plus grand élément ; la zone verte va jusqu’à 2,5 secondes. L’agent peut mesurer la version locale avant publication : Chrome DevTools MCP l’ouvrira dans Chrome et affichera la même mesure.

C’est à l’étape six qu’il est le plus facile de gâcher le travail des cinq étapes précédentes.

Pourquoi trop d’animations donne-t-il à un site un air encore plus généré par l’IA ?#

C’est ici que le raisonnement de presque tous ceux qui abordent le sujet s’effondre : trop peu d’animation donne un résultat bon marché, donc il faut en ajouter davantage.

Cela figure précisément dans la compétence frontend-design que vous avez installée pour améliorer le design. Anthropic met en garde contre les excès dans l’outil même dont l’agent se sert pour décorer la page.

La compétence cite également d’autres techniques passe-partout : un grand nombre accompagné d’une petite légende et d’un accent en dégradé, réponse standard à n’importe quelle tâche ; des blocs numérotés 01 / 02 / 03, appropriés uniquement lorsqu’il y a réellement une séquence.

En pratique, voici à quoi ressemble l’excès : l’agent reçoit la tâche « ajoute des animations » et ajoute une apparition au défilement à chaque section. Le titre glisse à l’écran, trois cartes surgissent l’une après l’autre, les témoignages arrivent du côté et le pied de page s’estompe. Chaque effet est acceptable isolément. Ensemble, ils produisent une page en mouvement perpétuel qui ne met rien en valeur.

Un site vivant fonctionne autrement : une scène délibérée, généralement sur le premier écran, puis de la retenue. Le mouvement sert à souligner, comme le ferait une emphase : il fonctionne tant qu’il porte sur un seul mot.

Vous avez donc une règle pour la consigne. Formulez-la ainsi : « crée une scène sur le premier écran et laisse tout le reste statique ». Il n’y a que quelques mots de différence avec « ajoute des animations », mais le résultat est d’un ordre de grandeur meilleur.

Comment les animations nuisent-elles à la vitesse d’un site web ?#

Les trois mesures utilisées par Google pour évaluer une page sont : le temps de rendu du plus grand élément — pas plus de 2,5 secondes ; la réactivité à une interaction — pas plus de 200 millisecondes ; et le décalage de mise en page — pas plus de 0,1. Elles sont mesurées au 75e centile des visites réelles.

Lorsqu’il choisit le plus grand élément, le navigateur exclut les éléments dont l’opacité est nulle — ceux qui sont invisibles pour l’utilisateur.

Voyons pourquoi c’est important ici. Par défaut, l’agent crée une apparition de la façon suivante : il règle l’opacité d’une section sur zéro, puis supprime ce réglage quand la section entre dans la zone visible. Si cette apparition se trouve sur le premier écran, l’image peut être entièrement chargée et décodée, mais la mesure ne la comptabilise pas avant le début du rendu. C’est encore pire si un script supprime l’opacité après le chargement : la mesure attend alors la fin du script.

Il existe deux solutions. Soit commencer l’apparition avec une opacité faible mais non nulle, afin que le rendu initial soit comptabilisé. Soit laisser l’opacité de côté sur le premier écran et n’animer que le déplacement.

Le deuxième problème concerne ce qu’il est facile ou coûteux d’animer.

En termes simples : le navigateur assemble l’image en couches, et les changements de position et d’opacité ont lieu à la dernière étape, la moins coûteuse. Tout le reste l’oblige à recalculer la page. Les mesures de la même documentation indiquent que l’animation au moyen des décalages top et left prend 37 millisecondes pour la mise en page et 79 pour le rendu ; le même effet visuel avec transform prend zéro milliseconde pour les deux.

Et voici une contradiction à retenir : l’opacité coûte peu à composer, mais disqualifie un élément de la mesure de vitesse. Une animation peu coûteuse pour le navigateur et une animation sans risque pour les performances sont donc deux choses différentes.

Encore un mot sur la propriété will-change, que les agents aiment parsemer « pour optimiser ». La documentation MDN dit le contraire :

La documentation précise également que cette propriété doit être utilisée en dernier recours pour résoudre des problèmes de performance existants. Elle ne sert pas à les prévenir. Une ligne comme will-change: transform, opacity appliquée à cinquante éléments est un signe révélateur typique de code généré.

Le décalage de mise en page est plus simple à traiter. La documentation de Google ne met pas les animations en cause ; au contraire, des transitions prudentes aident à mettre à jour le contenu sans surprendre le lecteur. La recette reste la même : modifier l’échelle avec transform plutôt qu’avec width et height, et déplacer avec des décalages plutôt qu’avec des coordonnées.

Qu’en est-il des personnes que le mouvement peut affecter physiquement ?#

Cette section ne relève pas seulement de la courtoisie. Le public qui achète auprès d’un chef d’entreprise est précisément celui des personnes âgées de quarante ans et plus.

Pour les personnes atteintes de troubles vestibulaires, les animations de défilement peuvent provoquer des nausées et des migraines, parfois assez graves pour obliger à s’allonger.

Vous pouvez y remédier avec trois lignes de styles :

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Trois points à garder à l’esprit.

Définissez l’animation comme comportement par défaut et désactivez-la dans cette règle ; la page se dégrade ainsi plus sûrement que si vous faisiez l’inverse.

La spécification dit « supprime, réduit ou remplace » : la suppression complète n’est même pas la première option. Remplacer un glissement brusque par un bref fondu fonctionne mieux que de l’interrompre complètement : désactiver toutes les animations casse les indicateurs de chargement et les barres de progression.

Les animations JavaScript exigent leur propre gestion de la préférence : modifier la durée CSS n’annule pas une chronologie GSAP. Stocker simplement matchMedia(...).matches ne change rien sans branche conditionnelle. Gardez l’élément visible dans le HTML/CSS de base et ne créez le mouvement que si l’utilisateur l’autorise :

// Exécuter après le chargement de GSAP et des éléments de la page.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Appeler cleanupMotion() quand la page ou le composant est retiré.

Le titre ne doit avoir ni masquage ni translation dans son style de base. Avec la réduction des animations, il reste visible et statique. Si la préférence change sur la page ouverte, GSAP rétablit les styles quand la requête cesse de correspondre. mm.revert() supprime aussi l’animation collectée lors du démontage. Pour Motion, créez la branche équivalente dans sa préparation ; le CSS seul ne suffit pas. Consultez le cycle de vie et le nettoyage de GSAP matchMedia.

Il faut également garder à l’esprit un critère formel d’accessibilité. Le critère WCAG 2.2.2, de niveau A, exige que l’utilisateur puisse arrêter tout contenu qui bouge, clignote ou défile automatiquement, dure plus de cinq secondes et est affiché parallèlement à d’autres contenus. Cela concerne les carrousels à rotation automatique et les bandeaux défilants infinis, que les agents insèrent volontiers.

Sept points de rupture#

1. Le premier écran reste masqué jusqu’à son fondu d’apparition. Un élément dont l’opacité est nulle ne compte pas comme candidat à la mesure de rendu. C’est l’erreur la plus coûteuse, car elle nuit à une mesure qui influe sur le classement dans les résultats de recherche.

2. Tout est animé. Chaque section glisse à l’écran, chaque carte surgit. Anthropic dit clairement que cela renforce l’impression d’un design généré.

3. Le scrolljacking. Un site web remplace le comportement habituel de la molette de la souris par sa propre logique « cinématique ».

Dans la même étude, la plupart des participants ont éprouvé au moins une légère désorientation.

4. Les propriétés de mise en page sont animées. Des coordonnées et des dimensions au lieu de transformations. 37 et 79 millisecondes contre zéro.

5. Les animations sont trop longues. La plage utile est de 100 à 400 millisecondes, 400 étant déjà très lent et adapté uniquement aux mouvements amples. Les agents utilisent par défaut une seconde entière.

Selon ses conclusions, la plage utile va de 100 à 400 millisecondes ; 400 millisecondes est déjà très lent et ne convient qu’aux grands mouvements. Les agents utilisent volontiers une seconde entière par défaut.

6. Il n’y a pas de règle de réduction des animations. L’agent ne l’ajoutera pas de lui-même.

7. Le site ralentit à chaque interaction. Ce problème concerne React en particulier : une animation créée sans référence à l’élément et sans nettoyage se multiplie à chaque mise à jour du composant. La page commence progressivement à ralentir sans raison apparente.

Il y a un huitième piège. L’approche qui consiste à « faire une capture d’écran et corriger ce que l’agent voit » fonctionne très bien sur les pages statiques, mais avec des éléments animés, elle piège l’agent dans une boucle de modifications sans fin : il voit une image intermédiaire, la prend pour un bug, la corrige, puis voit une autre image intermédiaire. De plus, chaque capture d’écran consomme du contexte.

Combien cela coûte-t-il et comment éviter de brûler le quota mensuel sur un seul site ?#

Une histoire typique des communautés anglophones de programmation assistée par l’IA : quelqu’un crée une page spectaculaire avec une traversée spatiale au défilement, publie le résultat, puis la discussion révèle que ce seul site a consommé tout son quota mensuel.

C’est prévisible. Les animations coûtent plus cher que la mise en page classique pour plusieurs raisons à la fois. Vous ne pouvez pas vérifier le résultat en lisant le code ; il faut procéder par itérations. Chaque modification impose de relire les fichiers. Et une boucle de captures d’écran sur des éléments en mouvement ajoute des étapes inutiles.

Ce qui aide :

Créez une scène à la fois et figez le résultat. Une demande en une seule fois du type « ajoute des animations sur tout le site » garantit des dépenses excessives. Vous pouvez désactiver la vérification par captures d’écran pour les éléments animés et les examiner vous-même à l’œil. Gardez CLAUDE.md court afin que les règles ne consomment pas de contexte à chaque requête. Et fournissez à l’agent le fichier llms.txt de la bibliothèque à l’avance ; sinon, il inventera une méthode de connexion obsolète, puis déboguera sa propre invention.

L’article pourquoi Claude Code relit tout le projet explique où partent les tokens lors du travail sur un projet ; l’article comment ne pas épuiser vos limites Claude Code présente des façons de maîtriser l’utilisation.

Et ensuite ?#

Créez votre première page en suivant les huit étapes. Choisissez une direction visuelle, créez une scène sur le premier écran et vérifiez la vitesse.

Pour la suite, rendez-vous sur Ailoot.