---

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

デザイン システム

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

使用時期

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

コア要素

1. デザイントークン

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

2. コンポーネント

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

3. レイアウトパターン

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

4. アイコン

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

ツール

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

チェックリスト

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

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