フロントエンド & UI
Details that make interfaces feel better
レビューチェックリスト付きの、具体的な UI 仕上げルール 16 個。
概要
インターフェースの仕上げのためのデザインエンジニアリング原則集。同心の角丸、視覚的な位置合わせ、重ねた影、時間差の登場アニメーション、等幅の数字、ヒットエリア、トランジションの限定。
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
デザインにとっての意味
- 正確な値を名指しするので、押下時のスケールは常に 0.96 で、当てずっぽうにならない。
- 多くのコンポーネントが違和感を持つ原因となる、入れ子の角丸の不一致を直す。
- 変化する数字によるレイアウトのずれを、ユーザーに届く前に捕まえる。
カバーする内容
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
インストール方法
Details that make interfaces feel better
-
リポジトリをクローンする。
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
スキルファイルの場所を Codex に指定する。
skills/make-interfaces-feel-better/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
Codex をコンポーネントに向けて、原則を適用させる。
-
レビューを求めると、指摘が Before と After の表で返ってくる。
-
フロントエンドの変更をマージする前に、14 項目のチェックリストを実行する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
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 キーを使い、成果物も自分のものに。