Frontend & UI
Skeuomorphic UI
Donne aux boutons et panneaux une profondeur tactile avec dégradés et ombres en couches.
De quoi il s’agit
Une recette de surface pour une UI web tactile : remplissages en dégradé vertical, une bordure en dégradé réfléchissant de 1px, des ombres externes et internes empilées. Texte embossé, icônes et micro-texture en option.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Pourquoi ça compte pour le design
- Les états relevé et enfoncé inversent la profondeur : les contrôles se lisent comme physiques.
- La profondeur reste directionnelle, lumière en haut et ombre en bas.
- Met en garde contre le mélange de glassmorphism, neumorphism et skeuomorphism dans un même composant.
Ce que ça couvre
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
Comment l’installer
Skeuomorphic UI
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Posez les tokens de base une fois, puis ajustez-les par marque et par thème.
-
Appliquez la surface relevée aux cartes, boutons, onglets et boîtiers de contrôle.
-
Ajoutez la variante enfoncée uniquement aux toggles actifs et aux onglets sélectionnés.
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.