# Design Systems · Veille technologique [Source canonique]() Composants, règles et ressources partagés pour maintenir des interfaces cohérentes. ## [UI SFX : une bibliothèque de sons d’interface cohérente]() UI SFX organise **78 événements d’interface** en 12 univers sonores, pour comparer le caractère d’un même feedback sans changer sa signification. La bibliothèque rassemble 72 sons ponctuels et six boucles, avec des aperçus interactifs pour les tester dans des parcours de produit. Le package s’installe avec `npm install uisfx` et propose une API TypeScript pour déclencher les sons ou arrêter une boucle quand l’état associé se termine. Les fichiers audio sont sous licence CC0 et le runtime sous MIT ; cette séparation facilite leur réutilisation dans des projets web comme natifs. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Plane : une plateforme open source pour piloter projets et cycles]() Plane réunit suivi des work items, cycles, modules, pages et analytics dans une plateforme de gestion de projet open source, avec une option d’auto-hébergement via Docker ou Kubernetes. Le dépôt met aussi en lumière un chantier d’architecture concret : la migration de l’interface vers le design system Propel, menée par étapes avec des tests, des contrôles d’accessibilité et la suppression progressive des anciens composants. Le projet combine React et React Router côté web, Django côté API. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [CSS : gérer les icônes comme des tokens de design]() Lea Verou propose de traiter les icônes comme des **design tokens CSS** : des propriétés personnalisées les associent aux pseudo-éléments, et des masques SVG les affichent sans ajouter de balisage. Les composants peuvent ainsi choisir ou remplacer une icône selon l’état, le thème ou le contexte, tout en centralisant les définitions dans le design system. La technique a ses limites : le masquage convient surtout aux icônes monochromes, les URL et propriétés enregistrées ne se comportent pas de façon uniforme selon les navigateurs, et Safari nécessite des contournements. L’article détaille ces compromis et présente le package `@nudeui/icons` qui rassemble le système. 2026-10-22 · [Markdown]() · [Ressource originale]() ## [Refero Styles : bibliothèque de design systems exploitables par l’IA]() Refero Styles propose une collection consultable de plus de 2 000 design systems issus de sites produits reconnus, chacun accompagné d’un fichier DESIGN.md lisible par des IA comme Cursor, Claude ou ChatGPT. L’outil permet d’examiner couleurs, typographies, espacements et composants, puis de réutiliser ces styles dans ses propres projets ou prompts IA. Une ressource concrète pour donner du contexte visuel à un assistant ou accélérer la conception d’interfaces inspirées de références du marché. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Penpot, plateforme open source de design et prototypage]() 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. 2026-10-04 · [Markdown]() · [Ressource originale]() ## [Dembrandt : extraire les tokens de design d’un site web]() 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. 2026-08-16 · [Markdown]() · [Ressource originale]() ## [Impeccable : donner un vocabulaire de design aux agents de code]() 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. 2026-05-10 · [Markdown]() · [Ressource originale]() ## [Exposer Storybook à un agent avec un serveur MCP]() 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. 2026-02-06 · [Markdown]() · [Ressource originale]() ## [Skeleton : organiser thèmes et composants autour de Tailwind]() 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. 2025-10-19 · [Markdown]() · [Ressource originale]() ## [Omlet : visualiser l’usage des composants et de leurs props]() 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. 2025-03-20 · [Markdown]() · [Ressource originale]() ## [Utopia : construire des échelles fluides de texte et d’espacement]() 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. 2024-10-15 · [Markdown]() · [Ressource originale]() ## [Penpot : rapprocher design, composants et code]() 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. 2024-07-28 · [Markdown]() · [Ressource originale]() ## [TW Classed : composer des variantes de composants Tailwind]() 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. 2023-10-16 · [Markdown]() · [Ressource originale]()