Index d'inspiration design
Une carte de récupération : "J'ai besoin d'inspiration pour X, donc je vais à la source Y." Il s'agit d'un index de galeries et de registries publics, et non d'une autorité en design ; une fois que vous avez des références, construisez avec la compétence ui et vérifiez le résultat avec anti-slop. Les détails par site (accès, format, filtres, astuces de récupération) se trouvent dans references/galleries.md.
Rien ici n'est obligatoire. Chaque source est un site web public ; les deux qui ont des serveurs MCP (Mobbin, Refero) sont optionnels et ne valent la peine d'être connectés que si vous les utilisez souvent.
Quand vous avez besoin de X, allez à Y
| Vous avez besoin de | Allez à | Notes |
|---|---|---|
| Un site web complet à admirer (large échantillon de goût) | collected.li (shuffle), siteofsites.co (filtrable), unmatchedstyle.com (éditorial), recent.design (quotidien) | collected montre 8 sites aléatoires ; siteofsites filtre par plateforme ; unmatchedstyle a des articles de tendance |
| Un hero ou une mise en page pleine page | landing.love (mouvement), craftwork.design/inspiration/websites (large) | landing.love enregistre des vidéos pleine page |
| Une landing page en mouvement | landing.love | filtrez par les collections GSAP, WebGL ou ThreeJS |
| Un site marketing SaaS ou un type de page SaaS | saaspo.com | filtrez par type de page (pricing, features) et par industrie |
| Une page de tarification | saaspo.com (type de page) et cta.gallery (le bloc CTA) | |
| Une navbar, un en-tête ou un méga menu | navbar.gallery | filtrez par sticky, mega menu, sidebar, full-screen |
| Un call to action, un bloc d'inscription ou de newsletter | cta.gallery | filtrez par industrie et par bouton, formulaire, newsletter, modal |
| Une idée de motion ou de micro-interaction | 60fps.design (le mouvement), designspells.com (l'idée et le pourquoi) | designspells explique un détail charmant, mobile et desktop |
| Un détail charmant, un easter egg ou une touche "magique" | designspells.com | tags : easter egg, confetti, transition, 404 |
| Interface utilisateur de produit réel : types de pages, flux, patterns UX (web) | refero.design | filtrez par type de page, flux, pattern, élément ou police ; dispose d'un serveur MCP optionnel |
| Images OG, captures d'écran App Store, icônes d'application | recent.design | onglets dédiés que peu d'autres ont |
| Un logo, une identité de marque ou un rebranding | rebrand.gallery | la seule source de branding ici |
| Comment construire ou nommer un composant UI | component.gallery | référence cross-système avec alias de nom (Accordéon = Collapse = Disclosure) |
| Code de composant à copier (React) | shadcn/ui, mapcn (maps) | commencez par ce que le projet utilise déjà |
| Blocs d'application pré-construits (formulaires, auth, barres latérales, tableaux) | blocks.so | gratuit, copier-coller |
| Blocs marketing et landing pré-construits | tailark.com (curated), shadcnblocks.com (grand, freemium), shadcnspace.com | freemium |
| Un widget composite complexe (Gantt, Kanban, éditeur, tableau) | kibo-ui.com | gratuit, registry CLI shadcn |
| Code de composant animé ou de micro-interaction | smoothui.dev, ui-layouts.com | basé sur Motion ou GSAP |
| Génération de thème pour shadcn | shadcnstudio.com | niveau communauté gratuit |
| Un look rétro ou pixel-art | 8bitcn.com | restyle shadcn, niche par conception |
| Composants accessibles sur React Aria (pas Radix) | intentui.com | ne se mélange pas proprement avec shadcn basé sur Radix |
| Une icône ou un SVG | lucide.dev (par défaut), react-icons, reicon.dev, hugeicons.com | Lucide est le défaut shadcn, style trait ; react-icons regroupe plusieurs ensembles y compris les logos de marque ; Reicon a outline et filled ; Hugeicons est large et freemium |
| Flux et écrans d'applications mobiles | Mobbin | connexion requise ; utilisez son serveur MCP si vous l'avez, sinon le site |
| Le système de design d'une marque célèbre écrit | le repo awesome-design-md (github.com/VoltAgent/awesome-design-md) | lisez-en deux ou trois avant de définir un langage de design |
| Un principe UX nommé pour une conclusion de revue | lawsofux.com | citez la loi par son nom : Fitts, Hick, Jakob, Peak-End |
| Recherche de composant ou variantes UI générées | 21st.dev | cherchez avant d'écrire une UI originale à la main |
Les bibliothèques de composants gratuites qui fournissent leur propre registry valent la peine d'être vérifiées avant d'écrire un bloc à la main. Adaptez tout ce que vous importez aux tokens et aux règles d'accessibilité du projet.
Ingénieurs design à étudier
Personnes à fort signal dont les sites et le travail open-source méritent d'être étudiés et suivis.
| Personne | Site | Connu pour |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner, Vaul ; artisanat d'animation web |
| shadcn | shadcn.com | shadcn/ui ; composants et registries copiés |
| Paco Coursey | paco.me | cmdk, next-themes ; UI minimaliste orientée clavier |
| Rauno Freiberg | rauno.me | invariants d'interface et le pourquoi du polish |
| Raphael Salaja | raphaelsalaja.com | portfolio riche en mouvement, artisanat d'interaction ludique |
| Gavin Nelson | nelson.co | design de produit et d'icônes |
| floguo | floguo.com | micro-interactions expressives, personnalité |
| Syed Subhan | syedsubhan.in | micro-transitions ; a créé Amicro (amicro.vercel.app), une collection de motifs de micro-transition réutilisables |
Mobbin et Refero : serveurs MCP optionnels
Les deux nécessitent une connexion et sont mieux interrogés via un serveur MCP si vous en avez un de connecté. Mobbin expose la recherche d'écran, de flux et de section ; le serveur de Refero est à https://api.refero.design/mcp (docs : https://doc.refero.design/mcp/getting-started) et renvoie des écrans de produits réels. Si vous n'en avez aucun, parcourez les sites à la main. Ne scrapez pas.
Aide-mémoire d'accès
Vérifiez avant de vous y fier ; les sites changent.
- Ouvert et gratuit, sans connexion : landing.love, navbar.gallery, cta.gallery, 60fps.design, collected.li, siteofsites.co, unmatchedstyle.com, recent.design, designspells.com, lucide.dev, reicon.dev, component.gallery, saaspo.com.
- Freemium (naviguez gratuitement, payez pour les assets ou la bibliothèque complète) : craftwork.design, rebrand.gallery, hugeicons.com, refero.design.
- Connexion ou MCP : Mobbin, refero.design.
Plusieurs d'entre eux (saaspo.com, component.gallery, landing.love, designspells.com) bloquent les récupérations automatisées avec un 403 ou 429 mais s'ouvrent correctement dans un navigateur normal. godly.website redirige maintenant vers recent.design. Pour récupérer depuis un site bloqué par programmation, pilotez un vrai navigateur (par exemple avec un serveur MCP Playwright, si installé) plutôt qu'une requête HTTP simple.
Comment étendre cet index
Ajoutez une nouvelle galerie à references/galleries.md avec les mêmes champs (nom, URL, catégorie, meilleur pour, accès, format, astuce de récupération), puis ajoutez une ligne de routage au tableau ci-dessus.