デザインシステム
Beautiful Shadows
ニュートラルで重層的なエレベーションのための、既製の Tailwind シャドウユーティリティ 3 種。
概要
3 段階の強さで用意した、Tailwind の任意値シャドウクラス集。Tailwind の既定のシャドウスケールの代わりに、低い不透明度のニュートラルな層を複数重ねる。
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
デザインにとっての意味
- エレベーションはニュートラルなまま保たれ、色付きの発光が下の面を染めることがない。
- 固定した 3 段階の強さが、それぞれコントロール、カード、ヒーローメディアに対応する。
- 重ねた低不透明度の層が、鈍い 1 枚のドロップシャドウではなく本物の奥行きに見える。
カバーする内容
- Use when
- Shadow utilities
- Examples
- Usage rules
- Avoid
インストール方法
Beautiful Shadows
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/beautiful-shadows/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
カード、パネル、ポップオーバーに md ユーティリティを適用させる。
-
lg ユーティリティは、ヒーローメディアとモーダル的なコンテナのために取っておく。
-
各シャドウを、すっきりした面の塗りと一貫した角丸と組み合わせる。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。