Tutoriel : construire une landing page 3D avec Claude Code et Opus 5

Ce tutoriel suit pas à pas la vidéo de DesignCode (348K abonnés) : construire des landing pages 3D en Three.js avec Claude Code et Opus 5. Les sections reprennent l'ordre de la vidéo, avec les repères de temps. C'est un walkthrough fidèle de ce que montre le créateur, pas un retour d'expérience personnel : tous les chiffres et durées cités sont ceux de sa démo.

Ce que montre la démo [00:00]

La vidéo ouvre sur trois sites en Three.js, chacun de moins d'un mégaoctet, entièrement en 3D et interactifs. On peut demander à l'IA de changer la météo, l'éclairage, la modélisation. Effets de pluie, tours avec animations, éclairage du coucher de soleil à la nuit. Le créateur insiste : « qualité jeu vidéo, mais dans le navigateur ».

Le point de départ de son engouement, c'est Opus 5. Selon lui, Three.js (souvent abrégé « 3JS » à l'oral) est aujourd'hui le seul vrai moyen de se démarquer, parce que tout le reste ressemble à de l'AI slop. Les trois projets montrés sont open source : on peut récupérer le code source, ce qu'il présente comme le chemin le plus court vers un bon résultat. L'un d'eux affiche déjà 866 étoiles et 155 forks, et a été testé sur mobile.

Passer à Claude Code sur desktop [03:47]

Première étape : télécharger l'app Claude desktop (macOS). C'est important parce que tout doit rester local, et le harnais est bien plus puissant en app qu'en terminal : il accède à l'ordinateur, aux fichiers, à tous les projets, mais aussi au navigateur et à l'usage ordinateur, ce qui rend la recherche bien meilleure.

L'app est en pleine transition, un peu en désordre selon lui : on y trouve Design, Chat, Cowork, et Code. On se concentre sur Code, parce que la plupart des gens connaissent Claude par Claude Code au terminal, et parce que Code est le plus proche de Codex, là où se fait le travail le plus professionnel. Un artifact, c'est un site (ou autre chose) isolé ; Dispatch, c'est pour le mobile.

Organiser ses projets comme des dossiers [05:51]

Un projet, c'est un dossier de votre ordinateur, comme toujours en développement. L'intérêt d'être en local : pouvoir référencer n'importe lequel de ses autres projets pour donner les bonnes références de design. Pour ajouter un projet, on référence le dossier et on l'ouvre.

Son organisation : tout part du dossier Downloads (là où il démarre tout travail, ses téléchargements et ses références). Dedans, un dossier projects, et dedans des sous-dossiers par techno (React, HTML). Nouveauté qu'il a adoptée : un dossier HTML contenant une liste de fichiers HTML autonomes.

Pourquoi ? Pour retirer l'idée qu'on doit créer un site complexe à chaque fois. Sa définition de l'AI slop : quand on essaie d'en faire trop, qu'on demande quelque chose de trop vague, on obtient un résultat extrêmement standard parce qu'on ne se spécialise pas, et le risque de slop devient très élevé.

Le navigateur intégré : le cœur du système [08:15]

