v0 × Cursorを活用して、FigmaからUIを自動生成する

# **v0とは？**

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


# **実際に使ってみる**

### **1. Vercelアカウントの作成**

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


![vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/436ab957-36c5-4b62-8d32-0292810bdfdb.png)



### **2. Figmaと連携**

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

![figmaimport.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/1a703500-a329-4ee1-9a23-b1494a331e58.png)




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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/c508b067-2e5e-4543-8b27-94cfb90c6d0f.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/8c680d57-9e99-469d-b030-fda1434941c8.png)


![415133646-df6e9add-0fd7-4c8a-b71b-b634fc145dcb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/2eb7a4e3-850c-4654-bcff-2cefe10eaa28.png)


### **3. コード生成**

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/f3b32073-fc4a-4eca-ab7d-c0f5ee70a429.png)



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


![continue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/a6df07b0-97ce-421c-b1b7-a2c6631a5fd4.png)


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


![preview2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/2d314365-d3ef-4b84-ac38-5ce8757e828e.png)

![preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/eb54a69b-986e-4c8d-92d6-6cba75f37b71.png)

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


![send.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/23a7a5bc-d047-4f34-8d1f-cef46b34c338.png)




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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/34b39cc5-f6a2-41f6-a8ff-fae386b03337.png)


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


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

![cursor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/2786edc5-f258-4430-9bc2-73e32c0a6947.png)

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


```bash

% 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 」で開かれます。関連するファイルを選択し、プロンプトを入力します。

![composer1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/702c66b0-92c1-4556-964b-d151328eb367.png)

![composer2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/1c4e057d-91e1-45cd-bfbd-120bb5ba8b45.png)



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

![画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/9644e590-af6f-4ec0-902c-7ee1ce86c242.png)

![2025-02-2018.40.30-ezgif.com-video-to-gif-converter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/82e8424a-7e1e-47b8-9910-03b07cd3999f.gif)