Formation Claude IA

Objectif pédagogique : Installer et configurer Claude (Chat, Cowork, Code), comprendre les différences, personnaliser son profil, connecter ses outils via MCP

• Comprendre la différence entre Claude AI, Cowork et Code : Découvrez les trois interfaces de Claude et apprenez quand utiliser chacune selon la tâche : conversation libre pour le brainstorming, Cowork pour piloter des projets complexes avec sub-agents et tâches en parallèle, Code pour la génération et l'édition de code en temps réel. Vous saurez choisir le bon mode à chaque étape de votre workflow.

• Découvrir Claude et comprendre comment il raisonne : Comparez un prompt vague vs un prompt structuré et constatez la différence de résultat. Vous comprendrez les limites de Claude, le phénomène des hallucinations, et surtout quand créer une nouvelle conversation plutôt que de poursuivre un échange trop long.

• Configurer son profil et ses préférences : Personnalisez Claude dans les Settings pour qu'il comprenne votre contexte professionnel : métier, outils utilisés, niveau technique. Un profil custom bien renseigné améliore drastiquement la pertinence des réponses dès le premier prompt.

• Configurer les instructions personnalisées : Définissez vos préférences de format de code, conventions de nommage, style de réponse (concis vs détaillé) et langue de travail. Ces instructions personnalisées s'appliquent à toutes vos conversations et garantissent une cohérence permanente.

• Découvrir Cowork et Claude Desktop : Explorez en profondeur les 3 modes (Chat, Cowork, Code), le fonctionnement des sub-agents, les tâches en parallèle et l'analyse d'images. Vous apprendrez à créer des espaces de travail, gérer le contexte et tirer parti de Claude Desktop pour une expérience native et fluide.

• Connecter Webflow via MCP : Installez et autorisez le connecteur MCP Webflow, sélectionnez votre site et testez la connexion en récupérant la liste des pages. Vous pourrez ensuite lire, modifier et publier du contenu Webflow directement depuis Claude.

• Connecter Figma via MCP : Reliez Figma à Claude pour récupérer automatiquement les couleurs du design system, les variables et les composants de référence. Vous travaillerez avec les vraies données du designer sans aucune erreur de transcription.

• La méthode CORIACE pour structurer ses prompts : Maîtrisez le framework complet : Contexte, Objectif, Rôle, Instructions, Attendu, Contraintes, Exemples. Chaque composant a un impact direct sur la qualité du résultat. Vous verrez la comparaison avant/après sur 3 cas concrets pour mesurer l'écart de qualité entre un prompt amateur et un prompt CORIACE.

• Tour des fonctionnalités avancées : Maîtrisez les Artifacts pour prévisualiser du code en direct, l'upload de fichiers et d'images pour l'analyse visuelle, la recherche web intégrée, l'exécution de code en temps réel et la création de fichiers exportables. Ces fonctionnalités décuplent la puissance de chaque interaction.

Objectif pédagogique : Apprendre le framework de prompting CORIACE, analyser un brief client, créer du contenu marketing section par section, créer des Projets Claude pour centraliser le contexte.

• Appliquer C.O.R.I.A.C.E sur du contenu : Mettez la méthode en pratique immédiatement en transformant un brief client vague en texte d'accroche percutant. Vous apprendrez à doser le contexte, à guider le ton et à obtenir un copywriting professionnel du premier coup.

• Appliquer C.O.R.I.A.C.E sur du code : Demandez un bouton CTA animé avec les bonnes contraintes techniques (vanilla JS, pas de librairie, responsive, accessible). Vous verrez comment des instructions précises éliminent les allers-retours et produisent du code propre et fonctionnel.

• Appliquer C.O.R.I.A.C.E sur de l'analyse : Auditez une landing page concurrente avec des recommandations concrètes et actionnables. Vous apprendrez à structurer un prompt d'analyse qui produit un livrable exploitable : scoring, points forts, faiblesses et plan d'action.

• Lire un brief client et structurer une landing page : Apprenez à poser les questions de clarification, définir les sections stratégiques et argumenter chaque choix. Vous saurez transformer un brief incomplet en une structure de page cohérente avec le parcours utilisateur optimal.

