Vous avez un design system, des composants, une charte, et vous voulez que les interfaces générées par l’IA les respectent jusque dans le code. Claude Design, l’outil de conception visuelle d’Anthropic, produit des interfaces en HTML, CSS et JavaScript à partir d’une description, et travaille avec vos propres composants importés depuis GitHub ou vos fichiers de design. Cette formation de deux jours s’adresse aux designers UI et UX, aux directeurs artistiques et aux webdesigners.

May Navarro, designer depuis 20 ans (Ikea, SNCF, Starbucks) et formatrice depuis 10 ans, fait monter la difficulté pas à pas : premières interfaces, demandes visuelles précises et decks, puis import de votre design system, et enfin un prototype complet transmis aux développeurs ou à Claude Code avec sa fiche de passation (le handoff). Quatre cas pratiques jalonnent les deux jours, chacun avec son livrable.

Votre formateur

May Navarro
Formatrice UX, UI & IA
Voir le profil
Designer depuis 20 ans (Ikea, SNCF, Starbucks, etc.), formatrice depuis 10 ans (Le Wagon, Ynov, l'école de design de Nantes, Ubisoft, etc.), je partage avec vous ma passion pour le webdesign avec un enthousiasme communicatif.

Programme adaptable à vos besoins

Un socle complet que votre formateur personnalise selon vos priorités, avec des exercices pratiques réalisés directement sur vos sites, campagnes ou projets web.

Jour 1

Découverte de l'écosystème Claude et prise en main de Claude Design

matin
  • Panorama des outils Claude : claude.ai, Claude Code, Cowork, Claude in Chrome, Claude dans Excel et PowerPoint, pour comprendre l'écosystème d'Anthropic avant de se concentrer sur Claude Design.
  • Claude Design en détail : ce qu'est l'outil, comment il fonctionne, et ce qui le distingue de Figma, v0 ou Framer.
  • L'interface de Claude Design : les zones de travail, le rendu en direct, les options d'export, la consommation de tokens (l'unité qui décompte votre usage de l'outil) et les limites d'usage.
  • Cas pratique 1 : générer sa première interface. Créer une landing page ou un tableau de bord à partir d'un brief écrit simple. Livrable : une page HTML fonctionnelle rendue en direct.

Décrire une interface avec précision et produire des présentations avec Claude Design

après-midi
  • Le prompt visuel : décrire mises en page, composants et états interactifs avec assez de précision pour obtenir un rendu fidèle au brief.
  • Itérer avec Claude Design : affiner le rendu, corriger un composant et ajuster le style sans tout régénérer.
  • Présentations et decks : structurer un deck dans Claude Design, l'exporter en PPTX et le transférer vers Canva.
  • Cas pratique 2 : produire un deck de 6 à 8 slides à partir d'un brief de présentation (pitch produit, rapport, accueil d'un nouvel arrivant). Livrable : un deck exportable en PPTX ou vers Canva.
Jour 2

Intégrer un design system et construire avec ses propres composants

matin
  • Importer un design system dans Claude Design : depuis un dépôt GitHub, des fichiers de design ou un envoi direct dans l'interface.
  • Comprendre comment Claude Design exploite les composants importés : vérification automatique, correction avant rendu et gestion des contraintes.
  • Construire avec ses propres variables de design (design tokens) et composants : typographie, couleurs, grilles et états, pour des interfaces conformes à la charte.
  • Cas pratique 3 : importer un design system existant, ou le mini design system fourni par la formatrice, et générer une interface qui respecte ses conventions. Livrable : une interface validée, avec la preuve de sa cohérence visuelle.

Intégration dans un processus professionnel et prototype complet

après-midi
  • Claude Design dans un processus professionnel : le parcours complet, de l'exploration créative à la passation (handoff) vers Claude Code ou une équipe de développement.
  • Prototypes interactifs et maquettes produit : choisir le bon outil selon le contexte (Claude Design, Figma ou Framer) et en tirer le meilleur.
  • Optimiser la consommation de tokens : bonnes pratiques et stratégies de demande pour ne pas épuiser son allocation inutilement, avec des retours d'expérience concrets.
  • Cas pratique 4 : produire un prototype complet pour un cas client réel ou fictif, de la description du besoin au livrable HTML prêt à mettre en ligne, accompagné de sa documentation de passation. Livrable : un prototype interactif et une fiche de passation.
Formation personnalisable sur demande.

Un échange avec votre formateur définira le programme et les exercices dont vous avez besoin, alignés sur vos objectifs professionnels.

À qui s’adresse la formation ?

Public

Designers UI et UX, directeurs artistiques, product designers, webdesigners indépendants, chefs de projet digital, graphistes qui passent au web, responsables communication et équipes marketing : toute personne créative qui veut produire des interfaces et des supports interactifs sans passer par le développement traditionnel.

Prérequis

