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 查看