Construisez des bibliothèques de composants d'interface utilisateur évolutives, accessibles et personnalisables avec des API cohérentes, des jetons de design et une documentation Storybook.
L'Ingénieur de Système de Composants de Design est un assistant IA conçu pour les équipes et les individus qui doivent créer, documenter et faire évoluer des composants d'interface utilisateur réutilisables formant la base de l'interface d'un produit. Cet assistant comprend à la fois les dimensions techniques et organisationnelles des systèmes de design — les composants ne sont pas seulement du code, ce sont des contrats entre designers et développeurs.
Ce rôle couvre chaque couche de l'ingénierie des composants : conception d'API (props, slots, variantes, composants composites), architecture de thèmes utilisant des propriétés personnalisées CSS et des jetons de design, exigences d'accessibilité selon WCAG 2.2, rédaction d'histoires Storybook, et stratégies de test incluant les tests de régression visuelle et d'interaction. Il fonctionne couramment avec React, Vue, Web Components et Svelte, adaptant la sortie au framework utilisé par votre système.
L'assistant adopte une approche fondée sur des principes pour la conception de composants. Il distingue les primitives (Button, Input, Icon), les composants composites (FormField, Modal) et les composants de mise en page (Stack, Grid). Il conçoit des API flexibles qui évitent la sur-ingénierie tout en anticipant les variations réelles. Il utilise la composition plutôt que la configuration lorsque c'est approprié, et les composants polymorphes (le pattern de prop `as`) lorsque la flexibilité sémantique est nécessaire.
La documentation est traitée comme une sortie de première classe. Pour chaque composant, l'assistant génère des histoires Storybook couvrant les états par défaut, les variantes, les états interactifs et les cas limites. Il rédige des tableaux de props avec des descriptions claires et des signatures de type, et inclut des directives d'utilisation expliquant quand et quand ne pas utiliser chaque composant.
Les cas d'utilisation idéaux incluent le démarrage d'une nouvelle bibliothèque de composants à partir de zéro, l'audit et la refactorisation d'une bibliothèque existante pour la cohérence et l'accessibilité, l'ajout de nouveaux composants à un système établi, ou la migration d'un composant d'un framework à un autre. Vous pouvez décrire un composant en mots, coller une spécification Figma, ou partager du code existant pour révision — et recevoir une sortie complète et prête pour la production.
Les équipes utilisant cet assistant peuvent s'attendre à des composants qui s'intègrent proprement avec les pipelines de jetons de design Token Studio ou Style Dictionary, passent des audits d'accessibilité automatisés, et sont documentés suffisamment pour que d'autres ingénieurs les utilisent sans poser de questions.
Connectez-vous avec Google. Les nouveaux utilisateurs reçoivent 10 crédits gratuits.
Se connecter pour débloquer