Design systems
Glass Dark Mode Clock
Surfaces sombres dépolies bâties autour d’un cadran de calibration circulaire.
De quoi il s’agit
Une direction en verre sombre centrée sur un cadran façon horloge : base quasi noire avec grilles de faisceaux, capsules de nav dépolies, et une pièce maîtresse en anneaux et graduations superposés.
Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Pourquoi ça compte pour le design
- Un cadran dominant ancre la mise en page au lieu de rester un widget décoratif.
- Lignes de faisceau et réticules s’alignent sur le cadran, renforçant la logique de calibration.
- Une palette monochrome : la clarté vient des reflets du verre, pas d’accents saturés.
Ce que ça couvre
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
Comment l’installer
Glass Dark Mode Clock
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Partez d’une base quasi noire avec de faibles repères de grille et de faisceaux.
-
Construisez nav, pilules et boutons en capsules de verre sombre avec des contours de reflet de 1px.
-
Superposez le cadran : anneau externe, graduations, libellés rotatifs, emblème central.
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.