C'est là qu'on se dirige, dit-il. Détail au passage : Codex a arrêté de travailler sur Atlas, son propre navigateur IA, pour tout ramener dans Codex/ChatGPT. L'agent peut aller sur n'importe quel site (il cite GitHub et X, qu'il visite le plus) pour trouver un point de référence et de l'inspiration.

Ses sources d'inspiration récentes :

• collectui.com - galerie d'inspirations UI.
• recend.design - autre galerie citée.
• mobin.com - références UI, branchable en MCP.

Il reconnaît que la maturité du navigateur de Claude Code n'égale pas encore celle de Codex, et qu'il préfère Codex pour son harnais plus mûr (navigateur, usage ordinateur). Mais Claude Code a un super-pouvoir : Opus 5 et Fable. Beaucoup aiment Fable ; Opus 5 divise, mais pour tout ce qui est product design et landing pages, il le juge vraiment très bon.

Brancher le MCP d'inspiration (Mobin) [11:59]

Les inspirations d'il y a cinq ans étaient sans vidéo ; aujourd'hui tout est en vidéo. Bonne nouvelle : grâce au harnais, l'agent a des mains et des jambes. Il ne récupère plus juste une capture, il récupère l'inspiration avec ses animations, son histoire, son scroll, ses interactions. Ça rend la landing page beaucoup moins slop, et la richesse du résultat fait une énorme différence.

Un MCP, c'est une interface qui permet à l'agent d'accéder à ce contenu. Au lieu d'aller soi-même dans le navigateur, on dit : « va sur Mobin, trouve les meilleures UI mobiles pour une app de voyage », et l'agent se connecte à Mobin, fait toute la recherche et récupère toute cette richesse seul. On construit une interface pour que l'IA ne produise pas de slop.

Installation : sur Mobin, il y a une fonction « install ». Selon la maturité du harnais, il suffit parfois de donner l'URL et de dire « installe ce MCP ». Pour les harnais moins matures, il faut suivre les instructions une par une et lancer quelques commandes. Dans le doute, on donne l'URL et l'agent fait l'essentiel, sinon la totalité.

Le prompt secret : minuscule [14:54]

Il y a 3 à 6 mois, il fallait tout écrire à la main. Il ne le fait plus. Son analogie : penser l'IA comme une caméra. N'importe qui peut filmer avec son iPhone, mais tout ne devient pas de l'art : il faut le modeler, penser la référence comme une planche d'ambiance. Sauf qu'ici, on peut construire tout ce qu'on imagine.

Résultat : on copie l'URL de la référence, on ouvre un projet (ici HTML), on colle l'URL et le prompt de départ volontairement court :

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

C'est tout ce qu'il faut pour démarrer, et c'est « la sauce secrète ». La description fine (typographie serif, etc.) vient plus tard, après le mood-boarding.

Deux réglages avant de lancer : mode auto et Opus 5 [17:06]

Avant, le mode était manuel : il fallait approuver chaque édition, chaque usage du navigateur, chaque authentification. Aujourd'hui, il faut activer le mode auto. C'est ce qu'il recommande tout le temps : plus sûr que le bypass complet des permissions (qu'il utilisait avant), et suffisant pour 99 % des gens.

Deuxième point, le plus important : Opus 5 est le meilleur au monde en design front-end, selon lui. Beaucoup sont déçus parce qu'ils l'utilisent en low ou medium. Son secret : toujours en extra (comme Codex en extra high). En medium, c'est nettement moins bon.

Pourquoi ? En low ou medium, l'effort est faible : moins de recherche, moins de patience, moins de temps passé. Comme un humain, plus on a de temps, mieux c'est. Son analogie : réviser un examen 5 minutes, 12 heures, une semaine à l'avance, ce n'est pas la même chose. L'extra est son minimum absolu pour éviter le slop et coller au plus près de l'inspiration.

Ce que fait le harnais pendant qu'il travaille [19:27]

Une fois lancé, on voit qu'il travaille énormément. La différence avec avant, c'est la quantité de capacités : navigateur et usage ordinateur. Il comprend l'URL, télécharge la vidéo, la décortique, comprend chaque image de la vidéo, et gagne donc énormément de contexte.

Avant, si on disait « je veux le scroll de ce site », il ne comprenait pas ce que ça voulait dire. Aujourd'hui, même sans vidéo, à partir d'une simple URL de site à recréer, l'IA sait utiliser un outil comme Playwright pour faire le scroll à votre place, faire l'enregistrement d'écran, puis ajouter tout ce contexte pour créer votre landing page.

Le seul revers, il l'assume : oui, ça consomme beaucoup de tokens ; oui, ça coûte plus cher ; oui, ça prend beaucoup plus de temps. Mais si on valorise la qualité et qu'on veut éviter le slop : (1) les meilleures inspirations et références, (2) le meilleur modèle et le meilleur harnais pour toute cette analyse et la réplication parfaite, (3) le moldage, qu'il va justement enseigner.

