Formation Design System pour l’IA

Créer un Design System pour l'utiliser avec les intelligences artificielles

3 jours (21 h)
8 à 10 participants
Formation Design System pour l’IA

Créer un Design System pour l'utiliser avec les intelligences artificielles

Formation Design System : Un planche de Design System montrant un design atomique pour une interface.

Résumé

La formation Design System pour l’IA de 3 jours s’adresse aux professionnels de la conception d’interfaces qui souhaitent rendre leur Design System exploitable par les intelligences artificielles génératives.

Un Design System conçu pour des humains ne suffit plus. Lorsqu’un designer demande à Claude Code, Codex ou Lovable de générer une interface, le modèle ne lit pas une bibliothèque de composants Figma : il lit des fichiers. Sans design tokens structurés, sans documentation exploitable et sans source unique de vérité, la génération dérive et le résultat ne respecte ni les couleurs, ni les espacements, ni les règles d’usage de votre système.

La formation vous permet de structurer et gouverner un Design System « IA Ready » : identification des formats nécessaires, structuration selon le standard W3C Design Tokens, contrats de données en JSON, documentation en Markdown, organisation d’un dépôt GitHub comme source unique de vérité, et connexion à des assistants via le protocole MCP.

Les exercices pratiques occupent plus de 50 % du stage. Une bonne connaissance de la conception d’interfaces, des principes d’un Design System et une pratique de Figma sont nécessaires. Aucune compétence avancée en développement n’est requise, mais une première approche de GitHub, du JSON, du Markdown ou du CSS constitue un véritable plus.

Objectifs

À l’issue de cette formation Design System pour l’IA, vous saurez :

  • Comprendre les enjeux des Design Systems à l’ère des intelligences artificielles génératives et leur impact sur les processus de conception.
  • Identifier les informations, formats et structures nécessaires pour rendre un Design System exploitable par les IA comme par les équipes humaines.
  • Structurer un Design System selon le standard W3C Design Tokens et mettre en place des contrats de données en JSON.
  • Concevoir une documentation claire en Markdown, afin d’améliorer l’interprétation des composants, des patterns et des règles métier par les modèles de langage.
  • Organiser un dépôt GitHub comme source unique de vérité pour centraliser les ressources du Design System.
  • Comprendre le fonctionnement du Model Context Protocol et connecter un Design System à des assistants comme Claude Code ou Codex.
  • Mettre en place une gouvernance garantissant la qualité, la cohérence et l’évolutivité d’un Design System piloté par l’IA.
  • Exploiter un Design System IA Ready pour générer des interfaces et fiabiliser les productions réalisées avec les IA génératives.

Prochaines sessions

Distanciel

12-13-14 octobre 2026
À distance
16-17-18 novembre 2026
À distance
14-15-16 décembre 2026
À distance

Formateurs

Usabilis se distingue des organismes de formations classiques : l’expérience du consultant des formateurs permet d’agrémenter le contenu de la formation d’exemples concrets et de transmettre leur expérience acquise sur le terrain.

Photo de Rudy Taieb - UI Designer, Design System Architect chez Usabilis
Rudy Taieb
Design System Architect

Devis en ligne

Tarif hors prise en charge 1790 €

Témoignages des participants

Programme de formation

Comprendre les Design Systems à l'ère de l'IA et préparer un Design System “IA Ready”

  • Comprendre comment les Design Systems évoluent avec l’arrivée des intelligences artificielles génératives.
  • Comprendre comment les LLM interprètent un Design System et pourquoi les composants purement visuels ne suffisent plus.
  • Identifier les nouveaux usages des IA dans les workflows de conception, de développement et de documentation.
  • Découvrir les principaux outils du marché (Claude Code, Codex, Cursor, MCP…) et comprendre leur rôle dans un workflow de Design System moderne.
Exercice pratique : À partir de leur propre Design System ou d'un Design System fourni, les participants réalisent un premier audit afin d'identifier les éléments exploitables par une IA et ceux nécessitant une restructuration. Ils définissent le fil rouge qui servira de support à l'ensemble des travaux pratiques de la formation.

Structurer un Design System exploitable par les IA

  • Comprendre pourquoi les Design Tokens deviennent la pierre angulaire des Design Systems modernes.
  • Comprendre le standard W3C Design Tokens, différencier les tokens primitifs, sémantiques et alias, ainsi que les notions de thèmes et de modes.
  • Comprendre comment une IA interprète un contrat JSON et pourquoi la structuration des données est essentielle pour garantir des générations fiables.
