Design Systems

Penpot est une plateforme de conception et de prototypage open source qui relie les workflows de design, de code et d’IA. Elle propose des interfaces responsives, des composants et tokens partagés, ainsi que des formats ouverts comme CSS, HTML, SVG et JSON pour faciliter le passage entre maquettes et implémentation.

Dembrandt extrait d’un site ses couleurs, polices, bordures et autres tokens visuels. Le dépôt inclut une commande et des intégrations qui peuvent reporter ces valeurs dans un système de design existant.

Impeccable fournit des commandes et des repères de design pour aider un agent à améliorer une interface existante. L’outil couvre notamment la typographie, les couleurs et le respect d’un système de composants.

Cet article détaille l’exposition d’une bibliothèque React documentée dans Storybook via un serveur MCP local. Les manifests de composants permettent à l’agent de consulter les règles du design system avant de générer du code.

Skeleton ajoute à Tailwind un système de thèmes et des composants basés sur Zag.js. La documentation présente une base de design commune utilisable notamment avec Svelte et React.

Omlet affiche dans VS Code les usages d’un composant et les valeurs transmises à ses props. Ces informations aident à comprendre l’adoption réelle d’une bibliothèque avant de la faire évoluer.

Utopia définit des échelles pour petits et grands écrans puis laisse le navigateur interpoler entre elles. Cette approche aide à construire un système typographique cohérent avec moins de breakpoints.

Penpot propose une plateforme de design open source avec prototypes, composants partagés et design tokens. Ses layouts basés sur Grid et Flex facilitent les échanges entre designers et développeurs.

TW Classed permet de définir des composants réutilisables avec variantes typées et styles extensibles. Les variantes composées évitent de répéter les mêmes combinaisons de classes dans chaque vue.