ui-design-system について
ui-design-systemは、拡張性のあるデザインシステムの作成と維持を支援するツールキットです。ブランドカラーからトークンを生成し、コンポーネント設計、レスポンシブ対応、アクセシビリティ、開発者向け資料を扱います。
主な機能
- 01ブランドカラーからデザイントークンを生成
- 02JSON、CSS、SCSS形式でエクスポート
- 03モジュール式の書体とカラースケール
- 048ptスペーシンググリッドとレスポンシブブレークポイント
- 05シャドウとアニメーションのトークン定義
活用シーン
- 01ブランドカラーからトークンセットを生成
- 02実装向けにデザイントークンをエクスポート
- 03コンポーネント間の余白と書体を統一
- 04開発者への引き継ぎ資料を準備
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/ui-design-systemを入力して読み込まれたか確認します。
同梱ファイルscripts/design_token_generator.py
詳細
UIデザインシステム
スケーラブルなデザインシステムの作成と保守のためのプロフェッショナルなツールキットです。
主な機能
- デザイントークンの生成（色、タイポグラフィ、スペーシング）
- コンポーネントシステムのアーキテクチャ
- レスポンシブデザインの計算
- アクセシビリティ準拠
- 開発者への引き渡しドキュメント
主要スクリプト
design_token_generator.py
ブランドカラーからデザインシステムの完全なトークンを生成します。
使用方法: python scripts/design_token_generator.py [brand_color] [style] [format]
- スタイル: modern, classic, playful
- フォーマット: json, css, scss
機能:
- 完全なカラーパレットの生成
- モジュラータイプスケール（タイポグラフィ）
- 8ptスペーシンググリッドシステム
- シャドウとアニメーションのトークン
- レスポンシブブレークポイント
- 複数のエクスポート形式
コメント
Markdown 対応