# Designing Frontend

> Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

- Skill: `majiayu000/designing-frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/designing-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/designing-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/designing-frontend

---


# フロントエンドデザイン

独創的で本番環境グレードのフロントエンドインターフェースを作成するスキル。汎用的な「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は並外れた創造的作業が可能。既成概念にとらわれず、独自のビジョンに完全にコミットしたとき、真に何が創造できるかを示せ。