J'ai construit une page d'atterrissage sans ouvrir Figma une seule fois. Les outils que j'ai utilisés étaient principalement Claude Design et Claude Code. La période de production a été d'une semaine, avec un total de plus de 300 échanges aller-retour avec l'IA.
Ce que j'ai appris de ces 300 interactions, c'est que si l'acte de créer est devenu considérablement plus facile grâce à l'IA, la limite supérieure de la qualité finale est toujours déterminée par le jugement humain. L'IA gère tout ce qui va jusqu'à fournir des candidats. À partir de là, l'élever au ton souhaité était le travail de la personne qui juge la qualité et la renvoie pour révisions.
J'ai construit le site de documentation pour Design Harness, un framework qui gère le design à travers quatre couches : contraintes, contexte, vérification et évaluation. Comme il s'agit d'un site sur le design, j'avais aussi un sous-thème : voir jusqu'où je pouvais aller avec les détails de surface et les interactions.
https://x.com/kgsi/status/2072829167285207077
Je vais revenir sur les étapes que j'ai suivies et où j'ai dépensé ces 300 interactions, y compris des captures d'écran réelles.
Comment j'ai utilisé Claude Design et Claude Code différemment
J'ai construit cette page d'atterrissage en répartissant les rôles entre deux outils principaux. Claude Design est un outil de génération de design conversationnel où vous donnez des instructions via le chat et un prototype HTML en direct apparaît sur le champ. Claude Code est un agent de codage qui s'exécute dans le terminal et implémente directement la base de code.
La répartition des tâches était claire : Claude Design est excellent pour façonner les prototypes dès le début. Cette fois, j'ai fourni un document résumant la politique de design et les wireframes, répondu à quelques questions, et la première page d'atterrissage a été générée. Cette méthode est efficace au stade où l'on essaie des directions et où l'on casse les choses.
En revanche, pour le travail visant à atteindre une qualité de production — comme le support responsive et les détails d'accessibilité — vous devez affiner avec Claude Code.
Décider le design avec Design, et le finaliser avec Code. Je les ai utilisés dans cet ordre.
Tout verbaliser avant de créer
Au moment où j'ai décidé de créer ce site, la direction était déjà définie. Ce que j'avais en tête, c'était « que se passe-t-il si on ajoute des polices et des effets modernes à un ton classique de style étranger ». Le concept lui-même est tiré de la documentation de Design Harness.
Notez que puisque Claude ne peut pas générer d'images par lui-même, j'ai laissé cela à ChatGPT Images 2.0. J'ai dérivé des idées alternatives à partir d'images de sites d'exemples, construit un mood board pour le site que je voulais créer, et généré des images de fond. J'ai tout mis en mots et en images au préalable pour définir la direction « bonne ». Toutes les interactions suivantes étaient essentiellement des recoupements par rapport à cela.
Exploration des tons visuels avec Codex (ChatGPT Image 2.0), recherche à travers diverses images et mood boards.
L'affinage prend des centaines d'interactions (au moins)
Après la préparation, les échanges avec Claude Design ont commencé. En regardant les captures d'écran, il y a eu plus de 200 interactions au total (environ une semaine en termes de temps de production total). Voici la répartition des sessions :
- « Exigences de génération du site LP » : environ 80 tours
- « Animation Design Harness » : environ 80 tours
- « Animation d'affichage du texte de fond KV » : environ 50 tours
- « Amélioration de l'explication Design Harness » : environ 10 tours
L'animation de chargement d'ouverture et les effets du Key Visual (KV) ont nécessité particulièrement beaucoup d'interactions. Les effets n'ont pas été réalisés en une seule fois ; j'ai superposé des instructions pour les peaufiner (par exemple, un effet venant du bas, des effets de flou qui se chevauchent, etc.).
Captures d'écran de Claude Design. Comme la précision diminue avec l'augmentation du contexte, j'ai créé de nouvelles sessions pour chaque tâche importante afin d'explorer.
Séparément, j'affinais le support responsive et l'accessibilité avec Claude Code, ce qui donne un total d'environ 300 interactions. En termes de ressenti, je pense que la section Hero a été la plus longue.
Lors du passage de Claude Design à Claude Code, j'ai utilisé la fonction Partager, mais je recommande de passer l'intégralité du fichier zip via « Exporter ». Bien que « Envoyer à » soit plus facile, il a des limites de transmission d'images et la précision de reproduction n'est pas aussi élevée.
En regardant les chiffres, cela peut sembler une corvée, mais donner des instructions est devenu plus facile. Vous n'avez plus besoin de comprendre parfaitement HTML et CSS. Claude Design dispose d'une fonction d'annotation où vous pouvez ajouter des commentaires directement sur les éléments à l'écran. Si vous pointez la partie que vous souhaitez corriger, presque toutes les instructions détaillées passeront. Par conséquent, les instructions que j'ai données se répartissaient principalement dans trois catégories :
Pointer les éléments avec des annotations pour corriger les détails. Transmettre les mouvements en mots, comme l'affichage du texte de fond KV. Réaligner le ton sur « style classique étranger »... La seule compétence nécessaire qui reste est la capacité à verbaliser le mouvement et le ton.
Prenons la navigation comme exemple d'échange.
Au départ, c'était un effet où un soulignement glissait au survol. C'était difficile à comprendre, alors j'ai fourni une URL d'implémentation de référence et j'ai demandé de le changer en un effet de mélange de caractères. Ensuite, la largeur des caractères changeait pendant le mélange, ce qui décalait les positions du menu. Quand j'ai fait fixer la largeur, l'espacement est devenu irrégulier. Même après l'avoir renvoyé en disant « ce n'est toujours pas régulier », ce n'était pas corrigé. Finalement, j'ai arrêté d'essayer d'ajuster la largeur et je l'ai réglé en changeant la police de la navigation pour une police à chasse fixe (monospace). Si la largeur des caractères est constante, rien ne bouge même en mélangeant. Cela a pris 5 interactions.
Les 300 interactions étaient principalement une répétition de ce cycle. Fournir des URL de sites ou d'implémentations que je voulais référencer pour montrer la direction. Verbaliser brièvement l'inconfort avec ce qui sortait, comme « l'espacement n'est plus régulier », et le renvoyer. Si la même correction échouait deux fois, j'arrêtais de peaufiner et je changeais la prémisse. Au final, je n'ai jamais rédigé de long document de spécification.
Au fait, bien que je ne l'aie guère utilisé cette fois, il existe un document appelé Animation Vocabulary and Skills, qui devrait rendre les instructions plus efficaces s'il est utilisé. https://animations.dev/vocabulary
L'acte de créer et l'acte de juger
En regardant le contenu des interactions, c'était un processus consistant à juger la qualité de ce qui sortait et à le renvoyer à plusieurs reprises. L'acte de créer lui-même peut désormais être presque entièrement géré par l'IA. Si vous donnez des instructions, des candidats apparaissent immédiatement. Mais le timing de l'animation est-il bon ? Y a-t-il suffisamment d'espace blanc ? Qu'est-ce qui est bien et qu'est-ce qui est mal ? L'IA ne peut pas juger cela. Il est encore impossible de faire en sorte que l'IA produise le ton souhaité en une seule fois. Si vous voulez élever la qualité, vous n'avez pas d'autre choix que de juger et de renvoyer.
C'est probablement pour cela que les sorties simples n'atteignent pas ce niveau de qualité. Une étude de la Berkeley School of Information (UC Berkeley), qui a observé 13 sessions de designers utilisant des outils d'IA générative, appelle le phénomène par lequel la sortie gravite vers un style qui semble de « haute qualité » mais pourtant familier, le « Piège de la Convergence ».
https://x.com/kgsi/status/2074250174986362999
Sans le jugement nécessaire pour renvoyer les choses, la sortie s'installe dans un aspect soigné générique qui n'appartient à personne. La plupart des 300 interactions ont été utilisées pour la ramener vers le ton souhaité à partir de là.
Qu'arrive-t-il aux personnes capables de juger ?
Il y a un point de vue selon lequel l'IA finira par être capable de gérer entièrement ces jugements esthétiques et qualitatifs. Je pense que cela se produira dans certains domaines.
Cependant, dans chacune des plus de 300 interactions, c'était moi qui relevais l'inconfort et le renvoyais, et il n'y avait aucun signe que cela soit automatisé dans ce processus. Bien sûr, ce n'est qu'un n=1 issu de la construction d'une seule page d'atterrissage. Je ne sais pas encore si on peut en dire autant pour d'autres travaux de design.
Après avoir terminé ce processus, ma prédiction est que les « sièges » pour les personnes qui créent des choses vont diminuer. Un emploi qui prend une semaine pour concevoir une page d'atterrissage sera remplacé par un emploi qui implique une demi-journée d'échanges avec une IA. À ce moment-là, les personnes qui resteront à leur poste seront celles qui ont les connaissances et les critères de jugement pour dire en quelques secondes, devant les candidats alignés : « Allez avec la proposition de droite, mais refaites le mouvement. » Je pense que la demande pour les personnes capables de juger tout en maîtrisant l'IA va en réalité augmenter.
Ce que les designers doivent perfectionner passera de leurs mains à leurs yeux. Les jugements que j'ai portés dans ces 300 interactions reposaient en fin de compte sur mon expérience de création de choses de mes propres mains. Si tel est le cas, dans un monde où le nombre de fois que nous créons des choses diminue, existe-t-il un moyen de développer uniquement les yeux ?
En passant, le site de curation « Parascope », où vous pouvez acquérir des compétences en « design », fonctionne actuellement avec succès 👉 http://parascope.design/
