フロントエンド & UI
Impeccable
フロントエンドのインターフェースを作り、批評し、磨くための 20 余りのコマンド。
概要
build、evaluate、refine、enhance、fix、iterate にまとめたコマンドを持つフロントエンドデザインスキル。プロジェクトの文脈とレジスターの参照を読んでから、本番品質のコードを書く。
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
デザインにとっての意味
- レジスターの切り分けが、マーケティングページと製品 UI を異なるデザインルールへ振り分ける。
- 絶対禁止事項が、グラデーション文字、横帯のボーダー、全セクション上のアイブロウラベルを退ける。
- コントラストの下限は明示的で、本文は 4.5:1、大きな文字は 3:1。
カバーする内容
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
インストール方法
Impeccable
-
リポジトリをクローンする。
git clone https://github.com/pbakaus/impeccable -
スキルファイルの場所を Codex に指定する。
plugin/skills/impeccable/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
セッションごとに context.mjs を 1 回実行し、スキルに PRODUCT.md と DESIGN.md を読み込ませる。
-
対象ファイルを添えて、critique、polish、animate といったコマンドを呼び出す。
-
起動中の dev サーバーで live モードを使い、ブラウザ内でバリアントを生成する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。