Design Systems
Glass Dark Mode Clock
Superfícies escuras foscas construídas em torno de um mostrador circular de calibração.
O que é
Uma direção em vidro escuro centrada num mostrador tipo relógio: base quase preta com grids de feixe, cápsulas de nav foscas e um centro em anéis e marcações em camadas.
Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Por que isso importa para design
- Um mostrador dominante ancora o layout em vez de ficar como um widget decorativo.
- Linhas de feixe e miras se alinham ao mostrador, reforçando a lógica de calibração.
- A paleta monocromática faz o brilho vir dos reflexos do vidro, não de destaques saturados.
O que cobre
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
Como instalar
Glass Dark Mode Clock
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Comece com uma base quase preta mais guias tênues de grid e feixe.
-
Monte nav, pílulas e botões como cápsulas de vidro escuro com wrappers de reflexo de 1px.
-
Monte o mostrador em camadas: anel externo, marcações, rótulos girando, emblema central.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.