フロントエンド & UI
design-skills · Bento
クリーム地に大小さまざまなブロックのグリッド、Inter の書体、コンパクトなスケール。
概要
コンテンツを大小さまざまなグリッドブロックとして見せる、ベントーボックスレイアウトの指針スキル。全体に Inter、コンパクトな 12〜32 のタイプスケール、クリーム地にピーチと青のアクセント。
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
デザインにとっての意味
- ブロックの大きさの違いが階層を担うので、グリッドそのものが優先順位づけをする。
- コンパクトな 12〜32 のタイプスケールが、小さなタイルに濃い密度のテキストを収める。
- クリーム #FFF5E6 の面が、重い枠線なしでもブロックの縁を読み取りやすく保つ。
カバーする内容
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
インストール方法
design-skills · Bento
-
リポジトリをクローンする。
git clone https://github.com/bergside/awesome-design-skills -
スキルファイルの場所を Codex に指定する。
skills/bento/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
コンテンツの優先度に基づいて、各ブロックにサイズを割り当てさせる。
-
タイルを配置する前に、4〜32 のスケールで余白トークンを定義する。
-
このスキルがエッジケースとして挙げる、オーバーフローと長いラベルの処理を求める。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。