フロントエンド & UI
UI-UX Pro Max · Slides
Chart.js とレイアウトパターンで、HTML のプレゼンテーションデックを作る。
概要
戦略的な HTML プレゼンのための小さなルーティングスキル。サブコマンドを解釈し、レイアウトパターン、HTML テンプレート、コピーライティングの型、スライド戦略をカバーする参照ファイルを読み込む。
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
デザインにとっての意味
- スライドは HTML なので、書体と余白は本物のデザイントークンに従う。
- データスライドは Chart.js が扱うので、数値は貼り付けた画像ではなく生きたままになる。
- レイアウトパターンはセットから選ばれ、デックの見た目の一貫性を保つ。
カバーする内容
- When to use
- Subcommands
- References
- Routing
インストール方法
UI-UX Pro Max · Slides
-
リポジトリをクローンする。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
スキルファイルの場所を Codex に指定する。
cli/assets/skills/slides/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
create サブコマンドに、トピックとスライド枚数を添えて呼び出す。
-
references/create.md を読み込み、その制作ワークフローに従う。
-
参照ファイルから、レイアウトパターンとコピーライティングの型を引き出す。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。