- Sites animés
- 8 leçons · 47 min
Un site sur mesure, pas un site d'IA
Fais créer par Claude Code un site qui a sa propre identité : le skill officiel de design, un brief en huit parties, ton skill de marque, une animation fluide et une vérification dans le navigateur.
Les 2 premières leçons sont gratuites, sans compte.
Ce que tu vas apprendre
- Reconnaître les looks par défaut des sites faits par une IA, et savoir quand un look est un vrai choix
- Installer le skill officiel frontend-design et comprendre ce qu'il demande à Claude
- Écrire un brief en huit parties : palette en hexadécimal, typographies, mouvement et critères de fin
- Faire proposer quatre directions visuelles avant la moindre ligne de code, et en choisir une
- Écrire le skill de ta marque pour que chaque nouvelle page garde la même identité
- Ajouter une animation GSAP ou une scène Three.js qui ne fait pas ramer, puis tout vérifier dans le navigateur
Pour qui, et ce qu’il faut savoir avant
Tu sais lancer Claude Code dans un dossier, tu lui as déjà fait construire une page, et le résultat ressemble à tous les sites faits par une IA. Pas besoin d'être designer : chaque mot du métier (hexadécimal, contraste, typographie) est expliqué la première fois qu'il apparaît. Il te faut un abonnement Claude payant et Node.js pour lancer le site sur ton ordinateur.
Yoan, ton formateur
Développeur web depuis plus de 9 ans, fondateur de linedev.fr
Le programme
8 leçons courtes, 47 min de lecture en tout.
- 1Pourquoi les sites faits par l'IA se ressemblentGratuite
- 2Le skill officiel de design : l'installer et le voir travaillerGratuite
- 3Un brief en huit parties, prêt à copier
- 4Quatre directions avant de coder
- 5Des couleurs, des polices et un mouvement lisibles par tous
- 6Ton skill de marque : une identité que Claude n'oublie pas
- 7Une scène qui bouge sans faire ramer : GSAP ou Three.js
- 8Vérifier dans le navigateur : téléphone, mode sombre, animations réduites
Yoan, ton formateur
Développeur web depuis plus de 9 ans, fondateur de linedev.fr
Avant de commencer
Ce qu’il te faut pour refaire chaque étape chez toi.
Ton ordinateur
macOS 13+, Windows 10 (version 1809)+ ou Linux (Ubuntu 20.04+, Debian 10+), avec 4 Go de mémoire
Ce que demande Claude Code. Pour les captures automatiques de la dernière leçon, Playwright demande Windows 11, macOS 14, ou Ubuntu 22.04 et plus.
Tes comptes
Un abonnement Claude Pro, Max, Team ou Enterprise, ou un compte Claude Console
L'offre gratuite de claude.ai ne donne pas accès à Claude Code.
À installer
Claude Code
Avec le plugin officiel frontend-design, installé pas à pas dans la deuxième leçon, offerte.
Page d’installation : code.claude.com
Pour vérifier, tape
claude --version: un numéro de version s’affiche.Node.js 24 (version LTS)
Pour lancer le site en local avec Vite, et installer GSAP, Three.js et Playwright.
Page d’installation : nodejs.org
Pour vérifier, tape
node --version: un numéro de version s’affiche.Google Chrome, ou un autre navigateur basé sur Chromium
Ses outils de développement mesurent les contrastes et simulent le mode sombre et les animations réduites.
Ce que tu sais déjà faire
Lancer Claude Code dans un dossier
Lire une page HTML et une feuille de style CSS, sans forcément savoir les écrire
Pas encore installé ? Le guide pas à pas montre chaque étape pour Windows, macOS et Linux.
Et après ?
- Si tu veux créer les images et les photos de ton site toi-même, c’est dans la formation Tes images et tes photos avec ComfyUI.
- Si tu veux écrire d'autres skills que celui de ta marque, et les tester, c’est dans la formation Les skills : apprendre un savoir-faire à Claude.
- Si tu veux transformer ton site en vraie application, avec comptes et paiement, c’est dans la formation Construire une vraie application avec Claude Code.
Une question ? contact@linedev.fr