Les quatre outils de la vidéo, Framer Motion, UI UX Pro Max, 21st.dev et Impeccable, installés dans Claude Code dans le bon ordre. Les commandes exactes, la phrase unique qui construit le site de A à Z, et les pièges que la vidéo n'a pas le temps de dire.
Chiffres relevés le 28 septembre 2026.
Chacun bouche un trou différent. UI UX Pro Max décide à quoi le site doit ressembler. 21st.dev fournit des blocs déjà dessinés. Motion les fait bouger. Impeccable relit le tout et enlève ce qui fait « site généré ». Sans le dernier, tu obtiens le même site que tout le monde : police Inter partout, dégradé violet vers bleu, cartes dans des cartes.
Il te faut Claude Code installé. Ensuite, deux vérifications dans ton terminal :
node --version
python3 --versionLes deux doivent répondre par un numéro de version. Node.js fait tourner les commandes npx des étapes 1 et 4. Python 3 fait tourner le moteur de recherche d'UI UX Pro Max : sans lui, la skill s'installe mais ne peut pas chercher. S'il en manque un, installe-le depuis nodejs.org ou python.org.
Crée ensuite un dossier pour ton site et ouvre Claude Code dedans :
mkdir mon-site && cd mon-site
claudeLes commandes qui commencent par / se tapent dans Claude Code. Les autres se tapent dans le terminal : ouvre un deuxième onglet dans le même dossier pour ne pas quitter Claude Code à chaque fois.
Dans la vidéo, tu vois passer npm install framer-motion. Ça marche toujours, mais tu n'as même pas besoin de le taper : Claude installe la bibliothèque tout seul quand il code le site. Ce qui compte, c'est qu'il écrive de bonnes animations. Pour ça, Motion publie une skill officielle, gratuite. Dans le terminal :
npx motion-aiL'installateur pose trois questions :
Choisis Global pour l'avoir dans tous tes projets. Project la limite au dossier courant.
Coche Claude Code avec la barre d'espace, puis valide avec Entrée.
Réponds Yes.
Tu obtiens la skill /motion (les bonnes pratiques écrites par le créateur de Motion, et la recherche dans sa documentation à jour) et un agent qui relit les animations. Pas de compte, pas de clé. Il branche aussi un serveur motion-plus : il ne sert qu'aux abonnés payants, tu peux l'ignorer.
Framer Motion est devenu Motion. Les deux paquets sont toujours publiés ensemble, à la même version (13.4.4 le 28 septembre 2026), donc les tutos qui disent framer-motion marchent encore. Dans le code neuf, l'import officiel est motion/react. Si Claude écrit l'un ou l'autre, ce n'est pas une erreur : c'est la même bibliothèque.
La skill de la vidéo. Deux commandes, à taper dans Claude Code (le bouton Copier t'évite de retaper le nom en entier) :
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillRelance Claude Code (/exit, puis claude). C'est tout : la skill se déclenche seule dès que tu demandes une page, une interface ou un design.
Ce qu'elle fait avant de coder : elle génère un design system complet pour ton secteur. La structure de page, le style, la palette, les polices, les effets, et surtout la liste de ce qu'il faut éviter (par exemple, pas de dégradé violet pour une banque). Elle puise dans 192 règles par secteur, 79 styles, 192 palettes et 74 duos de polices, puis vérifie une checklist avant de te livrer : contrastes, navigation au clavier, rendu sur quatre tailles d'écran.
Par défaut, le design system reste dans la conversation. Demande-lui de l'enregistrer dans ton projet : Claude le relira à chaque session au lieu d'en inventer un nouveau.
Génère le design system de mon
site avec UI UX Pro Max et
enregistre-le dans le projet
(option --persist).Il crée un fichier MASTER.md dans un dossier design-system/ : couleurs, typo, espacements, composants. C'est la référence de ton site.
Si un tuto te fait installer uipro-cli, c'est l'ancienne version : le dépôt précise qu'elle n'est plus à jour. La version actuelle en ligne de commande s'appelle ui-ux-pro-max-cli. À utiliser à la place du plugin, jamais en plus :
npm install -g ui-ux-pro-max-cli
uipro init --ai claude --global21st.dev, c'est la banque : plus de 12 000 composants, gabarits et thèmes publiés par des designers. Tu peux la parcourir sur 21st.dev, mais le vrai gain, c'est que Claude y cherche lui-même, grâce au serveur 21st.
Va sur 21st.dev/mcp, connecte-toi et génère une clé API. Copie-la.
Dans le terminal, remplace TA_CLE par ta clé, en gardant les guillemets :
claude mcp add --scope user \
--transport http 21st \
https://21st.dev/api/mcp \
--header "x-api-key: TA_CLE"Relance Claude Code et tape /mcp. Tu dois voir la ligne 21st · ✔ connected.
Cherche sur 21st.dev trois
options de hero animé pour mon
site, montre-les-moi, puis
intègre celle que je choisis.La recherche est gratuite et illimitée. Mais récupérer le code d'un composant est compté : sans abonnement, 21st.dev en autorise deux par jour (relevé le 28 septembre 2026). Choisis donc tes deux blocs clés, souvent le hero et les tarifs, et laisse Claude construire le reste avec UI UX Pro Max. La génération de composants par l'IA de 21st, elle, est payante.
L'outil officiel (21st init --client claude --write) écrit un fichier .mcp.json dans le dossier où tu te trouves, et ce fichier va chercher la clé dans une variable API_KEY_21ST. Si cette variable n'existe pas sur ton ordinateur, le serveur ne se connecte pas. La commande ci-dessus met la clé directement et marche dans tous tes projets.
Et si un vieux tuto te parle de Magic MCP ou de /ui : c'est l'ancien nom du serveur. Ses clés ont toutes été réinitialisées, elles ne marchent plus.
Celle que j'utilise le plus. Elle part d'un constat : tous les modèles ont appris sur les mêmes gabarits, donc sans consigne tu obtiens les mêmes tics. Inter partout, dégradé violet vers bleu, cartes dans des cartes, texte gris sur fond coloré, une icône dans un carré arrondi au-dessus de chaque titre. Impeccable les connaît et les chasse.
npx impeccable installIl détecte Claude Code, te demande si tu l'installes dans ce projet ou partout, puis te propose un hook : réponds oui (l'encadré plus bas explique pourquoi).
/impeccable initIl te pose quelques questions (à qui s'adresse ton site, ce que tu vends, sur quel ton tu parles) et écrit un fichier PRODUCT.md. Toutes les commandes suivantes s'en servent.
Les cinq commandes à connaître :
/impeccable critique : la revue design (hiérarchie, clarté, impression générale)./impeccable audit : accessibilité, performance, affichage mobile./impeccable polish : la passe finale avant de publier./impeccable animate : du mouvement qui a un sens, pas de la décoration./impeccable bolder ou /impeccable quieter : plus audacieux, ou plus sobre.Il y en a 24 en tout. Tape /impeccable seul pour les voir.
À chaque fois que Claude modifie un fichier d'interface, le détecteur d'Impeccable passe (61 règles) et lui renvoie ce qui cloche. Tu n'as rien à demander. C'est pour ça qu'il faut répondre oui à l'installation. Le hook est rangé dans .claude/settings.local.json, propre à ton ordinateur.
Le détecteur marche aussi sur n'importe quelle adresse :
npx impeccable detect \
https://ton-site.comIl ouvre la page dans ton Chrome et liste les tics d'IA qu'il trouve. Pratique pour juger ton site actuel avant de le refaire, ou la maquette qu'une agence vient de t'envoyer.
Le moment de la vidéo : une seule commande, et Claude construit le projet de A à Z. Une fois les quatre outils installés et /impeccable init fait, colle ceci dans Claude Code :
Crée le site de ma marque avec
Framer Motion, UI UX Pro Max,
21st.dev et Impeccable.Ça marche tel quel, mais Claude devra deviner ce que tu vends. Voici la version complète : remplace ce qui est entre crochets.
Crée le site de [ma marque], qui
[ce que je vends, en une phrase],
pour [ma cible], en Next.js.
1. Génère le design system avec
UI UX Pro Max et enregistre-le
dans le projet.
2. Prends le hero et la section
tarifs sur 21st.dev.
3. Construis le reste : bénéfices,
témoignages, FAQ, appel à
l'action final.
4. Anime avec Motion (ex-Framer
Motion) : apparitions au scroll
et survols, rien qui clignote.
5. Termine par un audit puis un
polish avec Impeccable, lance
le site en local et donne-moi
l'adresse.Motion et les composants de 21st.dev sont écrits en React. Si tu demandes juste « un site », Claude peut partir sur du HTML simple (c'est même le choix par défaut d'UI UX Pro Max), et aucun des deux ne sert. Next.js, c'est React avec tout ce qu'il faut pour un site. Tu n'as rien à installer : Claude s'en charge.
Compte quelques minutes. Tu vois chaque étape passer à l'écran : le design system, les composants, les animations, la relecture. À la fin, Claude te donne une adresse du type localhost:3000 à ouvrir dans ton navigateur.
Celui qui défile à la fin de la vidéo, c'est iamrank.com, fait avec Impeccable. Ouvre-le aussi sur ton téléphone : c'est là que la plupart de tes visiteurs le verront.
/impeccable optimize, ou simplement « vérifie que le site reste rapide sur mobile ».