D. Dambreville Notes · Informatique, Documentation Toutes les notes ↓
25 ressources pour le vibe coding : inspiration, composants, effets
Vingt-cinq sites pour soigner les interfaces construites avec un assistant d'IA : galeries d'inspiration, styles lisibles par un agent, composants React, animations, illustrations — chiffres et licences relevés le 13 octobre 2026.
En bref
- La liste : publiée sur X le 8 octobre 2026 par Tanzil Chowdhury (@iamtanzil_). Le premier site, Jiro, est le sien : la liste est aussi une vitrine.
- Le vibe coding : le mot vient d’Andrej Karpathy, en février 2025. On décrit ce qu’on veut à un assistant d’IA, on accepte le code qu’il écrit sans le relire. Karpathy le réservait lui-même aux « projets jetables du week-end ».
- Ce que la liste vise : l’apparence. Un assistant code vite, mais il faut lui montrer à quoi la page doit ressembler — d’où des galeries, des styles décrits pour lui, des composants tout faits.
- Trois usages : trouver un modèle et le donner à l’agent (sites 1 à 9) ; récupérer le code de composants (10 à 19) ; ajouter mouvement, chargement et illustrations (20 à 25).
- Relevé le 13 octobre 2026 : les 25 adresses répondaient ; chiffres et licences sont ceux qu’affichent les sites ce jour-là. « — » : rien d’indiqué sur la page d’accueil.
Inspiration et styles lisibles par un agent
| Site | Ce qu’on y trouve | Accès |
|---|---|---|
| 1. Jiro | 1 328 modèles et sections de page, chacun avec son prompt à coller dans un outil de vibe coding | formule gratuite, formule Pro |
| 2. Minimal Gallery | sites choisis à la main, de nouveaux chaque jour ; modèles Framer et Webflow | — |
| 3. Kage | interfaces de produits réels (490 designs, 271 produits), chacune transformable en prompt pour Claude Code, Codex ou Cursor ; serveur MCP | — |
| 4. Refero Styles | plus de 2 000 styles de sites connus — couleurs, typographie, espacements — chacun avec son fichier DESIGN.md | — (version bêta) |
| 5. Component Gallery | 60 composants, 95 systèmes de design, 2 671 exemples : comment chaque système résout le même élément ; projet d’Iain Bean | — |
| 6. AppShot Gallery | captures de fiches de l’App Store, pour l’interface mobile et l’optimisation de la fiche | — |
| 7. DESIGNmd | des centaines de fichiers DESIGN.md faits par la communauté, que lisent Cursor ou Claude Code ; MCP et ligne de commande | gratuit |
| 8. VibePrompt | prompts de mise en page et code Tailwind CSS, section par section : en-tête, tarifs, FAQ, tableau de bord… | — |
| 9. 21st | plus de 12 000 composants, modèles et thèmes React et Tailwind CSS ; installation par MCP pour les agents | consultation libre, deux copies gratuites par jour ; adhésion pour copier sans limite |
Un DESIGN.md est un fichier texte qui décrit un style — couleurs, polices, espacements, composants — pour qu’un agent de programmation le suive. MCP (Model Context Protocol) est le protocole par lequel un assistant d’IA se branche sur un service extérieur, ici un catalogue.
Composants et animations
| Site | Ce qu’on y trouve | Licence |
|---|---|---|
| 10. Kinetics | 153 micro-interactions à ressort, physique réglable ; pour chacune, le code CSS ou React et un prompt | MIT |
| 11. shadcn/ui | composants accessibles qu’on copie dans son projet et qu’on modifie à volonté ; la base de plusieurs sites de cette liste | MIT |
| 12. Aceternity UI | plus de 200 composants, blocs et modèles de page, en React, Tailwind CSS et Motion | — |
| 13. Magic UI | composants et modèles animés pour pages d’accueil | MIT |
| 14. Motion Primitives | kit d’interfaces animées pour React, Next.js et Tailwind CSS | MIT |
| 15. Uiverse | éléments d’interface faits par la communauté, en CSS ou Tailwind, à copier | MIT |
| 16. UIAble | système de design complet bâti sur shadcn : composants, blocs, modèles, tableaux de bord | — |
| 17. mapcn | composants de carte accessibles et personnalisables, sur MapLibre GL, compatibles shadcn/ui | MIT |
| 18. MicroKit UI | 49 micro-interactions à copier — boutons, survols, onglets, champs —, sans paquet à installer | MIT |
| 19. Liquid Glass | effet de verre qui réfracte la page réelle, dans Safari, Firefox et Chrome | — |
Effets, chargement, illustrations
| Site | Ce qu’on y trouve | Licence |
|---|---|---|
| 20. CSS Text Effects | 114 effets de texte en CSS pur : glitch, néon, dégradé, machine à écrire, 3D | MIT, usage commercial permis |
| 21. Circle Loaders | 24 animations de chargement circulaires en SVG et CSS, sans dépendance, qui respectent le réglage « réduire les animations » | — |
| 22. Gradient Buttons | des centaines de boutons à dégradé CSS, copiés d’un clic | MIT |
| 23. Kitbitz | plus de 2 000 illustrations dessinées à la main, en SVG et PNG, avec kits Figma et accès MCP | CC0, usage commercial libre |
| 24. 3dicons | plus de 1 440 icônes en 3D | open source, gratuit, sans attribution |
| 25. Anime.js | bibliothèque JavaScript d’animation, légère | MIT |
Ce qui diffère de la liste d’origine
- Jiro affiche 1 328 modèles, non « plus de 1 200 ».
- Component Gallery : 2 671 exemples, non « plus de 2 600 ».
- Kinetics : 153 micro-interactions à ressort, plutôt que « 150 effets de mouvement ».
- AppShot Gallery montre des fiches de l’App Store, pas des écrans d’applications en usage.
- Circle Loaders propose 24 animations, toutes circulaires : un jeu précis plutôt qu’une collection.
Avant de s’en servir
- La licence d’abord. Un site qui n’en affiche pas n’en accorde pas pour autant : la lire avant tout usage commercial. MIT et CC0 laissent copier et modifier ; MIT demande de garder la mention de licence.
- Un composant copié devient votre code. Il faut l’entretenir : accessibilité, poids de la page, dépendances (Tailwind CSS, Motion, React) à suivre comme le reste du projet.
- Ces sites bougent vite. Chiffres et conditions sont à revoir à chaque mise à jour de la note.
- Pour le graphisme hors du navigateur, la note Sept alternatives libres aux logiciels Adobe recense des logiciels à installer.
D. Dambreville · mise à jour le 13 octobre 2026 · CC BY 4.0