design-system-generator

デザインシステムジェネレーター

トークンベースのデザインシステムを生成します。トークン、基本コンポーネント、ビルド設定、ドキュメントが含まれます。

目次

• references/design-tokens.md — カラー、タイポグラフィ、スペーシング、シャドウ、角丸のトークンファイルと、CSS 変数の設定。
• references/components.md — Button、Input、Card の実装と、コンポーネントのバレルインデックス。
• references/config-and-utilities.md — Tailwind の設定と、cn クラス結合ヘルパー。

ワークフロー

1. デザイントークンを定義します。references/design-tokens.md に従って、カラー、タイポグラフィ、スペーシング、エフェクト（シャドウ、角丸）を含む tokens/ を作成します。参照値をプロジェクトのブランドパレットに置き換えます。
2. CSS 変数を追加します。references/design-tokens.md の変数ブロックを使って、globals.css に :root と .dark のカスタムプロパティを設定します。
3. ビルドを構成します。references/config-and-utilities.md に従って、cn ヘルパーを追加し、トークンファイルを使って Tailwind のテーマを拡張します。
4. 基本コンポーネントを作成します。references/components.md にある Button、Input、Card を実装し、製品の要件に応じてセットを拡張します。
5. バレルをエクスポートします。components/ui/index.ts から、提供するすべてのコンポーネントを再エクスポートします（references/components.md を参照）。
6. 使用方法とバリアントをドキュメント化します。各コンポーネントについて、利用者が一貫して適用できるよう、バリアント、サイズ、プロパティ、アクセシビリティ上の動作を記載します。