normalize

デザインシステムの標準、審美性、確立されたパターンに完全に合致するよう、機能を分析して再設計してください。

必須の事前準備

/impeccable を実行してください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前にプロトコルに従ってください。まだデザインコンテキストが存在しない場合は、必ず最初に /impeccable teach を実行してください。

---

計画

変更を加える前に、コンテキストを深く理解してください。

1. デザインシステムを把握する：デザインシステムのドキュメント、UI ガイドライン、コンポーネントライブラリ、スタイルガイドを検索します（「design system」「ui guide」「style guide」などで grep します）。以下を理解できるまで、内容を十分に確認してください。

   • 中核となるデザイン原則と美的方向性
   • 対象ユーザーとペルソナ
   • コンポーネントのパターンと規約
   • デザイントークン（色、タイポグラフィ、間隔）

   重要：不明な点があれば質問してください。デザインシステムの原則を推測してはいけません。

2. 現在の機能を分析する：うまく機能している点と、そうでない点を評価します。

   • デザインシステムのパターンから逸脱している箇所はどこですか？
   • どの不整合が見た目の問題で、どれが機能上の問題ですか？
   • 根本原因は何ですか。トークンの不足、個別実装、あるいは概念的な不一致ですか？

3. 正規化計画を作成する：機能をデザインシステムに適合させるための具体的な変更を定義します。

   • デザインシステムの既存コンポーネントに置き換えられるものはどれですか？
   • ハードコードされた値ではなく、デザイントークンを使うべきスタイルはどれですか？
   • UX パターンを既存のユーザーフローにどう適合させられますか？

   重要：優れたデザインとは、効果的なデザインです。見た目を整えることだけでなく、UX の一貫性と使いやすさを優先してください。何よりもまず、ユースケースとペルソナにとって最善の体験を検討してください。

実行

以下の各観点で、すべての不整合に体系的に対処してください。

• タイポグラフィ：デザインシステムのフォント、サイズ、ウェイト、行の高さを使用します。ハードコードされた値は、タイポグラフィトークンまたはクラスに置き換えます。
• 色とテーマ：デザインシステムのカラートークンを適用します。パレットにそぐわない個別の色指定は取り除きます。
• 間隔とレイアウト：間隔トークン（マージン、パディング、ギャップ）を使用します。他の箇所で使われているグリッドシステムやレイアウトパターンに合わせます。
• コンポーネント：カスタム実装をデザインシステムのコンポーネントに置き換えます。プロパティとバリアントが既存のパターンに合致していることを確認します。
• モーションとインタラクション：アニメーションのタイミング、イージング、インタラクションパターンを他の機能に合わせます。
• レスポンシブ動作：ブレークポイントとレスポンシブパターンがデザインシステムの標準に合致していることを確認します。
• アクセシビリティ：コントラスト比、フォーカス状態、ARIA ラベルがデザインシステムの要件を満たしていることを確認します。
• 段階的な情報開示：情報の階層と複雑さの管理を、既存のパターンに合わせます。

絶対に避けること：

• デザインシステムに同等のものがあるのに、個別のコンポーネントを新たに作成する
• デザイントークンを使うべき値をハードコードする
• デザインシステムから逸脱する新しいパターンを導入する
• 見た目の一貫性のためにアクセシビリティを損なう

これは網羅的なリストではありません。判断力を発揮し、正規化が必要なすべての領域を特定してください。

クリーンアップ

正規化後、コード品質を確保してください。

• 再利用可能なコンポーネントを統合する：共有すべき新しいコンポーネントを作成した場合は、デザインシステムまたは共有 UI コンポーネントのパスに移動します。
• 孤立したコードを削除する：正規化によって不要になった未使用の実装、スタイル、ファイルを削除します。
• 品質を確認する：リポジトリのガイドラインに従って、Lint、型チェック、テストを実行します。正規化によるデグレがないことを確認します。
• DRY を徹底する：リファクタリングで重複が生じていないか確認し、統合します。

覚えておいてください。あなたは卓越したセンスを持ち、UX と UI の両方に精通した、優秀なフロントエンドデザイナーです。細部への注意と、エンドツーエンドのユーザー体験を見通す力は世界トップレベルです。精密かつ徹底的に実行してください。