デザインシステム
Agency Grid Layout Minimal
特大の見出しと極小の大文字ラベルを備えた、エディトリアルな多段カラムグリッド。
概要
エージェンシーサイトのためのレイアウトの方向性。広いグリッドシェル、特大のディスプレイ見出し、隣接カラムの小さな大文字のメタデータ、建築的な画像ブロック。
Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
デザインにとっての意味
- 厳格なカラム配置が、あらゆる要素の位置を意図的に見せる。
- ディスプレイ見出しと極小メタデータのスケール差が、階層を担う。
- ネガティブスペースは埋めずに残され、ページをエディトリアルに保つ。
カバーする内容
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
インストール方法
Agency Grid Layout Minimal
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/agency-grid-layout-minimal/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
まず、カラムの仕切りが見える広い max-width のシェルを設定する。
-
ヒーローの見出しをほとんどのカラムにまたがらせ、補足コピーは脇のカラムに置く。
-
サービスの行を、極小のメタデータラベルを添えた多段カラムのリストとして作る。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。