Дизайн-системы

Glass Dark Mode Clock

Тёмные матовые поверхности, выстроенные вокруг круглого калибровочного циферблата.

Что это

Направление тёмного стекла с центром на циферблате в духе часов: почти чёрная база с лучевыми сетками, матовые навигационные капсулы и слоёный центральный элемент из кольца и делений.

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
Из исходного SKILL.md

Почему это важно для дизайна

  • Доминирующий циферблат закрепляет раскладку, а не сидит декоративным виджетом.
  • Лучевые линии и перекрестия выравниваются по циферблату, усиливая логику калибровки.
  • Монохромная палитра означает, что яркость идёт от стеклянных бликов, а не от насыщенных акцентов.

Что внутри

  • Scope
  • Visual target
  • Implementation guidance
  • Recommended patterns
  • Tuning knobs
  • Avoid

Как установить

Glass Dark Mode Clock

  1. Клонируйте репозиторий.

    git clone https://github.com/MengTo/Skills
  2. Укажите Codex на файл скилла.

    agent-skills/web-design/glass-dark-mode-clock/SKILL.md
  3. Дальше опишите нужный интерфейс. Codex следует скиллу.

Как запустить с Codex

  1. Начните с почти чёрной базы плюс еле заметные направляющие сетки и лучей.

  2. Собирайте навигацию, пилюли и кнопки как тёмные стеклянные капсулы с обёртками-бликами 1px.

  3. Наслаивайте циферблат: внешнее кольцо, деления, вращающиеся подписи, центральная эмблема.

Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.

Больше плагинов в списке codex-design ↗

Следующий шаг

Проектируйте с Open Design без возни с настройкой

Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.