Comment J'ai Construit un Portfolio 3D Animé Avec l'IA
Dernière mise à jour : 1er juillet 2026
J'avais un portfolio qui ressemblait à un CV en trench-coat. Des captures d'écran statiques, une grille de cartes, une section À propos que personne ne lisait. Puis Anthropic a lancé Claude Design 2.0, et Higgsfield a livré Seedance 2.0 avec une sortie native 4K, et j'ai réalisé que je pouvais construire un portfolio 3D animé complet — avec vidéo hero, transitions fluides et vraie profondeur — sans After Effects, Cinema 4D ni motion designer.
Voici le workflow complet. Les étapes réelles, les outils, ce qui a cassé, et le portfolio qui en est sorti.
Pourquoi un portfolio 3D animé vaut enfin le coup maintenant
Claude Design 2.0 a ajouté prototypage, wireframing et outils de marquage. Seedance 2.0 4K de Higgsfield a apporté la génération vidéo 4K native avec cohérence de personnage. Ensemble, coût et temps sont tombés à « un long week-end. »
Le wireframe que j'ai esquissé avant de toucher à l'IA
Sur une serviette. Trois mots à côté : « mouvement, lumière, profondeur. » C'était le brief créatif. La serviette est le filtre qui empêche de se perdre dans les possibilités.
Mise en place du build dans Claude Design 2.0
Pas un remplacement de Figma — un outil de prototypage. J'ai commencé avec un prompt texte. La première version était correcte à 70%. Les outils de marquage ont sauvé la mise : au lieu de décrire les problèmes en texte, j'ai encerclé les cartes et écrit « plus de padding, pas de gradient, couleur plate, coins nets. » Trois passes de marquage et le design était prêt.
Générer les assets dans Higgsfield
Obtenir le bon personnage 3D
Les trois premiers essais ont atterri dans la vallée de l'étrange. La solution : styliser plus, pas moins. Au lieu de viser le photoréalisme, j'ai orienté vers un 3D légèrement stylisé. La vallée de l'étrange frappe le plus le photoréalisme. La stylisation légère la contourne complètement.
Animer dans Seedance 2.0 4K
Seedance 2.0 4K génère de la vidéo 4K native avec cohérence de personnage entre les clips. J'ai généré trois clips de 6-8 secondes. La qualité était assez nette pour du plein écran sur écran Retina.
Insérer le clip 4K dans le hero
Retour dans Claude Design : vidéo hero en couche de fond, autoplay, muet, en boucle avec fade-in lent. Le résultat avait immédiatement l'air d'avoir été construit par un studio.
Les trois modes d'édition
Mode marquage : Dessiner sur le design. Mode édition directe : Cliquer et modifier les propriétés. Mode prompt : Interface texte pour les changements majeurs. On peut utiliser les trois en alternance. L'interface devient le prompt.
Rendre le portfolio responsive
Claude Design génère des breakpoints responsive automatiquement — 80% corrects. Les trois corrections ont pris cinq minutes.
Export vers Claude Code
Claude Design exporte du code HTML/CSS/JS fonctionnel vers Claude Code. Le code a besoin de nettoyage mais c'est un point de départ fonctionnel. J'ai passé ~2 heures à nettoyer le CSS, optimiser le chargement vidéo et ajouter les balises meta SEO.
L'étape qui transforme un prototype en plateforme
Le portfolio est un site statique — pas de backend nécessaire. La leçon : l'ère du « j'ai besoin d'une équipe pour une expérience web premium » s'estompe pour les portfolios et landing pages.
Pour de l'aide sur les pipelines de construction : fiverr.com/s/EgxYmWD.
Questions fréquemment posées
Peut-on vraiment construire un portfolio 3D animé avec l'IA sans coder ?
Avec un minimum de code. Claude Design gère le design et le prototypage, Seedance génère les assets vidéo 3D, et l'export vers Claude Code produit du code fonctionnel qui a besoin de nettoyage mais saute l'essentiel du travail.
Qu'est-ce qui rend Seedance 2.0 4K différent ?
Rendu 4K natif, cohérence de personnage entre clips, et qualité de mouvement suffisante pour un usage web plein écran.
Pourquoi mon personnage 3D avait-il l'air effrayant ?
La vallée de l'étrange frappe le plus le photoréalisme. Stylisez plus, pas moins.
Comment fonctionne le transfert Claude Design vers Claude Code ?
Claude Design exporte le design en code HTML/CSS/JS fonctionnel. C'est du code exécutable qu'on peut modifier, pas une image.
La serviette était tout le truc
Trois mots — « mouvement, lumière, profondeur » — ont guidé chaque décision. L'IA était la vitesse. La serviette était la direction. Dessinez quelque chose avant d'ouvrir quoi que ce soit.
Travaillons Ensemble
- Fiverr : fiverr.com/s/EgxYmWD
- Portfolio : mejba.me
- Ramlit Limited : ramlit.com
- ColorPark : colorpark.io
- xCyberSecurity : xcybersecurity.io
