フロントエンド & UI
Container Lines
コンテンツコンテナの縁に、控えめな縦のガイド線を引く。
概要
コンテンツコンテナの両端に 1px の縦線を加え、任意で小さな角の四角も添える CSS パターン。ガイドはコンテンツの背後に置かれ、ポインターイベントを無視する。
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small
デザインにとっての意味
- コンテナの幅を可視化するので、締まりのないヒーローセクションに構造的な張りが生まれる。
- ガイドはコンテナの max-width と padding を共有するので、ずれることがない。
- ポインターイベントは無効なので、線がクリックや選択を妨げることはない。
カバーする内容
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
インストール方法
Container Lines
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/container-lines/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
レイアウトのシェルに container-lines クラスを追加する。
-
角の四角は、実際のコンテナやセクションの角だけに置く。
-
ライトとダークの両方の背景で、線が控えめなまま保たれるか確認する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。