Exercice pratique : Les participants transforment une partie de leur Design System en un premier jeu de Design Tokens conforme aux recommandations du W3C. Ils structurent leurs premiers fichiers JSON afin de préparer une base exploitable par des intelligences artificielles.

Concevoir votre système de conception

  • Comprendre pourquoi la documentation devient une véritable base de connaissances pour les intelligences artificielles.
  • Utiliser le Markdown pour documenter les composants, les patterns, les règles d’utilisation, les cas d’usage et les bonnes pratiques.
  • Comprendre comment une documentation claire limite les hallucinations des modèles et améliore la qualité des générations.
Exercice pratique : Vous transformez une partie de votre Design System en un premier jeu de Design Tokens conforme aux recommandations du W3C. Vous structurez vos premiers fichiers JSON afin de préparer une base exploitable par des intelligences artificielles.

Concevoir une documentation exploitable par les IA

  • Comprendre pourquoi la documentation devient une véritable base de connaissances pour les intelligences artificielles.
  • Utiliser le Markdown pour documenter les composants, les patterns, les règles d’utilisation, les cas d’usage et les bonnes pratiques.
  • Comprendre comment une documentation claire limite les hallucinations des modèles et améliore la qualité des générations.
Exercice pratique : Vous documentez plusieurs composants de votre Design System en Markdown en intégrant descriptions, variantes, règles d'utilisation, recommandations d'accessibilité et exemples.

GitHub pour les designers

  • Comprendre les fondamentaux de GitHub sans être développeur : repository, commit, branche, pull request et versionning.
  • Découvrir une architecture de dépôt adaptée aux Design Systems.
  • Organiser les Design Tokens, les composants, la documentation et les ressources afin de créer une Single Source of Truth exploitable aussi bien par les équipes que par les IA.
  • Découvrir les principes du Model Context Protocol (MCP).
Exercice pratique : Vous créez un dépôt GitHub structuré pour votre Design System et organisez vos ressources selon une architecture facilitant leur exploitation par les intelligences artificielles.

Gouvernance d'un Design System piloté par l'IA

  • Comprendre comment maintenir un Design System fiable dans le temps.
  • Définir les rôles, responsabilités et processus de validation.
  • Mettre en place une gouvernance garantissant la qualité des composants, des tokens, de la documentation et des prompts.
  • Comprendre pourquoi une “source unique de vérité” est indispensable dans un environnement piloté par des agents IA.

Utiliser les IA pour produire des interfaces

  • Connecter un Design System à Claude Code, Codex ou Lovable grâce au Model Context Protocol (MCP).
  • Comprendre comment fournir le contexte nécessaire à une IA pour générer une interface fidèle au Design System.
  • Identifier les principales causes d’hallucination, apprendre à les détecter et mettre en place les bonnes pratiques permettant d’obtenir des générations cohérentes, maintenables et conformes aux composants existants.
Exercice pratique : Vous connectez votre repository GitHub à Claude Code, Codex ou Lovable et vous génèrez vos premières interfaces uniquement à partir des composants, des tokens et de la documentation de votre Design System.

Les modalités

Pour suivre ce programme d’apprentissage dans les meilleures conditions, il est recommandé de posséder une bonne connaissance de la conception d’interfaces ainsi que des principes fondamentaux régissant un Design System.

Une pratique régulière du logiciel Figma est également nécessaire pour pouvoir manipuler les composants de base lors des ateliers. Enfin, bien qu’aucune compétence avancée en développement ne soit exigée pour participer, une première approche d’outils et de langages tels que GitHub, le format JSON, le Markdown ou le CSS constitue un atout indéniable pour appréhender les concepts techniques plus sereinement.

Cette formation s’adresse principalement aux professionnels de la conception et du développement souhaitant adapter leurs pratiques aux nouvelles technologies génératives. Elle est particulièrement conçue pour les UX/UI Designers, les Product Designers et les développeurs Front-End qui désirent comprendre comment structurer un Design System « IA Ready » et intégrer ces nouveaux workflows de conception assistés par l’intelligence artificielle.

Chaque participant accède aux outils pédagogiques suivants :

  • Le support de formation
  • Un accès à Figma
  • Un kit de composants graphiques
  • Un accès à Lovable
  • Un repository Git Hub
  • Le livre « UX design et ergonomie des interfaces »
  • Les modèles de fichiers nécessaires à la réalisation des travaux pratiques
  • Une bibliographie
  • Une liste de liens utiles créée par le formateur
  • Un groupe Slack pour échanger avec le formateur
  • Le nombre de participants est limité à 8 personnes
  • La formation est séquencée en module de 1h30 maximum
  • Des pauses sont aménagées après chaque module
  • Vous accédez à nos outils collaboratifs : Miro, classes Zoom, Figma Jam, Google Drive, Slack

