ui-design-system について
スケーラブルなデザインシステムの作成と保守に使うツールキットです。ブランドカラーからデザイントークンを生成し、コンポーネント設計、レスポンシブデザイン、アクセシビリティ、開発者への引き継ぎを支援します。
主な機能
- 01色・タイポグラフィ・間隔のトークン生成
- 02JSON、CSS、SCSS形式での出力
- 03レスポンシブブレークポイントの設定
- 04シャドウとアニメーションのトークン生成
- 05コンポーネント設計と開発者への引き継ぎ
活用シーン
- 01ブランドカラーからトークンを生成
- 02開発者向けのデザインシステムファイル作成
- 03レスポンシブな間隔とブレークポイントの定義
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応