概要
複数画面・複数コンポーネントにまたがって一貫性のあるデザインを v0 で生成するには、デザインシステムの仕様をプロンプトに組み込む方法を習得することが重要です。
デザインシステム準拠の生成手順
- カラー・フォント・角丸・シャドウなどのデザイントークンをテキストでまとめておく
- v0 のプロンプト冒頭に「デザインシステム: プライマリー #2563EB・角丸 8px・フォント Inter」と貼り付ける
- 既存コンポーネントのスクリーンショットを添付して「このスタイルに合わせて」と指示する
- 生成されたコードの Tailwind クラスを tailwind.config のカスタムテーマに対応させる
- v0 の「システムプロンプト」機能でデザイン仕様を毎回自動で適用されるよう設定する
ブランド一貫性を保つコツ
- Figma のデザイントークンをエクスポートしてプロンプトに貼り付けると精度が上がる
- 承認済みコンポーネントのコードを v0 のコンテキストとして提供して参照させる
- 定期的に生成物をデザインレビューしてドリフト（乖離）を早期に発見する