# Deux outils indispensables pour tout utilisateur de Claude Code — Agentation et Readout > Author: Tony Lee > Published: 2026-03-03 > URL: https://tonylee.im/fr/blog/two-tools-every-claude-code-user-needs-agentation-readout/ > Reading time: 4 minutes > Language: fr > Tags: ai, claude-code, outils-dev, frontend, workflow, agentation, readout ## Description Agentation fournit aux agents IA un retour visuel pixel-perfect via des sélecteurs CSS. Readout permet de rejouer les sessions Claude Code comme une vidéo. Ensemble, ils éliminent les deux plus grands points de friction du développement frontend assisté par IA. ## Content Deux points de friction me suivent dans chaque session frontend avec Claude Code. Indiquer précisément à l'agent quel élément modifier. Et comprendre ce que l'agent a réellement fait une fois la session terminée. Ces deux problèmes ont désormais leurs outils dédiés — créés par la même personne. ## Agentation : arrêtez de décrire les éléments UI avec des mots L'époque où l'on disait à un agent IA « corrige ce bouton bleu » est révolue. [Agentation](https://benji.org/agentation) est un outil de retour visuel qui permet de cliquer sur n'importe quel élément à l'écran pour extraire automatiquement son sélecteur CSS et ses informations de position. Au lieu de taper « le bouton bleu dans la barre latérale », vous transmettez directement `.sidebar > button.primary` à l'agent. La différence est immédiate. Les prompts qui nécessitaient trois ou quatre allers-retours aboutissent désormais du premier coup. ### Ce qui le rend efficace - **Installation en une ligne.** `npm i agentation` et ajoutez un seul composant à tout projet React 18+. - **Quatre modes de sortie.** De Compact (sélecteur + mémo) à Forensic (tous les styles calculés). Choisissez le niveau de détail adapté à votre workflow. - **Agent Sync via MCP.** Connectez un serveur MCP pour que l'agent lise le retour visuel en temps réel. - **Débogage d'animations.** Mettez en pause les animations CSS en plein milieu d'une image et fournissez un retour sur les états intermédiaires — courbes de timing, positions de keyframes, tout y passe. - **Sélection de texte et de zones.** Sélectionnez du texte ou glissez sur des zones vides pour donner un retour sur l'espacement et la mise en page, pas seulement sur les éléments. L'outil a dépassé les 170 000 téléchargements npm. Un seul tweet à son sujet a atteint 670 000 vues. Des chiffres comme ceux-là signifient généralement que l'outil résout un vrai problème. ## Readout : rejouez les sessions Claude Code comme une vidéo [Readout](https://readout.org) est une application macOS native qui affiche l'environnement de développement et l'état de configuration de Claude Code dans un tableau de bord unique. La fonctionnalité phare est le replay de session. Sélectionnez n'importe quelle session passée et parcourez la timeline. Les prompts, appels d'outils et modifications de fichiers apparaissent dans l'ordre chronologique. Les fichiers modifiés clignotent en temps réel. Que vous conceviez des systèmes d'agents ou que vous souhaitiez simplement auditer ce qui s'est passé pendant une longue exécution autonome, l'analyse des logs de session est incontournable. Readout est le visualiseur le plus intuitif que j'aie trouvé. ### Points clés - **Téléchargement gratuit** sur readout.org. Aucun compte requis. Fonctionne entièrement en local. - **Contrôles de lecture.** Ajustez la vitesse ou naviguez manuellement entre les événements. - **Support Codex.** Compatible avec les sessions Claude Code et Codex. ## Le vrai goulot d'étranglement du frontend, c'est la précision du retour, pas les performances du modèle C'est un constat contre-intuitif. Avant de blâmer les capacités de l'outil de codage IA, examinez la qualité du retour que vous fournissez. Isolez les composants avec Storybook. Capturez le retour visuel avec Agentation. Transmettez-le à Claude Code. Avec cette boucle, l'agent peut gérer la plupart des modifications UI de manière autonome. Le site de documentation d'Agentation a été entièrement construit avec ce workflow. Chaque ajustement de timing d'animation, chaque raffinement de mouvement de curseur — tout a été réalisé via la boucle de retour visuel. ## Même créateur, même origine Les deux outils ont été créés par Benji Taylor, responsable du design chez Coinbase Base. Il n'est pas développeur de métier. Il a construit ces outils en codant avec l'IA parce que les frictions étaient trop évidentes pour les ignorer. « Pourquoi est-ce que j'explique ça avec des mots ? » est devenu Agentation. « Pourquoi je ne peux pas voir ce qui s'est passé ? » est devenu Readout. Les outils nés du point de vue de l'utilisateur s'adaptent souvent mieux aux workflows réels des développeurs que les outils conçus de manière descendante. Benji a précédemment fondé le portefeuille Family et a traversé l'acquisition par Aave avant d'occuper son poste actuel chez Coinbase Base. ## Ce qu'il faut retenir Bien utiliser les outils de codage IA est nécessaire mais pas suffisant. Quand les outils manquent, ceux qui construisent ce qui fait défaut prennent l'avantage. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/fr/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.