• Générer la hiérarchie H1-H6 complète pour le SEO : Construisez une structure de titres optimisée pour le référencement en intégrant les mots-clés naturellement. Vous apprendrez les règles de hiérarchie sémantique qui plaisent à Google sans sacrifier la lisibilité.

• Créer son premier Projet Claude : Centralisez le brief, la structure, les instructions et les fichiers de référence dans un Projet Claude. Fini le copier-coller de contexte à chaque conversation — tout est accessible et vous ne ré-expliquez plus jamais le contexte.

• Rédiger le contenu section par section : Générez du contenu marketing professionnel pour chaque section : hero (accroche, sous-titre, CTA), section problème/douleur, solution/programme, témoignages, tarifs, FAQ et CTA final. Chaque section a sa propre technique de prompting pour un copywriting percutant.

• Faire critiquer et améliorer le contenu par Claude : Utilisez Claude comme réviseur exigeant : identifiez les passages trop longs, les phrases qui sonnent "générées par IA", les CTA qui manquent de punch. Vous découvrirez les prompts de critique qui transforment un premier jet en contenu professionnel.

• Itérer jusqu'à un contenu publiable : Maîtrisez les techniques de reformulation, l'ajustement du ton selon la cible et la vérification de cohérence globale. Vous apprendrez le workflow d'itération qui permet d'atteindre un contenu final prêt à publier en 2-3 passes maximum.

Objectif pédagogique : Générer une identité visuelle complète, injecter les styles dans Webflow et Framer via MCP, designer les sections UI dans les Artifacts, ajouter des fonctionnalités JS.

• Créer une direction artistique à partir d'un brief : Analysez les inspirations du client, générez une palette de couleurs, sélectionnez les typographies et produisez un moodboard textuel complet. Claude produit des propositions cohérentes et argumentées que vous pouvez itérer jusqu'au résultat parfait.

• Générer une palette de couleurs avec justification : Créez un système de couleurs complet, primaires, secondaires, neutres, où chaque couleur est argumentée en fonction du brief et de la psychologie des couleurs. Vous obtenez une palette professionnelle et cohérente, pas un choix aléatoire.

• Choisir les typographies (heading/body) avec Google Fonts : Apprenez les combinaisons typographiques professionnelles, les règles de contraste entre heading et body, et comment tester la lisibilité. Claude vous propose des pairings Google Fonts éprouvés et adaptés à votre secteur.

• Injecter la style guide via MCP dans Webflow : Poussez directement vos variables de couleur et classes typographiques dans Webflow via MCP. En 2 minutes au lieu de 15 à la main, votre style guide complet est appliqué sans erreur de saisie.

• Injecter la style guide via MCP dans Framer : Configurez les color styles et text styles dans Framer via MCP, avec synchronisation automatique. Votre design system est injecté en un clic et reste cohérent sur toutes les pages.

• Récupérer un design system existant depuis Figma via MCP : Connectez Figma à Claude pour extraire automatiquement les variables, capturer les composants de référence, synthétiser le design system et l'injecter dans votre outil d'intégration. Vous travaillez avec les vraies données du designer, sans erreur de transcription.

• Designer les sections UI dans les Artifacts : Créez des maquettes interactives de hero, pricing, témoignages directement dans les Artifacts de Claude, avec contraintes responsive. Visualisez en temps réel, itérez 2-3 fois et exportez le code HTML/CSS prêt à l'intégration.

• Ajouter un popup exit-intent sur Webflow : Développez un popup en JavaScript vanilla avec sessionStorage pour ne l'afficher qu'une fois, animation fade-in élégante et logique responsive (desktop only). Du code propre et fonctionnel sans aucune librairie externe.

• Ajouter un countdown timer et des compteurs animés : Intégrez un compte à rebours dynamique et des chiffres qui s'incrémentent au scroll grâce à IntersectionObserver. Des animations performantes et engageantes qui boostent la conversion sans alourdir la page.

• Intégrer un carrousel Swiper.js : Configurez un carrousel professionnel via CDN avec 3 cards en desktop et 1 en mobile, autoplay, pagination et navigation. Claude génère la configuration optimale et le CSS custom pour s'intégrer parfaitement à votre design.