Vous avez une question au sujet de cette formation ?

Notre équipe de formateurs est à votre disposition pour recueillir votre brief et étudier votre besoin.

Banniere question formation mobile

Vous avez une question au sujet de cette formation ?

Notre équipe de formateurs est à votre disposition pour recueillir votre brief et étudier votre besoin.

FAQ

Non. Aucune compétence avancée en développement n’est nécessaire. Une première approche de GitHub, du JSON, du Markdown ou du CSS vous aidera à aborder sereinement les exercices de structuration et de documentation, mais la formation est conçue pour des designers. Les modules techniques partent des bases et sont accompagnés pas à pas.

La formation Design System historique couvre la création d’un système pour des équipes humaines : atomic design, bibliothèque de composants, gouvernance, documentation dans Figma et Zeroheight. Cette formation part du principe que votre système existe déjà et traite une question distincte : comment le rendre lisible et exploitable par des intelligences artificielles génératives.

Un Design System IA Ready est un système dont les décisions de conception sont exprimées en données structurées plutôt qu’en artefacts visuels. Concrètement, il repose sur des design tokens conformes au standard W3C, des contrats JSON explicites, une documentation Markdown exhaustive et un dépôt versionné servant de source unique de vérité. Un modèle peut alors générer une interface conforme sans interpréter des maquettes.

Vous travaillez principalement avec Claude Code et Codex, connectés à votre Design System via le Model Context Protocol. Lovable est également abordé pour la génération d’interfaces. Côté conception, vous partez de Figma. Côté versionning, vous utilisez GitHub. Les méthodes enseignées restent transposables aux autres assistants du marché.

Le Model Context Protocol, ou MCP, est un standard ouvert qui permet à un assistant IA d’accéder directement à des sources de données externes, comme votre dépôt de Design System. Sans MCP, vous copiez manuellement vos tokens dans un prompt à chaque génération. Avec MCP, l’assistant consulte votre source unique de vérité, ce qui réduit fortement les écarts entre le système et l’interface produite.

Usabilis est un organisme de formation certifié Qualiopi et référencé DataDock. Cette formation est donc éligible à un financement par votre OPCO ou via le plan de développement des compétences de votre entreprise. Notre équipe vous accompagne dans le montage du dossier administratif.

Oui, et c’est même recommandé. Les exercices sont conçus pour être menés sur votre propre système, ce qui vous permet de repartir avec une base réellement utilisable. Si votre Design System n’est pas partageable pour des raisons de confidentialité, Usabilis fournit un système complet servant de support aux travaux pratiques.

Nos labels de qualités

Personnes en situation de handicap  : merci de nous contacter au 01 57 63 86 58 pour nous permettre d’évaluer avec vous la possibilité d’adaptation de notre formation à vos besoins.

Logo Qualiopi certifiant la qualité des formations délivrées par Usabilis.
Qualiopi

La certification qualité Qualiopi a été délivrée à l’organisme de formation Usabilis au titre de ses actions de formation.

Logo Datadock

Datadock

Usabilis répond aux critères de qualité DataDock (décret du 30 juin 2020). En conséquence, ses formations sont reconnues par tous les opérateurs de compétences (OPCO) de la formation professionnelle.

Logo Mon compte formation

Certification éligible au CPF

La certification UX/UI Design Usabilis est enregistrée par France Compétences sous le numéro RS6451 (Conception et modélisation des interfaces UX/UI Design). Elle est reconnue par les employeurs et bénéficie du financement CPF.

Les formations qui pourraient vous intéresser

Inscription validée !
inscription-validee

Merci :)

Vous faites maintenant partie des heureux lecteurs de la newsletter Usabilis.

N’hésitez pas à nous faire part de vos commentaires ou de vos questions. Nous restons à votre écoute.

A bientôt !

Newsletter

Abonnez-vous à notre newsletter pour rester informé de l’actualité digitale, UX et UI

Devis envoyé
Illustration montrant un courrier sortant d'une lettre en papier.

Le devis pour cette formation a été envoyé à .

Pour toute question, vous pouvez nous contacter au 01 57 63 86 58 ou nous envoyer un mail à formation@usabilis.com

Devis en ligne

Tarif hors prise en charge 1790 €