frontend-design

このスキルでは、ありきたりな「AI っぽい粗雑さ」を避け、個性あふれる本番品質のフロントエンドインターフェースを作成する方法を説明します。美的な細部や創造的な選択に並外れた注意を払い、実際に動作するコードを実装してください。

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

デザインを考える

コーディングを始める前に、状況を把握し、大胆な美的方向性を定めてください。

• 目的：このインターフェースはどんな問題を解決するのでしょうか？誰が使うのでしょうか？
• トーン：極端な方向性を選びましょう。徹底的にミニマル、混沌としたマキシマリズム、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／生々しい表現、アールデコ／幾何学的、柔らかい／パステル、インダストリアル／実用本位など、選択肢は数多くあります。これらを発想のヒントにしつつ、その美的方向性にふさわしいデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：何がこの作品を忘れられないものにするのでしょうか？見る人の記憶に残るものは何でしょうか？

最重要：明確なコンセプトの方向性を選び、精密に形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも、どちらも成立します。重要なのは強度ではなく、意図を持ってデザインすることです。

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

• 本番品質で、実際に動作する
• 視覚的に印象的で、記憶に残る
• 明確な美的視点を持ち、全体に統一感がある
• 細部まで丁寧に仕上げられている

フロントエンドの美的ガイドライン

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

• タイポグラフィ：美しく、個性的で、興味を引くフォントを選びましょう。Arial や Inter のようなありふれたフォントは避け、フロントエンドの美しさを高める、特徴のある意外性豊かなフォントを選んでください。個性的なディスプレイフォントと洗練された本文フォントを組み合わせましょう。
• 色とテーマ：統一感のある美的方向性を定めましょう。一貫性を保つために CSS 変数を使いましょう。主役となる色に鮮やかなアクセントを組み合わせた配色は、控えめで均等に配色したパレットよりも効果的です。
• モーション：エフェクトやマイクロインタラクションにアニメーションを使いましょう。HTML では CSS のみで実現する方法を優先してください。React では利用できる場合に Motion ライブラリを使いましょう。効果の高い演出に集中してください。表示タイミングをずらしたアニメーション（animation-delay）を使った、よく練られたページ読み込み時の演出は、あちこちに散りばめたマイクロインタラクションよりも大きな楽しさを生みます。スクロールをトリガーにした演出や、意外性のあるホバー状態も活用しましょう。
• 空間構成：予想外のレイアウトを採用しましょう。非対称、重なり、斜めの流れ、グリッドからはみ出す要素などを活用してください。広々とした余白、または密度を意図的に調整した構成を選びましょう。
• 背景とビジュアルの細部：単色に頼るのではなく、雰囲気と奥行きを作りましょう。全体の美的方向性に合った、文脈に即したエフェクトやテクスチャを加えてください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明レイヤー、ドラマチックなシャドウ、装飾的な境界線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れましょう。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、決まりきった配色（特に白背景に紫のグラデーション）、ありがちなレイアウトやコンポーネントのパターン、文脈に合った個性を欠く量産型のデザインなど、ありきたりな AI 生成風のデザインは絶対に使わないでください。

創造的に解釈し、真にデザインされたと感じられる、意外性のある選択をしてください。同じデザインを繰り返してはいけません。ライトテーマとダークテーマ、さまざまなフォントや美的方向性を使い分けてください。生成のたびにありがちな選択肢（たとえば Space Grotesk）へ収束することは絶対に避けてください。

重要：実装の複雑さは、美的なビジョンに合わせてください。マキシマリズムのデザインには、凝ったコードと豊富なアニメーションやエフェクトが必要です。ミニマルで洗練されたデザインでは、抑制、精密さ、余白、タイポグラフィ、繊細なディテールへの注意が必要です。ビジョンをうまく実現することが、優雅さにつながります。

Claude は、並外れた創造性を発揮できます。遠慮せず、既成概念にとらわれず、独自のビジョンを貫いたときに何が作れるのかを示してください。

構造化出力：DESIGN.md

このスキルがビルドパイプライン（website-rebuild、local-business-rebuild、またはazerbaijan-website-build）中に呼び出された場合は、ビジュアル実装とともに構造化出力としてDESIGN.mdファイルを作成してください。

DESIGN.mdのフォーマット仕様は00-design-references/design-md-format.mdにあります。実在するブランドのウェブサイト（Stripe、Apple、Airbnb、Nike、Linearなど）を参考にしたDESIGN.mdファイルは、00-design-references/references/by-aesthetic/にあります。

DESIGN.mdには、このスキルが決定したすべてのデザイン要素が、9つのセクション（ビジュアルテーマ、カラーパレット、タイポグラフィ、コンポーネントのスタイル、レイアウト、奥行き／エレベーション、推奨事項／禁止事項、レスポンシブ対応、エージェント向けプロンプトガイド）に整理されています。ほかのエージェントや今後のセッションで活用することで、元のデザイン意図と視覚的に一貫性のあるページを構築できます。

各セクションの作成手順については、design-system-generatorスキルを使用してください。