Module 1 — Fondamentaux du design system
- Définition, finalités et ROI d’un design system
- Niveaux de maturité : style guide, bibliothèque de composants, design system complet
- Cartographie des design systems de référence (Material, Polaris, Carbon, Atlassian)
- Place de Claude et de l’IA dans la conception et l’évolution d’un design system
Module 2 — Cadrage et gouvernance
- Audit du parc d’interfaces existantes (inventaire UI et patterns)
- Définir le périmètre, les utilisateurs internes et les contributeurs
- Modèle de gouvernance : équipe dédiée, modèle fédéré ou hybride
- Roadmap, jalons et critères de succès (KPI d’adoption)
- Briefer Claude pour formaliser la vision, le manifeste et les principes du design system
Module 3 — Design tokens : la couche fondamentale
- Anatomie des tokens : couleur, typographie, espacement, élévation, motion
- Hiérarchie : tokens primitifs, sémantiques et composants
- Conventions de nommage et organisation
- Génération assistée par Claude : palette accessible, échelles harmoniques, typographies
- Multi-thèmes (light/dark, multi-marques) et theming dynamique
- Export et formats : JSON, Style Dictionary, variables CSS, configuration Tailwind
Module 4 — Bibliothèque de composants sous Figma
- Atomic Design appliqué à Figma : atomes, molécules, organismes
- Variants, properties et auto-layout pour des composants robustes
- Documentation in-Figma : annotations, exemples, états et cas d’usage
- Génération de composants à partir de briefs Claude (variantes, états, edge cases)
- Versioning et publication d’une bibliothèque Figma partagée
Module 5 — Du design au code : composants réutilisables
- Choix d’une stack (React + CSS-in-JS, Web Components, Stencil, Lit)
- Synchroniser les tokens design et code (Style Dictionary, Token Studio)
- Générer le squelette des composants avec Claude et itérer
- Accessibilité : WCAG 2.2, ARIA, navigation clavier, contraste
- Tests visuels et tests d’interaction avec Storybook et Chromatic
- Bundle, distribution npm et tenue d’un changelog
Module 6 — Documentation et adoption
- Storybook et MDX comme source de vérité partagée
- Documenter les guidelines d’usage : do/don’t, anatomy, behavior
- Génération assistée des pages de documentation avec Claude
- Onboarding des consommateurs (designers et développeurs)
- Support, FAQ et canal de contribution
Module 7 — Évolution, qualité et maintenance
- Versioning sémantique (semver) et processus de release
- Détection des régressions : tests visuels, contract tests
- Métriques d’adoption : couverture, usage des tokens, dette UI
- Refactoring assisté par Claude : migrations, codemods, dépréciations
- Cycle de feedback contributeurs et roadmap glissante
Module 8 — Industrialiser avec Claude
- Workflows automatisés : revue de PR, génération d’icônes, lint design
- Connecter Claude à Figma, GitHub et Storybook (MCP, plugins, intégrations)
- Sécurité, confidentialité et propriété intellectuelle des artefacts générés
- Veille : évolutions des outils design system et des modèles d’IA générative






