Chaque élément à sa place

J’ai donné une seconde chance à Bolt. Il m’a donné exactement ce que j’avais demandé.

L’idée

Je rattrapais mon retard en chimie sur Khan Academy. Il s’avère que la matière que je détestais à l’école est passionnante quand personne ne me note. Je préfère quand même construire des choses plutôt que les étudier ; j’ai donc voulu construire quelque chose. Un tableau périodique interactif : catégories en couleur, clic pour les détails, survol pour un aperçu rapide. Un problème bien défini, des données bien documentées.

J’avais déjà essayé Bolt une première fois, tout à la fin de 2024. Mon prompt demandait React 19 et Tailwind 4. Sa première réaction a été de me corriger. « I apologize, but I should point out that React 19 is not yet available. Also, Tailwind 4 is not released yet. » Le timing était maladroit. React 19 arrivait tout juste, et Tailwind 4 n’avait pas encore débarqué. Le premier réflexe de l’outil a été de me dire ce que je ne pouvais pas avoir. Cette première tentative était prudente, et rien de mémorable n’en est sorti.

Quelques mois plus tard, Apple venait de dévoiler son esthétique Liquid Glass, et je voulais voir si Bolt pouvait imiter ce rendu translucide. Cartes en verre dépoli, calques translucides, flou d’arrière-plan. J’ai ouvert bolt.new et tapé un nouveau prompt. Vous pouvez voir le résultat vous-même.

Ce que j’ai obtenu

Une quarantaine de commits de fond en un peu plus d’une journée. Une grosse vingtaine de fichiers source. Un peu plus de 7 000 lignes de TypeScript, dont la plupart ne sont que des données d’éléments. React, Vite, Tailwind, icônes Lucide. Le tableau périodique, avec des catégories en couleur, une recherche, des infobulles qui restent dans l’écran, et des fenêtres de détail avec images et configurations électroniques.

Les données des éléments étaient globalement complètes et correctement structurées. Quand le domaine a une seule bonne réponse pour chaque champ, Bolt excelle à collecter et structurer l’information.

Le code, en revanche, a une qualité particulière : fonctionnel, mais mécanique. Voici comment App.tsx et PropertyPlayground.tsx décident tous deux s’il faut afficher le calque glassmorphique :

{(currentTheme.id === 'glassmorphic' ||
  currentTheme.id === 'dark-glass' ||
  currentTheme.id === 'vibrant-glass' ||
  currentTheme.id === 'aurora-glass' ||
  currentTheme.id === 'sunset-glass' ||
  currentTheme.id === 'forest-glass') && (
  <div className="absolute inset-0 backdrop-blur bg-white/20"></div>
)}

Ce bloc identique apparaît deux fois, mot pour mot, dans deux fichiers distincts. Un développeur mettrait un flag glass sur le type du thème et testerait ça. Un booléen, défini une fois, au lieu de six comparaisons de chaînes collées deux fois. Bolt a produit du code qui marche, pas du code qui se comprend lui-même.

Ce qu’il a fallu corriger

Ni catastrophe, ni saga de débogage sur neuf jours. Quelque chose de plus discret, et de plus difficile à nommer.

L’espacement de la grille a nécessité six commits :

// Commit 1 : trop d'espace
<div className="grid grid-cols-18 gap-4 min-w-max mx-auto">

// Commit 6 : grille sur mesure, contrôle précis
<div className="grid grid-cols-periodic-table-cols
     grid-rows-periodic-table-rows gap-1 min-w-max mx-auto">

Sur six commits, on avait surtout l’impression de voir un modèle tripoter des chiffres sans aucune boucle de retour visuelle. Le CSS était valide à chaque fois. La mise en page était fausse à chaque fois.

Fermeture de la modale : trois commits pour le clic sur l’arrière-plan, le bouton de fermeture, la touche Échap. Positionnement des infobulles, z-index inversé, erreur de référence. Quatorze commits sur l’ensemble du projet ; aucun difficile, tous évitables.

Quand la reconnaissance vocale plante, on sait qu’on a un problème. Quand tout fonctionne mais qu’il a fallu quatorze commits pour y arriver, il n’y a rien à diagnostiquer. On a juste perdu une journée.

Ce que je n’avais pas prévu

Le Property Playground. Je m’attendais à ce que la grille du tableau périodique soit la pièce maîtresse et le panneau de filtrage un accessoire. C’est l’inverse qui s’est produit. Huit filtres différents, des curseurs à double poignée qui se comportent correctement, une barre latérale qui se replie proprement sur mobile. Pas seulement fonctionnel : réfléchi. La fonctionnalité la plus ambitieuse était celle que Bolt a le mieux réussie.

Qu’est-ce que cela signifie quand le meilleur travail d’un outil porte sur la fonctionnalité dont on attendait le moins ? Est-ce parce que le Property Playground est un problème de pure logique : filtrer des tableaux, comparer des plages, afficher des résultats ? Ni jugement visuel, ni bizarreries de navigateur : juste des données en entrée, des données en sortie. Ou y a-t-il autre chose dans la façon dont ces outils gèrent la complexité quand les règles sont claires ? Je n’ai pas encore la réponse.

On connaît le cliché hollywoodien du codeur qui tape à une vitesse folle, les écrans reflétés dans ses lunettes. C’est absurde, mais la transe en dessous, elle, est réelle. Cet état où les doigts devancent la pensée, où refactoriser relève du geste, pas de la réflexion. Aujourd’hui on peut dicter un programme entier sans toucher le clavier. La transe a perdu son instrument.

Ce que je sais, c’est que je pensais au code comme un menuisier pense au bois. Aujourd’hui, j’y pense comme un maître d’ouvrage pense à un artisan. La satisfaction s’est déplacée, et je ne sais pas encore où elle est passée.

La leçon

J’ai construit deux applications complètes avec Lovable. Des applications complexes, avec de vrais utilisateurs. Avec Bolt, après plusieurs tentatives, dont une sur des crédits de hackathon, j’ai livré un tableau périodique. La conclusion honnête : ce n’est pas Bolt, c’est moi. Certains outils conviennent mieux à certains développeurs.

La conversation autour du vibe coding tient rarement compte de cela. Les comparatifs mesurent les fonctionnalités, les benchmarks, la qualité du résultat, mais pas ce que l’on ressent lorsqu’on passe des heures avec un outil, à le guider vers quelque chose qu’on devine sans le voir encore, si on en sort énergisé ou vidé. Cette friction invisible détermine ce qu’on livre réellement.

Chaque élément est à sa place, la mise en page est correcte. Mais la chimie, ce n’est pas placer des éléments sur une grille : c’est ce qui se passe entre eux.