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