IA et Design System

Créer un Design System pour les IA

2 jours (14 h)
8 à 10 participants
Taux de satisfaction : 91%

IA et Design System

Créer un Design System pour les IA

Taux de satisfaction : 91%

Résumé

La formation Créer un Design System pour les IA de 3 jours vous permet de comprendre les enjeux actuels pour que vous puissiez structurer et gouverner un Design System conçu pour être utilisé par les IA : l’identification des formats nécessaires, la structuration selon les standards W3C Design Tokens, la mise en place de contrats de données en JSON et la conception d’une documentation claire en Markdown.

La formation s’appuie sur de nombreux exercices pratiques qui représentent plus de 50 % du stage, vous apprendrez à organiser un dépôt GitHub comme source unique et à connecter votre système à des assistants tels que Claude Code ou Codex via le protocole MCP (Model Context Protocol).

Les formateurs Usabilis, consultants spécialisés en Design System et en intégration des intelligences artificielles, vous partagent leur savoir-faire pour vous permettre de générer des interfaces fidèles tout en limitant les hallucinations des modèles.

Une bonne connaissance de la conception d’interfaces, des principes d’un Design System ainsi qu’une pratique de Figma sont nécessaires pour pouvoir tirer parti au mieux de cette formation. Si aucune compétence avancée en développement n’est requise, une première approche de GitHub, du JSON, du Markdown ou du CSS constitue un véritable plus.

Objectifs

À l’issue de cette formation, vous pourrez :

  • 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 les standards W3C Design Tokens et mettre en place
    des contrats de données en JSON.
  • Concevoir une documentation claire et exploitable en Markdown afin d’améliorer
    l’interprétation des composants, des patterns et des règles métier par les LLM.
  • Organiser un dépôt GitHub comme source unique de vérité pour centraliser les
    ressources du Design System.
  • Comprendre le fonctionnement des Model Context Protocol (MCP) et connecter un Design
    System à des assistants tels que Claude Code ou Codex.
  • Mettre en place une gouvernance adaptée pour garantir 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, accélérer le
    développement et fiabiliser les productions réalisées avec les IA génératives.

Prochaines sessions

Distanciel

23-24-25 novembre 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 1190 €

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 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 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.
Exercice pratique : Grand atelier Fil Rouge : À partir d'un Design System Figma existant, vous allez construire progressivement un mini Design System entièrement pensé pour l'intelligence artificielle, dit "IA Ready". Pour y parvenir, vous structurez vos composants, définissez vos Design Tokens selon les standards du W3C et produisez votre propre documentation au format Markdown. Vous organisez ensuite votre dépôt GitHub et mettez en place une gouvernance simple pour votre système, avant de le connecter directement à des outils comme Claude Code ou Codex via le protocole MCP. Enfin, pour tester la robustesse de votre travail, vous demandez à l'IA de générer une interface complète en s'appuyant uniquement sur les ressources que vous avez créées durant la session. Vous analysez alors les éventuelles hallucinations du modèle et itérez pour améliorer votre Design System, jusqu'à obtenir une génération d'interface parfaitement fidèle et réutilisable.

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

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

Newsletter

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

Devis en ligne

Tarif hors prise en charge 1190 €
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

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 !