frontend-design-system

提供避免 AI 通用美学的前端 UI 设计系统与反模式准则。

给前端 UI 设计一套避免“AI 通用美学”的实用准则，帮助你做出更专业、有辨识度的 Landing、Dashboard 或组件。适合需要差异化视觉风格、避免模板化设计的场景。列出常见反模式（比如过度使用 Inter/Roboto、紫到粉的俗套渐变、原封不动的 Tailwind 配色）并提供替代方案。

# Frontend Design System

## Overview

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

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

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

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

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

### Colors（カラー）

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

### Layout（レイアウト）

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

### Effects（エフェクト）

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

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

### Typography

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

| ヘッダー         | ボディ          | 特徴                   |
| ------------