Landing pages 3D avec Claude Code et Opus 5 : le workflow anti-slop

Une vidéo de DesignCode circule en ce moment sur la construction de landing pages 3D avec Claude Code et Opus 5. Le résultat impressionne : des scènes Three.js interactives, météo et éclairage modifiables à la voix, le tout dans un fichier de moins d'un mégaoctet. Plus que la démo, c'est le workflow qui mérite qu'on s'y arrête. Je le résume ici, sans l'avoir moi-même testé : c'est une recension, pas un retour d'expérience.

Le vrai sujet : sortir de l'AI slop

L'AI slop, c'est le résultat par défaut. Un prompt vague, un modèle paresseux, et tout le monde obtient la même page tiède. La thèse de la vidéo tient en trois leviers pour y échapper :

1. La meilleure référence - une vraie source d'inspiration, avec ses animations et son scroll, pas une description vague.
2. Le meilleur modèle, poussé au maximum - Opus 5 en effort maximal, pas en medium.
3. Le moldage - transformer la réplique de départ en quelque chose de personnel.

Le harnais compte autant que le modèle

Le point central : l'agent ne se contente plus d'un screenshot. Avec un harnais mature (Claude Code, Codex), il pilote un navigateur, télécharge une vidéo de référence, la décortique image par image, et rejoue le scroll avec un outil comme Playwright pour capturer les interactions. Il a désormais des mains et des jambes.

Concrètement, on ne décrit plus la page au clavier. On colle l'URL de la référence et on laisse l'agent l'analyser. Le prompt de départ est minuscule :

recreate this in a single HTML file.
Self-verify until it's perfect.

Deux réglages sont présentés comme non négociables. Le mode auto (l'agent agit sans valider chaque action), et surtout l'effort maximal du modèle. L'argument est le même que pour un humain : plus on donne de temps, plus la recherche est patiente et profonde. En medium, le modèle bâcle.

Références et MCP : nourrir l'agent

La qualité de la sortie dépend de la qualité de l'entrée. La vidéo cite plusieurs sources d'inspiration modernes, désormais riches en vidéo plutôt qu'en captures figées :

• Mobin - branché en MCP, l'agent va chercher lui-même les meilleures UI pour un besoin donné.
• collectui.com et autres galeries - points de référence pour le goût et la direction.
• GitHub - la source la plus directe : le code des projets open source sert de blueprint.

Un MCP, ici, c'est une interface qui permet à l'agent d'accéder au contenu sans passer par un humain. On lui dit « va sur Mobin, trouve les meilleures UI mobile pour une app de voyage » et il fait la recherche seul. On construit une interface pour que l'IA ne produise pas de slop.

Molder, pas répliquer

La réplique n'est que la base. Le travail commence après. Dans l'exemple de la vidéo, une inspiration japonaise en 2D (image de fond, grand texte, portail rouge) devient une scène Three.js entièrement en 3D : feuilles qui tombent, brumes en mouvement, caméra en orbite, transitions entre scènes. Le vocabulaire du prompt fait la différence :

• Passer en 3D - « je veux ça en Three.js » plutôt qu'une image de fond.
• Calques transparents (PNG) - des éléments qui flottent au-dessus de la page, pour un effet parallaxe.
• Textures - générées puis appliquées pour rendre pierre, herbe ou temple réalistes.
• Effets de shader - via un outil comme canvasui.dev, appliqués directement sur l'UI (eau, tissu, flamme).

L'IA peut même jouer les directeurs artistiques : elle propose des références, on valide oui ou non, et on converge vers le résultat par le goût plutôt que par le hasard.

Skills et super-prompt

Ce qui marche, on le fige en skill. La vidéo mentionne des skills maison pour les textures, les effets météo, l'orbite de caméra, ou le nettoyage anti-slop de la rédaction. Autre idée utile : le super-prompt. Au lieu de générer d'abord puis de modeler, on transforme une URL ou une vidéo en une description complète de la page. On peut alors changer la marque ou le thème dès le départ, avant même la première génération.

Nuance honnête de la vidéo : beaucoup de skills datent d'une époque où le harnais était moins mature. Aujourd'hui, si l'URL contient déjà tout (vidéo, code source, méthode), le harnais fait seul une grande partie du travail.

Ce que ça coûte

La méthode n'est pas gratuite. La vidéo l'assume clairement : télécharger et décortiquer une vidéo, rejouer un scroll, générer des textures, tout ça consomme énormément de tokens et de temps. Certaines générations montrées tournent 40 minutes et plus. Le compromis est explicite : plus de tokens, plus d'argent, plus de temps, en échange d'un résultat qui ne ressemble pas à tout le monde.