フロントエンド & UI
Border Gradients
カード、モーダル、ヒーロー面に、洗練されたグラデーションの縁を加える。
概要
padding-box と border-box の重ね方を使う控えめなグラデーションボーダーの CSS レシピ。複雑な背景を持つ面のために、マスクした擬似要素のバリアントも備える。
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
デザインにとっての意味
- ネオンボーダーの派手な発光なしに、上質な縁の輪郭を与える。
- マスクしたバリアントは、既存の背景を上書きせずそのまま残す。
- 既定ではストップの不透明度を 0.4 未満に抑えるので、ボーダーは主張せず枠として収まる。
カバーする内容
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
インストール方法
Border Gradients
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/css-border-gradient/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
より良い縁が必要なカードや料金パネルに、Codex を向ける。
-
ベタ塗りにはシンプルなパターン、複雑な背景にはマスク版を選ぶ。
-
アルファはそのまま移りにくいので、ライトとダークのテーマを別々に確認する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。