デザインシステム
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.
デザインにとっての意味
- 主役のダイヤルが、装飾ウィジェットとして座るのではなくレイアウトの軸になる。
- ビーム線と十字線がダイヤルに揃い、校正のロジックを補強する。
- モノクロームのパレットにより、明るさは彩度の高いアクセントではなくガラスのハイライトから来る。
カバーする内容
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
インストール方法
Glass Dark Mode Clock
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
ニアブラックの下地に、かすかなグリッドとビームのガイドを加えて始める。
-
ナビ、ピル、ボタンを、1px のハイライトで縁取ったダークガラスのカプセルとして作る。
-
ダイヤルを層で組む。外周のリング、目盛り、回転するラベル、中心のエンブレム。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。