frontend-design-system

Original source / Raw SKILL.md

---
name: frontend-design-system
description: フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
---

# Frontend Design System

## Overview

このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。

## Anti-Patterns（避けるべきパターン）

以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：

### Typography（タイポグラフィ）

- ❌ Inter, Roboto, Open Sans などの過度に使用されたフォント
- ❌ すべてのテキストに同じフォントファミリーを使用
- ❌ 標準的なフォントウェイトのみの使用

### Colors（カラー）

- ❌ 紫からピンクへのグラデーション
- ❌ 汎用的な青/緑のアクセントカラー
- ❌ 彩度の高すぎるネオンカラー
- ❌ デフォルトのTailwindカラーパレットそのまま

### Layout（レイアウト）

- ❌ 左テキスト・右画像の標準ヒーローセクション
- ❌ 3カラムの均等グリッド機能セクション
- ❌ 中央揃えの単調なカードレイアウト

### Effects（エフェクト）

- ❌ 過度なぼかし効果（blur）
- ❌ 全要素へのアニメーション適用
- ❌ グラスモーフィズムの乱用

## Best Practices（推奨パターン）

### Typography

**推奨フォントの組み合わせ例：**

| ヘッダー         | ボディ          | 特徴                   |
| ---------------- | --------------- | ---------------------- |
| Playfair Display | Source Sans Pro | クラシック＆モダン     |
| Space Grotesk    | Inter           | テック＆ミニマル       |
| Fraunces         | Work Sans       | エレガント＆読みやすい |
| DM Serif Display | DM Sans         | 統一感のある対比       |
| Syne             | Outfit          | 大胆＆現代的           |

**タイポグラフィ原則：**

- 見出しと本文で異なるフォントファミリーを使用（セリフ×サンセリフの組み合わせ）
- フォントウェイトのバリエーションを活用（300, 400, 600, 800）
- レタースペーシングで視覚的階層を作成

### Colors

**カラーパレット構築原則：**

```
プライマリ：ブランドアイデンティティを表す主色
セカンダリ：プライマリを補完する色（補色または類似色）
アクセント：CTAやハイライトに使用する注目色
ニュートラル：背景やテキストに使用するグレー系
```

**独自性を出すテクニック：**

- HSL調整で微妙な色相のずれを作る
- ダークモードでは彩度を下げ、明度を調整
- セマンティックカラー（success, warning, error）もブランドに合わせて調整

### Layout

**差別化するレイアウトパターン：**

- 非対称グリッド（5:7, 2:3比率）
- オーバーラップ要素とネガティブマージン
- 斜めのセクション区切り
- ベントグリッドと有機的な配置
- 大胆な余白（ホワイトスペース）の活用

### Animation & Motion

**効果的なアニメーション原則：**

1. **高影響度の瞬間に集中**
   - ページロード時の単一の調整されたアニメーション
   - ユーザーアクション（クリック、ホバー）への即座のフィードバック
   - 状態変化（成功、エラー）の視覚的表現

2. **タイミングの指針**
   - マイクロインタラクション: 150-300ms
   - ページ遷移: 300-500ms
   - 複雑なアニメーション: 500-800ms

3. **イージング関数**
   ```css
   /* 推奨イージング */
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
   --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
   ```

### Background & Texture

**背景デザインのアイデア：**

- 微妙なノイズテクスチャ
- 幾何学的パターン（控えめに）
- グラデーションメッシュ
- 抽象的なブロブ/シェイプ
- パララックス効果のある背景レイヤー

## Implementation Checklist

進捗チェックリスト：

- [ ] タイポグラフィ：見出しと本文に異なるフォントを選定
- [ ] カラーパレット：5色以上の調和したパレットを作成
- [ ] レイアウト：非対称または独自のグリッドシステムを検討
- [ ] アニメーション：1-2の高影響度アニメーションを実装
- [ ] 背景：テクスチャまたは独自の背景要素を追加
- [ ] 一貫性：すべての要素がデザインシステムに従っているか確認

## Theme Examples

詳細なテーマ例については以下を参照：

- [テーマ例集](themes.md)
- [コンポーネントリファレンス](components.md)

## Quick Reference

**フォントペアリング即決リスト：**

1. モダン・クリーン → Space Grotesk + Inter
2. エレガント・高級 → Playfair Display + Lato
3. テック・スタートアップ → Syne + Outfit
4. 温かみ・親しみやすい → Fraunces + Work Sans
5. 大胆・クリエイティブ → DM Serif Display + DM Sans

**カラー参考：**

- Coolors.co で調和したパレット生成
- Realtime Colors でライブプレビュー
- Happy Hues でインスピレーション


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### themes.md

