概要
v0 のコードをそのまま使うだけでなく、既存プロジェクトのコーディング規約・カラーシステム・コンポーネント設計に合わせて調整する方法を習得しましょう。
コード統合の実践手順
- v0 で生成したコードを「Code」タブでコピーして src/components に配置する
- Tailwind の任意クラス（
bg-[#FF6B6B]）をデザイントークン変数（bg-primary）に置き換える - props でカスタマイズ可能にするため、ハードコードされた文字列を props 化する
- 既存の UI コンポーネントライブラリと重複する部分は削除して一本化する
- TypeScript の型定義を追加して型安全性を確保する
スムーズな統合のポイント
- v0 に「既存のコンポーネント: Button, Input, Card を使って実装して」と指定すると整合性が取れる
- 色やフォントサイズは v0 のプロンプト段階でデザイントークン名で指定するのが理想
- Storybook に組み込んでコンポーネント単体で動作確認してから本体に統合する