デザインシステム
UI-UX Pro Max · Brand
ブランドガイドライン、デザイントークン、アセットを同期させ続ける。
概要
ブランドコンテキストをプロンプトに注入し、アセットを検証し、色を抽出し、brand-guidelines.md をデザイントークンの JSON と CSS 変数へ同期するスクリプト群を軸にした、ブランドアイデンティティのスキル。
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
デザインにとっての意味
- 1 つの markdown ファイルが、トークンと CSS の唯一の事実源になる。
- 抽出した色をパレットと照合し、ずれを早期に捉える。
- アセットは承認前に、命名、サイズ、形式が点検される。
カバーする内容
- When to use
- Quick start
- Brand sync workflow
- Subcommands
- References
- Scripts
インストール方法
UI-UX Pro Max · Brand
-
リポジトリをクローンする。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
スキルファイルの場所を Codex に指定する。
cli/assets/skills/brand/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
docs/brand-guidelines.md を編集し、scripts/sync-brand-to-tokens.cjs を実行する。
-
scripts/inject-brand-context.cjs --json で検証する。
-
新しいファイルは出す前に、scripts/validate-asset.cjs で点検する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。