Formation · Claude Code · UX design & prototypage

Claude Code pour les designers UX

Le coding agentique avec Claude Code dans le terminal et l’IDE : CLAUDE.md, sous-agents, hooks, MCP, CI et gestion fine des permissions.

Durée
2 jours (14 h)
Format
En ligne ou en présentiel
Langue
Allemand ou anglais
Participants
sessions ouvertes ou intra-entreprise
Attestation
Attestation de participation

Présentation

« Claude Code pour les designers UX » s’adresse notamment aux profils suivants : Designers UX et UI, Product designers et designers d’interaction et UX researchers souhaitant tester rapidement des variantes. Elle montre pas à pas comment utiliser Claude Code de manière productive, sûre et traçable dans le domaine UX design & prototypage – des bases aux workflows avancés.

Claude Code est l’assistant de développement agentique d’Anthropic, qui travaille directement dans votre terminal et dans les principaux IDE. Au lieu de compléter des lignes isolées, il explore votre dépôt, planifie des modifications sur plusieurs fichiers, lance des commandes et des tests, puis prépare les commits. En deux jours, vous apprenez à l’utiliser de façon maîtrisée : des consignes de projet claires dans CLAUDE.md, une gestion réfléchie du contexte et une méthode où vous gardez la main sur la direction et sur chaque modification.

La formation s’appuie sur des tâches de développement concrètes : analyser un bug, livrer une fonctionnalité, refactorer du code hérité, compléter la couverture de tests. Vous configurez des sous-agents spécialisés, imposez des contrôles qualité grâce aux hooks, connectez des systèmes externes via le Model Context Protocol (MCP) et capitalisez le savoir de l’équipe sous forme de skills. Pour finir, vous exécutez Claude Code en mode headless dans vos pipelines CI et définissez permissions, sandbox et règles d’approbation adaptées aux environnements sensibles.

Les outils de codage IA déplacent la frontière entre design et développement : les designers UX peuvent désormais créer des prototypes interactifs en vrai code au lieu de simples maquettes cliquables. À partir d’une capture d’écran, d’un croquis ou d’une description, on obtient rapidement une interface fonctionnelle avec ses états, sa logique de formulaire et des données d’exemple, qui se comporte en test utilisateur comme un produit fini. Les assistants IA traduisent aussi design tokens, bibliothèques de composants et contrôles d’accessibilité directement en code. Cette formation vous montre comment le vibe coding et les agents IA accélèrent le passage de l’idée au prototype testable, comment transmettre proprement vos résultats aux équipes de développement et où passe la limite entre prototype et logiciel prêt pour la production.

La formation se déroule en direct – en ligne dans une classe virtuelle ou en présentiel dans nos salles à Munich, Salzbourg, Berlin, Augsbourg, Hanovre, Brême, Stuttgart et Kaiserslautern. Nous pouvons également l’organiser en intra pour votre équipe.

À qui s’adresse cette formation ?

  • Designers UX et UI
  • Product designers et designers d’interaction
  • UX researchers souhaitant tester rapidement des variantes
  • Product owners et chefs de produit impliqués dans la conception
  • Équipes design system travaillant avec le développement front-end

Les défis concrets que nous traitons

  • Des maquettes statiques qui rendent mal les interactions, les états et les données réelles
  • Des passations vers le développement qui perdent détails, espacements et logique de comportement
  • Une longue attente de capacité de développement pour mener expérimentations et tests A/B
  • Une accessibilité prise en compte tardivement et de façon incomplète

Objectifs pédagogiques

  • Vous confiez à Claude Code des tâches de développement en plusieurs étapes tout en gardant le contrôle de chaque modification.
  • Vous tenez à jour un fichier CLAUDE.md qui transmet efficacement conventions, commandes et repères d’architecture à l’agent.
  • Vous étendez Claude Code avec des sous-agents, des hooks, des serveurs MCP et des skills adaptés à votre équipe.
  • Vous intégrez Claude Code à vos workflows Git et à vos pipelines CI avec des résultats traçables et couverts par des tests.
  • Vous créez avec l’IA des prototypes interactifs en code et testez vos idées bien plus tôt auprès des utilisateurs.
  • Vous traduisez design system et tokens en code et fluidifiez la passation aux équipes de développement.
  • Vous vérifiez méthodiquement l’accessibilité de vos prototypes et savez distinguer prototype et code de production.

Programme

Jour 1

Module 1 Principes et fonctionnement de Claude Code
  • Installation, connexion et utilisation dans le terminal, VS Code et les IDE JetBrains
  • Comprendre la boucle agentique : lire, planifier, agir, vérifier
  • Utiliser le mode plan pour valider l’approche avant toute modification
  • Rédiger des demandes efficaces avec objectif, contexte et critères d’acceptation
