デザインシステム
Material 3
Google の Material Design 3 を、Compose、Flutter、Web で実装する。
概要
md.sys のトークン名前空間、30 以上のコンポーネント、適応レイアウト、テーマ設定、M3 Expressive をカバーする Material Design 3 のガイド。Jetpack Compose を主対象とし、Flutter と @material/web は副次的。
>
デザインにとっての意味
- 色、書体、形状、エレベーションのトークンが、ハードコードされた hex や角丸の値を置き換える。
- トーナルな面が影の代わりに奥行きを担い、現行の MD3 仕様に沿う。
- 採点式の監査が 10 のカテゴリを評価し、修正を優先順で列挙する。
カバーする内容
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
インストール方法
Material 3
-
リポジトリをクローンする。
git clone https://github.com/hamen/material-3-skill -
スキルファイルの場所を Codex に指定する。
skills/material-3/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
プラットフォームを指定して、Codex に Compose、Flutter、CSS カスタムプロパティのいずれかを選ばせる。
-
コンポーネントを求めると、正しいバリアントとトークンの結線が得られる。
-
URL やソースファイルに対して監査を実行し、準拠レポートを得る。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。