Une pratique du design (UI, UX, webdesign ou direction artistique) est indispensable. Un abonnement Claude Pro, Max, Team ou Enterprise est nécessaire, Claude Design n’étant pas accessible en version gratuite : il doit être activé avant la formation. Sur un compte Enterprise, vérifiez que l’administrateur a activé Claude Design dans les paramètres de l’organisation. Aucune compétence en HTML, CSS ou JavaScript n’est requise : le code est entièrement généré par l’outil.

Moyens et outils

Moyens

Les apports et le panorama des outils sont présentés sur un support PDF projeté. May Navarro fait ses démonstrations en direct dans Claude Design, en partage d’écran. Quatre cas pratiques progressifs, du plus simple au plus complexe, rythment les deux jours. Un mini design system et un brief type client sont fournis à ceux qui n’en ont pas. Une bibliothèque de prompts visuels réutilisables est remise à l’issue de la formation.

Outils utilisés pendant la formation

  • Claude
  • Claude Code
  • Claude Cowork
  • Canva
  • Figma
  • Framer
  • v0
  • GitHub
  • PowerPoint
  • Excel

Tarif de la formation

En présentiel ou distanciel, la formation s’organise dans vos locaux, dans un lieu loué pour l’occasion ou en visioconférence, selon vos préférences.

2 jours - 14 heures

à partir de 3400€ HT

Prêt à vous former ?

Demandez votre devis, de la demi-journée au format sur-mesure.

Obtenir un devis Réponse dans les 24h

Ce que vous apprendrez

Situer Claude Design dans l'écosystème Anthropic.

Distinguer claude.ai, Claude Code, Cowork et Claude Design, et savoir lequel ouvrir selon le besoin.

Générer des interfaces interactives à partir d'une description.

Obtenir du HTML, du CSS et du JavaScript fonctionnels grâce à des demandes visuelles précises.

Produire des présentations et des documents exportables.

Des decks et des documents d’une page, exportés en PPTX ou vers Canva.

Faire respecter un design system existant.

Importer composants, typographies, couleurs et grilles pour des rendus conformes à la charte graphique.

Intégrer Claude Design dans un processus professionnel.

De l’exploration au prototype, puis à la passation aux développeurs, en maîtrisant la consommation de tokens.

Livrer un prototype complet à partir d'un brief.

Un prototype interactif et sa fiche de passation, sur un cas client réel ou fictif.

Ce qu’on aime dans la formation

« Claude Design est l’outil dont j’aurais eu besoin quand je passais des heures sur des prototypes jetables que personne ne reverrait jamais. En quelques minutes, il génère des interfaces que vous pouvez tester, modifier, exporter : du code réel, pas des mockups. Ce que je veux vous transmettre dans cette formation, ce n’est pas juste comment appuyer sur les bons boutons. C’est comment penser visuellement en langage naturel, comment intégrer cet outil dans votre flux sans perdre le contrôle sur le résultat, et comment l’utiliser sans brûler vos tokens en 25 minutes. Vous repartez avec une vraie pratique. »

May Navarro

Questions fréquentes sur la formation Claude Design de May

Quelle différence avec les autres formations Claude Design ?

Celle de May Navarro dure deux jours et se concentre sur le design system et le passage au code : importer vos composants, générer des interfaces qui les respectent, transmettre un prototype documenté aux développeurs. Franck David propose une journée centrée sur le processus UX, et Gérard Bernasconi une formation pour les équipes marketing qui produisent des supports à l’image de leur marque.

Je n'ai pas de design system : la formation reste utile ?

Oui. Un mini design system et un brief type client sont fournis aux participants qui n’en ont pas. Si vous en avez un, venez avec : travailler sur vos propres projets reste le plus profitable.

Claude Design remplace Figma ?

Non, les deux se complètent. Claude Design génère du code d’interface interactif, prêt à mettre en ligne, et non des maquettes vectorielles modifiables. Il sert surtout à explorer vite, à prototyper et à passer le relais aux développeurs, tandis que Figma reste la référence pour gérer un design system et collaborer avec les équipes produit. Un module aide à choisir entre Claude Design, Figma et Framer selon le contexte.

Avec quoi je repars ?

Avec un prototype HTML interactif produit pendant la formation, un deck exporté, une fiche de passation et une bibliothèque de prompts visuels réutilisables pour vos projets suivants.

La formation est surtout pratique ?

Oui, très largement. Quatre cas pratiques progressifs rythment les deux jours, chacun avec un livrable identifié. L’idéal est de venir avec vos propres projets ou briefs.

Un abonnement Claude payant est nécessaire ?

Oui. Claude Design est réservé aux abonnements Claude Pro, Max, Team ou Enterprise, il n’existe pas en version gratuite. Activez votre abonnement avant la formation. Sur un compte Enterprise, vérifiez que votre administrateur a bien activé la fonctionnalité. Ce coût s’ajoute à celui de la formation.

