Design systems
Mesh Gradient Dark Blue Clean
Un système bleu marine quasi noir avec un champ mesh dans une coque hero.
De quoi il s’agit
Une direction bleu foncé avec tokens de couleur CSS, une coque hero à bordure en dégradé, un champ mesh sur canvas, une pilule de nav en verre, des nœuds flottants, des rails et des CTA appariés.
Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black
Pourquoi ça compte pour le design
- Le mesh se loge dans la coque hero : il pilote la composition au lieu de la décorer.
- Des tokens nommés fixent les valeurs de fond, de coque, de ligne, de texte et d’accent sur toute la page.
- Rails, carrés d’angle et pilules de nœud donnent à la coque minimale une structure technique.
Ce que ça couvre
- System recipe
- Color tokens
- Hero shell
- Canvas mesh field
- Nodes and rails
- Motion defaults
Comment l’installer
Mesh Gradient Dark Blue Clean
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/mesh-gradient-dark-blue-clean/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Collez le bloc de tokens, puis construisez la fondation de page et la coque hero.
-
Ajoutez le canvas mesh dans la coque, derrière son contenu.
-
Placez quelques nœuds, rails et marqueurs, puis gardez les boucles de dérive lentes.
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.