概要
v0 はプロンプト入力・プレビュー・コードエディタが統合されたUIで操作します。生成されたUIをリアルタイムに確認しながら対話形式で改善できるのが最大の特徴です。
基本インターフェースの操作手順
- v0.dev にアクセスしてプロンプト入力欄に作りたいUIを入力する
- 生成されたUIはプレビューパネルで確認し、PC・スマホ表示を切り替えて確認する
- 「Code」タブに切り替えると生成された React + Tailwind CSS のコードを確認できる
- プレビュー上でコンポーネントをクリックすると対応するコードが強調表示される
- 「Add to Codebase」または「Copy」でコードをプロジェクトに取り込む
インターフェース活用のコツ
- プレビューはスマホ・タブレット・PCの各サイズで必ず確認する
- コードタブのコードは直接編集もできてリアルタイムでプレビューに反映される
- 「Fork」機能で別バージョンを作成して複数案を比較できる