フロントエンドデザイン方針
このスキルは、UIを機能的にするだけでなく、プロダクトドメインにふさわしい、目的に合った洗練された印象を与える必要がある場合に使用します。
出典: コミュニティPR #1659 (by linus707) からの救出。
注: ECCは意図的にAnthropic公式の frontend-design スキルを再バンドルしていません。公式のアップストリームスキルが必要な場合は anthropics/skills からインストールしてください。このスキルは、#1659からの有用なローカルガイダンスをECC固有のデザイン方針として救出したものです。
使用タイミング
- ユーザーがWebページ、アプリ、ダッシュボード、アーティファクト、コンポーネント、UIの構築を依頼した場合。
- ユーザーがインターフェースをより洗練されたもの、特徴的なもの、美しいもの、あるいは一般的でないものにしたいと依頼した場合。
- 実装に、視覚的階層、タイポグラフィ、色、動き、レイアウト、インタラクションの選択が必要な場合。
- 現在のUIは機能するが、フラットで、一般的で、テンプレート的であり、対象ユーザーに合っていないと感じられる場合。
デザイン方針
コードを書く前に、具体的な方針を選択してください:
- 目的: インターフェースはどのような役割を果たすか？
- 対象ユーザー: 誰がこのワークフローを繰り返し使用するか？彼らが最初にスキャンする必要があるものは何か？
- トーン: 実用的、エディトリアル、遊び心、工業的、洗練された、技術的、マキシマル、ミニマル、情報密度が高い、落ち着いた、またはその他の明確な方向性。
- 印象的なディテール: 結果を意図的に見せるための1つのデザインアイデア。
- 制約: フレームワーク、アクセシビリティ、パフォーマンス、レスポンシブ対応、既存のデザインシステム。
方向性をドメインに合わせてください。SaaS運用ツールは通常、情報密度が高く、控えめで、スキャンしやすいものであるべきです。ポートフォリオ、ローンチページ、ゲーム、エディトリアル作品はより表現的であっても構いません。日常的に繰り返し使用されるツールに、ランディングページのような構成を強制しないでください。
実装ガイダンス
- ユーザーが明示的にマーケティングコピーを要求しない限り、最初の画面として実際に使用可能なエクスペリエンスを構築してください。
- 新しいビジュアルシステムを導入する前に、既存のプロジェクトコンポーネント、トークン、アイコンライブラリ、ルーティングパターンを使用してください。
- インターフェースが画像、製品、場所、人物、ゲームプレイ、チャート、または検査可能なメディアに依存する場合は、実際の、または生成されたビジュアルアセットを使用してください。
- 一般的な特大のヒーローテキストよりも、コンテキストに応じたタイポグラフィとスペーシングを優先してください。
- パレットは多次元に保ってください。1つの色相ファミリーで支配されたUIは避けてください。
- CSS変数または既存のデザイントークンを使用して、状態間で方向性が一貫して保たれるようにしてください。
- レスポンシブ制約を明示的に設計してください: グリッド、アスペクト比、最小/最大サイズ、安定したツールバー、固定フォーマットのコントロールは、ラベルやホバー状態が表示されても変化しないようにしてください。
- 動きは控えめに、しかし意図的に使用してください。状態を明確にする高シグナルのトランジションを、装飾的なアニメーションよりも優先してください。
- モバイルとデスクトップでのテキストの収まりを確認してください。長いラベルはオーバーフローするのではなく、きれいに折り返すかリサイズされる必要があります。
アンチパターン
- よくある生成パターン（紫のグラデーション、装飾的なブロブ、特大のカード、曖昧なヒーローコピー、ストック風の雰囲気メディア）をデフォルトにしないでください。
- カードの中にさらにUIカードを追加しないでください。
- ドメインが抑制を要求している場合に、単一の装飾スタイルをあらゆる場所で使用しないでください。
- 主要な製品、ツール、オブジェクト、ワークフローを、一般的なマーケティングセクションの背後に隠さないでください。
- デザインの華やかさのために新しい依存関係を追加しないでください。ただし、それが明確に価値を提供する場合は除きます。
- コントロールがそれ自体で語れる場合に、UI内でUIの機能を説明しないでください。
レビューチェックリスト
- 最初のビューポートで、製品、ワークフロー、またはオブジェクトがすぐに伝わるか。
- 視覚的階層がスキャンと繰り返しの使用をサポートしているか。
- タイポグラフィがコンテナに収まり、隣接するコンテンツと重なっていないか。
- 色の選択にコントラストがあり、単調なパレットになっていないか。
- アイコンは、利用可能な場合、使い慣れたツールアクションに使用されているか。
- レスポンシブレイアウトは、ボード、グリッド、ツールバー、コントロール、タイル、カウンターに対して安定した寸法を持っているか。
- アセットがレンダリングされ、単なる埋め草としてではなく主題を伝えているか。
- 動きは方向性を改善し、動作の遅さを隠していないか。
- 結果は、明確な理由がない限り、リポジトリの既存のフロントエンド規約に一致しているか。