デザインシステム
Mesh Gradient Dark Blue Clean
ヒーローシェルの中にメッシュの場を持つ、ニアブラックのネイビーな体系。
概要
CSS のカラートークン、グラデーションボーダーのヒーローシェル、canvas のメッシュの場、ガラスのナビピル、浮遊するノード、レール、対の CTA を備えた、ダークブルーの方向性。
Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black
デザインにとっての意味
- メッシュはヒーローシェルの中に収まるので、装飾ではなく構図を牽引する。
- 名前の付いたトークンが、背景、シェル、線、コピー、アクセントの値をページ全体で固定する。
- レール、角の四角、ノードのピルが、ミニマルなシェルに技術的な構造を与える。
カバーする内容
- System recipe
- Color tokens
- Hero shell
- Canvas mesh field
- Nodes and rails
- Motion defaults
インストール方法
Mesh Gradient Dark Blue Clean
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/mesh-gradient-dark-blue-clean/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
トークンブロックを貼り付け、ページの土台とヒーローシェルを作る。
-
メッシュの canvas を、シェルの中でシェルのコンテンツの背後に加える。
-
ノード、レール、マーカーをいくつか置き、ドリフトのループはゆっくりに保つ。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。