フロントエンド デザイン方向

このスキルは UI を単に機能させるのではなく、目的を持たせ、洗練され、プロダクト領域に適したものにする必要がある場合に使用します。

出典: linus707 による stale な community PR #1659 から救出。

注: ECC は意図的に canonical な Anthropic の frontend-design スキルを再バンドルしていません。公式の upstream スキルが必要な場合は、anthropics/skills からインストールしてください。このスキルは #1659 から救出した ECC 固有の設計方向性ガイダンスです。

使用タイミング

• ユーザーが Web ページ、アプリ、ダッシュボード、アーティファクト、コンポーネント、または UI の構築を依頼している。
• ユーザーがインターフェースをより洗練した、特徴的な、美しい、またはより一般的でないものにするよう依頼している。
• 実装が視覚的階層、タイポグラフィ、色、モーション、レイアウト、インタラクション設計を必要としている。
• 現在の UI は機能しているが、平坦、一般的、テンプレート的、またはオーディエンスと不適合に見える。

デザイン方向性

コーディング前に、特定の方向を選択します:

1. 目的: インターフェースはどのような仕事をするのか?
2. オーディエンス: このワークフローを繰り返し使用するのは誰であり、彼らが最初にスキャンする必要があるのは何か?
3. トーン: 実用的、編集的、遊び心のある、工業的、洗練された、技術的、最大限的、最小限的、密集型、穏やかなど、別の明確な方向性。
4. 記憶に残る詳細: 結果が意図的に感じられるようにする 1 つのデザイン アイデア。
5. 制約: フレームワーク、アクセシビリティ、パフォーマンス、レスポンシブ性、既存デザインシステム。

方向性をドメインに合わせます。SaaS オペレーションツールは通常、密集型、静か、スキャン可能である必要があります。ポートフォリオ、ローンチページ、ゲーム、編集作品はより表現的になることができます。毎日繰り返し使用する必要があるツールにランディングページの構成を無理に当てはめないでください。

実装ガイダンス

• ユーザーが明示的にマーケティングコピーを依頼した場合を除き、実際に使用可能な体験を最初の画面として構築します。
• 新しい視覚システムを導入する前に、既存のプロジェクトコンポーネント、トークン、アイコンライブラリ、ルーティングパターンを使用します。
• インターフェースが画像、プロダクト、場所、人物、ゲームプレイ、チャート、検査可能なメディアに依存する場合は、実際の、または生成された視覚資産を使用します。
• 一般的な超大型ヒーロー テキストよりも、コンテキストに応じたタイポグラフィとスペーシングを優先します。
• パレットを多次元に保ちます: 1 つの色ファミリーに支配された UI は避けます。
• CSS 変数または既存のデザイントークンを使用して、方向性が状態全体で一貫性を保つようにします。
• レスポンシブ制約を明示的に設計します: グリッド、アスペクト比、 min/max サイズ、安定したツールバー、固定形式のコントロールはラベルやホバー状態が表示されたときにシフトしないようにします。
• モーションは控えめに、ただし意図的に使用します。装飾的なアニメーションではなく、状態を明確にする高シグナル遷移を優先します。
• モバイルとデスクトップでテキストフィットを確認します。長いラベルは溢れるのではなく、きれいにラップまたはリサイズする必要があります。

アンチパターン

• 一般的に生成されたパターン (紫のグラデーション、装飾的なブロブ、超大型カード、曖昧なヒーロー コピー、またはストック風の大気メディア) にデフォルト設定しないでください。
• 他のカード内に UI カードを追加しないでください。
• ドメインが抑制を求めている場合、単一の装飾的なスタイルをすべての場所で使用しないでください。
• プライマリプロダクト、ツール、オブジェクト、またはワークフローを一般的なマーケティングセクションの後ろに隠さないでください。
• デザインの飾りのために新しい依存関係を追加しないでください。それが明確に費用対効果が高い場合を除きます。
• UI のコントロール自体が語ることができる場合、UI 内の機能を説明しないでください。

レビューチェックリスト

• 最初のビューポートはすぐにプロダクト、ワークフロー、またはオブジェクトを伝えます。
• 視覚的階層はスキャンと繰り返し使用をサポートします。
• タイポグラフィはコンテナに適合し、隣接するコンテンツと重なりません。
• 色の選択はコントラストを持ち、単色パレットに崩壊しません。
• アイコンは利用可能な場合、使い慣れたツールアクションに使用されます。
• レスポンシブレイアウトはボード、グリッド、ツールバー、コントロール、タイル、カウンターの安定した寸法を持ちます。
• アセットは フィラーとして機能するのではなく、レンダリングされ、主題を表現します。
• モーションはオリエンテーションを改善し、鈍さを隠しません。
• 結果は明確に逸脱する理由がない限り、リポジトリの既存フロントエンド規約と一致します。