Molder : transformer la réplique (Daniel Snow) [21:42]

La réplique n'est que la base ; elle va évoluer. Le travail : développer son vocabulaire, son goût, sa capacité à tester ce qui marche et à voir où l'IA va coincer. Un de ses projets ne ressemble en rien à sa première version, peut-être 10 % de ressemblance. Son inspiration venait de Daniel Snow (sur Instagram).

Comme toute inspiration (Apple s'inspire de Dieter Rams), il en reste l'essence, le goût. Choisir sa référence est déjà une décision clé, à pratiquer, en s'appuyant sur les gens qu'on suit et leurs propres inspirations. Points communs assumés avec la référence : style japonais, herbe au premier plan, grand texte qui se cache en partie.

Mais lui a décidé d'en faire du 3D, alors que l'original est une image (ou une vidéo qui transitionne) en fond. Même herbe, même grand texte devant, même petit portail rouge japonais (les torii de Kyoto). Il a demandé explicitement du Three.js. On peut donc mettre ça dans le prompt si on veut se démarquer : quelque chose en cartoon qu'on veut en 3D, du HTML qu'on veut en Three.js.

Le vocabulaire à développer, sur ses ajouts : les feuilles qui tombent, les volutes (wisps) qui bougent, le 3D qui orbite, le scroll qui passe d'une scène à l'autre.

Textures, PNG transparents et effets de shader [24:52]

Il montre un effet de tissu (cloth) très réussi, via un site appelé canvasui.dev, qui ajoute des effets de shader par-dessus le HTML. Concrètement : des effets fous (eau, tissu) directement sur l'UI plutôt que dans une couche séparée. « Si vous ne comprenez pas, ce n'est pas grave : c'est cool, essayez. »

Ce sur quoi il a le plus passé de temps : demander à l'IA d'ajouter des textures. Aujourd'hui on peut utiliser un modèle vidéo récent (il cite Kling 2.5) pour générer une vidéo au lieu de faire de la 3D, ou un modèle d'image (Higgsfield et son modèle, GPT Image 2, ou de nouveaux modèles de qualité comparable).

Point clé à demander : des PNG transparents. C'est-à-dire des éléments qui peuvent se poser au-dessus de n'importe quel élément ou site, plutôt qu'une image encadrée qui ne peut rien surmonter. Dans le cas de Daniel Snow, ce serait une image PNG transparente : les branches, les feuilles, le portail. On empile ainsi les calques pour créer l'effet parallaxe de la landing page.

Avant, on organisait tout ça manuellement dans Figma - faisable, mais chronophage. Aujourd'hui on pilote au prompt : « je veux des calques transparents, devant, en orbite, avec parallaxe ». C'est le genre de mots de vocabulaire à utiliser pour prompter ces changements.

Dans la démo, à 12 minutes de génération, ce n'est toujours pas fini : ça prend vraiment son temps, et ce n'est pas un défaut. On voit qu'il utilise le CLI Higgsfield (mentionné dans une vidéo précédente, avec un MCP) pour générer images et vidéos à travers plusieurs modèles (Kling, GPT Image 2), voire des modèles 3D.

Sur le temple japonais montré : au début il manquait de détails. Il a donné plus de références, en a généré d'autres, et a laissé l'IA le guider comme un directeur artistique : elle propose des références (« ce temple japonais, on modélise d'après cette image ? oui/non »), et on converge vers le résultat voulu par le goût.

Figer ce qui marche en skills [30:12]

Les skills sont l'une des choses les plus importantes. Il a publié ses propres skills (tout ce qu'il fait avec Codex et Claude Code) et a été surpris d'atteindre 4,7k étoiles : la demande est énorme. Il s'en sert au quotidien, y compris pour récupérer son inspiration quotidienne, ou pour automatiser un résultat qui lui plaît en différents styles et textures.

Pour la 3D et le développement de jeu, il crée des skills pour les textures, les effets météo, l'orbite de caméra, la rotation. Tout ce qu'on veut mémoriser et réutiliser, on demande à l'IA de le transformer en skill : style, effet météo, moment de la journée.

Un de ses préférés : transformer une vidéo ou une URL en super-prompt. Le super-prompt décrit tout le site ; comme c'est une description, on peut demander à l'IA de changer la marque dès le départ, au lieu d'obtenir d'abord le résultat puis de le modeler. Nuance : beaucoup de skills datent d'un harnais moins mature. Aujourd'hui, si l'URL contient déjà tout (vidéo, méthode, code source), on a tout : depuis ce prompt, on peut dire « je veux ça mais en style western », « avec un chevalier et un château ». C'est là qu'on utilise son imagination au lieu de la réplication exacte.

Trouver des skills : skills.sh [33:45]

Pour ajouter des skills, il recommande le site skills.sh. Exemples cités :

• Grill me - quand on a une idée d'app et qu'on veut que l'IA nous cuisine et donne un retour franc, sans complaisance.
• Front-end design - autrefois excellent, aujourd'hui moins nécessaire : la technique montrée est bien plus efficace, et le navigateur agent est un travail du harnais.
• Écrire comme un humain / anti-slop - retirer les tournures qui sonnent IA, très utile en design comme en code (il cite « kill AI slop »).

Il précise qu'il vaut mieux aller directement au code source d'un projet déjà open source : on l'utilise sans craindre d'être trop similaire.

Le résultat, puis prototyper [35:38]

Après 40 minutes, le résultat est là et il est précis. À utiliser comme une étude, dit-il : il ne compte pas l'utiliser tel quel, c'est pour étudier. En comparant à l'inspiration, la réplication est bluffante de fidélité.

Vient ensuite ce que Claude design a introduit : des options pour prototyper. On peut personnaliser le style, les mots, le contenu. C'est ce qu'on doit faire en phase de création : ne jamais se contenter de la référence, toujours expérimenter le layout. On peut demander à l'IA de prototyper et de donner des options à jouer sur la typographie, le layout, les couleurs, le texte, le style, les bordures.

Une fois satisfait, on dit à l'IA : « je suis content de celle-ci, applique ces changements définitivement », et on avance. Autre point important : changer les images. En Codex, la génération d'image est intégrée ; en Claude Code, on passe par un outil comme Higgsfield. « Génère de nouvelles images dans un nouveau thème » : par exemple un restaurant, mais dans ce style de layout, en version rustique.

Puis on passe éventuellement à la vidéo : tous les concepts ne s'y prêtent pas, mais on peut dire « anime ceci, transforme-le en vidéo ». C'est bon pour le hero, assez peu coûteux, avec un modèle récent (Kling 2.5). On expérimente aussi le mode clair/sombre, les textures, et on ajoute des effets depuis canvasui.dev : on y copie le prompt d'un effet (par ex. une flamme) et on le colle dans l'input pour l'appliquer.

Publier et open-sourcer [38:47]

Son conseil final : une fois content du workflow (une petite skill, un composant, ou la landing page entière), transformer ça en skills, rendre la chose vôtre et très différente, recréer de nouveaux thèmes, open-sourcer et partager.

Sur GitHub, il conseille de s'y mettre en gagnant en confiance : historique de versions, hébergement, collaboration. Et surtout l'open source, qu'il a longtemps négligé et qui lui apporte beaucoup de succès - pas celui qu'on attend : une audience, un portfolio. Beaucoup d'ingénieurs utilisent GitHub comme vitrine (des stars, un following) pour convaincre de les recruter. Aujourd'hui, comme n'importe qui peut construire n'importe quoi avec l'IA, l'open source partage les leçons apprises : les gens peuvent regarder la source et s'en servir comme blueprint pour leur landing page. Gagnant-gagnant-gagnant.

La démo se termine à 44 minutes sans être finie : ça travaille très dur, simplement parce que c'est Opus 5 et qu'il peut tourner des heures, en échange du meilleur résultat - tout le 3D en code, moins d'un mégaoctet.