v0とは？

v0は、Vercelが提供するAI駆動型のUI生成ツールです。
自然言語のプロンプトからReactやNextのコードを自動生成でき、開発者はテキストや画像を使って素早くUIを作成できます。

実際に使ってみる

1. Vercelアカウントの作成

v0 を利用するには、Vercel のアカウントが必要です。既にアカウントを持っている場合は、サインインしてください。

2. Figmaと連携

v0 ではテキストや画像の入力からコードを生成できます。1週間前に確認したときは、Figmaを使うにはプレミアムプランが必要でしたが、今回触ってみるとフリープランでもFigmaとの連携ができたので早速試してみます。

サインインをするとFigmaに飛ぶので、アクセスを許可します。

作成したいデザインにフォーカスを当て「Share」ボタンをクリックし、「Copy link」を押してURLを取得します。今回はチャット画面で試してみます。

3. コード生成

v0に戻り、URLを貼り付け、「Next」をクリックします。

Figmaがインポートされ、使用しているカラーなど正しく認識されています。「Confirm」を押すとコードが生成され始めます。

あっという間にコードが自動生成されました！「Preview」ボタンで画面を確認できます。

送信ボタンがなかったため、追加でチャットをし編集してもらいました。

4. コードの確認と修正

Add to Codebaseボタンを押し、表示されたポップアップ内のコマンドラインをコピーします。こちらは後ほど使用します。

次に、生成したコードをローカル環境で確認するために、Cursorを起動します。

Cursorとは？

AIアシスト機能が搭載されたコードエディタで、コードの補完・修正・リファクタリングを AI がサポートしてくれます。VS Codeはオープンソースになっており、Cursorはそのエディタをforkして作られています。

先ほどコピーしたものをターミナルに貼り付けると、プロジェクトが作成されます。


% npx shadcn@latest add "https://v0.dev/chat/b/b_iWjcHmQigVj?token=..."
✔ Creating a new Next.js project.
✔ What is your project named? … v0_futekoi_app
✔ Writing components.json.
✔ Created 2 files:
  - tailwind.config.js
  - chat.tsx

v0は shadcn/ui というUIライブラリでコンポーネントが出力されます。先ほどのように shadcu の add コマンドを使うと、プロジェクトにコンポーネントと依存関係を追加することができます。　https://ui.shadcn.com/docs/cli

chat.tsx のファイル構成が間違っていたり、送信ボタンを押しても画面に反映されなかったため、Cursor の Composer 機能を使って修正をしていきます。 Composer は「Command + I 」で開かれます。関連するファイルを選択し、プロンプトを入力します。

localhost:3000/chat で表示でき、メッセージも送信されるようになりました！