frontend-design

フロントエンドデザイン

見た目の品質が重要なフロントエンド UI を作成またはレビューするときに、このスキルを使用します。

ワークフロー

1. 製品の背景、対象ユーザー、ページの目的を明確にします。
2. コードを書く前に視覚的な階層を確立します。主なアクション、副次的なアクション、補足コンテンツを整理します。
3. 汎用的なグラデーションやカードではなく、意図を持ったビジュアルの方向性を選びます。
4. 余白、文字サイズのスケール、カラーのトークン、角丸、シャドウ、コンポーネントのリズムを統一します。
5. レスポンシブ状態、読み込み状態、空の状態、エラー状態、無効状態を設計します。
6. 利用可能であれば、ブラウザーまたはプレビュー画面で結果を確認します。

レビューチェックリスト

• ページに明確な焦点と主なアクションがあります。
• コンポーネントが一貫したグリッドに沿って配置されています。
• タイポグラフィには十分なコントラストと階層があります。
• 色は装飾的なノイズではなく、意味を持っています。
• 一般的なモバイル、タブレット、デスクトップの幅で UI が適切に表示されます。
• 空の状態、読み込み状態、エラー状態が意図的に設計されています。

PilotDeck の移行に関する注記

• インスピレーションの元：Anthropic のフロントエンドデザインスキルと、一般的なフロントエンドデザインのベストプラクティス。
• これは PilotDeck 向けに作成した草案であり、原文をそのまま複製したものではありません。