Accélérez le passage du design au code avec l'importation du système de design de Claude

Importez vos tokens et composants de design existants dans Claude Design afin qu'il génère automatiquement une interface conforme à vos directives de marque. Cela élimine les cycles manuels de reconstruction du design au code et maintient les prototypes cohérents avec votre système dès le premier brouillon.

Claude Design prend désormais en charge l'importation de tout votre système de design directement depuis GitHub. Au lieu que Claude génère une interface aléatoire, il apprend votre bibliothèque de composants, votre palette de couleurs, votre typographie et vos règles d'espacement - puis construit des prototypes qui respectent vos standards. C'est important car cela comble l'écart entre ce que veulent les designers et ce que les développeurs implémentent.

Pour configurer cela, créez un fichier design-system-spec.json à la racine de votre dépôt qui cartographie vos tokens de design, vos fichiers de composants et vos ressources SVG. Le fichier est simple : il suffit d'indiquer à Claude l'URL de votre dépôt, de préciser votre framework (React, Vue, etc.) et de lister les chemins vers vos ressources de design. Validez-le une fois, et chaque fois que vous ouvrez Claude Design, vous pouvez importer votre système.

Voici un flux de travail réel : un chef de produit décrit un nouveau panneau de paramètres pour son SaaS : « Reconstruis notre page de paramètres avec trois onglets : Profil, Facturation, Équipe. Déplace les bascules de notification vers Préférences. » Claude Design génère un prototype utilisant les composants et les couleurs réels de votre système. Un designer le révise sur le canevas, ajuste l'espacement à l'aide de curseurs et ajoute des notes d'implémentation directement sur les éléments. Ensuite, il clique sur « Envoyer à Claude Code » - Claude Code reçoit l'ensemble sous forme de spécification lisible par machine, et non de capture d'écran, et peut l'implémenter. Pour les équipes déjà abonnées à Claude Pro ou Max, cela élimine l'étape pénible consistant à coller des maquettes dans le code et à les reconstruire manuellement.

Une contrainte : l'importation est un instantané. Si vous mettez à jour votre bibliothèque de composants après l'importation, exécutez la commande /design-sync dans Claude Code pour actualiser. Considérez cela comme la reconstruction d'un test après une mise à jour du système - la synchronisation est une seule commande, pas un processus manuel.