frontend-design

このスキルは、ありきたりな「AI スロップ」的な見た目を避け、独自性のある本番品質のフロントエンドインターフェースを作成するための指針です。美的な細部や創造的な工夫に格別の注意を払い、実際に動作するコードを実装してください。

参考リポジトリ

• shadcn-svelte：Bits UI のプリミティブを使用した、Svelte 向けの shadcn/ui の移植版
• shadcn-svelte-extras：shadcn-svelte の追加コンポーネント
• Svelte：Svelte 5 フレームワーク

上流ソースに基づく確認

デザインの実装が Svelte の動作に依存する場合は、記憶に頼る前に、ソースに基づいて確認してください。DeepWiki MCP が利用可能なら、sveltejs/svelte に対して範囲を絞った質問をしてください。shadcn-svelte または extras のコンポーネント API については、huntabyte/shadcn-svelte または ieedan/shadcn-svelte-extras に対して質問してください。DeepWiki が利用できない場合、またはリポジトリがインデックス化されていない場合は、上流ソースまたは公式ドキュメントを直接参照してください。DeepWiki は概要を把握するためのものとして扱い、コードを変更する前に、決定的な詳細をローカルの @epicenter/ui ラッパー、インストール済みの型、ソース、または公式ドキュメントで確認してください。

上流リポジトリを視覚的な好みの根拠として使用しないでください。コンポーネントの API と動作の確認にのみ使用してください。

ユーザーは、構築するコンポーネント、ページ、アプリケーション、またはインターフェースの要件を提示します。目的、対象ユーザー、技術的な制約についての背景情報が含まれる場合もあります。

このスキルを適用する場面

次のような場合に、このパターンを使用してください。

• フロントエンドのコンポーネント、ページ、またはインターフェース全体を構築または再設計する。
• コーディングの前に、強い美的方向性を定めて実行する。
• 意図的なタイポグラフィ、色、動き、構成を備えた洗練された UI を制作する。
• ありきたりで反復的な AI 風のデザインを避ける。
• 選択したビジュアルの方向性に合わせて、実装の複雑さを調整する。

リファクタリング時の忠実度

既存の UI を再設計またはリファクタリングする場合、ピクセル単位の忠実度は既定の要件ではなく、分類して判断する事項として扱ってください。このスキルでは、ビジュアルの方向性、階層、アクセシビリティ、重要な状態、製品らしさを重視します。

正確な余白、ブレークポイント、アニメーション、ホバー状態、空の状態、DOM の形状、コンポーネントツリー全体、スナップショットとの一致を実現するために、大規模なスタイルや状態の構成が必要になる場合は、asymmetric-wins に切り替えて、対応を見送るか判断してください。ビジュアル面の判断にはこのスキルに戻ってください。忠実度が理解、アクセシビリティ、信頼、ブランド、または回帰に敏感な状態に影響する場合は、不可欠です。

ローカルの UI プリミティブで同じワークフロー、階層、状態、アクセシビリティの契約を維持できるなら、そちらを優先してください。デザインを正確に見せるためだけに HTML ツリー全体を再現しないでください。正確な DOM 構造が製品の契約や不具合に関わる場合を除き、スクリーンショット、簡潔なスケッチ、状態テーブル、または部分的なツリーを使用してください。

デザインの検討

コーディングの前に背景を理解し、大胆で明確な美的方向性を選んでください。

• 目的：このインターフェースはどの問題を解決しますか？誰が使用しますか？
• トーン：極端な方向性を選びます。極限までミニマル、マキシマリストな混沌、レトロフューチャー、オーガニック／自然、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／無骨、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用主義など、選択肢は豊富です。これらを発想の手がかりにしつつ、美的方向性に忠実なデザインにしてください。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：何が忘れられない体験を生みますか？使う人の記憶に残る要素は何ですか？

重要：明確なコンセプトの方向性を選び、精度高く実現してください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは強度ではなく、意図が明確であることです。

次に、以下の条件を満たす実際に動作するコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番品質で、正常に動作する
• 視覚的に印象的で、記憶に残る
• 明確な美的視点を持ち、一貫性がある
• 細部まで入念に磨き上げられている

フロントエンドの美しさに関するガイドライン

以下に重点を置いてください。

• タイポグラフィ：美しく、独自性があり、興味を引くフォントを選びます。Arial や Inter のようなありきたりなフォントは避け、フロントエンドの美しさを高める個性的なフォントや、意外性と個性のあるフォントを選びましょう。個性の際立つディスプレイフォントと、洗練された本文用フォントを組み合わせます。
• 色とテーマ：一貫性のある美的表現を貫きます。一貫性を保つために CSS 変数を使いましょう。控えめで均等に配色されたパレットよりも、主役となる色に鮮やかなアクセントを効かせた配色が効果的です。
• モーション：エフェクトやマイクロインタラクションにアニメーションを使います。HTML では CSS のみで実現する方法を優先してください。利用できる場合は、React で Motion ライブラリを使います。インパクトの大きな場面に注力しましょう。表示を段階的に見せる（animation-delay）ページ読み込みの演出を丁寧に作り込むほうが、マイクロインタラクションをあちこちに散りばめるよりも、喜びを生み出します。スクロールをきっかけとする演出や、意外性のあるホバー状態を取り入れましょう。
• 空間構成：意外性のあるレイアウト。非対称性。重なり。斜めの流れ。グリッドを崩す要素。ゆとりのあるネガティブスペース、または意図的に制御された密度。
• 背景と視覚的なディテール：単色を無難に使うのではなく、雰囲気と奥行きを作り出しましょう。全体の美的表現に合った文脈的なエフェクトやテクスチャを加えます。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明レイヤー、ドラマチックな影、装飾的な境界線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れましょう。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、決まりきった配色（特に白い背景に紫のグラデーション）、予測可能なレイアウトやコンポーネントパターン、文脈に即した個性を欠くありきたりなデザインなど、よくある AI 生成の美的表現は絶対に使わないでください。

創造的に解釈し、文脈にふさわしい、本当にデザインされたと感じられる意外性のある選択をしてください。デザインは一つひとつ異なるものにしましょう。ライトテーマとダークテーマ、さまざまなフォントや美的表現を使い分けてください。生成のたびに、よくある選択肢（たとえば Space Grotesk）に収束するのは絶対に避けてください。

重要：実装の複雑さを美的ビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを備えた、手の込んだコードが必要です。ミニマルまたは洗練されたデザインには、抑制、精度、そして余白、タイポグラフィ、繊細なディテールへの細やかな配慮が必要です。優雅さは、ビジョンを巧みに形にすることで生まれます。

Claude には並外れた創造性を発揮する力があります。ためらわず、型にはまらない発想で、独自のビジョンを徹底的に形にしたときに何が生み出せるのかを示してください。