フロントエンド & UI
Framed Grid Layout
細い枠と角のブラケットで、精緻なエディトリアルレイアウトを作る。
概要
各セクションが 1px の枠付きボックスの中で共有カラムにスナップする、12 カラムのグリッドパターン。L 字の角ブラケットは、低い不透明度の斜めテクスチャの上に背景レイヤーとして描かれる。
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial
デザインにとっての意味
- すべてのセクションが、1 つのボーダー色、1 つのブラケットサイズ、1 つの余白スケールを共有する。
- 角ブラケットは余計なマークアップを要さないので、構造は CSS に留まる。
- テクスチャレイヤーを外しても、レイアウトは明快に読める。
カバーする内容
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
インストール方法
Framed Grid Layout
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/framed-grid-layout/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
技術系またはエディトリアルのページを頼み、まず親グリッドを得る。
-
場当たり的なセクション幅ではなく、明示的な span クラスを割り当てる。
-
両方のブレークポイントで、枠の縁が縦にも横にも揃っているか検証する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。