设计系统

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 指向这个 Skill 文件。

    agent-skills/web-design/glass-dark-mode-clock/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 先铺一个近黑底,加上淡淡的网格和光束参考线。

  2. 把导航、胶囊和按钮做成深色玻璃胶囊,外包 1px 高光边。

  3. 分层搭表盘:外圈、刻度、旋转标签、中心徽标。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。