generic-design-system

汎用デザインシステム

あらゆるプロジェクトのビジュアル言語に適応するデザインシステムのリファレンスです。

新しいシステムを作る前に調査する

新しいデザインシステムを作成する場合（既存のものに従わない場合）：

Skill(ui-research)  # Research modern patterns first

参考資料：

• UI のインスピレーションソース - 調査資料
• デザインパターン - ビジュアルトークン

このスキルを使う場面

次の場合に使用します：

• UI コンポーネントを実装する
• 色やタイポグラフィを選ぶ
• アニメーションやトランジションを作成する
• ビジュアルの一貫性を確保する
• デザイントークンを設定する
• デザインシステムへの準拠をレビューする

次の場合は使用しないでください：

• UX フローの設計 → generic-ux-designer を使用
• 機能アーキテクチャ → generic-feature-developer を使用
• コード品質のレビュー → generic-code-reviewer を使用

デザインシステムのアーキテクチャ

構築するか、参照するか

状況	対応
既存のデザインシステム	厳密に従う
デザインシステムがない	このスキルを使って基盤を確立する
部分的なシステム	不足箇所を特定し、一貫性を保って拡張する

トークンの構成

レイヤー	例	目的
プリミティブ	--color-blue-500	生の値
セマンティック	--color-primary	意味
コンポーネント	--button-background	コンテキスト

判断基準： コードではセマンティックトークンを使い、プリミティブトークンは基盤としてのみ使用します。

一貫性の判断フロー

1. コンポーネントが存在しますか？ → 既存のパターンを使用します
2. 類似するものがありますか？ → 既存のものを応用します（競合するパターンを作成しないでください）
3. 新しいカテゴリですか？ → ユーザーに提案し、判断理由を記録します

カラーシステム

すべてのプロジェクトで定義する項目：

• プライマリ、セカンダリ、アクセント
• 背景、前景、ミュート
• 破壊的、成功、警告

コントラスト要件

用途	最低基準
本文	4.5:1（AA）
大きなテキスト	3:1（AA）
UI コンポーネント	3:1（AA）

タイポグラフィ

フォントスタック

--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;

文字サイズのスケール

名前	サイズ	用途
sm	14px	補足テキスト
base	16px	本文
lg	18px	リード文
xl	20px	セクション見出し
2xl	24px	ページ見出し

余白システム

基本単位： 4px または 8px

トークン	4px 基準	用途
1	4px	狭い間隔
2	8px	標準の間隔
4	16px	カードのパディング
6	24px	ページの余白

アニメーション

GPU アクセラレーションのみ

アニメーション対象： transform、opacity 避ける対象： width、height、top、left、margin、padding

継続時間

トークン	継続時間	用途
fast	100ms	マイクロインタラクション
DEFAULT	200ms	ほとんどのトランジション
slow	300ms	複雑なアニメーション

タイミング

--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

コンポーネント

コンポーネントの状態

状態	視覚的な処理	例
デフォルト	基本スタイル	通常のボタン
ホバー	控えめなフィードバック	背景を明るく／暗くする
アクティブ	押下状態	わずかに縮小する
フォーカス	視認できるアウトライン	2px のリング、オフセット
無効	不透明度を下げる	不透明度 50%、ポインターなし
読み込み中	スピナー／スケルトン	スピナー付きのボタン
エラー	破壊的な色	赤い境界線／テキスト

タッチターゲット

• 最小サイズ： 44x44px（WCAG 2.1 AAA）
• 間隔： 隣接するターゲット間は 8px
• モバイル： 主要なアクションでは 48x48px を検討します

ボタン

バリアント	用途	最小サイズ
Primary	主なアクション	44x44px
Secondary	代替アクション	44x44px
Ghost	控えめなアクション	44x44px
Destructive	削除アクション	44x44px

フォーム入力

• 明確なフォーカス状態（視認可能な2pxのリング）
• メッセージ付きのエラー状態
• ラベルは常に表示
• 必須項目の表示

モーダル

• フォーカスを内部に閉じ込める
• Escape キーで閉じる
• 暗いオーバーレイ（不透明度50～70%）

レスポンシブのブレークポイント

トークン	最小幅
sm	640px
md	768px
lg	1024px
xl	1280px

ダークモード

:root {
  --background: #ffffff;
  --foreground: #000000;
}
[data-theme="dark"] {
  --background: #000000;
  --foreground: #ffffff;
}

関連項目

• デザインパターン - アトミックデザイン、トークン、コンポーネントのドキュメント
• コードレビュー標準 - アクセシビリティのチェック
• generic-ux-designer - UX フローとリサーチに関する判断
• プロジェクトの CLAUDE.md - プロジェクト固有のデザイン制約

次の場合は参照してください：

• 新しいデザインシステムのセットアップ → DESIGN_PATTERNS.md（全体構成）
• 複雑なコンポーネントパターン → DESIGN_PATTERNS.md（アトミックデザインのセクション）