フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 キュレーションコレクション
Codex に「本物の UI」を作らせるデザインプラグイン
OpenAI Codex は動くコードを書く。ただ放っておけば、無難なフォント、平凡な余白、中央寄せの Helvetica に落ち着く。ここに集めたのは Codex にセンスを与えるプラグイン、つまり美意識のスキルとデザインシステムのルール。ひとつだけ入れてもいいし、Open Design の中でまとめて動かしてもいい。
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 
フロントエンド & UI できること imagegen-frontend-web ランディングページのセクションごとに、横長の参考画像を 1 枚ずつ生成する。 
フロントエンド & UI できること minimalist-ui 暖かみのあるモノクロームのエディトリアルなインターフェースを、フラットなベントーグリッドで作る。 
フロントエンド & UI できること design-taste-frontend ブリーフを読み、方向性を選び、テンプレート然としないインターフェースを仕上げる。 
デザインシステム できること industrial-brutalist-ui 硬質なスイス印刷様式、あるいはアナログの粒子感を持つ CRT 端末風のインターフェースを作る。 
フロントエンド & UI できること redesign-existing-projects 既存サイトを監査し、機能を壊さずにアップグレードする。 
デザインシステム できること brandkit ブランドガイドラインボード、ロゴシステム、アイデンティティデックを画像として生成する。 
フロントエンド & UI できること high-end-visual-design ありきたりな AI のデフォルトを封じ、エージェンシー級のレイアウトとモーションを徹底させる。 
フロントエンド & UI できること pick-ui-library フロントエンドのタスクに、厳選された 1 つの主張あるライブラリを対応づける。 
フロントエンド & UI できること apple-design Apple の流体的なインターフェース原則を、Web のスプリングとジェスチャーに翻訳する。 
フロントエンド & UI できること animation-vocabulary 曖昧なモーションの説明を、正確な技術用語に変える。 
フロントエンド & UI できること emil-design-eng Emil Kowalski による、アニメーションのタイミング、イージング、コンポーネントの仕上げのルール。 
デザインシステム できること UI-UX Pro Max · Design ロゴ、アイデンティティ、スライド、バナー、アイコンの仕事を振り分ける単一の入口。 
フロントエンド & UI できること UI-UX Pro Max · Banner Design サイズ指定のバナーを HTML で設計し、PNG として書き出す。 
フロントエンド & UI できること UI-UX Pro Max · UI Styling shadcn のコンポーネントと Tailwind のユーティリティで、アクセシブルなインターフェースを作る。 
デザインシステム できること UI-UX Pro Max · Brand ブランドガイドライン、デザイントークン、アセットを同期させ続ける。 
フロントエンド & UI できること UI-UX Pro Max · Slides Chart.js とレイアウトパターンで、HTML のプレゼンテーションデックを作る。 
デザインシステム できること UI-UX Pro Max · Design System 3 層のデザイントークン、コンポーネント仕様、トークン準拠のスライド生成。 
フロントエンド & UI できること design-skills · Editorial 厳格な 8pt グリッドの上に、Gelasio セリフで組む雑誌レイアウト。 
フロントエンド & UI できること design-skills · Terracotta クリーム地にクレイのアクセント、DM Serif Display の見出し、長文の読み物向け。 
フロントエンド & UI できること design-skills · Dithered ドットパターンの陰影と限られたパレットで、レトロで高コントラストな画面を作る。 
フロントエンド & UI できること design-skills · Neumorphism ストーングレーのやわらかな押し出し面に、Space Mono の書体。 
フロントエンド & UI できること design-skills · Bento クリーム地に大小さまざまなブロックのグリッド、Inter の書体、コンパクトなスケール。 
フロントエンド & UI できること design-skills · Claymorphism ふっくら丸い立体形状、Poppins の見出し、白地に青。 
フロントエンド & UI できること design-skills · Brutalism 打ちっぱなしコンクリート風のレイアウト、Darker Grotesque の見出し、赤とオーカー。 
フロントエンド & UI できること Hallmark 58 のゲートと構造的な多様性の強制を備えた、量産感を避けるデザインフロー。 
フロントエンド & UI できること Impeccable フロントエンドのインターフェースを作り、批評し、磨くための 20 余りのコマンド。 
デザインシステム できること Design DNA 参照デザインを構造化 JSON に抽出し、そこから生成する。 
デザインシステム できること Material 3 Google の Material Design 3 を、Compose、Flutter、Web で実装する。 
フロントエンド & UI できること Details that make interfaces feel better レビューチェックリスト付きの、具体的な UI 仕上げルール 16 個。 
フロントエンド & UI できること Agent-Native Plans テキストの計画を、ワイヤーフレームとプロトタイプ付きのレビュー可能なドキュメントに変える。 
デザインシステム できること Kami 履歴書、ホワイトペーパー、デック、ランディングページを、1 つのデザイン言語で組む。 
フロントエンド & UI できること Border Gradients カード、モーダル、ヒーロー面に、洗練されたグラデーションの縁を加える。 
フロントエンド & UI できること Masked Reveal スクロールで、オーバーフローマスク越しに見出しを 1 語ずつ現す。 
フロントエンド & UI できること Framed Grid Layout 細い枠と角のブラケットで、精緻なエディトリアルレイアウトを作る。 
フロントエンド & UI できること Container Lines コンテンツコンテナの縁に、控えめな縦のガイド線を引く。 
フロントエンド & UI できること Skeuomorphic UI 重ねたグラデーションと影で、ボタンやパネルに触覚的な奥行きを与える。 
デザインシステム できること Beautiful Shadows ニュートラルで重層的なエレベーションのための、既製の Tailwind シャドウユーティリティ 3 種。 
フロントエンド & UI できること Dither Background 見えるかたちの 4x4 Bayer ディザリングと四角いピクセルを持つ、Canvas の背景。 
フロントエンド & UI できること WebGL Laser 白熱するコアとブランド色の霧を持つ、全画面シェーダーのビーム。 
デザインシステム できること Mesh Gradient Dark Blue Clean ヒーローシェルの中にメッシュの場を持つ、ニアブラックのネイビーな体系。 
フロントエンド & UI できること Cinematic Scroll Storytelling スクロール駆動のランディングページのための、Lenis と GSAP ScrollTrigger のレシピ。 
デザインシステム できること Agency Grid Layout Minimal 特大の見出しと極小の大文字ラベルを備えた、エディトリアルな多段カラムグリッド。 
デザインシステム できること Glass Dark Mode Clock 円形の校正ダイヤルを中心に組んだ、ダークですりガラスの面。 
フロントエンド & UI できること WebGL 3D Object PBR マテリアルと本物の影を持つ、光の当たった Three.js のヒーローメッシュ。 
フロントエンド & UI できること GSAP Skills コアのトゥイーンから ScrollTrigger、React まで揃う、公式の GSAP アニメーションセット。 
フロントエンド & UI できること Animation Review シニア級の水準に照らして、モーションを見つけ、改善し、レビューする。 次のステップ
セットアップは飛ばして、Open Design の中で Codex とデザインする
Open Design は、Codex を包み込むように動くオープンソースのエージェントネイティブなデザインワークスペースです。デザインシステム、スキル、テンプレートの一貫性を保つので、エージェントが仕上げた成果物はあなたのものになります。