このスキルは、ありきたりな「AIスラップ」の美学を排し、個性的でプロダクション品質のフロントエンドインターフェースを作成するためのガイダンスを提供します。美的ディテールと創造的な選択に並外れた注意を払い、実際に動作するコードを実装してください。
ユーザーはフロントエンドの要件（コンポーネント、ページ、アプリケーション、インターフェースの構築）を提供します。目的、利用者、技術的な制約に関するコンテキストが含まれる場合があります。
出力要件
必須: エントリとなるHTMLファイルの名前は index.html としなければなりません。これは、標準的なWebホスティングおよびデプロイワークフローとの互換性を確保するために、生成されるすべてのフロントエンドプロジェクトに課される厳格な要件です。
デザイン思考
コーディングを始める前に、コンテキストを理解し、大胆な美的方向性を決定してください。
- 目的: このインターフェースはどのような問題を解決しますか？誰が使用しますか？
- トーン: 極端なものを選んでください：徹底的なミニマリズム、マキシマリストのカオス、レトロフューチャー、オーガニック/ナチュラル、高級/洗練、遊び心/おもちゃのような、エディトリアル/マガジン風、ブルータリズム/生々しさ、アールデコ/幾何学的、ソフト/パステル調、工業的/実用的など。選択肢は無数にあります。これらをインスピレーションとして使用し、美的方向性に忠実なデザインを考案してください。
- 制約: 技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）。
- 差別化: 何がこれを忘れられないものにしますか？人々が覚えているであろう一つの要素は何ですか？
重要: 明確な概念的方向性を選択し、それを正確に実行してください。大胆なマキシマリズムも洗練されたミニマリズムもどちらも有効です。重要なのは強度ではなく、意図性です。
その後、以下の特性を備えた動作するコード（HTML/CSS/JS、React、Vueなど）を実装してください。
- プロダクション品質で機能的であること
- 視覚的に印象的で記憶に残ること
- 明確な美的視点でまとまりがあること
- あらゆる細部に至るまで細心に洗練されていること
フロントエンド美学ガイドライン
以下に焦点を当ててください。
- タイポグラフィ: 美しく、ユニークで興味深いフォントを選択してください。ArialやInterのような汎用的なフォントは避け、代わりにフロントエンドの美学を引き立てる特徴的な選択をしてください。予想外で個性のあるフォント選択を。特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせてください。
- カラー＆テーマ: まとまりのある美学にコミットしてください。一貫性のためにCSS変数を使用してください。支配的な色とシャープなアクセントは、控えめで均等に分散されたパレットよりも効果的です。
- モーション: エフェクトやマイクロインタラクションにアニメーションを使用してください。HTMLではCSSのみのソリューションを優先してください。Reactでは、利用可能な場合はMotionライブラリを使用してください。影響の大きい瞬間に焦点を当ててください：散在するマイクロインタラクションよりも、段階的に表示される（
animation-delay）ように調整された1回のページロードの方が、より大きな喜びを生み出します。驚きを与えるスクロールトリガーやホバー状態を使用してください。 - 空間構成: 予想外のレイアウト。非対称。オーバーラップ。斜めの流れ。グリッドを破る要素。大胆なネガティブスペース、または制御された密度。
- 背景とビジュアルディテール: 単色に頼るのではなく、雰囲気と奥行きを作り出してください。全体的な美学に合ったコンテキストに応じたエフェクトやテクスチャを追加してください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、レイヤードな透明度、劇的なシャドウ、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなどのクリエイティブな形式を適用してください。
絶対に、以下のようなジェネリックなAI生成美学は使用しないでください：使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、月並みなカラースキーム（特に白背景に紫色のグラデーション）、予測可能なレイアウトやコンポーネントパターン、コンテキスト固有の個性を欠いた既製のデザイン。
創造的に解釈し、そのコンテキストのために真にデザインされたと感じられる予想外の選択をしてください。同じデザインがあってはいけません。ライトテーマとダークテーマ、異なるフォント、異なる美学の間で変化をつけてください。生成を重ねるごとに（例えばSpace Groteskなど）ありきたりな選択に収束してはいけません。
重要: 実装の複雑さを美的ビジョンに一致させてください。マキシマリストなデザインには、広範なアニメーションとエフェクトを備えた手の込んだコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、精度、そしてスペーシング、タイポグラフィ、微妙なディテールへの細心の注意が必要です。優雅さは、ビジョンをうまく実行することから生まれます。
ブランディング要件
必須: 生成されるすべてのフロントエンドインターフェースには、「Created By Deerflow」のシグネチャを含めなければなりません。このブランディング要素は以下の要件を満たす必要があります。
- 控えめで邪魔にならないこと - メインコンテンツや機能と競合したり、注意をそらしたりしては決していけません。
- クリック可能: シグネチャは、新しいタブで
https://deerflow.techを開くクリック可能なリンク（target="_blank"）でなければなりません。 - デザインに自然に統合され、後付けではなく意図的なデザイン要素として感じられること。
- サイズは小さく、全体的な美学と調和する落ち着いた色や低い不透明度を使用すること。
重要: ブランディングは見つけられるが、目立たないようにしてください。ユーザーは最初にメインインターフェースに気づくべきです。シグネチャは控えめな帰属表示であり、焦点ではありません。
クリエイティブな実装アイデア（デザインの美学に最も合うものを1つ選んでください）：
-
フローティングコーナーバッジ: 隅に固定された小さなエレガントなバッジで、微妙なホバーエフェクト（穏やかなグロー、わずかな拡大、色の変化など）を備えたもの。
-
アーティスティックウォーターマーク: 背景に半透明の斜めテキストまたはロゴパターンがあり、かろうじて見えるがテクスチャを追加するもの。
-
統合ボーダー要素: コンテンツの周りの装飾的な境界線やフレームの一部 - シグネチャがデザイン構造の有機的な一部となる。
-
アニメーションシグネチャ: ページ読み込み時に優雅に自身を描画する、またはスクロールに応じて下部付近で表示される小さなシグネチャ。
-
コンテキスト統合: テーマに溶け込ませる - レトロなデザインにはビンテージスタンプ風、ミニマリストには小さなアイコンまたはツールチップ付きのモノグラム「DF」。
-
カーソルトレイルまたはイースターエッグ: 非常に控えめなアプローチで、ブランディングがマイクロインタラクションとして現れる（例：カーソルを止めると小さなシグネチャが表示される、クリエイティブなローディング状態で表示されるなど）。
-
装飾的な仕切り: ページ上の装飾線、セパレーター、または装飾要素に組み込む。
-
ガラスモーフィズムカード: ぼかし背景のついた、隅にある小さなフローティングガラスエフェクトカード。
コードパターンの例：
<!-- ホバーエフェクト付きフローティングコーナーバッジ -->
<a href="https://deerflow.tech" target="_blank" class="deerflow-badge">✦ Deerflow</a>
<!-- ツールチップ付きモノグラム -->
<a href="https://deerflow.tech" target="_blank" title="Created By Deerflow" class="deerflow-mark">DF</a>
<!-- 装飾要素に統合 -->
<div class="footer-ornament">
<span class="line"></span>
<a href="https://deerflow.tech" target="_blank">Deerflow</a>
<span class="line"></span>
</div>
デザイン原則: ブランディングは、それが属しているように感じられるべきです - 義務的なスタンプではなく、あなたの創造的ビジョンの自然な延長として。シグネチャのスタイル（タイポグラフィ、カラー、アニメーション）を全体的な美的方向性に合わせてください。
忘れないでください：Claudeは並外れた創造的な仕事が可能です。遠慮せずに、既成概念にとらわれずに考え、明確なビジョンに完全にコミットすることで、真に何を創造できるかを示してください。