Le guide complet : des sites pro avec Claude Code en 4 étapes

Le guide complet des 4 étapes, avec chaque commande à copier, pour faire des sites au design pro avec Claude Code.

Étape 1 : installer Claude Code

Va sur la doc officielle : https://docs.claude.com/en/docs/claude-code/setup

Copie la ligne qui correspond à ta machine et colle-la dans ton terminal.

macOS, Linux, WSL :

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell :

irm https://claude.ai/install.ps1 | iex

CMD :

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd

Sur Windows, il te faut Git for Windows installé avant : https://git-scm.com/download/win

Une fois installé, tu lances Claude Code depuis le dossier de ton projet avec :

claude

Étape 2 : installer Framer Motion (les animations)

La page officielle : https://www.npmjs.com/package/framer-motion

Dans le terminal, à la racine de ton projet :

npm i framer-motion

Le dépôt, si tu veux fouiller : https://github.com/motiondivision/motion

Étape 3 : ajouter le skill UI UX Pro Max

C'est lui qui donne à Claude Code une vraie culture du design : styles d'interface, palettes de couleurs, associations de polices, types de graphiques et règles d'UX.

Le dépôt : https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Depuis Claude Code, en deux commandes :

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Ou en ligne de commande :

npm install -g uipro-cli
cd /chemin/vers/ton/projet
uipro init --ai claude

Les autres assistants sont gérés pareil :

Assistant	Commande
Claude Code	`uipro init --ai claude`
Cursor	`uipro init --ai cursor`
Windsurf	`uipro init --ai windsurf`
Antigravity	`uipro init --ai antigravity`
GitHub Copilot	`uipro init --ai copilot`

Pour l'installer une fois pour tous tes projets, ajoute --global :

uipro init --ai claude --global

Étape 4 : piocher les composants sur 21st.dev

Va sur https://21st.dev

Ouvre l'onglet Components, choisis le composant qui te plaît, clique sur Copy prompt, puis colle la ligne directement dans Claude Code.

Tu peux en enchaîner plusieurs : un header, une section héros, une grille de cartes, un pied de page. Claude Code les assemble et Framer Motion les anime.

Le récapitulatif

Installer Claude Code
Installer Framer Motion
Ajouter le skill UI UX Pro Max
Coller un composant 21st.dev

Fais les quatre dans l'ordre, demande ton site en un prompt, et tu sors des pages qui ont l'air d'avoir été dessinées par un studio.

Une question ? Réponds直接 à ce message privé, je te réponds.