frontend-design

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

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

注意点と適用範囲の確認

このスキルは、実装対象がウェブフロントエンドの場合にのみ使用してください。美的指針を適用する前に、対象コードが HTML／CSS／JavaScript、またはウェブ UI フレームワークであることを確認してください。

リポジトリを調査して、視覚的な表示部分がネイティブレンダラー、GPU シェーダー、ゲームエンジン、ターミナル UI、動画パイプライン、その他の非ウェブ系グラフィックススタックで実装されているとわかった場合は、このスキルの使用を中止してください。その作業は、適切な言語、レンダリング、または視覚検証のワークフローに振り分けてください。見た目をもっと洗練させるという依頼だけでは、ウェブフロントエンドの適用範囲であるとは判断できません。

トリガーの回帰ケースは evals/triggers.jsonl にあります。

デザインの考え方

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

• 目的：このインターフェースはどのような課題を解決しますか？ 誰が使いますか？
• トーン：極端な方向性を選びます。徹底したミニマル、混沌としたマキシマリズム、レトロフューチャー、有機的・自然な雰囲気、高級感・洗練、遊び心のあるおもちゃのような雰囲気、エディトリアル・雑誌風、ブルータリズム・荒削り、アールデコ・幾何学的、柔らかい・パステル調、工業的・実用的など、選択肢は数多くあります。これらを参考にしながら、選んだ美的方向性に忠実なデザインにしてください。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このインターフェースを忘れられないものにする要素は何ですか？ 人々の記憶に残る一番の特徴は何ですか？

重要：明確なコンセプトの方向性を選び、正確に形にしてください。大胆なマキシマリズムも、洗練されたミニマリズムも効果的です。鍵となるのは強さではなく、意図の明確さです。

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

• 本番品質で、機能する
• 見た目が鮮烈で、記憶に残る
• 明確な美的視点を持ち、全体に統一感がある
• あらゆる細部まで丁寧に洗練されている

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

以下に注力してください：

• タイポグラフィ：美しく、個性的で、印象に残るフォントを選んでください。Arial や Inter のような汎用的なフォントは避け、フロントエンドの美しさを高める、個性豊かで意外性のあるフォントを選びましょう。個性的なディスプレイフォントと洗練された本文用フォントを組み合わせてください。
• 色とテーマ：一貫性のある美学を貫いてください。一貫性を保つために CSS 変数を使用しましょう。控えめで均等に配色されたパレットより、主役となる色に鮮やかなアクセントを効かせた配色のほうが効果的です。
• 動き：アニメーションをエフェクトやマイクロインタラクションに活用してください。HTML では CSS のみで実現できる方法を優先しましょう。利用できる場合は、React で Motion ライブラリを使用してください。インパクトの大きな演出に注力しましょう。段階的な表示（animation-delay）を取り入れた、丁寧に演出されたページ読み込みは、散発的なマイクロインタラクションよりも大きな喜びをもたらします。スクロールに応じた演出や、意外性のあるホバー状態も取り入れてください。
• 空間構成：意外性のあるレイアウトを採用しましょう。非対称な構成、重なり、斜めの流れ、グリッドからはみ出す要素を取り入れてください。余白をたっぷり取るか、密度を意図的に調整しましょう。
• 背景とビジュアルの細部：単色を安易に使うのではなく、雰囲気と奥行きを生み出してください。全体の美学に合った、文脈に応じたエフェクトやテクスチャを加えましょう。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、レイヤー状の透過、ドラマチックな影、装飾的なボーダー、カスタムカーソル、グレインのオーバーレイなど、クリエイティブな表現を取り入れてください。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白い背景に紫のグラデーション）、予測しやすいレイアウトやコンポーネントのパターン、文脈に応じた個性のない定型的なデザインなど、汎用的な AI 生成の美学は絶対に使わないでください。

創造的に解釈し、文脈に合った、本当にデザインされたと感じられる意外性のある選択をしてください。どのデザインも同じにしてはいけません。ライトテーマとダークテーマ、異なるフォント、異なる美学を使い分けてください。世代を超えてよくある選択肢（たとえば Space Grotesk）に収束することは絶対に避けてください。

重要：実装の複雑さを美学のビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを使った手の込んだコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、精度、余白やタイポグラフィ、繊細な細部への丁寧な配慮が必要です。ビジョンを見事に実現してこそ、エレガンスが生まれます。

Claude には、並外れたクリエイティブな仕事を生み出す力があることを忘れないでください。型にはまらない発想をし、独自のビジョンを貫くことで何が実現できるのか、ためらわずに示してください。

検証

完了する前に、可能な限り対象のランタイムで実装したインターフェースを確認してください。レイアウト、レスポンシブな動作、テキストの収まり、コントラスト、インタラクションの状態を検証し、静的なモックアップではなく、実際に動作する UI であることを確認してください。ローカルアプリの場合は、利用可能なブラウザーまたはスクリーンショットのワークフローを使って、フロントエンドが完成したと判断する前に、デスクトップとモバイルのビューポートを確認してください。