フロントエンド & UI
minimalist-ui
暖かみのあるモノクロームのエディトリアルなインターフェースを、フラットなベントーグリッドで作る。
概要
ドキュメント風のミニマルなインターフェースのためのフロントエンドプロトコル。暖かみのあるモノクロームパレット、セリフとモノスペースによるタイポグラフィ階層、1px の縁を持つベントーカード、抑えたパステルのアクセントを固定する。
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
デザインにとっての意味
- すべてのカードと区切り線は、くっきりした角丸を持つ 1px の明るいグレーの縁を 1 種類だけ使う。
- アクセントは、タグとインラインコード専用に用意した色あせた 4 色のパステルからのみ来る。
- セクションは、のっぺりした空白の背景ではなく、低い不透明度の画像で奥行きを得る。
カバーする内容
- Absolute negative constraints
- Typographic architecture
- Color palette
- Component specifications
- Iconography and imagery directives
- Subtle motion and micro-animations
インストール方法
minimalist-ui
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/minimalist-skill/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
ページを頼むと、スキルはまず py-24 や py-32 といった大きな余白を確立する。
-
文字幅を max-w-4xl に制限し、モノクロームの変数をすぐに適用する。
-
スクロールで現れるフェードは、transform と opacity だけを対象に IntersectionObserver で動く。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。