Comment créer un site Web et des effets d'animation de niveau 10 000 dollars avec Claude Code

De l'installation des compétences de conception, à la collecte de matériaux de référence, à la rédaction des invites de construction, en passant par la réalisation de l'animation du curseur projecteur, la révision et la correction tour par tour, jusqu'au polissage final, ce guide complet te permet de t'y mettre sans aucune connaissance en programmation. Cet article est organisé et traduit à partir de l'article de monokern X.
(Contexte précédent : Claude Code a lancé la commande /goals : séparer l'exécution et l'évaluation pour éviter que l'IA agent ne paresse et ne mente)
(Contexte supplémentaire : Pratique : guide pas à pas pour faire passer Vibe Coding à un niveau expert avec 7 agents)

Table des matières

Toggle

• Première étape : Installer les compétences de conception
• Deuxième étape : Trouver des matériaux de référence
• Troisième étape : Rédiger l'invite de construction
• Quatrième étape : Animation du bloc héroïque
• Cinquième étape : Révision et correction
• Sixième étape : Polissage final
• Résultat

Les agences facturent 5 000 $ pour créer un site portfolio aussi soigné.

J'ai réalisé le mien en 2 heures. Voici le processus complet.

C'est un véritable compte rendu pratique, pas un modèle générique.

J'utilise mon propre portfolio comme exemple : les matériaux de référence que j'ai réellement utilisés, les invites que j'ai réellement envoyées, les bugs que j'ai réellement rencontrés et corrigés.

Aucune expérience en programmation nécessaire.

Première étape : Installer les compétences de conception

Par défaut, les sorties de conception de Claude sont médiocres. Mêmes polices, même mise en page, même aspect plat. Deux compétences résolvent ce problème.

• Frontend Design — Développé par Anthropic, tourne en arrière-plan, bloque les polices surutilisées comme Inter, promeut une typographie plus audacieuse, améliore la qualité du contenu.

Colle ceci dans Claude Code :

Install this skill: github.com/anthropics/skills/tree/main/frontend-design

Lorsque l'invite apparaît, autorise les modifications, installation globale.

• UI/UX Pro Max — 57 styles d'interface, 95 jeux de couleurs, 56 paires de polices, tu peux l'appeler directement lors de la construction.

Colle ceci dans Claude Code :

Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Bascule le sélecteur de mode en mode Auto, ainsi Claude ne demandera pas la permission à chaque étape.

Deuxième étape : Trouver des matériaux de référence

Ne décris pas ton site idéal dans l’abstrait, fais en sorte que Claude voie ce que tu veux.

Mon portfolio a utilisé « Il Capo Production » sur Awwwards comme référence principale.

awwwards.com/sites/il-capo-production

Le style sombre et cinématographique était exactement ce que je voulais.

Voici comment j'ai réellement procédé :

Au lieu de prendre une capture d'écran complète et de dire « fais-moi ça », j'ai extrait les parties que j'aimais bloc par bloc :

• 1.png — Bloc héroïque
• 2.png — Bloc en dessous du héros (œuvres présentées sous forme de vidéo + titre/description)
• 6.png — Pied de page et bas du site
• 11.png — Page de projet unique
• 12.png — Écran de chargement

Quant à la page du portfolio (page listant tous les travaux), le site de référence n'avait pas de mise en page correspondante. Je suis allé sur Pinterest et j'ai trouvé une mise en page différente avec un style similaire, et je l'ai capturée séparément en la nommant 11.png.

N'essaie pas de copier entièrement un site ; emprunte les bonnes parties de chaque site.

Mets tous les matériaux dans le dossier /reference du projet.

Troisième étape : Rédiger l'invite de construction

Utilise /ui-ux-pro-max au début de l'invite pour activer les compétences de conception.

Voici l'invite exacte que j'ai utilisée pour mon portfolio :

Invite à copier :

/ui-ux-pro-max
Crée un site portfolio personnel haut de gamme pour un développeur front-end. Il doit paraître cher, moderne et techniquement impressionnant,
avec des animations élégantes qui se chargent en douceur sur n'importe quel appareil.
Utilise les références de conception dans le dossier reference : 1.png est le bloc héroïque, 2.png est le bloc en dessous du héros
(affichant les œuvres sous forme de vidéo + titre/description), 6.png est le pied de page/bas du site, 7.png est la page du portfolio listant tous les travaux,
11.png est un exemple de page de projet unique en cliquant sur une œuvre depuis le portfolio, 12.png est l'écran de chargement.
Au centre du bloc héroïque, utilise me.png pour placer ma photo.
Tous les espaces réservés pour les images d'œuvres/projets utilisent example.png.

Avant de commencer la construction, pose-moi toutes les questions nécessaires pour clarifier.

La dernière ligne est cruciale
Claude s'arrêtera pour poser 4 à 6 questions sur le style, les polices, la mise en page, le niveau d'animation, le ton du contenu ; tes réponses formeront la base de l'ensemble du site.

Sois spécifique dans tes réponses, plus tu es précis ici, moins tu auras d'allers-retours par la suite.

Après tes réponses, Claude prend environ 5 minutes pour planifier, puis 10 minutes pour construire ; la première sortie est déjà assez solide.

Quatrième étape : Animation du bloc héroïque

Mettre une photo ordinaire au centre d'un bloc héroïque sombre est ennuyeux
Quelque chose doit se produire lorsque l'utilisateur déplace la souris.

J'ai eu l'idée du projecteur pour mon portfolio :

• Tout le bloc est sombre
• Ma photo est presque invisible par défaut
• Le curseur agit comme une lampe de poche — il « éclaire » moi
• La deuxième couche est juste une version lumineuse et chaude de la même photo

J'ai décrit ce concept à Claude et lui ai demandé de le développer :

« Dans le bloc héroïque, je veux un effet de curseur torche/projecteur. Fond sombre. Ma photo est presque invisible par défaut. Lorsque le curseur se déplace sur le bloc, il agit comme un projecteur — en révélant une version plus lumineuse et chaude de la photo en dessous à travers un masque circulaire doux suivant le curseur. Rayon de 100-150px, bords adoucis et estompés. Implémente cet effet. »

Claude l'a fait du premier coup. L'effet est exactement comme décrit — l'utilisateur déplace le curseur, la photo s'illumine là où il pointe.

Cinquième étape : Révision et correction

Avant de procéder à une vérification formelle de la qualité, fais défiler le site toi-même et note tout ce qui te semble anormal.

Ma liste après la première construction :

• Les transitions entre les pages semblent brusques — besoin de fondus doux
• L'effet projecteur a un retard notable, ne suit pas le curseur
• Certains éléments débordent de l'écran, ne s'adaptent pas
• Les polices ne correspondent pas au site de référence — semblent plus génériques que l'esthétique Il Capo

Note tous les problèmes, puis envoie-les d'un coup :

« Voici plusieurs problèmes à corriger, traite-les tous :\

2. [Décris le problème 1]\
3. [Décris le problème 2]\
4. [Décris le problème 3] »

Il est très important d'envoyer tous les problèmes en une seule fois.

Sixième étape : Polissage final

Après avoir corrigé les bugs évidents, effectue une vérification structurée de la qualité. Colle ceci dans Claude :

« S'il te plaît, examine ce site selon les critères suivants, indique honnêtement ce qui doit être amélioré :
— Typographie (utilisons-nous des polices IA surutilisées comme Inter ?)
— Couleurs (la palette est-elle sobre ou brouillonne ?)
— Hiérarchie (les tailles de texte guident-elles correctement le regard ?)
— Animations (fluides et intentionnées, ou saccadées et aléatoires ?)
— Version mobile (est-elle vraiment conçue pour le mobile, ou simplement une version réduite du bureau ?)
— Contenu (sobre et spécifique, ou remplissage IA générique ?) »

Claude notera chaque point. Après lecture, indique ton accord ou désaccord sur chaque point, puis regroupe en une seule invite les problèmes que tu souhaites corriger et envoie-la d'un coup.

Ne fais pas corriger les points avec lesquels tu n'es pas d'accord. Tu connais mieux ton site que lui.

Résultat

Tu obtiendras un site solide. Pas parfait — mais assez bon.

Lors de la première construction, certaines choses ne seront pas totalement correctes, peut-être que la version mobile aura besoin d'une autre passe, ou qu'une animation semblera légèrement décalée, c'est normal.

Itère à partir de là. Chaque jour, trouve une chose à améliorer et corrige-la.