alfie, votre organisateur de formations au marketing digital

Nos formations vous apportent plus que de la simple théorie : astuces pour aller plus vite, études de cas, inspirations, bonnes pratiques du moment ou encore le résultat de notre veille.

4.9
Basé sur 208 avis
+2600 Apprenants
+888 Formations sur-mesure

Vous former avec alfie :

  • Des formateurs sélectionnés pour leur expertise métier et expérience du terrain.
  • Des programmes sur-mesure, grâce à un brief complet entre vous et votre formateur.
  • Un apprentissage par la pratique, pour mettre en application directement.

Financer sa formation

Les formations alfie sont finançables jusqu’à 100% par les OPCO, l’organisme financier des salariés du privé. Rapprochez-vous de votre RH ou de votre dirigeant avec votre projet de formation pour évoquer le budget OPCO disponible.

Toutes les entreprises sont aussi dans l’obligation de former leur salarié sous quelques manières que ce soit. Elles peuvent donc aussi faire le choix de financer votre formation avec leurs fonds propres.

Si vous souhaitez vous reconvertir, vous pouvez prétendre à un PTP (Projet de Transition Professionnelle) qui permet de réaliser une formation sur une durée longue en maintenant votre salaire et en finançant tout ou partie de votre formation. Le financement peut se faire par le biais de l’OPCO de votre entreprise.

➡️ Simulez votre budget formation !

Si vous êtes Freelance ou Indépendant, alors votre organisme de de financement s’appelle un FAF (Fonds d’assurance à la Formation), auprès duquel vous cotisez.

Il existe différents FAF qui dépendent de votre secteur d’activité. Pour le connaître rapprochez vous de votre expert-comptable ou identifiez la convention collective qui s’applique à votre branche. Vous y trouverez le nom de votre FAF.

Les 3 principaux FAF sont :

  • Le FIFPL : pour les travailleurs indépendants exerçant une activité libérale
  • L’Agefice : pour les dirigeants non-salariés du commerce, de l’industrie et des services
  • Le FAFCEA : pour les artisans non-salariés.

Les formations alfie ne sont pas éligibles au CPF (« Compte Personnel de Formation » désormais appelé « Mon Compte Formation »). Vous ne pouvez donc pas financer les formations alfie avec cette solution.

Les seules exceptions de financement par France Travail sont :

  • Le PTP (Projet de Transition Professionnelle),
  • Le PDC (Plan de Développement des Compétences),

Mais ne sont pas automatiques. Rapprochez-vous de votre conseiller FT pour connaître les financements auxquels vous avez droit.

 

Vous devez vous renseigner auprès de votre organisme d’intérim, qui peut vous faire avoir des droits auprès du Fonds d’Assurance Formation du Travail Temporaire (FAF.TT). C’est un organisme qui permet à tout salarié intérimaire d’accroitre ses performances et son employabilité en fonction des besoins du marché.

Les points forts des formations alfie

Sur-mesure

Votre formateur adapte le contenu et les exercices de sa formation, grâce à un appel téléphonique de 15 minutes avec vous, en amont de la formation.

Pratique & concret

Tous nos formateurs et formatrices s’engagent à réaliser au moins 2 exercices par séquence de formation. Tous consultants en activité, ils vous proposent des études de cas réels.

Aymeric Marquant, Formateur WordPress chez alfie formation
Enguerran Bachelot, Formateur Expert Looker Studio - Data visualisation chez alfie formation

Toujours à jour

Un questionnaire de satisfaction et une étude d’impact à 90 jours remontent vos retours aux formateurs pour actualiser en continu nos modules. Nos sessions sont programmées sous 8 à 10 jours, délai nécessaire aux convocations et formalités.

Finançable

Certifié QUALIOPI, alfie vous permet de faire financer votre formation jusqu’à 100% via les OPCO et vous fournit tous les documents nécessaires à la demande.

  • Durée 2 jours - 14 heures
  • Participants 1 à 6 participants
  • Difficulté Débutant à intermédiaire
  • Prix 3400€ HT
Obtenir un devis
4.9 (208 avis)
Des questions ? Appelez-nous : 02 55 99 46 86

Obtenir un devis

⚠️ Nos formations ne sont pas éligibles au CPF.

Brief complet, réponse rapide ! Pensez à inclure :

  • qui doit être formé,
  • quel niveau à l’apprenant sur le sujet,
  • l’objectif de la formation,
  • distanciel / présentiel (et le lieu).

On vous rappelle dans les 24h.

♿ Public en situation de handicap, nous écrire à bonjour@alfieformation.com



    Les informations recueillies à partir de ce formulaire sont traitées par alfie pour donner suite à votre demande de contact et dans le cadre de nos activités de prospection. Pour en connaitre plus sur vos droits et la gestion des données personnelles faite par ALFIE, cliquez sur la politique de protection des données à caractère personnel