```markdown
# Theme Examples

このドキュメントでは、具体的なテーマ例とその実装ガイドラインを提供します。

## 1. Nordic Minimal

**コンセプト：** スカンジナビアデザインにインスパイアされた、機能美と静謐さ

```css
:root {
  /* Colors */
  --color-primary: #2d3748; /* Charcoal */
  --color-secondary: #718096; /* Slate */
  --color-accent: #c17f59; /* Terracotta */
  --color-background: #f7f5f3; /* Warm White */
  --color-surface: #ffffff;
  --color-text: #1a202c;
  --color-text-muted: #4a5568;

  /* Typography */
  --font-heading: 'DM Serif Display', serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing */
  --space-unit: 8px;
}
```

**特徴：**

- 温かみのある白背景
- テラコッタのアクセント
- 大胆な余白
- セリフ見出し × サンセリフ本文

---

## 2. Neon Brutalism

**コンセプト：** ブルータリズムとサイバーパンクの融合、大胆で反抗的

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #00ff88; /* Electric Green */
  --color-accent-alt: #ff6b35; /* Safety Orange */
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text: #ffffff;
  --color-border: #333333;

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'JetBrains Mono', monospace;

  /* Effects */
  --shadow-brutal: 4px 4px 0 var(--color-accent);
  --border-brutal: 3px solid var(--color-secondary);
}
```

**特徴：**

- 高コントラスト
- ハードシャドウ（ドロップシャドウなし）
- モノスペースフォント
- 太いボーダー

---

## 3. Organic Growth

**コンセプト：** 自然と持続可能性、有機的な形状と穏やかな色調

```css
:root {
  /* Colors */
  --color-primary: #2d4a3e; /* Forest */
  --color-secondary: #8b7355; /* Earth */
  --color-accent: #d4a574; /* Sand */
  --color-background: #f5f1eb; /* Cream */
  --color-surface: #ffffff;
  --color-text: #2c3e2d;
  --color-text-muted: #5d6b5e;

  /* Typography */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  /* Shapes */
  --radius-organic: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
```

**特徴：**

- アースカラーパレット
- 有機的なブロブシェイプ
- 手書き風アクセント
- テクスチャ背景

---

## 4. Tech Noir

**コンセプト：** ダークモードファースト、洗練されたテック感

```css
:root {
  /* Colors */
  --color-primary: #6366f1; /* Indigo */
  --color-secondary: #8b5cf6; /* Violet */
  --color-accent: #22d3ee; /* Cyan */
  --color-background: #0f0f23; /* Deep Navy */
  --color-surface: #1a1a2e;
  --color-surface-elevated: #252542;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;

  /* Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Outfit', sans-serif;

  /* Effects */
  --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
  --gradient-hero: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 50%,
    #22d3ee 100%
  );
}
```

**特徴：**

- 深いネイビー背景
- グロー効果のアクセント
- グラデーションのポイント使用
- モダンなサンセリフ

---

## 5. Editorial Elegance

**コンセプト：** 雑誌のような洗練されたエディトリアルデザイン

```css
:root {
  /* Colors */
  --color-primary: #1a1a1a;
  --color-secondary: #6b7280;
  --color-accent: #dc2626; /* Editorial Red */
  --color-background: #fafafa;
  --color-surface: #ffffff;
  --color-text: #111827;
  --color-text-muted: #6b7280;

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Source Serif Pro', serif;
  --font-accent: 'Libre Baskerville', serif;

  /* Layout */
  --column-width: 65ch;
  --grid-editorial: 1fr 2fr 1fr;
}
```

**特徴：**

- クラシックなセリフ体
- 赤のアクセント（見出し・リンク）
- 65文字幅のコラム
- 豊富な余白と行間

---

## Application Guidelines

### テーマ適用時のチェックリスト

- [ ] CSS変数として定義し、一貫性を確保
- [ ] ダークモード/ライトモードの両方を考慮
- [ ] アクセシビリティ（コントラスト比4.5:1以上）を確認
- [ ] レスポンシブ時のフォントサイズ調整
- [ ] インタラクティブ要素のホバー/フォーカス状態を定義

```

### components.md

```markdown
# Component Design Reference

このドキュメントでは、独自性のあるコンポーネント設計のガイドラインを提供します。

## Button Components

### 避けるべきパターン

```jsx
// ❌ 汎用的すぎる
<button className="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
```

### 推奨パターン

#### Brutalist Button

```jsx
<button
  className="
  relative px-8 py-4
  bg-black text-white font-bold uppercase tracking-wider
  border-4 border-black
  shadow-[4px_4px_0_0_#00FF88]
  hover:shadow-[8px_8px_0_0_#00FF88]
  hover:translate-x-[-4px] hover:translate-y-[-4px]
  transition-all duration-200
"
>
  Take Action
</button>
```

#### Organic Button

```jsx
<button
  className="
  px-8 py-4
  bg-gradient-to-br from-amber-100 to-orange-100
  text-amber-900 font-medium
  rounded-[60%_40%_30%_70%/60%_30%_70%_40%]
  border border-amber-200
  hover:shadow-lg hover:shadow-amber-200/50
  transition-all duration-300
"
>
  Explore Nature
</button>
```

#### Glassmorphic Button（控えめに使用）

```jsx
<button
  className="
  px-6 py-3
  bg-white/10 backdrop-blur-md
  text-white font-medium
  rounded-full
  border border-white/20
  hover:bg-white/20
  transition-all duration-300
"
>
  Discover More
</button>
```

