frontend-design

このスキルは、ありきたりな「AI スロップ」風の美学を避け、個性豊かで本番環境にふさわしいフロントエンドインターフェースの作成をガイドします。美的な細部や独創的な工夫に格別の注意を払い、実際に動作するコードを実装してください。

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

デザインの考え方

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

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

重要：明確なコンセプトの方向性を選び、精密に実現してください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。大切なのは強さではなく、意図が明確であることです。

そのうえで、次のような実際に動作するコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番環境にふさわしく、機能する
• 視覚的に際立ち、記憶に残る
• 明確な美的視点を持ち、全体に一貫性がある
• 細部に至るまで丁寧に磨き上げられている

美学

実装する前に、タイポグラフィ、色、動き、空間構成、避けるべきパターンに関する詳しいガイダンスを references/aesthetics-guidelines.md で確認してください。