Module 2 Contexte projet avec CLAUDE.md et gestion du contexte
  • Structurer CLAUDE.md au niveau du projet, des répertoires et de l’utilisateur
  • Documenter commandes de build, de test et conventions de style pour que l’agent les respecte
  • Maîtriser la fenêtre de contexte : références ciblées, compactage, nouvelles sessions
  • Reprendre une session et découper les tâches longues en étapes maîtrisables
Module 3 Étendre Claude Code : sous-agents, hooks, MCP et skills
  • Définir des sous-agents pour la revue de code, la recherche ou la génération de tests
  • Utiliser les hooks pour imposer formatage, linting ou contrôles avant et après chaque outil
  • Connecter des serveurs MCP pour les outils de tickets, les bases de données ou la documentation interne
  • Créer des commandes slash et des skills pour les workflows récurrents de l’équipe
Module 4 Workflows Git, tests et assurance qualité
  • Créer branches, commits explicites et pull requests avec Claude Code
  • Travailler en test d’abord : faire écrire les tests avant l’implémentation
  • Relire les diffs méthodiquement, rejeter ou affiner les modifications
  • Organiser le travail en parallèle avec les worktrees Git et plusieurs sessions

Jour 2

Module 5 Mode headless, CI et sécurité
  • Exécuter Claude Code de façon non interactive dans des scripts et pipelines CI
  • Automatiser revues et traitement des tickets dans GitHub ou GitLab
  • Configurer modes de permission, règles d’autorisation et d’interdiction, sandbox
  • Gérer les secrets, les risques d’injection de prompt et les politiques d’entreprise
Module 6 Atelier pratique : UX design & prototypage
  • Prototypes cliquables en code
  • Produire des variantes à tester
  • Traduire les design tokens en code
  • Contrôler l’accessibilité
  • Concevoir les micro-interactions
  • Exploiter la recherche utilisateur
Module 7 Protection des données, qualité & mise en pratique
  • Les prototypes contiennent souvent des idées de produit non publiées et des données issues de la recherche utilisateur : vous apprenez à pseudonymiser les notes d’entretien conformément au RGPD, à clarifier les droits sur polices, images et ressources générées et à anticiper les exigences de l’Acte européen sur l’accessibilité.
  • Règles du jeu pour un usage sûr de l’IA en équipe
  • Vérifier les résultats : faits, sources, tests et principe des quatre yeux
  • Plan d’action personnel pour les 30 prochains jours
  • Questions ouvertes, perspectives et ressources pour aller plus loin

Cas pratiques de votre domaine

Prototypes cliquables en code

Transformer croquis, wireframes ou captures d’écran en prototypes web fonctionnels avec navigation, validation de formulaires, états de chargement et d’erreur et données réalistes, testables directement dans le navigateur.

Produire des variantes à tester

Générer en parallèle plusieurs variantes d’un parcours, par exemple l’onboarding ou le tunnel de commande, et les préparer pour des tests utilisateurs ou des tests A/B avec peu d’ajustements.

Traduire les design tokens en code

Structurer couleurs, typographie, espacements et arrondis du design system sous forme de tokens et les convertir en variables CSS, configuration Tailwind ou fichiers de thème pour les bibliothèques de composants.

Contrôler l’accessibilité

Examiner contrastes, HTML sémantique, navigation au clavier, ordre de focus et attributs ARIA, puis faire appliquer directement dans le code des améliorations concrètes conformes aux WCAG.

Concevoir les micro-interactions

Décrire transitions, animations et retours visuels puis les implémenter en CSS ou JavaScript, afin d’évaluer rythme et effet très tôt dans le support réel plutôt que dans un outil de dessin.

Exploiter la recherche utilisateur

Regrouper les notes d’entretiens et de tests, faire émerger tendances et points de friction et en tirer des hypothèses de conception priorisées, intégrées directement à la prochaine itération du prototype.

Projets pratiques possibles

Prototype d’onboarding

Un parcours d’onboarding en plusieurs étapes sous forme d’application web, avec barre de progression, validation et sauvegarde des saisies, prêt pour des tests modérés.

Convertisseur de tokens

Un petit outil qui lit des design tokens exportés et génère variables CSS, palette de couleurs avec ratios de contraste et page d’aperçu.

Vitrine de composants

Une page qui présente boutons, formulaires et cartes de votre design system dans tous leurs états, en mode clair comme en mode sombre.

Prérequis

Vous avez une pratique réelle de la programmation dans au moins un langage et maîtrisez Git ainsi que la ligne de commande. Vous avez une expérience du design UX ou UI et des outils de conception courants ; aucune compétence en programmation n’est requise, mais des notions de HTML et CSS sont utiles.

