5 projets pour débuter dans l'IA, avec les prompts à coller dans Claude Code
Portfolio, app web et mobile, intro animée, tri automatique des mails, premier agent. Cinq builds faisables en un week-end, avec les prompts exacts, le temps réel, le coût et le piège de chacun.
10 août 2026 · 11 min de lecture
Le problème quand tu débutes
Tu as installé Claude Code. Tu as regardé trois vidéos. Et tu restes devant un terminal vide, parce que « apprendre l'IA » n'est pas une tâche : c'est une intention. Ce qui débloque, c'est un projet fini, qui tourne, que tu peux montrer.
Tu n'apprends pas en lisant sur l'IA, tu apprends en livrant cinq trucs qui marchent.Voilà cinq projets faisables en un week-end, du site perso à l'agent qui utilise des outils. Pour chacun : le temps réel, le coût réel, les prompts exacts à coller dans l'ordre, la structure de fichiers attendue et le piège qui te fera perdre une heure si personne ne te le dit.
Tout est vérifié sur Claude Code 2.1.226 et les versions de paquets citées plus bas. Aucun des cinq ne demande de savoir coder : tu décris, tu colles, tu vérifies.
Le Claude AI Lab, c'est ma communauté Skool où je partage mes systèmes Claude et les modules plus avancés. L'accès est à $67/mois.
Rejoindre le Lab →claude --version.node --version te le dit en une seconde.Portfolio one-page
Un site perso propre et éditable, sans template payant et sans page qui ressemble à celle de tout le monde. C'est le projet le plus rapide des cinq, et celui qui te sert le plus vite.
30 à 45 minutes · environ 0 € (Vercel gratuit, tokens négligeables) · Node 20+, un compte Vercel.
Commence par installer la bibliothèque de skills design officielle d'Anthropic, qui donne à Claude Code des conventions de composants au lieu de le laisser improviser :
/plugin marketplace add anthropics/skills
Puis les trois prompts, dans l'ordre.
Crée un projet Vite + React + TypeScript nommé `portfolio`. Installe et configure
Tailwind CSS et shadcn/ui : lance `npx shadcn@latest init` avec le style "new-york"
et la couleur de base "stone". Configure l'alias `@/` dans tsconfig.json ET
vite.config.ts (sinon les imports shadcn cassent). Structure : `src/components/`
pour les sections, `src/App.tsx` qui les assemble. Crée 5 composants vides mais
typés : Hero, About, Projects, Contact, Footer. Lance `npm run dev` et confirme
que la page s'affiche sur localhost:5173.
Voici mes infos : [TON NOM], [TON MÉTIER en une ligne], 3 projets avec {titre,
description courte, lien}, email [TON EMAIL]. Remplis les 5 sections. Hero : titre
en gros (Fraunces ou une serif via @fontsource), sous-titre, 2 boutons shadcn
`Button`. Projects : une `Card` shadcn par projet. Contact : un lien mailto stylé.
Palette : fond stone-50, UN seul accent cohérent que tu choisis. Responsive
mobile-first. Aucune librairie d'animation pour l'instant.
Ajoute des transitions douces : `scroll-behavior: smooth` global et une
`transition` au hover des Cards (pas de librairie). Vérifie le contraste WCAG AA
sur tous les textes. Puis `npm run build`, corrige les erreurs TypeScript s'il y
en a, et déploie avec `vercel --prod`. Donne-moi l'URL finale.
Tu dois obtenir src/App.tsx, src/components/{Hero,About,Projects,Contact,Footer}.tsx, tailwind.config.js, components.json et tsconfig.json.
shadcn casse si l'alias @/ n'est pas configuré dans tsconfig.json ET dans vite.config.ts. Claude oublie le second une fois sur deux. Si un import @/components/... échoue, redemande-lui explicitement de vérifier les deux fichiers.
To-do web et mobile
Une app de tâches avec la même charte sur navigateur et sur téléphone. L'intérêt du projet n'est pas la to-do, c'est d'apprendre à partager une logique entre deux plateformes sans la réécrire.
1 à 2 heures · environ 0 € · Node 20+, l'app Expo Go installée sur ton téléphone.
Crée une app to-do en React + TypeScript (Vite). Fonctions : ajouter une tâche,
la cocher, la supprimer, filtrer (toutes / actives / faites). Persiste dans
localStorage. Mets toute la logique dans un hook `useTodos()` réutilisable (c'est
lui qu'on partagera avec le mobile). Design minimal : liste centrée, input en
haut, checkbox à gauche. Lance et vérifie que ça marche sur localhost.
Crée maintenant une app Expo (React Native, TypeScript) nommée `todo-mobile` qui
réutilise EXACTEMENT la même logique que le hook `useTodos()`. Copie-le et
remplace localStorage par AsyncStorage
(`@react-native-async-storage/async-storage`). Réplique le design : même
hiérarchie, mêmes couleurs. Utilise `expo start` et donne-moi le QR code à
scanner avec Expo Go.
Crée un fichier `theme.ts` partagé (couleurs, espacements, tailles de police) et
fais que web ET mobile l'importent, pour garantir la même charte. Ajoute un état
vide ("Aucune tâche, ajoute-en une") et un compteur de tâches restantes en bas.
Vérifie que cocher une tâche persiste après redémarrage sur les deux plateformes.
Tu dois obtenir web/src/hooks/useTodos.ts, web/src/App.tsx, todo-mobile/App.tsx et todo-mobile/theme.ts.
AsyncStorage est asynchrone, localStorage ne l'est pas. Si tes tâches n'apparaissent pas au lancement du mobile, c'est que Claude a oublié un await au chargement initial. Demande-lui d'envelopper la lecture dans un useEffect async.
Intro animée par code
Une intro vidéo animée écrite en React, rendue en MP4, sans jamais ouvrir un logiciel de montage. Le format sort direct en vertical, prêt pour Reels et TikTok.
45 minutes · environ 0 € (rendu local) · Node 20+ seulement.
Installe d'abord la skill maintenue par l'équipe Remotion, qui impose au modèle les conventions de la bibliothèque :
/plugin marketplace add remotion-dev/skills
Crée un projet Remotion (`npm create video@latest`, template "Hello World",
TypeScript). Explique-moi la structure : où est la Composition, où je règle les
fps (mets 30) et la durée (mets 4 secondes, soit 120 frames), format 1080x1920
vertical.
Crée une intro de 4 secondes au format 1080x1920 : (1) mon texte [TON TEXTE] qui
apparaît avec un `spring()` scale de 0 à 1 sur les 20 premières frames, (2) un
sous-titre qui fade-in par-dessous entre les frames 30 et 45 avec `interpolate()`
sur l'opacité, (3) un léger zoom continu du fond sur toute la durée. Fond couleur
[TA COULEUR]. Respecte les best practices Remotion : aucune animation basée sur
Date.now(), tout passe par useCurrentFrame.
Rends la vidéo en MP4 :
`npx remotion render src/index.ts MaComposition out/intro.mp4`. Si le rendu
échoue, diagnostique. Donne-moi le chemin du fichier final et son poids.
Tu dois obtenir src/Composition.tsx, src/Root.tsx, src/index.ts et out/intro.mp4.
Un point que beaucoup de tutos traînent encore : tu n'as pas besoin d'installer ffmpeg. Depuis Remotion 4, une version allégée de ffmpeg est embarquée dans la bibliothèque, et le rendu fonctionne sans aucune installation système. Si tu tombes sur une instruction qui te demande de l'installer à la main, elle date d'avant.
Toute animation doit dériver de useCurrentFrame(), jamais d'un timer JavaScript. Sinon l'aperçu bouge, mais la vidéo rendue sort figée. La skill Remotion force cette règle, vérifie quand même que Claude ne l'a pas contournée.
Tri automatique de tes mails
Tes mails classés et étiquetés tout seuls, toutes les quinze minutes. C'est le premier des cinq qui te fait gagner du temps chaque jour au lieu de simplement exister.
1 heure · quelques euros par mois maximum · un compte Make, un compte Gmail, une clé API Anthropic.
Le plan gratuit de Make couvre 1 000 crédits par mois, ce qui suffit largement pour un volume de mails personnel. Côté modèle, Claude Haiku 4.5 (claude-haiku-4-5) est le moins cher de la gamme et amplement suffisant pour coller une étiquette sur un mail.
Ce projet se fait en deux temps. D'abord la logique de classification, à tester dans Claude avant de brancher quoi que ce soit :
Écris-moi un prompt de classification d'emails qui prend {expéditeur, objet,
extrait du corps} et retourne UNIQUEMENT un label parmi cette liste fermée :
[Client, Facture, Newsletter, Perso, À traiter]. Aucun texte autour, juste le
label. Ajoute une règle : si incertain, retourne "À traiter". Teste-le sur 5
exemples que je te donne.
Puis le scénario d'automatisation :
Guide-moi pas à pas pour construire ce scénario Make : (1) trigger "Watch emails"
Gmail sur les nouveaux mails, toutes les 15 minutes, (2) module HTTP ou Anthropic
qui envoie {from, subject, body tronqué à 500 caractères} à Claude Haiku avec mon
prompt de classification, (3) routeur qui applique le label Gmail correspondant à
la réponse. Donne-moi la config exacte de chaque module : méthode, endpoint,
headers, mapping des champs.
Tu repars avec l'export JSON du scénario Make et ton prompt_classification.txt.
Sans liste fermée de labels, le modèle en invente un et Make plante au moment d'appliquer une étiquette qui n'existe pas. C'est la whitelist de cinq labels dans le prompt qui rend le montage fiable. Et tronque toujours le corps du mail à 500 caractères, sinon le coût grimpe pour rien.
Ton premier agent IA
Un assistant en terminal qui répond à tes questions et sait utiliser des outils à ta place. C'est le projet qui fait passer de « je discute avec un modèle » à « je construis un système qui agit ».
1 heure · quelques centimes à l'usage · Python 3.10 minimum, une clé API Anthropic dans la variable d'environnement ANTHROPIC_API_KEY.
Crée un projet Python avec le Claude Agent SDK (`pip install claude-agent-sdk`).
Écris `agent.py` : un agent avec un system prompt "Tu es un assistant personnel
concis et factuel", une boucle terminal qui lit ma question, l'envoie à Claude, et
affiche la réponse. Gère `Ctrl+C` proprement. Confirme que je peux poser une
question et recevoir une réponse.
Ajoute un premier outil à l'agent : `get_current_weather(ville)` qui appelle
l'API open-meteo (gratuite, sans clé). Déclare l'outil au SDK avec un schéma
d'entrée typé. Quand je demande la météo d'une ville, l'agent doit appeler l'outil
et intégrer le résultat dans sa réponse. Montre-moi les logs de l'appel d'outil.
Ajoute un 2e outil `save_note(texte)` qui écrit dans un fichier `notes.txt` local,
et garde l'historique de la conversation en mémoire (liste de messages) pour que
l'agent ait le contexte des échanges précédents. Teste : demande la météo, puis
"note-la", et vérifie que la note contient bien la ville et la température.
Tu dois obtenir agent.py, notes.txt et requirements.txt.
Deux détails vérifiés qui t'évitent une session de debug : le paquet PyPI demande Python 3.10 ou plus (pas 3.11, contrairement à ce qu'on lit souvent), et l'API open-meteo répond bien sans aucune clé, donc rien à créer côté météo.
Le SDK exige ANTHROPIC_API_KEY en variable d'environnement, jamais en dur dans le code. Si l'agent renvoie une erreur d'authentification, c'est ça : fais un export ANTHROPIC_API_KEY=... avant de lancer, ou charge un fichier .env avec python-dotenv.
Dans quel ordre les faire
Les cinq sont indépendants, mais l'ordre ci-dessus est une progression réelle : tu passes de « Claude écrit des fichiers » à « Claude pilote un rendu vidéo » puis à « Claude déclenche des actions à ma place ». Si tu n'as qu'un week-end, voici le tri.
Le vrai gain
Aucun de ces cinq projets n'est impressionnant pris isolément. Ce qui compte, c'est ce que tu récupères en les enchaînant : tu sais installer une skill, décrire un résultat plutôt qu'une implémentation, reconnaître quand le modèle a pris un raccourci, et brancher une automatisation sur un compte réel.
Ce sont exactement les quatre gestes que demande n'importe quel système plus gros. Un pipeline de contenu, un agent commercial, un tableau de bord automatisé : c'est la même mécanique, avec plus d'étapes.
Un projet fini bat cinq tutos regardés. Prends celui qui te sert le plus lundi matin, colle les prompts dans l'ordre, et ne passe au suivant qu'une fois le premier réellement en ligne ou en train de tourner.
Tu veux aller plus loin ?
Dans le Lab, je partage mes prompts, mes templates et la façon dont je les enchaîne pour sortir du vrai travail, pas du blabla.
Une session ou un programme dédié, calibré sur tes outils et tes cas d'usage.
Et au quotidien, je partage un reel par jour sur Instagram : @quentin_iamarketing