Frontend & UI
Border Gradients
Ajoute un bord en dégradé soigné aux cartes, modales et surfaces hero.
De quoi il s’agit
Une recette CSS pour des bordures en dégradé subtiles via la superposition de padding-box et border-box, plus une variante en pseudo-élément masqué pour les surfaces à fond complexe.
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
Pourquoi ça compte pour le design
- Donne une définition de bord premium sans la lueur criarde des bordures néon.
- La variante masquée préserve un fond existant au lieu de l’écraser.
- Les valeurs par défaut gardent les arrêts sous 0.4 d’opacité : les bordures cadrent au lieu de rivaliser.
Ce que ça couvre
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
Comment l’installer
Border Gradients
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/css-border-gradient/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Orientez Codex vers une carte ou un panneau tarifaire qui a besoin d’un meilleur bord.
-
Choisissez le pattern simple pour les fonds pleins, masqué pour les fonds complexes.
-
Vérifiez les thèmes clair et sombre séparément, car l’alpha se transpose rarement.
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.