• Créer un Skill "Framer Component" et des Code Components : Standardisez la génération de composants Framer avec un Skill dédié. Vous créerez un Sticky CTA avec countdown et un Testimonial Carousel animé avec Framer Motion — une bibliothèque de composants intelligents réutilisables sur tous vos projets.

Objectif pédagogique : Créer des PRD, des Skills réutilisables, auditer et restructurer le SEO en silos, gérer le CMS à grande échelle, utiliser Cowork pour des tâches avancées.

• Créer un PRD complet avec Claude : Rédigez un Product Requirements Document structuré qui cadre vos projets ambitieux : objectifs business, arborescence du site, fonctionnalités détaillées, contraintes techniques et planning de livraison. Le PRD devient votre source de vérité tout au long du projet.

• Écrire les instructions d'un Projet Claude pro : Configurez un Projet Claude de niveau professionnel avec le contexte métier, le ton éditorial, les conventions techniques, les fichiers de référence et les connecteurs MCP activés. Vos conversations démarrent avec 100% du contexte dès le premier message.

• Créer un Skill "Brief Analyzer" réutilisable : Développez un Skill spécialisé qui analyse automatiquement n'importe quel brief client : extraction des objectifs, identification des manques, suggestions de questions de clarification et recommandations stratégiques. Un outil que vous réutiliserez sur chaque nouveau projet.

• Auditer le SEO d'un site existant : Réalisez un audit SEO complet avec Claude : analyse de la structure actuelle, identification des problèmes techniques, scoring par critère et rapport détaillé avec actions correctives priorisées.

• Restructurer l'architecture SEO en silos thématiques : Transformez une architecture de site plate en cocon sémantique performant : pages piliers, clusters de contenu, maillage interne stratégique. Vous apprendrez à créer une structure qui domine les résultats de recherche sur votre niche.

• Créer et gérer le CMS Framer via MCP : Manipulez le CMS Framer directement depuis Claude via MCP : création de collections, ajout de champs typés, insertion d'items et gestion des relations entre collections. Vous architecturez un CMS complet sans quitter votre conversation.

• Importer des données en batch dans le CMS : Préparez un CSV nettoyé par Claude, lancez l'import automatisé via MCP et vérifiez l'intégrité des données. Vous peuplez des centaines d'éléments CMS en quelques minutes au lieu de plusieurs heures de saisie manuelle.

• Générer du contenu CMS à grande échelle : Produisez des fiches produits, des articles de blog et des meta SEO (title, description) pour chaque item du CMS. Claude génère du contenu unique et optimisé pour le référencement à l'échelle, pas du contenu dupliqué.

• Créer des Code Components Framer avancés : Développez des composants Framer complexes : filtres dynamiques liés au CMS, animations personnalisées, property controls avancés. Vous apprendrez à spécifier précisément vos besoins pour obtenir du code production-ready du premier coup.

• Utiliser Cowork pour l'audit et le debug : Exploitez Cowork pour des workflows avancés : analyse de screenshots pour identifier des bugs visuels, debug de code complexe, génération de livrables structurés. Cowork devient votre assistant technique permanent.

• Configurer des tâches programmées dans Cowork : Automatisez vos processus récurrents : rapports SEO mensuels, audits techniques trimestriels, veille concurrentielle automatique. Cowork exécute ces tâches en arrière-plan et vous livre les résultats sans intervention.

Objectif pédagogique : Combiner Cowork (cadrage, contenu, direction créative) et Claude Code (génération de code) pour produire un site complet page par page avec un rendu professionnel.

• Créer un Projet Cowork complet : Configurez un dossier de travail partagé avec les instructions du projet, les fichiers de référence et les connecteurs MCP activés. Votre espace de travail est prêt à piloter un projet entier de bout en bout.

• Formulaires connectés : Automatisez vos leads: connectez les formulaires de votre site aux applications que vous utilisez grâce à des services comme Zapier ou Make. Envoyez ainsi chaque nouveau contact vers votre CRM ou votre outil d’emailing favori (Mailchimp, HubSpot…), recevez des notifications Slack à chaque soumission de formulaire, ou enregistrez automatiquement les données dans Google Sheets – tout cela sans écrire de code.

