ui-design-system

UI デザインシステムツールキット

スケーラブルなデザインシステムを作成、管理するためのプロフェッショナルなツールキットです。

主な機能

• デザイントークンの生成（色、タイポグラフィ、スペーシング）
• コンポーネントシステムのアーキテクチャ
• レスポンシブデザインの計算
• アクセシビリティへの準拠
• 開発者向け引き継ぎドキュメント

主なスクリプト

design_token_generator.py

ブランドカラーからデザインシステムのトークン一式を生成します。

使用方法：python scripts/design_token_generator.py [brand_color] [style] [format]

• スタイル：modern、classic、playful
• フォーマット：json、css、scss

機能：

• カラーパレット一式の生成
• モジュール式のタイポグラフィスケール
• 8pt スペーシンググリッドシステム
• シャドウとアニメーションのトークン
• レスポンシブブレークポイント
• 複数のエクスポート形式

検証

完了を報告する前に、生成したトークンまたは引き継ぎ用の成果物が、指定されたブランドカラー、出力形式、アクセシビリティの制約、対象となる実装先に適合していることを検証してください。スクリプトの使用時は、代表的な入力値を指定してコマンドを実行し、出力された JSON／CSS／SCSS の構文が有効で、ブランドカラーが保持されていることを確認してください。