Ressources front-end et design : sélection vérifiée par besoin

But

Les six dépôts analysés cumulent des centaines de liens et se recouvrent fortement. Cette fiche conserve les ressources qui répondent à une étape concrète du travail ; elle ne recopie pas les listes.

Recherche produit et flux

Pageflows — parcours filmés et écrans de produits réels ; utile pour onboarding, recherche, paiement et erreurs.
Mobbin — patterns mobiles et web issus de produits publiés.
SaaSFrame — pages marketing, interfaces produit et emails SaaS.
Product Onboarding — exemples d'onboarding classés par pattern et entreprise.

Composition et direction visuelle

Lapa Ninja — captures longues de landing pages, filtrables par type.
A1 Gallery — sites filtrables par stack, police, style, couleur et catégorie.
SiteInspire — corpus large pour recherche par industrie et style.
Httpster — sélection plus éditoriale et expressive.
Fonts In Use — typographie observée en contexte réel.
Rebrand — systèmes de marque et lancements de rebranding.

Fondations et systèmes

W3C WAI — exigences et méthodes d'accessibilité ; priorité sur l'esthétique d'une galerie.
Component Gallery — compare l'implémentation d'un même composant dans plusieurs design systems.
Storybook — construire, documenter et tester les états d'interface isolément.
Open UI — recherche et standardisation des composants natifs du Web.
Design Tokens Community Group — format interopérable pour les tokens.
Carbon, Polaris et Fluent 2 — exemples complets de règles, composants et contenu, à étudier plutôt qu'à mélanger.

Outils ciblés

ColorBrewer — palettes de visualisation avec contraintes de lisibilité.
Inclusive Colors — échelles de couleur avec vérification WCAG/APCA.
Fontsource — polices open source empaquetées et auto-hébergeables.
SVGOMG — optimisation contrôlée des SVG.
Squoosh — comparaison et compression d'images dans le navigateur.
Animations.dev — apprentissage interactif du mouvement d'interface ; toujours appliquer prefers-reduced-motion.

Évaluation des six sources

design-resources-for-developers : couverture très large (assets, polices, couleurs, icônes, frameworks, composants, compression). Bon annuaire, mais la licence et la qualité doivent être vérifiées lien par lien.
awesome-design-resources : sélection récente orientée design engineer, composants et apprentissage. Les descriptions promotionnelles ne constituent pas une revue technique.
awesome-inspiration : classement très utile par livrable et zone de page (onboarding, navbar, footer, OG, motion, branding). Privilégier les références de produits réels.
awesome-frontend-resources : surtout parcours, documentation et apprentissage front-end ; MDN, docs officielles et roadmap.sh sont les éléments les plus durables.
awesome-ui : taxonomie UX intéressante, mais de nombreux outils/liens sont historiques ; ne rien adopter sans contrôle de maintenance.
ui-awesome-list : bon inventaire de design systems et tokens, mais plusieurs URLs et produits sont anciens ; à utiliser pour découvrir, jamais comme preuve d'actualité.

Décision rapide

Pour une page professionnelle : partir d'un flux réel, choisir une référence de composition, confirmer le comportement avec un design system documenté, puis appliquer le gate [[KNOW-PAT-236]]. Le processus détaillé est dans [[KNOW-PAT-239]].