Design-Systeme
Glass Dark Mode Clock
Dunkle, mattierte Flächen rund um eine runde Kalibrierungsskala.
Worum es geht
Eine dunkle Glas-Richtung um eine uhrenartige Skala: fast schwarze Basis mit Beam-Rastern, mattierte Nav-Kapseln und ein geschichtetes Ring-und-Tick-Kernstück.
Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Warum das fürs Design zählt
- Eine dominante Skala verankert das Layout, statt als dekoratives Widget dazusitzen.
- Beam-Linien und Fadenkreuze richten sich an der Skala aus und verstärken die Kalibrierungslogik.
- Die monochrome Palette bedeutet, dass Helligkeit aus Glas-Highlights kommt, nicht aus gesättigten Akzenten.
Was es abdeckt
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
So installierst du es
Glass Dark Mode Clock
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Beginn mit einer fast schwarzen Basis plus schwachen Raster- und Beam-Hilfslinien.
-
Bau Nav, Pills und Buttons als dunkle Glaskapseln mit 1px-Highlight-Wrappern.
-
Schichte die Skala: äußerer Ring, Ticks, rotierende Labels, Zentrum-Emblem.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.