# Créer son propre design system dans Claude Design : du moodboard à la mascotte animée > Guide pratique complet pour concevoir un design system de marque dans Claude Design : sélection de références, génération de 4 concepts, tokenisation, tests et mascotte SVG animée. La génération contemporaine d'interfaces par intelligence artificielle souffre fréquemment de « dérive visuelle » : chaque nouvelle sollicitation auprès d'un modèle neuronal produit des nuances aléatoires, des marges disparates et des polices désynchronisées. Le produit perd sa cohérence identitaire pour ressembler à un assemblage hétéroclite. **Claude Design**, développé par Anthropic, apporte une réponse fondamentale à cette problématique. Il s'agit d'un environnement dédié permettant de concevoir et de pérenniser de véritables design systems : des design tokens globaux (palettes, grilles, typographie) jusqu'aux composants UI interactifs et aux mascottes de marque animées. Dans ce guide d'ingénierie pratique, nous couvrons l'intégralité du cycle de conception : de la recherche de références internationales à la génération de quatre concepts stylistiques contrastés sur un canevas interactif 2×2, en passant par la tokenisation, la synchronisation avec le code source via Claude Code et la création d'une mascotte vectorielle animée en SVG. > [!NOTE] > Un design system dans Claude Design n'est pas une maquette statique Figma ; il constitue un ensemble dynamique et exécutable de règles et de tokens. Une fois enregistré, Claude applique automatiquement vos palettes, rayons de courbure et typographies approuvés à chaque nouveau prompt, extrait de code ou support marketing. --- ## 1. Comprendre Claude Design et la nécessité d'un système de règles Un design system représente la source unique de vérité (Single Source of Truth) pour l'identité visuelle de votre marque. Il formalise : - **Les tokens de couleur :** primaires, secondaires, surfaces, arrière-plans et contrastes sémantiques accessibles. - **La hiérarchie typographique :** familles de polices, échelles modulaires, hauteurs de ligne et graisses. - **La géométrie et les espacements :** grille de base (ex. 4px/8px), rayons de courbure (border-radius) et ombres portées (elevation). - **Les composants UI réutilisables :** boutons, champs de saisie, cartes, modales et barres de navigation. - **Les principes de mouvement :** courbes d'accélération des micro-interactions, états de survol et animations de la mascotte. Sans système préétabli, l'IA générative réinvente l'interface à chaque interaction. Grâce à un design system actif, Claude délivre des résultats rigoureusement cohérents dès le premier jet, supprimant les heures de retouches manuelles dans les éditeurs vectoriels. --- ## 2. Sélectionner ses références visuelles : extraire l'ADN de marque Avant d'ouvrir le générateur ou de saisir votre première consigne, établissez une base de références structurée. Ne vous contentez pas de répertorier de « beaux sites web » : examinez l'identité de marque, la typographie, les grilles modulaires et le motion design comme des couches d'ingénierie distinctes. > [!TIP] > Pour approfondir les courants esthétiques, consultez notre référence [50 styles de design visuel pour design systems et UI/UX](/fr/guides/prompts/50-design-styles-for-better-prompting), qui analyse la transcription des mouvements historiques (du Bauhaus au Néo-Brutalisme) en tokens d'interface. ### 2.1. Branding, identité et orientations visuelles Ces catalogues permettent de fixer l'atmosphère générale, la température chromatique et le ton typographique. | Ressource | Vocation pratique | Lien | | :--- | :--- | :--- | | **50 Design Styles** | Analyse de 50 styles : Art Déco, Japandi, Brutalisme, Bauhaus, etc. | [Découvrir 50 styles →](https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62) | | **Pinterest** | Moodboards, textures de matériaux, dégradés et schémas d'éclairage | [Ouvrir Pinterest →](https://www.pinterest.com/) | | **Behance** | Études de cas approfondies d'identité de marque et chartes graphiques | [Ouvrir Behance →](https://www.behance.net/) | | **Brand New** | Analyses critiques des refontes d'entreprises par UnderConsideration | [Lire Brand New →](https://www.underconsideration.com/brandnew/) | | **Rebrand Gallery** | Répertoire de logos modernisés, palettes rénovées et duos de polices | [Consulter Rebrand Gallery →](https://www.rebrand.gallery/) | | **Recent Design** | Tendances récentes en design graphique, motifs d'interface et motion | [Explorer Recent Design →](https://recent.design/) | ### 2.2. Webdesign, sites marketing et pages d'atterrissage Pour la macro-composition, la dynamique de lecture, la hiérarchie de contenu et les sections de conversion. | Plateforme | Spécialisation | Lien | | :--- | :--- | :--- | | **Awwwards** | Expériences web d'avant-garde, interfaces expérimentales et WebGL | [Ouvrir Awwwards →](https://www.awwwards.com/) | | **Land-book** | Pages d'atterrissage à fort taux de conversion et sites produits | [Ouvrir Land-book →](https://land-book.com/) | | **One Page Love** | Référence pour les architectures mono-pages et micro-sites épurés | [Explorer One Page Love →](https://onepagelove.com/inspiration) | | **Curated Design** | Sélection de sites rigoureusement catégorisés par industrie et style | [Ouvrir Curated Design →](https://curated.design/) | | **Landing Love** | Captures vidéo de défilement, transitions fluides et animations | [Regarder Landing Love →](https://www.landing.love/) | | **Saaspo** | Modèles d'interfaces SaaS, grilles tarifaires et parcours d'onboarding | [Ouvrir Saaspo →](https://saaspo.com/) | | **SaaSFrame** | Entonnoirs de conversion et architectures d'interface B2B | [Explorer SaaSFrame →](https://saasframe.io/) | | **WebInspoo** | Annuaire SaaS filtrable par combinaisons de couleurs et technologies | [Visiter WebInspoo →](https://webinspoo.com/) | ### 2.3. Sections spécifiques et modules de conversion Idéal lorsque la charte générale est définie, mais qu'un bloc fonctionnel précis nécessite des ajustements. | Module / Répertoire | Fonctionnalité ciblée | Lien | | :--- | :--- | :--- | | **Navbar Gallery** | En-têtes : barres flottantes, méga-menus et navigations mobiles | [Consulter les navbars →](https://www.navbar.gallery/) | | **Supahero** | Sections Hero : propositions de valeur d'impact et boutons d'action | [Explorer les heroes →](https://supahero.io/) | | **Unsection** | Modules dédiés : preuves sociales, tableaux comparatifs et avis clients | [Ouvrir Unsection →](https://www.unsection.com/) | | **Footer Design** | Pieds de page : arborescences de liens, mentions légales et badges | [Consulter les footers →](https://www.footer.design/) | | **CTA Gallery** | Blocs d'inscription et de capture de leads à fort impact | [Explorer les CTA →](https://www.cta.gallery/) | | **404s Design** | Approches créatives des erreurs 404 pour retenir les utilisateurs | [Collection 404 →](https://www.404s.design/) | | **One Page Love (OG)** | Visuels Open Graph optimisés pour les partages sur réseaux sociaux | [Voir les bannières OG →](https://onepagelove.com/og) | ### 2.4. Grilles modulaires et agencements Bento Grid Structuration du contenu par blocs asymétriques et espacements maîtrisés. | Outil | Description | Lien | | :--- | :--- | :--- | | **Bento Grids** | Grilles modulaires type Bento Box pour présenter les fonctionnalités | [Consulter Bento Grids →](https://bentogrids.com/) | | **Griddy** | Environnement interactif pour maîtriser les propriétés de CSS Grid | [Lancer Griddy →](https://griddy.io/) | | **One Page Love Sections** | Compositions de sections réelles issues de produits numériques | [Voir les sections →](https://onepagelove.com/sections) | ### 2.5. Composants UI, tokens et design systems ouverts Éléments réutilisables : boutons, formulaires, cartes, badges et documentation de tokens. | Répertoire | Intérêt | Lien | | :--- | :--- | :--- | | **Astryx by Meta** | Design system open-source officiel de Meta optimisé pour les agents IA | [Documentation Astryx →](https://astryx.atmeta.com/) | | **21st.dev** | Le « npm des ingénieurs design » : composants d'interface avec prompts IA | [Ouvrir 21st.dev →](https://21st.dev/) | | **Refero** | Répertoire de plus de 30 000 écrans réels d'applications iOS et web | [Explorer Refero →](https://refero.design/) | | **Refero Styles** | Systèmes de design exemplaires avec tokens prêts à l'emploi et `DESIGN.md` | [Ouvrir Refero Styles →](https://styles.refero.design/) | | **VantaUI** | Kits de composants d'interface, états interactifs et fichiers Figma | [Explorer VantaUI →](https://www.vantaui.com/) | | **Component Gallery** | Répertoire complet de composants d'interface classés par design systems réels | [Explorer Component Gallery →](https://component.gallery/) | | **ButtonCraft** | Bibliothèque de boutons CSS avec effets au survol interactifs | [Ouvrir ButtonCraft →](https://www.buttoncraft.co/) | | **OpenBridge** | Design system open-source pour les ponts maritimes et l'industrie | [Documentation OpenBridge →](https://www.openbridge.no/) | > [!TIP] > Le catalogue **Refero Styles** et le système **Astryx de Meta** constituent des références idéales pour alimenter Claude : la clarté de leur structure se transpose directement en un fichier `DESIGN.md` exploitable par Claude 3.5 et 3.7. ### 2.6. Micro-interactions, animations et 3D | Ressource | Domaine | Lien | | :--- | :--- | :--- | | **React Bits** | Plus de 60 composants animés React open-source : shaders, typographie cinétique | [Ouvrir React Bits →](https://reactbits.dev/) | | **21st.dev** | Micro-animations interactives et blocs UI prêts pour la production (Framer Motion) | [Consulter 21st.dev →](https://21st.dev/) | | **Amicro** | Micro-interactions légères et transitions fluides pour composants React | [Ouvrir Amicro →](https://amicro.dev/) | | **ThreeUI** | Éléments d'interface 3D prêts à l'emploi et canevas interactifs WebGL | [Voir ThreeUI →](https://threeui.com/browse) | | **Paper Shaders** | Arrière-plans avec shaders WebGL et effets graphiques génératifs dans le navigateur | [Découvrir Paper Shaders →](https://shaders.paper.design/) | | **60fps Design** | Modèles de transitions fluides, changements d'état et retours de clic | [Ouvrir 60fps →](https://60fps.design/) | | **Design Spells** | Micro-interactions subtiles, gestes natifs et effets de survol | [Ouvrir Design Spells →](https://designspells.com/) | | **Mesh3D Gallery** | Scènes 3D interactives pour le web, shaders WebGL et Three.js | [Explorer la galerie 3D →](https://www.mesh3d.gallery/) | ### 2.7. Systèmes typographiques et palettes | Service | Utilité | Lien | | :--- | :--- | :--- | | **Google Fonts** | Polices open-source offrant une couverture internationale complète | [Catalogue Google Fonts →](https://fonts.google.com/) | | **Fontpair** | Combinaisons éprouvées de polices de titrage et de texte courant | [Découvrir les associations →](https://www.fontpair.co/) | | **Coolors** | Générateur de palettes et testeur de conformité de contraste WCAG | [Lancer Coolors →](https://coolors.co/) | ### 2.8. La règle d'or pour constituer vos références Évitez de surcharger Claude avec des dizaines d'URL sans structure. Le dossier de référence optimal comprend : - **2 à 3 références d'identité :** température chromatique, caractère et esprit typographique. - **2 à 3 sites web complets :** équilibre du blanc tournant et hiérarchisation. - **2 à 3 composants ciblés :** géométrie des boutons, champs de saisie et cartes. - **1 à 2 références de mouvement :** arrondis, élévations ou vitesse de transition. - **3 qualificatifs essentiels de marque :** par exemple, *« technique, épuré, monochrome haut de gamme »*. --- ## 3. Initialiser le design system dans Claude Design Vous disposez de deux méthodes pour créer un système dans l'interface de Claude : 1. **Depuis les paramètres de l'espace de travail :** Rendez-vous dans `Settings` → `Design systems` → cliquez sur `New design system`. 2. **Directement depuis la zone de discussion :** Cliquez sur l'icône `+` à côté du champ de saisie → choisissez `Design system` → `New design system`. ```mermaid graph LR A[Démarrage] --> B{Mode de création} B -->|Nouvelle marque / Sans code| C[Using Claude] B -->|Code source existant| D[Using Claude Code] C --> E[Import des références et du brief] D --> F[Scan des tokens CSS / Tailwind] E --> G[Canevas interactif 2x2] F --> G ``` ### Choisir son mode : Using Claude ou Using Claude Code - **Using Claude :** Idéal pour concevoir une marque ou une interface ex nihilo. Vous transmettez captures d'écran, moodboards ou briefs textuels, et Claude construit le système visuellement. - **Using Claude Code :** Conçu pour les équipes disposant déjà d'un dépôt de code. L'agent en ligne de commande inspecte vos configurations Tailwind, variables CSS et composants React pour en extraire les tokens actifs. > [!IMPORTANT] > Pour les applications destinées à un public international, veillez à exiger une prise en charge Unicode intégrale des glyphes sur Google Fonts afin d'éviter les anomalies de rendu typographique en production. --- ## 4. Exploration esthétique : générer 4 concepts contrastés L'erreur la plus fréquente consiste à figer prématurément des tokens définitifs. Un processus d'ingénierie rigoureux repose sur une phase d'exploration divergente avant tout resserrement. Demandez à Claude de concevoir **quatre directions stylistiques nettement différenciées** présentées sur un même canevas interactif (grille 2×2), en utilisant un contenu textuel identique. ### Prompt maître n° 1 : Exploration stylistique divergente ```markdown Agis en tant que directeur artistique principal concevant un design system de marque dans Claude Design. Ne construis pas le design system final immédiatement. Ton premier objectif est de proposer quatre directions stylistiques fondamentalement contrastées pour évaluation. Contexte de marque : - Nom et secteur : [Indiquer le nom et le modèle économique] - Public cible : [Décrire le profil d'utilisateur principal] - 3 qualificatifs de marque : [Exemple : technique, minimaliste, monochrome haut de gamme] - Éléments imposés : [Logo, teinte maîtresse ou impératifs historiques] - Éléments à proscrire : [Exemple : tons pastel enfantins, néons criards, dégradés génériques] Analyse des références : Examine les fichiers et liens transmis. En trois phrases synthétiques, dégage les dénominateurs communs (harmonie des teintes, échelle typographique, densité de grille). Utilise-les uniquement comme source d'inspiration, sans reproduire d'œuvres existantes. Quatre directions contrastées : Conçois 4 propositions bien distinctes : claire vs sombre, chaude vs froide, avec empattements (Serif) vs linéale géométrique (Sans-serif). Pour chaque concept, fournis : 1. Un intitulé conceptuel (2 à 3 mots) et une courte justification esthétique. 2. Un duo typographique Google Fonts avec large couverture linguistique (Titre + Corps). 3. Une palette chromatique de 5 à 6 nuances avec codes HEX exacts. 4. Deux supports de test identiques : [Exemple : section Hero d'accueil desktop + carte produit]. Modalités de rendu : Dispose les 4 concepts sur un canevas unique en grille 2x2, chacun sur son Artboard dédié. Veille à conserver l'entière éditabilité des formes vectorielles, typographies et conteneurs. Marque une pause et attends mes observations ou ma sélection avant de passer à la phase de tokenisation. ``` L'observation de cette matrice 2×2 permet de comparer l'harmonie des teintes et l'équilibre typographique en toute objectivité. Vous pouvez sélectionner une direction ou demander à Claude de combiner la typographie de la première option avec la palette de la troisième. --- ## 5. Tokenisation et formalisation du design system Une fois la direction visuelle entérinée, traduisez-la en une spécification rigoureuse de tokens et de composants réutilisables. ### Prompt maître n° 2 : Spécification des tokens et composants ```markdown Je choisis le Concept n° [Préciser le numéro] avec les ajustements suivants : [Exemple : remplacer le gris de fond par un anthracite plus chaleureux]. À partir de ce socle, génère le design system complet dans Claude Design. La spécification doit comporter les sections suivantes : 1. Colors (Tokens de couleur) : - Primary, Secondary, Background, Surface, Muted, Accent, Error et Success. - Valeurs HEX précises accompagnées des rôles sémantiques et des notes de contraste WCAG AA. 2. Typography : - Familles de polices Google Fonts. - Échelle modulaire (H1, H2, H3, H4, Body Large, Body, Caption) avec valeurs px/rem, hauteurs de ligne et interlettrages. 3. Spacing & Layout : - Grille d'espacement basée sur 4px/8px (space-1 = 4px, space-2 = 8px ... space-16 = 64px). - Largeurs maximales des conteneurs et grilles adaptatives (12 colonnes desktop, 4 colonnes mobile). 4. Geometry & Elevation : - Rayons de courbure (radius-sm, radius-md, radius-lg, radius-full). - Épaisseurs de bordure et paliers d'ombres portées (tokens d'élévation). 5. Core UI Components : - Boutons (Primary, Secondary, Ghost, Destructive) aux états Default, Hover, Active et Disabled. - Champ de formulaire, carte, badge et boîte de dialogue modale. 6. Règles sur les visuels : - Marges de sécurité du logotype et traitement des photographies. Présente l'ensemble sous la forme d'un document structuré DESIGN.md et d'une arborescence de tokens. Respecte rigoureusement le style retenu sans réintroduire d'options abandonnées. ``` ### Outil fondamental : les Usage Notes Dans Claude Design, renseignez impérativement le champ **Usage Notes**. Il agit comme une consigne système précisant à Claude les conditions d'application de chaque style. Par exemple : - *« Le jaune d'accent (#FFC700) est réservé exclusivement au bouton d'appel à l'action principal et ne doit en aucun cas servir de fond de carte. »* - *« Les titres de section s'écrivent obligatoirement en lettres capitales avec un espacement interlettrage de 0.05em. »* Ces directives éliminent les dérives visuelles lors des sessions ultérieures. ### L'écosystème DESIGN.md : bibliothèques de tokens et extracteurs IA Pour éviter de rédiger les spécifications manuellement ou pour importer une identité visuelle existante dans Claude Design, appuyez-vous sur les outils de l'écosystème `DESIGN.md` : | Outil | Fonctionnalités clés | Lien | | :--- | :--- | :--- | | **getdesign.md** | Répertoire de fichiers `DESIGN.md` réels formatés pour les agents de code IA | [Ouvrir getdesign.md →](https://getdesign.md/) | | **designmd.me** | Extracteur de tokens par IA : collez l'URL d'un site pour obtenir son `DESIGN.md` complet | [Lancer designmd.me →](https://designmd.me/) | | **designmd.ai** | Catalogue libre de centaines de design systems prêts pour Cursor et Claude Code | [Explorer designmd.ai →](https://designmd.ai/) | --- ## 6. Épreuves de résistance sur supports réels Avant de diffuser le design system auprès des équipes de développement, éprouvez sa cohérence sur trois formats dissemblables. ### Prompt maître n° 3 : Audit de cohérence multi-supports ```markdown En appliquant le design system nouvellement établi, réalise trois livrables distincts pour notre marque : 1. Écran d'accueil web desktop (Section Hero avec navigation, proposition de valeur et bouton d'action principal). 2. Diapositive de présentation (Graphique de métriques clés, visualisation de données et conclusion saillante). 3. Visuel pour réseaux sociaux (Format carré 1080x1080 annonçant une mise à jour produit). Exigences : - Les trois créations doivent partager un vocabulaire visuel immédiatement identifiable. - Respecte scrupuleusement les tokens validés : couleurs, typographie, arrondis et marges intérieures. - Vérifie la lisibilité du texte et le respect des normes d'accessibilité WCAG AA pour chaque élément. ``` > [!TIP] > **Références pour l'évaluation des formats :** > - Pour évaluer la diapositive de présentation, appuyez-vous sur [Deck Gallery](https://deck.gallery/) — une collection de référence réunissant les meilleurs pitch decks de startups tech. > - Pour tester le visuel pour réseaux sociaux, parcourez [Posts Design](https://posts.design/) — un catalogue d'inspiration de carrousels, posts graphiques et annonces de marques. Si le texte d'une diapositive manque de lisibilité ou si la teinte d'accent prend trop de place sur le visuel social, ne corrigez pas le document à la main. Ajustez le token racine dans le design system : tous les supports dépendants s'actualiseront automatiquement. --- ## 7. Exploitation dans de nouveaux projets et synchronisation avec Claude Code Une fois validé, votre design system est instantanément accessible dans l'ensemble de votre espace de travail Claude. ### Activation dans les échanges classiques Pour mobiliser ces règles dans un nouveau chat, cliquez sur l'icône `+` à côté du champ de saisie → choisissez `Design system` → cochez votre système. Toute requête de code React, d'e-mail responsive ou de tableau de bord respectera les tokens enregistrés. ### Synchronisation avec le code source via `/design-sync` Pour les développeurs exploitant l'agent de terminal **Claude Code**, la liaison entre la maquette et le code s'opère par une commande unique : ```bash /design-sync ``` Ce processus automatisé : - Extrait les tokens actifs de Claude Design et les convertit dans `tailwind.config.ts` ou dans les variables CSS de `globals.css` ; - Met à jour ou génère le fichier `DESIGN.md` à la racine de votre projet ; - Identifie les éventuelles divergences entre les tokens actifs et vos composants React en place. ### Prompt maître n° 4 : Mise à jour ciblée de tokens ```markdown Accède à notre design system actif. Je souhaite ajuster les tokens liés aux [indiquer : boutons / champs de saisie / échelle typographique]. Propose trois déclinaisons stylistiques pour ce composant, en préservant scrupuleusement l'ADN global de la marque (gamme de couleurs, espacements et tonalité générale). Fournis une comparaison claire « Avant / Après » pour chaque option. N'applique aucune modification globale tant que je n'ai pas formellement validé la variante finale. ``` --- ## 8. Création d'une mascotte de marque animée (SVG et Claude Motion) Une mascotte distinctive ancre durablement l'image de marque, rehausse les états vides (empty states), dédramatise les pages d'erreur et dynamise les campagnes de communication. Claude Design est en mesure de concevoir un personnage vectoriel respectant les règles du système et de produire une bibliothèque complète d'animations. ```mermaid flowchart TD DS[Design System de marque] --> Concept[Génération de 3 concepts de mascotte] Concept --> Approval{Validation de l'orientation} Approval --> Vector[Export du SVG vectoriel propre] Vector --> States[Création de 15 états de mouvement] States --> WebDev[CSS / Lottie / JS pour le web] States --> Video[Claude Motion MP4 / WebM] ``` ### Prompt maître n° 5 : Concept de mascotte et bibliothèque de 15 états animés ```markdown Agis en tant que Character Designer et Motion Engineer principal. En t'appuyant sur notre design system validé, imagine une mascotte de marque originale. Le personnage doit prolonger harmonieusement l'univers visuel de la marque : réutiliser nos tokens de couleur, nos arrondis et notre signature stylistique. Phase 1 : Concept du personnage (SVG Vectoriel) - Propose 3 concepts de mascotte aux tempéraments variés (exemple : automate ingénieur, forme géométrique minimaliste, compagnon cybernétique chaleureux). - Génère un code SVG propre et sémantiquement balisé pour chaque proposition. - Travaille l'expressivité faciale, le regard et une silhouette immédiatement mémorisable. - Affiche les trois déclinaisons côte à côte pour comparaison. Phase 2 : Bibliothèque de 15 mouvements et émotions (après approbation du concept) : 1. Idle — respiration calme et posture de repos. 2. Blink — clignement naturel des paupières. 3. Wave — salut bienveillant de la main ou d'un membre. 4. Walk — cycle de marche continu. 5. Jump — saut d'enthousiasme dynamique. 6. Think — attitude pensive (pendant la génération d'une réponse IA). 7. Talk — posture d'élocution active. 8. Happy — célébration d'une action réussie. 9. Sad — expression d'empathie lors d'une erreur 404 ou d'une déconnexion. 10. Surprise — réaction d'étonnement et d'éveil. 11. Celebrate — lancer de confettis ou pose victorieuse. 12. Point — désignation explicite d'un élément d'interface ou d'un bouton. 13. Loading — animation cyclique avec indicateur d'attente. 14. Sleep — mise en veille lorsque l'onglet est inactif. 15. Goodbye — salut courtois de départ. Pour l'instant, présente exclusivement les 3 concepts vectoriels en SVG et marque un temps d'arrêt pour ma sélection. ``` ### Prompt maître n° 6 : Finitions d'animation et galerie interactive ```markdown Je retiens la mascotte n° [Préciser le numéro]. Développe à présent une galerie interactive présentant l'ensemble des 15 états animés : 1. Conserve rigoureusement les proportions, l'échelle et les tokens de couleur sur chaque mise en scène. 2. Implémente des animations CSS fluides basées sur @keyframes directement intégrées au code SVG. 3. Prévois la gestion du paramètre prefers-reduced-motion pour respecter l'accessibilité (a11y). 4. Dispose d'une barre de contrôle simple : boutons Lecture / Pause et sélecteur de vitesse d'animation. ``` > [!TIP] > **Vocabulaire d'effets visuels et motion :** Pour désigner précisément les mouvements lors de vos requêtes (ex. : *morphing*, *kinetic typography*, *rotoscoping*, *claymation*, *glitch*), consultez l'encyclopédie visuelle [Eyecannndy](https://eyecannndy.com/). > > **Claude Motion (Export vidéo) :** Pour les montages audiovisuels (Premiere Pro, DaVinci Resolve), Anthropic propose le module en version bêta **Claude Motion** (réservé aux abonnements Team et Enterprise), capable de rendre les séquences du personnage en fichiers vidéo MP4 haute définition ou en WebM avec canal alpha transparent. --- ## 9. Synthèse du parcours et ressources fondamentales L'élaboration d'un design system robuste et pérenne s'articule autour de huit étapes successives : | Phase | Objectif clé | Livrable opérationnel | | :--- | :--- | :--- | | **1. Références** | Réunir des moodboards sur 7 registres | Sélection de 10 liens ciblés et 3 mots d'ordre | | **2. Initialisation** | Déployer Claude Design | Espace de conception actif | | **3. Exploration** | Prompt maître n° 1 sur canevas 2×2 | 4 directions esthétiques contrastées | | **4. Tokenisation** | Prompt maître n° 2 et Usage Notes | Fichier `DESIGN.md` et tokens couleur/typo | | **5. Crash-test** | Prompt maître n° 3 sur 3 formats | Vérification sur web, présentation et réseaux | | **6. Synchro code** | Commande `/design-sync` dans Claude Code | Tokens Tailwind / CSS synchronisés dans le dépôt | | **7. Évolution** | Prompt maître n° 4 pour retouches ciblées | Mises à jour incrémentales sans refonte | | **8. Mascotte & Motion** | Prompts n° 5 et n° 6 + Claude Motion | Mascotte vectorielle SVG avec 15 animations et MP4 | ### Documentation officielle et ressources recommandées - **Anthropic Academy :** [Guide officiel de prise en main des design systems](https://academy.claude.com/tutorials/create-a-design-system-with-claude) - **Centre d'aide Claude Design :** [Premiers pas avec Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design) - **Documentation Claude Motion :** [Guide de la bêta Motion et export vidéo](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion) - **Guide connexe sur GotBurnout :** [50 styles de design visuel pour UI/UX et direction artistique](/fr/guides/prompts/50-design-styles-for-better-prompting)