このスキルは、ジェネリックな「AI スロップ」美学を避けた、個性的で生産グレードのフロントエンドインターフェースの作成をガイドします。美的ディテールと創造的な選択に特別な注意を払い、実際に動作するコードを実装します。
ユーザーはフロントエンドの要件（コンポーネント、ページ、アプリケーション、または構築するインターフェース）を提供します。目的、対象ユーザー、技術的制約に関するコンテキストを含めることもあります。
デザイン思考
コーディングの前に、コンテキストを理解し、大胆な美的方向性を確定します。
- 目的: このインターフェースはどのような問題を解決しますか？誰が使用しますか？
- トーン: 極端なものを選びます：極限まで削ぎ落としたミニマリズム、最大主義的カオス、レトロフューチャー、オーガニック/ナチュラル、ラグジュアリー/洗練、遊び心/おもちゃのような、エディトリアル/雑誌風、ブルータリスト/生々しい、アールデコ/幾何学的、ソフト/パステル、インダストリアル/実用的、など。選択肢は豊富にあります。これらをインスピレーションとして使用しますが、美的方向性に忠実なものをデザインしてください。
- 制約: 技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）。
- 差別化: これを「忘れられないもの」にするものは何ですか？人が覚えているであろう、たった一つのことは何ですか？
重要: 明確な概念的方向性を選択し、それを正確に実行してください。大胆な最大主義と洗練されたミニマリズムの両方が機能します。鍵となるのは強度ではなく、意図性です。
次に、以下のような動作するコード（HTML/CSS/JS、React、Vue など）を実装します。
- プロダクショングレードで機能的
- 視覚的に印象的で記憶に残る
- 明確な美的視点でまとまっている
- 細部に至るまで細心の注意が払われている
フロントエンド美学ガイドライン
以下に焦点を当てます。
- タイポグラフィ: 美しく、ユニークで、興味深いフォントを選択します。Arial や Inter のような汎用フォントは避け、代わりにフロントエンドの美学を高める特徴的な選択をします。予想外で、個性のあるフォントの選択です。特徴的なディスプレイフォントと洗練された本文フォントを組み合わせます。
- カラーとテーマ: まとまりのある美学にコミットします。一貫性のために CSS 変数を使用します。支配的な色と鋭いアクセントは、控えめで均等に分散されたパレットよりも優れています。
- モーション: エフェクトやマイクロインタラクションにアニメーションを使用します。HTML では CSS のみのソリューションを優先します。React では Motion ライブラリを利用可能な場合に使用します。インパクトの大きな瞬間に焦点を当てます。段階的に表示される（animation-delay）、よく構成された1回のページロードは、散在するマイクロインタラクションよりも喜びを生み出します。スクロールトリガーや驚きを与えるホバーステートを使用します。
- 空間構成: 予想外のレイアウト。非対称性。オーバーラップ。斜めの流れ。グリッドを破る要素。豊富なネガティブスペース、または制御された密度。
- 背景と視覚的ディテール: ソリッドカラーにデフォルトするのではなく、雰囲気と奥行きを創造します。全体的な美学にマッチするコンテキストエフェクトとテクスチャを追加します。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、層状の透明度、劇的な影、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなどのクリエイティブなフォームを適用します。
決して、過度に使用されたフォントファミリー（Inter, Roboto, Arial, システムフォント）、決まりきったカラースキーム（特に白背景のパープルグラデーション）、予測可能なレイアウトとコンポーネントパターン、そしてコンテキスト固有の特徴を欠いた型通りのデザインといった、ジェネリックな AI 生成美学を使用しないでください。
創造的に解釈し、コンテキストのために真にデザインされたと感じられる予想外の選択をしてください。同じデザインは二度とあってはなりません。ライトテーマとダークテーマ、異なるフォント、異なる美学を変化させてください。決して、生成間で一般的な選択（例えば Space Grotesk）に収束しないでください。
重要: 実装の複雑さを美的ビジョンに合わせてください。最大主義的デザインには、広範なアニメーションとエフェクトを備えた入念なコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、精度、そしてスペーシング、タイポグラフィ、微妙なディテールへの慎重な注意が必要です。優雅さはビジョンをうまく実行することから生まれます。
忘れないでください：Claude は並外れた創造的な仕事が可能です。躊躇せず、固定観念にとらわれずに考え、独自のビジョンに完全にコミットすることで、本当に何を創造できるかを示してください。
タスクに応じたデザインワークフロー
モニター/操作/作成の分類、コンテキスト発見、バリエーション、状態、検証に関する完全なデザインワークフローをお読みください。既存のプロダクトでは、そのデザインシステムとユーザータスクが上記の美的探求よりも優先されます。操作 UI に珍しいフォント、オーバーラップ、装飾的な背景、マーケティング的な構成を強制しないでください。利用可能なブラウザツールとファイルツールを使用し、特定のモデル製品は使用しないでください。オプションのリファレンスカタログは prismer-popular-web-designs と prismer-design-md です。ユーザーから要求されたタスクのためにのみロードしてください。