• Contenu dynamique externe : Connectez Webflow à vos données externes: apprenez à synchroniser une base de données Airtable avec votre CMS Webflow grâce à des automatisations. Par exemple, configurez un scénario où l’ajout d’une ligne dans un tableur Airtable crée automatiquement un nouvel élément de Collection sur votre site. Vous pourrez ainsi gérer un volume de contenu important de façon efficace et centralisée.

• Le process clé Cowork = directeur créatif, Claude Code = développeur : Découvrez pourquoi demander directement à Claude Code donne un résultat générique. Le vrai workflow : Cowork cadre le brief créatif détaillé, puis Claude Code exécute avec précision. Vous pilotez deux IA spécialisées qui se complètent parfaitement.

• Collecter et analyser les références visuelles : Rassemblez des sites Awwwards, des pages concurrentes et des inspirations Dribbble. Cowork les analyse et produit un document direction-creative.md complet : ambiance, layout, animations, ton visuel — le tout argumenté et prêt à guider Claude Code.

• Traduction de site : Touchez un public international: apprenez à rendre votre site Webflow multilingue. Découvrez la méthode manuelle (dupliquer vos pages/Collections pour chaque langue en utilisant des dossiers ou Collections distinctes) et gagnez du temps avec des services spécialisés comme Weglot qui traduisent et affichent votre site dans d’autres langues en quelques clics seulement.

• Récupérer la style guide Figma et la fusionner : Extrayez les variables Figma via MCP, comparez-les avec la direction créative et produisez un style-guide.md fusionné. Le design system final combine les choix du designer et la direction artistique validée.

• Créer le CLAUDE.md et le Skill "Page Generator" : Rédigez le fichier de conventions projet (Client-First, règles anti-"design IA", responsive mobile-first) et un Skill dédié qui standardise la génération de chaque page. Le CLAUDE.md garantit la cohérence sur tout le site.

• Générer la page d'accueil section par section : Cowork rédige un brief créatif détaillé pour chaque section, Claude Code l'exécute en HTML/CSS pixel-perfect, vous prévisualisez et itérez. Chaque section respecte la style guide et s'intègre parfaitement avec les précédentes.

• Générer les pages Destinations, Fiches, À propos, Contact, Blog : Produisez toutes les pages du site avec des templates CMS incluant placeholders dynamiques, responsive natif et filtres dynamiques. Chaque page est unique tout en respectant le système de design global.

• Créer le formulaire multi-étape de réservation : Développez un formulaire avancé en 6 étapes (destination, dates, voyageurs, hébergement, activités, récapitulatif) avec validation par étape, Flatpickr pour les dates et calcul de budget en temps réel. Une expérience utilisateur fluide et professionnelle.

• Créer une carte interactive avec Leaflet : Intégrez une carte avec markers par région, popups liés aux données du CMS et filtres dynamiques par catégorie. Claude génère le code JavaScript complet pour une expérience cartographique riche et performante.

• Structurer et peupler le CMS Webflow via MCP : Créez les collections complètes via MCP : 30+ destinations, 80 hébergements, 5 articles de blog, relations entre collections et meta SEO pour chaque item. Vous peuplez un site entier en quelques minutes au lieu de plusieurs jours.

• Configurer les intégrations tierces : Connectez votre site à l'écosystème complet : webhooks via Make/n8n pour les formulaires, emails automatiques de confirmation, HubSpot CRM pour le suivi client, analytics pour le tracking et cookie consent RGPD pour la conformité légale.

• Générer et uploader le fichier llms.txt : Créez un fichier llms.txt optimisé pour que les IA comprennent et citent correctement votre site. Un avantage concurrentiel discret mais puissant pour le référencement dans l'ère de l'IA.

Objectif pédagogique : Auditer un site avant livraison, préparer la documentation client, automatiser la maintenance, et créer un système de production réutilisable.

