Le clip qui m'a fait m'arrêter et le revoir trois fois durait dix secondes. Une version de moi en illustration 3D, marchant lentement dans un studio terracotta vide, s'arrêtant pour jeter un regard à la caméra, puis détournant les yeux. De la 4K native. Aucun upscaler dans le pipeline. Et tout ça tournait derrière le texte hero d'un site portfolio que j'avais esquissé quarante minutes plus tôt, avec l'équivalent d'un coin de serviette en papier comme instructions.
Voilà toute l'histoire en une phrase : j'ai construit un portfolio 3D animé — une page d'accueil complète avec une vidéo de personnage en 4K, vivante et en boucle dans le hero — à l'aide de deux outils qui ne se parlaient pas et d'un handoff qui a cousu le tout ensemble. Claude Design 2.0 pour le site. Seedance 2.0 4K de Higgsfield pour la vidéo. Claude Code pour amener l'ensemble en production.
Je veux vous guider à travers le vrai build, pas la bande-annonce. Là où ça a marché de façon presque inquiétante, là où c'est devenu bizarre, et les deux décisions prises en amont qui ont fait la différence entre « landing page IA générique » et quelque chose que j'accepterais de signer. Les outils sont impressionnants, certes. Mais ce ne sont pas eux qui expliquent le résultat.
Pourquoi un portfolio 3D animé vaut enfin la peine d'être construit
Pendant des années, une vidéo d'arrière-plan dans le hero d'un portfolio était une taxe payée en trois devises : un vidéaste ou un motion designer, un pipeline de rendu, et de la bande passante. Soit vous tourniez des images, soit vous licenciiez une boucle de stock utilisée par mille autres sites, soit vous payiez un artiste 3D pour une animation sur mesure qui démarrait à quatre chiffres. La plupart des créateurs solo faisaient le calcul et livraient une image hero statique à la place.
Deux choses ont changé en 2026 et ont inversé l'équation.
D'abord, les outils de design web par IA ont franchi la ligne entre « génère un wireframe que vous reconstruisez à la main » et « génère un vrai site, éditable et exportable ». J'ai suivi ça de près — mon décryptage de la refonte de Claude Design de juin 2026 couvrait le moment où l'outil a cessé d'être une démo brûleuse de tokens pour devenir quelque chose dans lequel on peut terminer un projet. Claude Design 2.0 est l'étape suivante : sortie entièrement éditable, édition directe sur le canvas, et un handoff propre vers Claude Code.
Ensuite — et c'est la partie que la plupart des gens sous-estiment — les modèles vidéo ont appris à générer de la haute résolution native. Higgsfield a poussé Seedance 2.0 jusqu'à la 4K native, selon la page du modèle chez Higgsfield. Pas du 1080p upscalé ensuite. De vraies frames 4K sorties du modèle. Ce seul détail supprime une étape entière, une phase entière de perte de qualité, et toute une catégorie de frustration du type « pourquoi la version upscalée a l'air de fondre ».
Additionnez les deux, et un créateur solo peut désormais produire un portfolio qui semble sorti d'une agence. Le hic — parce qu'il y a toujours un hic — c'est que ces outils récompensent la préparation et punissent la paresse plus durement que n'importe quel logiciel de design que j'ai utilisé. Ce qui m'amène à la première vraie leçon.
Le wireframe que j'ai esquissé avant de toucher à la moindre IA
Voici où la plupart des gens se trompent, et où j'ai failli me tromper aussi. L'instinct avec un outil comme Claude Design 2.0, c'est de l'ouvrir, de taper « construis-moi un portfolio moderne et élégant avec un hero vidéo », et de lancer. Vous obtiendrez quelque chose. Ce sera correct. Ce sera aussi exactement le même quelque chose que tous ceux qui tapent ce prompt obtiennent, parce que vous avez donné zéro contrainte au modèle et qu'il a comblé le vide avec la moyenne statistique de tous les portfolios qu'il a jamais vus.
Donc avant d'ouvrir quoi que ce soit, j'ai dessiné. Rien de sophistiqué — un wireframe grossier de la structure de la page, de haut en bas :
- Hero : plein écran,
100vh. Texte centré. Un call-to-action ancré en bas du viewport, pas flottant au milieu. - Selected Work : une grille vitrine de projets, directement sous la ligne de flottaison.
- Grand texte en exergue : une seule phrase surdimensionnée, le genre qui donne au site un point de vue au lieu d'un simple déballage de projets.
- Section Journal / blog : les écrits récents, parce qu'un portfolio sans voix n'est qu'un CV.
- CTA de footer : un dernier « parlons-en » clair avant que les visiteurs ne partent.
C'est tout. Cinq sections, esquissées en quatre minutes environ. Mais ce croquis est l'artefact au levier le plus élevé de tout le build, et j'expliquerai exactement pourquoi dans la section suivante — parce que ce que j'en ai fait compte plus que le dessin lui-même.
Mettre en place le build dans Claude Design 2.0
Dans Claude Design 2.0, les deux premiers choix fixent le plafond de tout ce qui suit.
Choix numéro un : pas de template. Les templates donnent l'impression d'une longueur d'avance. En réalité, ce sont des cages — vous passez le reste de la session à combattre les hypothèses du template au lieu d'exprimer les vôtres. Je suis parti d'un canvas vierge pour que la structure vienne de mon wireframe, pas de l'idée que quelqu'un d'autre se fait d'un portfolio.
Choix numéro deux : prendre le modèle le plus capable disponible. Claude Design vous laisse choisir le modèle sous-jacent, et pour un build à partir de zéro où le raisonnement de mise en page et le goût visuel comptent tous les deux, je prends le modèle Opus le plus fort en raisonnement design disponible. Sur un site porté par son hero, où la composition doit porter toute la première impression, ce raisonnement vaut la dépense.
Puis le vrai geste : j'ai uploadé le croquis du wireframe et rédigé les instructions à côté. Pas « fais un portfolio ». À la place — hero plein écran à 100vh, titre centré, CTA épinglé en bas, grille de projets sélectionnés en dessous, texte surdimensionné en exergue, section journal, CTA de footer. J'ai décrit le ressenti aussi : confiant, éditorial, un petit côté galerie. Terracotta et noir comme histoire de couleurs.
C'est ça qui fait la différence. Un wireframe clair plus des instructions précises n'améliorent pas un peu la sortie — ils changent entièrement la catégorie de la sortie. Le modèle arrête de deviner votre intention et se met à l'exécuter. Quand j'ai lancé la génération, ce qui est revenu n'était pas un template générique. C'était ma structure : un hero en 100vh avec des visuels placeholder, un duo terracotta-et-noir qui ressemblait à une décision de design plutôt qu'à un réglage par défaut, et chaque section de mon croquis dans l'ordre où je les avais esquissées.
Les placeholders étaient exactement cela — des placeholders. Mais l'ossature était bonne. Et obtenir la bonne ossature dès la première génération, c'est tout l'enjeu, parce que tout ce qui suit relève du raffinement, pas de la reconstruction. Il fallait maintenant quelque chose de réel dans ce hero. L'heure de changer d'outil.
Générer les assets dans Higgsfield
Higgsfield est une plateforme, pas un modèle unique — voyez-la comme un seul login qui donne accès à toute une étagère de générateurs d'images et de vidéos. Un jour donné, vous avez GPT Image 2, Nano Banana Pro, Seedance 2.0 et une longue liste d'autres, tous derrière la même interface. Le catalogue de modèles de Higgsfield ne cesse de s'étendre, et j'ai suffisamment utilisé la plateforme pour avoir des opinions sur le modèle à choisir selon la situation — j'ai détaillé un pipeline de production complet dans mon build d'agence créative automatisée avec Claude et Higgsfield.
Pour ce portfolio, il me fallait deux choses : un personnage en illustration 3D basé sur moi, puis ce personnage animé en une boucle hero 4K. Deux jobs différents, deux modèles différents.
La star du job vidéo, c'est Seedance 2.0 4K. Ce qui compte, ce n'est pas seulement la qualité — c'est qu'il génère en 4K native. Sur la plupart des plateformes, « vidéo 4K » signifie que le modèle rend en 1080p et qu'un upscaler étire le résultat ensuite, ce qui adoucit les contours, introduit des artefacts et ajoute une étape de rendu. Seedance 2.0 saute tout ça. Les frames sortent du modèle en 4K. Pour une vidéo d'arrière-plan de hero qu'un visiteur pourrait regarder sur un écran de 27 pouces, cette netteté native est tout l'intérêt. Pas de taxe d'upscaling.
Mais avant de pouvoir animer quoi que ce soit, il me fallait le personnage. Ça s'est avéré être la partie la plus délicate de tout le build.
Réussir le personnage 3D (au-delà de la vallée de l'étrange)
Je suis parti d'une seule photo de moi. Le prompt : un personnage en illustration 3D en pied, fond de studio terracotta assorti au site, cadré en 16:9 pour qu'il s'insère directement dans le hero.
J'ai d'abord essayé GPT Image 2. Puis Nano Banana Pro. Et voici la partie honnête — les premiers résultats étaient mauvais d'une façon très particulière. Ils étaient trop réalistes. Les modèles poussaient sans cesse vers un rendu hyper-détaillé, quasi photographique de mon visage, et l'effet atterrissait en plein dans la vallée de l'étrange. Ce n'était plus un personnage 3D stylisé ; c'était un clone de moi légèrement faux, et mon cerveau l'a signalé comme anormal en une demi-seconde. « Flippant » est le terme technique que j'ai employé sur le moment.
La solution a été d'itérer vers moins de réalisme, pas plus. J'ai orienté les prompts vers un look 3D clairement illustré et stylisé — le genre de proportions et de surfaces qu'on verrait dans un bon court-métrage d'animation, où le personnage se lit comme un objet designé plutôt que comme un humain scanné. Quelques passes plus tard, j'ai trouvé l'équilibre : reconnaissable comme moi, clairement une illustration 3D, zéro malaise de vallée de l'étrange. En pied, décor de studio terracotta, 16:9.
Leçon à garder en poche : quand un personnage généré par IA semble malaisant, l'instinct est d'ajouter du détail et du réalisme pour le « réparer ». C'est l'inverse. C'est le réalisme qui casse tout. Poussez vers la stylisation et le malaise disparaît.
Avec un personnage qui me plaisait vraiment, je suis passé à l'animation.
Animer dans Seedance 2.0 4K
J'ai injecté l'image du personnage retenu dans Seedance 2.0 4K avec un prompt serré : le personnage marche lentement dans un studio vide, jette un regard à la caméra, détourne les yeux. Dix secondes. 16:9. 4K. Bitrate élevé.
Cette précision est délibérée. « Marche et jette un regard à la caméra » donne au modèle un arc de mouvement clair et simple — rien d'acrobatique, rien qui exige une physique parfaite à la frame près qu'il pourrait rater. Une marche lente et un seul regard, c'est exactement le genre de mouvement retenu que ces modèles réussissent, et le retenu est de toute façon ce que vous voulez derrière un texte de hero. Vous ne faites pas un clip musical ; vous faites du mouvement ambiant qui attire l'œil sans voler la vedette au titre.
Le téléchargement est revenu propre, en 4K. Pas d'upscaling, pas de post-traitement, pas d'étape « laisse-moi passer ça dans Topaz pour le sauver ». Le clip était assez net pour tenir derrière du texte en pleine taille de viewport sans faiblir.
Si vous préférez que quelqu'un construise ce genre de pipeline site-et-vidéo piloté par l'IA pour vous, de bout en bout, c'est une bonne partie de ce que je fais — vous pouvez voir l'étendue de mon travail sur mon profil Fiverr. Mais honnêtement, le workflow s'apprend, alors laissez-moi continuer à vous montrer comment les pièces s'assemblent.
Intégrer le clip 4K dans le hero
De retour dans Claude Design 2.0, l'intégration de la vidéo a été la récompense. Le clip est passé en arrière-plan du hero — et les réglages ici comptent plus qu'on ne le pense :
- Muet. Une vidéo de hero qui joue du son au chargement est une machine à rebonds. Silencieuse, toujours.
- Contrôles masqués. Pas de barre de lecture, pas de bouton play. C'est un arrière-plan, pas un lecteur multimédia.
- En boucle. Dix secondes, sans couture, en continu.
- Texte et CTA centrés en bas, exactement comme le wireframe le spécifiait, posés sur les images en mouvement.
À l'instant où le personnage 4K a commencé à boucler derrière le titre, le site a cessé de ressembler à un brouillon généré et a commencé à ressembler à quelque chose qui a un pouls. C'est le basculement émotionnel qu'un hero vidéo vous offre — un site statique dit « voici mon travail », un site vivant dit « voici qui je suis ». Pour un portfolio personnel, cette différence est tout l'argumentaire.
Le site était désormais vivant, mais il n'était pas encore juste. La graisse du titre était trop lourde, l'orange semblait terne, et il y avait sur le hero un dégradé dont je ne voulais pas. Exactement là où l'édition sur canvas de Claude Design 2.0 a prouvé sa valeur.
Éditer le design sans re-prompter toute la page
Voici la fonctionnalité qui sépare le Claude Design reconstruit de l'ère « régénère et prie » des outils de design IA. Au lieu de re-prompter la page entière à chaque petit changement — en risquant que le modèle reconstruise quelque chose que vous aimiez — vous éditez directement sur le canvas. L'éditeur visuel repensé d'Anthropic, selon l'annonce de Claude Design par Anthropic, vous donne un contrôle WYSIWYG pour que les petits ajustements ne brûlent pas un tour de modèle complet.
En pratique, il existe en gros trois niveaux d'édition, et savoir lequel choisir est la moitié du talent :
- La manipulation directe — sélectionnez un élément et faites-le, tout simplement : glissez-le, redimensionnez-le, retapez le texte, ajustez l'alignement, sans aucun prompt. C'est là que j'ai aligné à gauche le contenu du hero et allégé la graisse de la police du titre — des changements qu'il aurait été absurde de décrire en une phrase quand je pouvais les régler à la main.
- Les ajustements plus profonds — des contrôles façon potentiomètres pour l'espacement, la couleur et la mise en page, avec la possibilité de propager un changement sur tout le design d'un coup. C'est là que j'ai éclairci l'orange sur tout le site et basculé l'ensemble du site vers une police plus propre en un seul geste, au lieu de traquer chaque bloc de texte.
- L'accès au niveau du code — plongez dans le markup sous-jacent quand vous voulez un contrôle chirurgical que l'éditeur visuel ne peut pas offrir. C'est là que j'ai supprimé proprement le dégradé du hero.
Regardez ce qu'a réellement été cette séquence : aligner le hero à gauche à la main, éclaircir l'orange globalement, changer la police du site en un geste, plonger dans le code pour retirer le dégradé du hero, puis alléger la graisse du titre. Cinq changements significatifs, zéro régénération de page complète, et pas une seule fois je n'ai risqué que le modèle reconstruise « serviablement » une section dont j'étais satisfait.
C'est ça, le vrai déblocage. Le secret honteux de l'ancien workflow, c'était que chaque re-prompt était un pari — vous demandiez un ajustement et receviez trois « améliorations » non sollicitées qu'il fallait ensuite défaire. Éditer directement redonne à l'itération de design sa vraie nature : une série de petits gestes sûrs et réversibles. Si vous voulez la version stratégique plus poussée de ce handoff, je l'ai exposée dans mon workflow de sites web avec Claude Code et les outils de design IA.
Une fois le look verrouillé, il restait un job avant l'export : s'assurer que tout ne s'effondre pas sur un téléphone.
Rendre le portfolio 3D animé responsive
Un hero vidéo et une mise en page desktop soignée ne valent rien si le site s'effondre sur mobile, là où se trouvent en réalité plus de la moitié de vos visiteurs. Dans Claude Design 2.0, j'ai vérifié le comportement sur petit écran et corrigé la casse évidente : les sections Journal et Selected Work, confortablement côte à côte sur desktop, devaient s'empiler verticalement sur les viewports étroits au lieu de se comprimer en colonnes illisibles.
C'est une passe rapide mais non négociable. Le hero 4K se réduit avec grâce — un avantage de la 4K native est qu'elle se sous-échantillonne proprement vers les petits écrans au lieu de paraître floue. Mais la logique de mise en page doit être traitée délibérément. Empiler les sections à deux colonnes, confirmer que le CTA restait accessible, vérifier que le titre ne débordait pas — dix minutes de travail qui vous évitent de livrer quelque chose qui a l'air cassé sur l'appareil précis où la plupart des gens l'ouvriront.
Le responsive réglé, le prototype était franchement bon. Mais un prototype Claude Design, aussi poli soit-il, reste un prototype. Pour le rendre réel, il me le fallait en code.
Exporter vers Claude Code pour un vrai contrôle
C'est ici que beaucoup de sites construits par IA atteignent un plafond. Ils vivent à l'intérieur de l'outil qui les a créés, et dès que vous voulez quelque chose que l'outil ne sait pas faire, vous êtes coincé. Claude Design 2.0 évite ce piège avec un handoff propre.
Deux sorties possibles :
- Share → Send to Claude Code pousse le projet directement dans une session Claude Code.
- Download as ZIP vous remet les fichiers bruts, à ouvrir où bon vous semble.
Je l'ai envoyé vers Claude Code, lancé en local, et c'est là que s'est joué le polish qui sépare « généré par IA » de « construit par un professionnel » — le genre de choses sur lesquelles un outil visuel ne peut sincèrement pas raisonner aussi bien qu'un agent de code travaillant dans le vrai codebase :
- Le flux et l'espacement des sections — resserrer le rythme vertical entre les sections pour que la page respire au lieu de ressembler à des blocs empilés. J'ai déjà écrit sur le fait qu'une grande part du « premium » n'est en réalité qu'une discipline d'espacement et de flux.
- Les états hover sur les éléments du portfolio — le genre de micro-interaction qui signale le soin du détail. Une légère élévation, un décalage, quelque chose qui récompense le curseur.
- Les animations de fondu — des sections qui apparaissent en douceur au scroll plutôt que de surgir d'un bloc.
- Le CTA de footer — affiner l'appel à l'action final pour que la page se referme avec intention.
Claude Code opérant sur de vrais fichiers est un outil fondamentalement différent d'un éditeur visuel. Il raisonne sur l'ensemble du codebase, y applique des changements cohérents, et vous donne le contrôle au niveau du code qui transforme un joli prototype en quelque chose que vous déploieriez vraiment. L'outil de design vous amène magnifiquement presque au bout. Claude Code boucle la dernière ligne droite, celle que tout le monde remarque.
À ce stade, j'avais un portfolio 3D animé véritablement livrable : hero avec personnage en 4K native, mise en page éditoriale, responsive, états hover et animations au scroll soignés, du vrai code m'appartenant. Mais ça restait, fondamentalement, une page d'accueil statique. Et un portfolio qu'on ne peut pas mettre à jour est une impasse.
L'étape qui transforme un prototype en plateforme
Voici la limite honnête, celle que les vidéos de démo bien léchées passent sous silence. Tout ce qui précède produit un magnifique site statique. Le Selected Work est codé en dur. Les entrées du Journal sont figées dans le markup. Envie d'ajouter un nouveau projet ? Éditez le code. Publier un nouveau billet de journal ? Éditez le code. C'est acceptable pour un build ponctuel et totalement intenable pour un portfolio vivant.
La solution — et c'est le prochain build naturel, réalisé entièrement dans Claude Code — est un CMS backend. Une couche de contenu qui me permet de gérer les pièces du portfolio, de créer des pages projet individuelles et de publier des billets de journal sans toucher au codebase à chaque fois. C'est la différence entre une page d'accueil et une plateforme. J'ai déjà construit exactement ce pattern et je l'ai documenté dans rendre les sites web éditables par les clients avec Claude Code, et la même approche s'applique que le client soit un client payant ou simplement le futur moi qui essaie de publier une nouvelle étude de cas un dimanche soir.
Cette étape CMS est ce qui sépare discrètement ceux qui ont fait la démo d'un site construit par IA de ceux qui en exploitent réellement un. La page d'accueil est la partie facile, celle du shoot de dopamine. L'infrastructure de contenu en dessous est ce qui rend le tout réel — et c'est vers là que se dirige la conversation sur le design web par IA.
Foire aux questions
Peut-on vraiment construire un portfolio 3D animé avec l'IA et sans coder ?
Oui — vous pouvez obtenir un portfolio entièrement designé, responsive, avec hero vidéo, sans écrire de code, en utilisant Claude Design 2.0 pour le site et Seedance 2.0 4K de Higgsfield pour l'animation. Le hic, c'est que le dernier kilomètre de polish (états hover, animations au scroll, un CMS) est bien plus simple et plus contrôlable une fois le projet exporté vers Claude Code : « sans code » vous donne un excellent prototype, mais un peu de code vous donne un vrai produit.
Qu'est-ce qui distingue Seedance 2.0 4K des autres modèles vidéo IA ?
Sur Higgsfield, Seedance 2.0 génère nativement en 4K au lieu de rendre en résolution inférieure puis d'upscaler. Cela supprime une étape de perte de qualité et une phase de rendu supplémentaire, si bien que le clip est assez net pour tenir derrière un texte de hero en plein viewport sur de grands écrans, sans artefacts. Il prend aussi en charge la génération multi-plans avec des personnages cohérents, d'après la documentation du modèle chez Higgsfield.
Pourquoi mon personnage 3D généré par IA a-t-il l'air malaisant, et comment corriger ça ?
Un personnage IA semble généralement étrange parce que le modèle a poussé le rendu trop loin vers le photoréalisme, l'envoyant dans la vallée de l'étrange. La solution est contre-intuitive : promptez pour plus de stylisation, pas plus de détail. Orientez vers un look 3D clairement illustré, aux proportions designées, et le malaise disparaît parce que le cerveau le lit comme un personnage intentionnel plutôt que comme un clone raté.
Comment fonctionne le handoff de Claude Design vers Claude Code ?
Depuis Claude Design 2.0, utilisez Share → Send to Claude Code pour pousser le projet directement dans une session Claude Code, ou téléchargez le projet en ZIP et ouvrez-le en local. À partir de là, Claude Code travaille sur les vrais fichiers, et c'est là que vous gérez les raffinements au niveau du code que l'éditeur visuel ne peut pas offrir : espacement cohérent, états hover, animations au scroll, et à terme un CMS backend. Voir la section sur l'export ci-dessus pour le déroulé complet.
La serviette en papier était tout le secret
Revenez à ce clip de dix secondes — la version 3D de moi arpentant un studio vide, jetant un regard à la caméra. C'est la partie que tout le monde remarque. Mais ce n'est pas celle qui a rendu le site bon.
Le site est bon grâce à quatre minutes passées avec un stylo avant d'ouvrir le moindre outil. Le wireframe. Les cinq sections claires. Les instructions précises remises au modèle au lieu d'un vœu vague. Tout ce qui s'est produit de puissant ensuite — la palette terracotta trouvée dès la première génération, l'édition sur canvas qui raffine au lieu de reconstruire, le handoff propre vers Claude Code — tout cela s'est démultiplié à partir d'un plan clair confié à un modèle capable. L'IA n'a pas designé mon portfolio. Je l'ai designé, et l'IA l'a exécuté à une vitesse et une fidélité qui m'auraient coûté un mois et une facture à quatre chiffres bien tassés il y a deux ans.
Alors voici votre défi pour les prochaines 24 heures : avant de toucher à Claude Design, Higgsfield ou n'importe quel builder IA, dessinez la chose. Cinq sections, de haut en bas, sur du vrai papier. Écrivez trois phrases sur le ressenti qu'elle doit dégager. Puis — et seulement alors — ouvrez les outils. Vous serez sincèrement surpris de voir à quel point la première génération revient meilleure quand le modèle sait enfin ce que vous voulez vraiment.
Envie d'un site comme celui-ci, construit pour vous ?
Si vous préférez sauter les tâtonnements et faire construire de bout en bout un portfolio piloté par l'IA — hero vidéo en 4K native, mise en page éditoriale, du vrai code qui vous appartient — c'est exactement le genre de projet que je prends. Envoyez-moi l'idée brute et je vous dirai honnêtement si ce pipeline lui convient ou si vous feriez mieux de tourner de vraies images. Vous pouvez lancer la conversation via mon profil Fiverr.