Prérequis techniques

Ordinateur portable personnel avec droits administrateur, Git, environnement Node.js et un éditeur récent ; un abonnement Claude ou un accès à l’API Anthropic est nécessaire pour les exercices.

Protection des données & conformité

Les prototypes contiennent souvent des idées de produit non publiées et des données issues de la recherche utilisateur : vous apprenez à pseudonymiser les notes d’entretien conformément au RGPD, à clarifier les droits sur polices, images et ressources générées et à anticiper les exigences de l’Acte européen sur l’accessibilité.

Dates proposées

Toutes les dates sont indicatives – votre date souhaitée est toujours possible.

  • lun. 23 novembre 2026 – mar. 24 novembre 2026 En ligne Demander
  • lun. 30 novembre 2026 – mar. 1 décembre 2026 Augsbourg Demander
  • mar. 15 décembre 2026 – mer. 16 décembre 2026 En ligne Demander
  • lun. 11 janvier 2027 – mar. 12 janvier 2027 En ligne Demander
  • jeu. 21 janvier 2027 – ven. 22 janvier 2027 Kaiserslautern Demander
  • mar. 2 février 2027 – mer. 3 février 2027 En ligne Demander

Questions fréquentes

Qu’est-ce qui distingue Claude Code de l’autocomplétion classique ?

L’autocomplétion propose les lignes suivantes, alors que Claude Code agit comme un agent capable de traiter une tâche entière : il explore le dépôt, planifie des modifications sur plusieurs fichiers, exécute tests et commandes, puis se corrige à partir des résultats. Vous fixez l’objectif et validez le résultat au lieu de piloter chaque ligne.

Claude Code est-il suffisamment sûr pour un usage en entreprise ?

Par défaut, Claude Code demande une validation avant de modifier un fichier ou de lancer une commande. Règles de permission, sandbox, paramètres gérés et hooks permettent de définir précisément ce que l’agent a le droit de faire. Pendant la formation, vous apprenez à les configurer selon vos exigences de sécurité et de protection des données, et à évaluer des risques comme l’injection de prompt.

Claude Code fonctionne-t-il avec mon langage et ma stack technique ?

Oui. Claude Code est indépendant du langage, car il travaille avec des fichiers, des commandes de terminal et vos outils de build et de test existants. Python, Java, TypeScript, Go, développements SAP ou infrastructure as code : l’essentiel est un CLAUDE.md bien rédigé qui décrit vos commandes et conventions. Chaque déclinaison de la formation apporte l’ancrage métier.

Faut-il savoir programmer quand on est designer ?

Non. Vous décrivez interfaces et comportements en langage naturel, avec croquis ou captures d’écran, et l’outil d’IA génère le code. Connaître quelques notions comme composant, état ou classe CSS aide toutefois à piloter finement le résultat. Nous abordons ces notions de façon concrète pendant la formation, pour que vous puissiez faire évoluer vos prototypes en autonomie.

L’équipe de développement peut-elle reprendre le code du prototype ?

Parfois, mais il sert le plus souvent de spécification précise. Un prototype est optimisé pour la rapidité, pas pour la sécurité, la performance ou la maintenabilité. En utilisant dès le départ la même bibliothèque de composants et les mêmes tokens que le produit, la réutilisation devient bien plus probable. La formation vous aide à organiser des passations utiles aux deux parties.

Combien coûte la formation « Claude Code pour les designers UX » ?

La formation coûte 949 € HT forfaitaires par participant – en ligne comme en présentiel. Sont inclus 2 jour(s) de formation avec un formateur en direct, les supports de cours, un environnement d’exercice et une attestation de participation.

Puis-je proposer ma propre date ?

Oui. Nos dates sont indicatives. Dans le formulaire, vous pouvez à tout moment indiquer librement la date ou la période souhaitée – nous vérifions les disponibilités et confirmons sous un jour ouvré.

La formation a-t-elle lieu en ligne ou en présentiel ?

Les deux sont possibles : en direct dans une classe virtuelle ou en présentiel à Munich, Salzbourg, Berlin, Augsbourg, Hanovre, Brême, Stuttgart ou Kaiserslautern. Nous pouvons aussi l’organiser en intra pour votre équipe.

Autres formations pour les designers UX

Autres formations Claude Code

Les 77 formations Claude Code

Claude Code · MunichClaude Code · SalzbourgClaude Code · BerlinClaude Code · AugsbourgClaude Code · HanovreClaude Code · BrêmeClaude Code · StuttgartClaude Code · KaiserslauternClaude Code · En ligne