• Créer le Skill "Pre-Launch Auditor" : Développez un Skill qui exécute une checklist automatisée avant chaque livraison et produit un rapport structuré avec 3 niveaux de priorité : critique, important, secondaire. Vous ne livrez plus jamais un site avec des oublis.

• Formulaires connectés : Automatisez vos leads: connectez les formulaires de votre site aux applications que vous utilisez grâce à des services comme Zapier ou Make. Envoyez ainsi chaque nouveau contact vers votre CRM ou votre outil d’emailing favori (Mailchimp, HubSpot…), recevez des notifications Slack à chaque soumission de formulaire, ou enregistrez automatiquement les données dans Google Sheets – tout cela sans écrire de code.

• Contenu dynamique externe : Connectez Webflow à vos données externes: apprenez à synchroniser une base de données Airtable avec votre CMS Webflow grâce à des automatisations. Par exemple, configurez un scénario où l’ajout d’une ligne dans un tableur Airtable crée automatiquement un nouvel élément de Collection sur votre site. Vous pourrez ainsi gérer un volume de contenu important de façon efficace et centralisée.

• Auditer le SEO complet : Vérifiez systématiquement les meta titles/descriptions, la hiérarchie H1-H6, le maillage interne, le sitemap XML et le schema markup JSON-LD. Claude produit un rapport détaillé avec scoring par critère et actions correctives priorisées.

• Traduction de site : Touchez un public international: apprenez à rendre votre site Webflow multilingue. Découvrez la méthode manuelle (dupliquer vos pages/Collections pour chaque langue en utilisant des dossiers ou Collections distinctes) et gagnez du temps avec des services spécialisés comme Weglot qui traduisent et affichent votre site dans d’autres langues en quelques clics seulement.

• Auditer l'accessibilité : Contrôlez les alt texts de toutes les images, les contrastes de couleurs selon les normes WCAG, la navigation au clavier et la structure sémantique. Vous livrez un site accessible qui respecte les standards et élargit votre audience.

• Auditer la performance : Analysez le poids des images, l'impact des scripts externes, le temps de chargement et les métriques Core Web Vitals. Claude identifie les goulots d'étranglement et propose des optimisations concrètes pour chaque problème détecté.

• Auditer le responsive : Testez systématiquement l'affichage mobile, tablette et desktop, ainsi que les edge cases (très petits écrans, orientation paysage, contenu long). Vous corrigez les problèmes d'affichage avant que le client ne les découvre.

• Tester le formulaire de bout en bout : Validez toutes les étapes du formulaire, les règles de validation, l'envoi du webhook vers Make/n8n et la réception de l'email formaté. Un test complet qui garantit que chaque soumission arrive correctement côté client.

• Préparer la documentation client : Générez automatiquement un guide CMS pas à pas pour le client, une documentation technique (scripts, webhooks, structure CMS) et un récapitulatif de livraison. Vous livrez un projet professionnel complet, pas juste un site.

• Créer le Skill "Client Deliverables" : Développez un template de documentation réutilisable pour chaque projet : structure pré-remplie, sections automatisées, export propre. Vous produisez des livrables professionnels en quelques minutes au lieu de plusieurs heures.

• Mettre en place la maintenance automatisée : Configurez des rapports SEO mensuels, des audits techniques trimestriels et une veille concurrentielle automatique avec Cowork. Votre site reste performant et à jour sans intervention manuelle constante.

• Capitaliser et créer un template "Nouveau Client" : Transformez tout votre savoir-faire en un dossier structuré réutilisable : instructions pré-remplies, CLAUDE.md template, Skills activés, checklist de démarrage. Chaque nouveau projet démarre 10x plus vite grâce à votre système de production rodé.

Objectif pédagogique : Maîtriser Convertex pour convertir du HTML/CSS en JSON Webflow natif, utiliser l'extension navigateur pour capturer des sections d'inspiration, et intégrer avec Cursor + Claude Code.

• Découvrir l'interface Convertex : Explorez l'IDE Convertex avec ses 3 onglets (HTML, CSS, JS), le split-pane pour coder et prévisualiser simultanément, le preview live sur 3 breakpoints (desktop, tablette, mobile) et le système de gestion de projets. Vous maîtrisez l'outil en quelques minutes.

