Design systems
Beautiful Shadows
Trois utilitaires d’ombre Tailwind prêts à l’emploi pour une élévation neutre en couches.
De quoi il s’agit
Un jeu de classes d’ombre arbitraires Tailwind précises, en trois intensités. Chacune empile plusieurs couches neutres en faible opacité au lieu de l’échelle d’ombre par défaut de Tailwind.
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
Pourquoi ça compte pour le design
- L’élévation reste neutre, sans halo coloré qui teinterait la surface en dessous.
- Trois intensités fixes correspondent respectivement aux contrôles, aux cartes et aux médias hero.
- Des couches empilées en faible opacité se lisent comme une vraie profondeur, pas comme une ombre portée brute.
Ce que ça couvre
- Use when
- Shadow utilities
- Examples
- Usage rules
- Avoid
Comment l’installer
Beautiful Shadows
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/beautiful-shadows/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez à Codex d’appliquer l’utilitaire md aux cartes, panneaux et popovers.
-
Réservez l’utilitaire lg aux médias hero et aux conteneurs de type modale.
-
Associez chaque ombre à un remplissage de surface net et à un rayon cohérent.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.