Frontend & UI
design-skills · Neumorphism
Surfaces extrudées douces en gris pierre, typo Space Mono.
De quoi il s’agit
Un skill de directives pour une UI neumorphique : ombres internes et externes sur une surface monochrome gris pierre #E7E5E4, un accent sarcelle #006666, Space Mono en titrage et corps, un espacement de densité compacte.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Pourquoi ça compte pour le design
- Des surfaces monochromes : la profondeur vient de l’ombre, pas du contraste de couleur.
- L’espacement compact convient aux panneaux riches en contrôles comme les dashboards et les écrans de réglages.
- Les règles interdisent de mêler les métaphores visuelles : l’extrusion douce reste le seul langage de profondeur.
Ce que ça couvre
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Comment l’installer
design-skills · Neumorphism
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/neumorphism/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Faites poser à Codex les tokens de surface et d’ombre avant de styler le moindre contrôle.
-
Demandez des états de focus visibles, car les ombres douces seules laissent tomber les utilisateurs au clavier.
-
Exigez du HTML sémantique avant l’ARIA, comme le précise ce skill.
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.