design-system
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
소스 정보
- 저장소
- affaan-m/ECC
- 최근 소스 활동
- 2026년 5월 17일 06:31
- 감지된 SKILL.md 언어
- 일본어
- 스타
- 264,820
- 포크
- 39,570
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- design-system
- description
- アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
- origin
- ECC
# デザイン システム
スケーラブルで保守可能なデザインシステムの構築。
## 使用時期
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装
## コア要素
### 1. デザイントークン
色、タイポグラフィ、スペーシング、シャドウの中央コレクション。
### 2. コンポーネント
ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。
### 3. レイアウトパターン
ページレイアウト、フォーム、グリッド。
### 4. アイコン
SVGベースのアイコンライブラリ。
## ツール
- **Figma** 設計ツール
- **Storybook** コンポーネント展示
- **Chromatic** ビジュアルテスト
- **Design tokens** JSON管理
## チェックリスト
- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用
詳細については、ドキュメントを参照してください。
GitHub에서 보기