frontend-design

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

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

デザインを考える

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

• 目的：このインターフェースはどのような課題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選んでください。徹底したミニマル、マキシマリストの混沌、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／粗削り、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用重視など、選択肢はたくさんあります。これらを発想のヒントにしつつ、選んだ美的方向性に忠実なデザインを作ってください。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このデザインを忘れられないものにする要素は何ですか？見る人が覚えているのは何でしょうか？

重要：明確なコンセプトを定め、精度高く形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも成立します。大切なのは強さではなく、意図があることです。

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

• 本番環境に耐える品質で、機能すること
• 視覚的に印象的で、記憶に残ること
• 明確な美的視点と一貫性があること
• 細部まで入念に磨き上げられていること

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

以下の点を重視してください。

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

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

創造的に解釈し、文脈に合った、意外性のある選択をしてください。デザインが同じものにならないようにしましょう。ライトテーマとダークテーマ、異なるフォント、異なる美的方向性を使い分けてください。世代をまたいでありがちな選択肢（たとえば Space Grotesk）に収束するのは絶対に避けてください。

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

OpenHands は、驚くべき創造的な成果を生み出せます。可能性を遠慮なく引き出し、型にとらわれず、個性的なビジョンを徹底的に形にしたとき、何が生まれるのかを示してください。