Claude Design et Motion

Tu décris une maquette, un prototype cliquable ou une landing page, et Claude la dessine sur un canvas à côté de la conversation. Il fait aussi les one-pagers et les decks. Une fois la première version sortie, tu corriges à la voix, au clavier ou directement sur le canvas.

Depuis le 8 octobre 2026, Design est sorti de beta et il est inclus dans tous les plans, Free compris.

D'où ça vient

Le produit a beaucoup bougé en six mois. Si tu as lu un tuto au printemps, une bonne partie est périmée.

Tu utilisais claude.ai/design ? Migre avant le 14 décembre

Tes design systems ne passent pas tout seuls dans Claude. Une seule migration embarque ceux de toute ton organisation, et n'importe qui ayant accès à Design peut la lancer.

1. Ouvre la page Artifacts dans Claude.
2. Clique sur "Migrate team design systems" dans le bandeau "Claude Design lives here now". Si tu l'as fermé, l'option est dans le menu Claude Design en haut à droite.
3. Confirme avec "Migrate". Sur un plan individuel, la migration démarre direct.
4. Vérifie la liste "Migrated". Ce qui a échoué apparaît sous "Couldn't be migrated", avec la raison (souvent : trop lourd).

Deux cas ne passent jamais : les design systems vides, et ceux partis d'un thème de démarrage intégré, même si tu les as retouchés.

Tes projets restent sur le site autonome jusqu'à la fermeture. Pour en garder une copie, ouvre-les un par un : Share, puis "Project HTML", "Project archive" et Export. Tu récupères un .zip, et ça ne compte pas dans tes limites.

Ce que tu fais avec

Design est un template d'artifact (chapitre 4) : tout ce que tu crées atterrit dans l'onglet Artifacts.

Ce qui sort bien :

• Prototypes interactifs, pour faire tester un parcours sans écrire de code.
• Landing pages et sites complets.
• Un one-pager tiré d'une proposition commerciale.
• Maquettes d'app : un onboarding en 4 écrans, un dashboard avec filtres.
• Visuels marketing qui respectent ta charte.
• Trois directions pour un même écran, quand tu ne sais pas encore ce que tu veux.

Pour les decks, Claude bascule sur le template Slides (chapitre 4). C'est la même famille, avec ton design system appliqué.

Le design system

Tu l'importes une fois depuis un repo GitHub, des fichiers design ou des uploads. Ensuite chaque nouveau projet en hérite. Claude vérifie lui-même que sa sortie colle au système et corrige avant de te montrer le résultat.

Sur Team et Enterprise, un owner peut fixer un design system par défaut pour toute l'organisation, et un rôle admin peut verrouiller un système standard pour que personne ne le modifie.

Comment démarrer

1. Dans une conversation, demande un design : "Fais un one-pager à partir de cette proposition". Ou choisis Output > Design dans la zone de message. Ou ouvre l'onglet Artifacts et prends un template Design.
2. Attache le design system à utiliser. S'il est dans un repo React, /design-sync dans Claude Code le convertit et l'envoie dans Design. La première synchro vérifie chaque composant et peut prendre quelques heures sur un gros repo.
3. Ajoute du contexte : captures d'écran, un deck dont tu veux le style, un repo.
4. Décris l'objectif, la mise en page, le contenu et le public visé.
5. Itère : le chat pour la structure, un commentaire posé sur un élément pour une retouche ciblée. Pour bouger, redimensionner ou aligner, édite directement sur le canvas.
6. Exporte ou partage.

Exemple de prompt qui marche : "Crée un dashboard du chiffre d'affaires mensuel avec des filtres par région et par gamme. Il doit tenir sur mobile." Plus c'est précis, moins tu itères.

Ce que ça donne en vrai

J'ai refait mon site avec Claude Design en 2 heures. Et j'ai cramé 51 % de mon plan Max dans l'opération. Garde ce chiffre en tête avant de lancer un gros chantier.

Exporter, envoyer, passer la main

Bouton Export en haut à droite :

Tu peux aussi envoyer ton design vers un outil tiers : Adobe (Express, Experience Manager, Journey Optimizer), Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel et Wix.

