フロントエンド & UI
design-skills · Dithered
ドットパターンの陰影と限られたパレットで、レトロで高コントラストな画面を作る。
概要
限られたパレットからドットパターンで陰影を擬似再現する、ディザリングされたインターフェースの指針スキル。本文に Open Sans、見出しに Space Grotesk、IBM Plex Mono、青と紫のアクセント。
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
デザインにとっての意味
- ドットパターンがグラデーションの代わりになるので、あえて絞った色数でも陰影が成立する。
- 高コントラストな描画により、面に濃いパターンの質感があってもテキストが読みやすい。
- 装飾的なモーションを禁止するルールが、レトロな表現が視覚的ノイズになるのを防ぐ。
カバーする内容
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
インストール方法
design-skills · Dithered
-
リポジトリをクローンする。
git clone https://github.com/bergside/awesome-design-skills -
スキルファイルの場所を Codex に指定する。
skills/dithered/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
まず Codex にパレットの上限を伝え、パターンに基づく陰影のルールを導かせる。
-
空、ローディング、エラーの状態を求め、パターンの載った面が読みやすいまま保たれるようにする。
-
このスキルが明示的に挙げる、ヒットエリアとフォーカス状態を検証する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。