design-system
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
Quellinformationen
- Repository
- affaan-m/ECC
- Letzte Quellaktivität
- 17. Mai 2026 um 06:31
- Erkannte Sprache von SKILL.md
- Japanisch
- Sterne
- 264.820
- Forks
- 39.570
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- design-system
- description
- アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
- origin
- ECC
# デザイン システム
スケーラブルで保守可能なデザインシステムの構築。
## 使用時期
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装
## コア要素
### 1. デザイントークン
色、タイポグラフィ、スペーシング、シャドウの中央コレクション。
### 2. コンポーネント
ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。
### 3. レイアウトパターン
ページレイアウト、フォーム、グリッド。
### 4. アイコン
SVGベースのアイコンライブラリ。
## ツール
- **Figma** 設計ツール
- **Storybook** コンポーネント展示
- **Chromatic** ビジュアルテスト
- **Design tokens** JSON管理
## チェックリスト
- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用
詳細については、ドキュメントを参照してください。
Auf GitHub ansehen