---

## Card Components

### 独自性のあるカードパターン

#### Overlapping Card

```jsx
<div className="relative">
  {/* Background decorative element */}
  <div className="absolute -inset-2 bg-gradient-to-br from-primary/20 to-accent/20 rounded-3xl" />

  {/* Main card */}
  <div className="relative bg-white rounded-2xl p-8 shadow-xl">
    <div className="absolute -top-6 left-8">
      <span className="bg-accent text-white px-4 py-2 rounded-full text-sm font-medium">
        Featured
      </span>
    </div>
    <h3 className="text-2xl font-bold mt-4">Card Title</h3>
    <p className="text-gray-600 mt-2">Card description goes here.</p>
  </div>
</div>
```

#### Asymmetric Card

```jsx
<div
  className="
  bg-white rounded-tl-3xl rounded-br-3xl
  p-8 shadow-lg
  border-l-4 border-primary
  hover:translate-x-2 transition-transform
"
>
  <h3 className="text-xl font-bold">Asymmetric Design</h3>
  <p className="text-gray-600 mt-2">Breaking the symmetry rule.</p>
</div>
```

---

## Hero Sections

### 避けるべきレイアウト

```
[    Text     ] [   Image   ]  ← 50/50の均等分割
```

### 推奨レイアウト

#### Asymmetric Split

```
[  Text  ] [      Large Image      ]  ← 35/65の非対称
```

```jsx
<section className="grid grid-cols-[35fr_65fr] min-h-screen">
  <div className="flex flex-col justify-center px-12">
    <h1 className="text-6xl font-bold leading-tight">
      Breaking
      <br />
      Conventions
    </h1>
    <p className="text-xl text-gray-600 mt-6">
      Design that stands out from the crowd.
    </p>
  </div>
  <div className="relative overflow-hidden">
    <img src="hero.jpg" className="object-cover w-full h-full" />
    <div className="absolute inset-0 bg-gradient-to-r from-white via-transparent to-transparent" />
  </div>
</section>
```

#### Overlapping Elements

```jsx
<section className="relative min-h-screen flex items-center">
  {/* Background text */}
  <h1
    className="
    absolute left-0 top-1/2 -translate-y-1/2
    text-[20vw] font-black text-gray-100
    select-none pointer-events-none
  "
  >
    BOLD
  </h1>

  {/* Content */}
  <div className="relative z-10 max-w-2xl mx-auto text-center">
    <span className="text-primary font-medium tracking-widest uppercase">
      Welcome to
    </span>
    <h2 className="text-5xl font-bold mt-4">Something Different</h2>
  </div>
</section>
```

---

## Navigation Patterns

### Creative Navigation Ideas

#### Vertical Side Nav

```jsx
<nav
  className="
  fixed left-0 top-0 h-full w-20
  bg-gray-900 text-white
  flex flex-col items-center py-8
"
>
  <div className="flex-1 flex flex-col items-center space-y-8 mt-12">
    {navItems.map((item) => (
      <a
        key={item.id}
        className="
          group relative w-12 h-12
          flex items-center justify-center
          rounded-xl hover:bg-white/10
          transition-colors
        "
      >
        <Icon name={item.icon} />
        <span
          className="
          absolute left-full ml-4 px-3 py-1
          bg-gray-800 rounded text-sm whitespace-nowrap
          opacity-0 group-hover:opacity-100
          transition-opacity
        "
        >
          {item.label}
        </span>
      </a>
    ))}
  </div>
</nav>
```

#### Floating Navigation

```jsx
<nav
  className="
  fixed bottom-8 left-1/2 -translate-x-1/2
  bg-white/80 backdrop-blur-lg
  rounded-full px-8 py-4 shadow-lg
  border border-gray-200
"
>
  <ul className="flex items-center space-x-8">
    {navItems.map((item) => (
      <li key={item.id}>
        <a className="font-medium hover:text-primary transition-colors">
          {item.label}
        </a>
      </li>
    ))}
  </ul>
</nav>
```

---

## Animation Patterns

### Page Load Animation

```jsx
// Staggered fade-in for content sections
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease: [0.16, 1, 0.3, 1], // ease-out-expo
    },
  },
};
```

### Scroll-Triggered Animation

```jsx
// Intersection Observer pattern
const useScrollAnimation = () => {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      { threshold: 0.1, rootMargin: '-50px' },
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return { ref, isVisible };
};
```

---

## Micro-Interactions

### Button Hover Effect

```css
.button-magnetic {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.button-magnetic:hover {
  transform: scale(1.05);
}

.button-magnetic::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(var(--accent-rgb), 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.button-magnetic:hover::after {
  opacity: 1;
}
```

### Input Focus Animation

```css
.input-animated {
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, var(--primary), var(--accent)) border-box;
  background-size:
    100% 100%,
    0% 100%;
  background-position:
    0 0,
    0 100%;
  transition: background-size 0.3s ease;
}

.input-animated:focus {
  background-size:
    100% 100%,
    100% 100%;
  outline: none;
}
```

```