フロントエンド & UI
Dither Background
見えるかたちの 4x4 Bayer ディザリングと四角いピクセルを持つ、Canvas の背景。
概要
value ノイズ、FBM、4x4 Bayer 閾値からニアブラックのプロシージャルな場を描き、拡大した四角いセルとして表示する Canvas のレシピ。
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and
デザインにとっての意味
- 拡大したセルが、ディザ行列をフィルムグレインに潰さず読み取れるまま保つ。
- 6 段階のモノクロームパレットが、重いオーバーレイなしでも前景の文字を読みやすく保つ。
- ビネットと軸をずらした塊が、一様な明るさではなく 1 つの明るい焦点をつくる。
カバーする内容
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
インストール方法
Dither Background
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/dither-background/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
固定した canvas をコンテンツの背後に置き、pointer-events を none にする。
-
行列の読みやすさのために、cellSize を 5px から 10px の間で調整する。
-
wave、cloud、ridge、vignette の値を調整して、塊の形を整える。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。