フロントエンド & UI
redesign-existing-projects
既存サイトを監査し、機能を壊さずにアップグレードする。
概要
既存プロジェクトのための、スキャン・診断・修正のワークフロー。タイポグラフィ、色、レイアウト、状態、コンテンツ、アイコン、コード品質を監査してから、現行のスタックの中で狙いを絞ったアップグレードを適用する。
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla
デザインにとっての意味
- 紫と青の AI グラデーションや均等な 3 列カードは、吟味された代替案に置き換えられる。
- カードグループ内のボタンは、内容の長さが違っても 1 本の下端ラインに揃う。
- 欠けていたホバー、フォーカス、ローディング、空、エラーの各状態が埋められる。
カバーする内容
- How this works
- Design audit
- Upgrade techniques
- Fix priority
- Rules
インストール方法
redesign-existing-projects
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/redesign-skill/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
まずコードベースをスキャンし、フレームワークとスタイリングの手法を特定する。
-
何かを変更する前に、ありきたりなパターンと弱点をすべて洗い出す。
-
修正は、フォント、色、状態、レイアウト、コンポーネント、タイポグラフィの仕上げという優先順で入る。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。