---

name: frontend-design description: 高品質でユニークなフロントエンドUIを作成する。「フロントエンドを作りたい」「UI作成」「Webページを作成」「コンポーネントを作って」「ランディングページ」などの依頼時に使用。AIっぽいジェネリックなデザインを避け、独自性のある実装コードを生成する。 allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Frontend Design Skill

高品質で独自性のあるフロントエンドUIを作成する。

設計思考

コーディング前に、コンテキストを理解し、大胆な美的方向性を決める：

• 目的: このインターフェースが解決する問題は？誰が使う？
• トーン: 極端に振る - ブルータルミニマル、マキシマリストカオス、レトロフューチャー、オーガニック/ナチュラル、ラグジュアリー、プレイフル、エディトリアル/マガジン、ブルータリスト、アールデコ/ジオメトリック、ソフト/パステル、インダストリアル/ユーティリタリアン等
• 制約: 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）
• 差別化: 何がこれを記憶に残るものにする？

重要: 明確なコンセプト方向を選び、精密に実行する。

美的ガイドライン

タイポグラフィ

• 美しく、ユニークで、興味深いフォントを選ぶ
• Arial、Inter等のジェネリックなフォントを避ける
• 特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせる

色とテーマ

• 一貫した美学にコミットする
• CSS変数で一貫性を保つ
• ドミナントカラーとシャープなアクセント

モーション

• エフェクトとマイクロインタラクションにアニメーションを使用
• HTMLではCSS-onlyソリューションを優先
• ReactではMotionライブラリを使用
• スタガードリビール（animation-delay）で効果的なページロード

空間構成

• 予想外のレイアウト
• 非対称性、オーバーラップ、斜め配置
• グリッドを破る要素
• 余白の大胆な使用 OR 制御された密度

背景とビジュアルディテール

• ソリッドカラーをデフォルトにしない
• グラデーションメッシュ、ノイズテクスチャ、ジオメトリックパターン
• レイヤード透明、ドラマティックシャドウ、装飾的ボーダー

避けるべきこと（AIスロップ）

• 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
• 紫グラデーション on 白背景のような陳腐な配色
• 予測可能なレイアウトとコンポーネントパターン
• コンテキスト固有のキャラクターがないクッキーカッターデザイン

実装

技術スタック

• React + TypeScript（このプロジェクト）
• Tailwind CSS
• Framer Motion（必要時）
• Lucide React / Phosphor Icons

コード品質

• 完全に機能するプロダクショングレードのコード
• 適切なコンポーネント分割
• レスポンシブデザイン
• アクセシビリティ考慮

出力

創造的に解釈し、予想外の選択をする。 大胆なマキシマリズムも洗練されたミニマリズムも有効 - 重要なのは意図性。