Passation vers Claude Code. Quand un design doit devenir un vrai produit, tu l'envoies vers ton agent de code local ou vers Claude Code sur le web. Claude Code reprend ton travail tel quel. Dans l'autre sens, /design dans Claude Code importe un design dans ta codebase ou transforme ton code en prototype live.

Partage. Un design démarre privé. Tu choisis qui peut le voir, le commenter ou l'éditer. Sur Team et Enterprise, le partage reste interne à l'organisation par défaut.

Motion : des animations codées

Motion transforme ton contenu en courte animation, comme un explainer de 30 secondes pour une réunion d'équipe ou un graphique animé à montrer au board. Ça marche aussi pour une démo produit destinée à l'onboarding client.

Motion n'utilise pas de modèle de génération vidéo. Claude écrit du code qui anime tes textes, tes graphiques, tes formes et tes images. Donc ni séquences filmées, ni personnes générées. L'avantage, c'est que tu changes un mot, un chiffre ou un timing sans que le reste bouge.

Qui y a accès. Beta depuis le 8 octobre 2026, sur Team et Enterprise seulement. Actif par défaut sur Team. Sur Enterprise, l'owner l'active dans Organization settings > Artifacts. Pas de Motion sur Free, Pro ou Max pour l'instant.

Comment faire.

1. Demande une animation dans un chat ("Transforme ce rapport trimestriel en explainer de 30 secondes pour l'all-hands"), ou choisis Output > Motion.
2. Précise qui va la regarder, où elle sera diffusée et la durée approximative.
3. Attache tes données, ton rapport ou tes images, pour que l'animation parte de ton contenu.
4. Corrige dans le chat ("Ralentis la deuxième scène") ou directement dans l'éditeur.
5. Export en MP4.

Pour aller plus loin, tu ouvres l'animation dans Adobe, Descript, HeyGen, Higgsfield, invideo, Luma AI ou Runway. Canva et Captions sont annoncés.

Design, Slides, Canva ou Figma

Mon avis : Design sort vite une première version propre, et c'est pratique pour comparer des pistes. Il est moins à l'aise sur un fichier retravaillé à plusieurs pendant des mois. Anthropic le dit lui-même : l'édition simultanée à plusieurs reste basique, et il n'y a pas encore d'historique de versions. Pour ce travail-là, Figma garde l'avantage.

Les pièges

• Ça consomme beaucoup. Ma refonte de site, plus haut, donne l'ordre de grandeur. Gros repo, nombreuses itérations : la note monte vite.
• L'audio n'est pas documenté. L'aide d'Anthropic ne mentionne nulle part la lecture d'un fichier son. Pour caler une animation sur une voix, fournis une transcription horodatée.
• Gros repo, navigateur qui rame. Pour un très gros repo, Anthropic conseille de le lier depuis Claude Code (/design-sync) plutôt que dans le navigateur.
• Pas d'historique de versions. Avant de partir dans une autre direction, dis à Claude : "Sauvegarde ce qu'on a et essaie une approche complètement différente."
• Commentaires qui disparaissent. Si Claude ignore un commentaire posé sur le canvas, colle le retour dans le chat. C'est le contournement officiel.
• Le design system reflète sa source. Une codebase en désordre donne des sorties en désordre.
• Sur mobile, tu peux éditer un design depuis le 8 octobre 2026, mais pas changer ses réglages de partage.

Combien ça coûte

Pas de prix séparé. Design et Motion comptent dans les limites de ton plan, les mêmes que pour le chat et Claude Code : une session qui se réinitialise toutes les 5 heures plus une limite hebdomadaire. Anthropic ne publie pas de quota chiffré.

Quand tu atteins la limite, Design est indisponible jusqu'à la réinitialisation. Si tu as activé les crédits d'usage (paiement au tarif API au-delà de ton forfait), tu continues. Comment lire ta consommation et l'économiser : chapitre 11.

Sources

• Introducing Claude Design by Anthropic Labs (17 avril 2026)
• Claude Design now stays on brand for daily work (17 juin 2026)
• Build live dashboards and animate explainers with Claude (8 octobre 2026)
• Get started with Claude Design
• Migrate from standalone Claude Design to Claude