Design system
Glass Dark Mode Clock
Superfici scure smerigliate costruite attorno a un quadrante di calibrazione circolare.
Che cos’è
Una direzione dark glass incentrata su un quadrante simile a un orologio: base quasi nera con griglie a fasci, capsule di nav smerigliate e un elemento centrale a anelli e tacche stratificato.
Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Perché conta per il design
- Un quadrante dominante ancora il layout invece di stare lì come widget decorativo.
- Linee a fascio e mirini si allineano al quadrante, rinforzando la logica di calibrazione.
- La palette monocromatica fa nascere la luminosità dai riflessi del vetro, non da accenti saturi.
Cosa copre
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
Come installarlo
Glass Dark Mode Clock
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Parti da una base quasi nera più deboli guide a griglia e a fascio.
-
Costruisci nav, pill e bottoni come capsule di vetro scuro con wrapper di riflesso da 1px.
-
Stratifica il quadrante: anello esterno, tacche, etichette rotanti, emblema centrale.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.