デザインシステム
UI-UX Pro Max · Design System
3 層のデザイントークン、コンポーネント仕様、トークン準拠のスライド生成。
概要
プリミティブ、セマンティック、コンポーネントのトークン層を CSS 変数として扱い、コンポーネントの状態仕様と、同じトークンからデックを組むスライドジェネレーターを備えたデザインシステムのスキル。
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design t
デザインにとっての意味
- セマンティックなトークン層により、ライトとダークのテーマ切り替えが書き直しではなく設定変更で済む。
- コンポーネント仕様が default、hover、active、disabled の各状態を表にするので、ハンドオフに曖昧さが残らない。
- バリデーターがハードコードされた hex 値を指摘し、コンポーネントとスライドをトークンシステムに乗せ続ける。
カバーする内容
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
インストール方法
UI-UX Pro Max · Design System
-
リポジトリをクローンする。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
スキルファイルの場所を Codex に指定する。
cli/assets/skills/design-system/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
JSON のトークン設定に対して generate-tokens.cjs を実行し、CSS 変数ファイルを出力する。
-
Codex にコンポーネント仕様を頼み、src/ に対して validate-tokens.cjs を実行して生の値を捕まえる。
-
search-slides.py を position と context のフラグ付きで使い、デックのレイアウトを選ぶ。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。