Sistemas de diseño
Glass Dark Mode Clock
Superficies oscuras esmeriladas construidas en torno a un dial de calibración circular.
Qué es
Una dirección de glass oscuro centrada en un dial tipo reloj: base casi negra con rejillas de haces, cápsulas de navegación esmeriladas y una pieza central de anillo y marcas en capas.
Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Por qué importa para el diseño
- Un dial dominante ancla la maquetación en vez de quedarse como un widget decorativo.
- Las líneas de haz y las miras se alinean con el dial, reforzando la lógica de calibración.
- La paleta monocroma hace que el brillo venga de los reflejos del glass, no de acentos saturados.
Qué cubre
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
Cómo instalarlo
Glass Dark Mode Clock
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Empieza con una base casi negra más guías tenues de rejilla y de haces.
-
Construye la navegación, las píldoras y los botones como cápsulas de glass oscuro con envoltorios de reflejo de 1px.
-
Monta el dial en capas: anillo exterior, marcas, etiquetas giratorias, emblema central.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.