ui-ux-design

UI/UX デザイン

機能的で、アクセシブルかつ視覚的に個性のあるインターフェースを作成します。動作するコードを出力します。

使用するタイミング

次の場合に自動的に有効になります：

• ユーザーが UI コンポーネント、ページ、アプリケーションを依頼した場合
• ユーザーがフォーム、ダッシュボード、ランディングページ、モーダルに言及した場合
• ユーザーがインターフェースの「デザイン」「構築」「作成」を依頼した場合
• ユーザーが既存の UI/UX の改善を希望した場合

ワークフロー

ステップ 1：コンテキストを評価する

コーディングを始める前に、以下を特定します（内部推論）：

• 解決する課題
• 対象ユーザー
• デザインの方向性（REFERENCES.md を参照）
• 制約（フレームワーク、ブランド、アクセシビリティのレベル）

ステップ 2：参考資料を確認する

REFERENCES.md から実装に必要な値を取得します：

• カラーパレット（WCAG 準拠の値を含む）
• フォントの組み合わせ
• コンポーネントのパターン（ボタン、入力欄、カードなど）
• 余白とタイポグラフィのトークン

ステップ 3：コードを生成する

以下を備えた、動作する実装を作成します：

• すべてのインタラクティブな状態（ホバー、フォーカス、アクティブ、無効、読み込み中、エラー）
• セマンティック HTML（div だらけではなく、button、nav、main などを使用）
• モバイルファーストのレスポンシブデザイン
• 保守性を高める CSS 変数

ステップ 4：検証する

提出前にチェックリストを確認します。

出力要件

要件	基準
コントラスト	テキストは 4.5:1、UI コンポーネントは 3:1
フォーカス状態	すべてのインタラクティブな要素に視認できるアウトラインを付ける
タッチターゲット	最小 44×44px
モーションの低減	prefers-reduced-motion を尊重する
ラベル	すべての入力欄に対応するラベルを付ける
空の状態	役立つメッセージと明確なアクションを提示する
エラー状態	発生した内容と修正方法を説明する

デザインの方向性

大胆な方向性を選び、徹底してください。 迷いはありきたりな出力につながります。明確なコンセプトの方向性を選びます。たとえば、過激なミニマリズム、マキシマリズム、レトロフューチャー、エディトリアル、ニュー・ブルータリズム、オーガニック、ラグジュアリー／洗練、インダストリアルなどです。そして精密に実行してください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。失敗につながるのは、どっちつかずの無難な方向性です。

各方向性の特徴については、REFERENCES.md を参照してください。

スタイル	最適な用途
ミニマリズム	生産性、プロフェッショナル向け、ポートフォリオ
グラスモーフィズム	ダッシュボード、テック製品
ニュー・ブルータリズム	クリエイティブ、スタートアップ、個性を重視するブランド
エディトリアル	コンテンツサイト、出版物
オーガニック	コンシューマーアプリ、ウェルネス、コミュニティ
ダークモード	ユーザーの好み、暗い環境

生成ごとに変化をつけます。毎回同じディスプレイフォント（特に Inter、Space Grotesk、Roboto）や、AI の初期設定を思わせる白地に紫のグラデーションを使わないでください。

アンチパターン

ありきたりな AI 生成出力に見られる、次のような特徴を避けてください：

• 白地に紫／青のグラデーション
• どこにでもある Inter／Roboto／システムフォント
• 型にはまったカードレイアウト
• あらゆる要素に使われる、柔らかな影付きの角丸長方形
• 色だけで意味を伝えること（アイコンやテキストによる補足がない）
• フォーカスアウトラインを削除すること
• 解決策のないエラーメッセージ

チェックリスト

コピーして進捗を管理します：

- [ ] Context assessed (problem, users, aesthetic direction)
- [ ] REFERENCES.md consulted for palette + fonts
- [ ] All interactive states implemented
- [ ] Loading and error states included
- [ ] Contrast meets WCAG AA
- [ ] Semantic HTML used
- [ ] Focus states visible
- [ ] Form inputs labeled
- [ ] prefers-reduced-motion respected
- [ ] Responsive breakpoints tested
- [ ] Empty states handled

リカバリー

問題	対応
ユーザーが方向性を気に入らない	デザインの方向性から 2～3 個の代替案を提案する
ありきたりに見える	アンチパターンを確認し、個性のあるタイポグラフィを適用する
アクセシビリティへの懸念	コントラスト、フォーカス状態、セマンティック HTML を検証する
状態が不完全	チェックリストに沿って体系的に確認する

---

ライセンス： MIT - 完全な条件については LICENSE を参照してください 作成者： Arvind Menon