这是什么
一套以时钟式表盘为中心的深色玻璃方向:近黑底加光束网格、磨砂导航胶囊,以及分层的圆环和刻度中心件。
Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
它对设计意味着什么
- 一个占主导的表盘锚住整个布局,而不只是个装饰摆件。
- 光束线和准星对齐表盘,强化校准的逻辑感。
- 单色配色意味着亮度来自玻璃高光,而非高饱和强调色。
包含哪些内容
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
如何安装
Glass Dark Mode Clock
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
先铺一个近黑底,加上淡淡的网格和光束参考线。
-
把导航、胶囊和按钮做成深色玻璃胶囊,外包 1px 高光边。
-
分层搭表盘:外圈、刻度、旋转标签、中心徽标。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。