# Design System

> アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

- Skill: `thedixitjain/design-system` (Agent Skill)
- Install (CLI): `npx skillmds add thedixitjain/design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedixitjain/design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: thedixitjain (https://skillmd.com/u/thedixitjain)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/thedixitjain/design-system

---

# デザイン システム

スケーラブルで保守可能なデザインシステムの構築。

## 使用時期

- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装

## コア要素

### 1. デザイントークン

色、タイポグラフィ、スペーシング、シャドウの中央コレクション。

### 2. コンポーネント

ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。

### 3. レイアウトパターン

ページレイアウト、フォーム、グリッド。

### 4. アイコン

SVGベースのアイコンライブラリ。

## ツール

- **Figma** 設計ツール
- **Storybook** コンポーネント展示
- **Chromatic** ビジュアルテスト
- **Design tokens** JSON管理

## チェックリスト

- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用

詳細については、ドキュメントを参照してください。

---

**Source:** [`affaan-m/ECC`](https://github.com/affaan-m/ECC) → `docs/ja-JP/skills/design-system/SKILL.md`