デザイントークンジェネレーター

デザイントークンジェネレーターは、カラー、スペーシング、 タイポグラフィ、ボーダー、シャドウの5つのコアカテゴリにわたる デザイントークンを作成・管理するための無料ブラウザベースツールです。 デザイントークンはデザインシステムの原子的な構成要素であり、 primary: #3b82f6やspacing-md: 1remのようなビジュアルな設計上の決定を取り込んだ 名前付きの値です。

スタイルシート全体にマジックナンバーを散らばす代わりに、 このツールですべてのトークンを一箇所で定義し、プロジェクトに 必要な形式でエクスポートできます：CSSカスタムプロパティ （:root { --colors-primary: #3b82f6; }）、デザインシステムツール用のJSON、 Sassプロジェクト用のSCSS変数、またはtailwind.config.jsに 貼り付けるだけのTailwind CSS設定オブジェクトです。

3つのビルトインプリセット—Material Design、Minimal Dark、 Bootstrap-like—がスタートポイントを提供します。各プリセットには 5つのカテゴリすべてのトークンが含まれており、完全な トークンシステムがどのように構成されるかを確認できます。

ライブプレビューパネルでは、カラースウォッチ、スペーシングスケールバー、 タイポグラフィサンプル、ボーダーラジアスの形状、シャドウの エレベーションが編集に合わせてリアルタイムで更新されます。

より深いカラーテーマが必要な場合は、 CSS変数ジェネレーターと組み合わせてください。 Tailwind固有の設定には、 Tailwind Config BuilderがTailwindの設定形式に 特化したビジュアルエディターを提供します。色形式の変換には、 Color ConverterがHEX、RGB、HSLの変換を処理します。

すべての処理はブラウザ内で完全に実行されます。トークンデータ、 テーマ設定、生成された出力がサーバーに送信されることはありません。 デザインの決定はお使いの端末内に留まります。

1. ドロップダウンからプリセットを選択して事前設定されたトークンセットで始めるか、ゼロから始めます。
2. カテゴリタブ（Colors、Spacing、Typography、Borders、Shadows）を使用してトークンタイプ間を移動します。
3. Add Tokenをクリックしてアクティブなカテゴリに新しいトークンを作成します。説明的な名前と値を付けてください。
4. カラートークンには、カラーピッカーを使用して色を視覚的に選択するか、16進数値を直接入力します。
5. 出力形式（CSSカスタムプロパティ、JSON、SCSS変数、Tailwind Config）をFormatドロップダウンから選択します。
6. ライブプレビューパネルでトークンが正しく見えるか確認します—カラースウォッチ、スペーシングバー、シャドウプレビューがリアルタイムで更新されます。
7. CopyをクリックするかCtrl+Shift+Cを押して生成された出力をクリップボードにコピーするか、Downloadをクリックしてファイルとして保存します。