• Formulaires connectés : Automatisez vos leads: connectez les formulaires de votre site aux applications que vous utilisez grâce à des services comme Zapier ou Make. Envoyez ainsi chaque nouveau contact vers votre CRM ou votre outil d’emailing favori (Mailchimp, HubSpot…), recevez des notifications Slack à chaque soumission de formulaire, ou enregistrez automatiquement les données dans Google Sheets – tout cela sans écrire de code.

• Contenu dynamique externe : Connectez Webflow à vos données externes: apprenez à synchroniser une base de données Airtable avec votre CMS Webflow grâce à des automatisations. Par exemple, configurez un scénario où l’ajout d’une ligne dans un tableur Airtable crée automatiquement un nouvel élément de Collection sur votre site. Vous pourrez ainsi gérer un volume de contenu important de façon efficace et centralisée.

• Connecter le MCP Convertex : Configurez la clé API, testez la connexion et lancez get_generation_rules pour comprendre les contraintes Webflow natives : pas de variables CSS, pas de commentaires CSS, structure de nodes spécifique. Vous éviterez toutes les erreurs courantes dès le départ.

• Traduction de site : Touchez un public international: apprenez à rendre votre site Webflow multilingue. Découvrez la méthode manuelle (dupliquer vos pages/Collections pour chaque langue en utilisant des dossiers ou Collections distinctes) et gagnez du temps avec des services spécialisés comme Weglot qui traduisent et affichent votre site dans d’autres langues en quelques clics seulement.

• Premier test, convertir un bouton et une card : Écrivez votre premier composant, prévisualisez-le dans Convertex, convertissez en JSON Webflow et collez-le dans le Designer via l'Inspector. Vous constaterez la magie de la conversion en quelques secondes.

• Installer et utiliser l'extension navigateur : Capturez une section depuis stripe.com ou n'importe quel site d'inspiration en un clic. L'extension extrait intelligemment le HTML, le CSS, les fonts et les couleurs — prêt à être reproduit et adapté.

• Reproduire des sections capturées avec Cowork : Envoyez vos captures à Cowork qui analyse et reproduit le design en Client-First compatible Webflow. Bien plus rapide que l'adaptation manuelle, Cowork préserve l'essence du design tout en respectant vos conventions.

• Découvrir Cursor et Claude Code dans le terminal : Installez Cursor, faites le tour de l'interface pour débutants, lancez Claude Code dans le terminal intégré et voyez les fichiers apparaître en temps réel dans l'éditeur. Le workflow terminal vous ouvre un nouveau niveau de productivité.

• Créer le CLAUDE.md et le .cursorrules : Rédigez les fichiers de conventions projet — Client-First, règles anti-"design IA", responsive mobile-first — compatibles avec Convertex. Ces fichiers garantissent que Claude Code génère du code qui se convertit parfaitement à chaque fois.

• Gérer les scripts externes (Swiper, GSAP, Lottie) : Exploitez l'auto-détection des 50+ librairies supportées, l'ajout par CDN en un clic et le toggle enable/disable pour chaque script. Vous intégrez des animations et interactions avancées sans jamais casser la conversion Webflow.

• Gérer les styles de référence : Importez un JSON Webflow existant pour bénéficier de l'autocomplete des classes et garantir la cohérence avec un projet déjà en production. Vos nouvelles pages s'intègrent parfaitement dans le design system existant.

• Générer le site SaaS "ClientHunt" page par page : Réalisez un projet SaaS complet avec Claude Code et Convertex : landing page, features, pricing, blog, changelog, à propos et contact. Chaque page est générée, prévisualisée, convertie et intégrée dans Webflow.

• Peupler le CMS et injecter le SEO via MCP Webflow : Créez les collections CMS, importez les données en batch et configurez les meta titles/descriptions et le schema markup JSON-LD pour chaque page. Le SEO technique est en place dès la mise en ligne.

• Bilan workflow complet Convertex de bout en bout : Comparez le temps de production avec et sans Convertex, récapitulez toutes les features utilisées et identifiez les cas d'usage où le pipeline vous fait gagner le plus de temps. Le projet final qui démontre la puissance du workflow complet.