Design system
Skill mturac/everything-openai-codex/docs/ja-JP/skills/design-system
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。From its SKILL.md
npx -y skills add mturac/everything-openai-codex --skill design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
1.5 KB, 448 tokens by cl100k_base, as published. Nobody here has run it
デザイン システム
スケーラブルで保守可能なデザインシステムの構築。
使用時期
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装
コア要素
1. デザイントークン
色、タイポグラフィ、スペーシング、シャドウの中央コレクション。
2. コンポーネント
ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。
3. レイアウトパターン
ページレイアウト、フォーム、グリッド。
4. アイコン
SVGベースのアイコンライブラリ。
ツール
- Figma 設計ツール
- Storybook コンポーネント展示
- Chromatic ビジュアルテスト
- Design tokens JSON管理
チェックリスト
- トークン定義（色、スペーシング、タイプ）
- 基本コンポーネント実装
- Storybook設定
- アクセシビリティテスト
- ドキュメント作成
- チーム採用
詳細については、ドキュメントを参照してください。
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.