フロントエンド & UI
high-end-visual-design
ありきたりな AI のデフォルトを封じ、エージェンシー級のレイアウトとモーションを徹底させる。
概要
よくある AI デザインのデフォルトを禁止し、UI コードを書く前にエージェントへ雰囲気の原型 1 つとレイアウトの原型 1 つを選ばせる指示型スキル。
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look che
デザインにとっての意味
- Inter、Roboto、太い Lucide アイコンは禁止され、出力がテンプレート然としなくなる。
- カードは外殻と内芯の入れ子になり、コンテナに削り出したような本物の奥行きが出る。
- セクションの余白は py-24 から始まるので、レイアウトが窮屈にならず呼吸する。
カバーする内容
- Absolute zero directive
- Creative variance engine
- Haptic micro-aesthetics
- Motion choreography
- Performance guardrails
- Pre-output checklist
インストール方法
high-end-visual-design
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/soft-skill/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
Codex にページを頼むと、まず内部でばらつきエンジンを回す。
-
背景の質感とタイプスケールを組み、次に二重ベゼルのコンテナを作る。
-
独自の cubic-bezier モーションを差し込み、出力前のチェックリストを実行する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。