| name | designing-frontend |
| description | Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
フロントエンドデザイン
独創的で本番環境グレードのフロントエンドインターフェースを作成するスキル。汎用的な「AIスロップ」美学を避け、卓越した審美的ディテールと創造的な選択に細心の注意を払った、実際に動作するコードを実装します。
🎯 使用タイミング
- Webコンポーネント構築時
- ページ・アプリケーション作成時
- インターフェースデザイン時
- UIリファクタリング時
🧠 デザイン思考プロセス
コーディング前に、コンテキストを理解し大胆な美的方向性にコミット：
1. 目的の明確化
- このインターフェースが解決する問題は何か？
- 誰が使用するのか？
2. トーンの決定（極端な方向を選択）
以下から選択し、インスピレーションとして活用：
- ブルータリズム・ミニマル: 極限まで削ぎ落とした美
- マキシマリストカオス: 情報量と装飾の洪水
- レトロフューチャリスティック: 80s/90sサイバーパンク
- オーガニック/ナチュラル: 自然界からの着想
- ラグジュアリー/洗練: 高級ブランドの品格
- プレイフル/トイライク: 遊び心と楽しさ
- エディトリアル/マガジン: 雑誌的レイアウト
- ブルータリスト/ロー: 生々しい素材感
- アールデコ/ジオメトリック: 幾何学的パターン
- ソフト/パステル: 柔らかく優しい色調
- インダストリアル/ユーティリタリアン: 機能美
3. 制約の把握
- 技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）
4. 差別化ポイント
- これを忘れられないものにする要素は何か？
- 誰かが覚えている一つのことは何か？
重要: 明確なコンセプト方向を選び、精度を持って実行する。大胆なマキシマリズムも洗練されたミニマリズムも有効 - 重要なのは強度ではなく意図性。
🎨 フロントエンド美学ガイドライン
タイポグラフィ
- 美しく、ユニークで、興味深いフォントを選択
- ❌ 避けるべき: Arial、Inter、Roboto、システムフォント
- ✅ 推奨: 特徴的でデザインを高める選択
- ペアリング: 特徴的なディスプレイフォント + 洗練されたボディフォント
カラー & テーマ
- 一貫した美学にコミット
- CSS変数で統一性を確保
- 支配的な色 + シャープなアクセント > 控えめで均等に分散されたパレット
モーション & アニメーション
- エフェクトとマイクロインタラクションにアニメーションを使用
- HTMLの場合: CSS-onlyソリューションを優先
- Reactの場合: Motion（Framer Motion）ライブラリを使用
高インパクトな瞬間にフォーカス:
- 散発的なマイクロインタラクションより、よく構成されたページロード演出
animation-delayを使ったスタガードリビール- スクロールトリガー、驚きを与えるホバー状態
空間構成
- 予想外のレイアウト
- 非対称性
- オーバーラップ
- 対角線の流れ
- グリッドを破る要素
- 寛大なネガティブスペース、または制御された密度
背景 & ビジュアルディテール
ソリッドカラーをデフォルトにせず、雰囲気と深みを創出：
| 技法 | 説明 |
|---|---|
| グラデーションメッシュ | 複雑な色の混合 |
| ノイズテクスチャ | 粒状感の追加 |
| ジオメトリックパターン | 幾何学的背景 |
| レイヤード透過 | 重なりによる深み |
| ドラマティックシャドウ | 劇的な影効果 |
| デコラティブボーダー | 装飾的な境界線 |
| カスタムカーソル | 独自のマウスポインター |
| グレインオーバーレイ | フィルム調のノイズ |
❌ 絶対に避けること
汎用AI生成美学（AIスロップ）
| カテゴリ | 避けるべきもの |
|---|---|
| フォント | Inter、Roboto、Arial、Space Grotesk、システムフォント |
| 配色 | 白背景に紫グラデーション、ありがちなグラデーション |
| レイアウト | 予測可能なレイアウト、Cookie-cutterパターン |
| 全体 | コンテキスト固有の特徴を欠くデザイン |
重要: 生成ごとに異なるデザインを。ライト/ダークテーマ、異なるフォント、異なる美学を変化させる。共通の選択に収束してはいけない。
💡 実装の複雑さを美的ビジョンに合わせる
| ビジョン | 実装アプローチ |
|---|---|
| マキシマリスト | 豊富なアニメーション、複雑なエフェクト、多層的なコード |
| ミニマリスト/洗練 | 抑制、精度、スペーシング・タイポグラフィ・微妙なディテールへの注意 |
エレガンスはビジョンの優れた実行から生まれる。
🚀 実装チェックリスト
□ 大胆な美的方向性を選択した
□ 汎用フォント（Inter, Roboto, Arial）を避けた
□ 特徴的なカラーパレットを定義した
□ 予想外のレイアウト要素を含めた
□ 意味のあるアニメーション/トランジションを追加した
□ 背景に深みと雰囲気を持たせた
□ CSS変数で一貫性を確保した
□ 本番環境グレードで機能する
□ 誰かが覚えている一つの要素がある
🔗 関連スキル
- developing-nextjs: Next.js固有の最適化
- using-shadcn: shadcn/uiコンポーネントの活用
- enforcing-type-safety: TypeScript型安全性
📚 技術スタック別ガイド
HTML/CSS/JS
- CSS-onlyアニメーションを優先
- カスタムプロパティ（CSS変数）活用
@keyframesでのスタガードアニメーション
React
- Framer Motion（Motion）ライブラリ
- CSS Modulesまたはstyled-components
- コンポーネントごとのアニメーション管理
Vue
- Vue Transitionコンポーネント
- GSAP連携
- Scoped Stylesでのカプセル化
記憶せよ: Claudeは並外れた創造的作業が可能。既成概念にとらわれず、独自のビジョンに完全にコミットしたとき、真に何が創造できるかを示せ。