はじめに
Vercel Labsから「v0.com」という、AI を活用した生成ユーザー インターフェイス システムが開発されました！
chatGPTのようにプロンプトを投げるとAIが、Tailwind CSSとShadcn UIをベースにしたUIを実装してくれます。
実装してくれたHTMLとReactのソースコードはコピペで使えます！
現状はベータ版との事ですが、使ってみて便利だと思いましたので感想と簡単な使い方を纏めたいと思います！
V0で出来る事
▪️プロンプトを入力・画像を添付してAIがUIを作成してくれる。
→作成してくれたUIのHTML・Reactのソースコードをコピーできる。
▪️作成してくれたUIに対してプロンプトを入力し、AIが更にブラッシュアップしてくれる。
▪️他の人のプロンプトを参考にUIを作成することができる。
早速使ってみた
▪プロンプトを入力してAIがUIを作成してくれる。
トップ画面はこんな感じです。
シンプルで見やすい！
早速プロンプトを入力してみます！
す、凄い。。。
1分くらいで３つのUIを作成してくれました。
１つ目のUI
2つ目のUI
3つ目のUI
作成してくれたUIのHTML・Reactのソースコードをコピーできる。
ここで失敗！！
操作ミスってトップ画面に戻ってしまいました。。。泣
せっかくなので実験も兼ねて全く同じプロンプトを投げてみます。
同じプロンプトでも、その都度作ってくれるUIは違うみたいです。
右上のCodeをクリックしてみます。
凄い！
ReactとHTMLのソースコードがコピペできるようになってます。
下記が提供してくれたソースコードです。
React
/**
* v0 by Vercel.
* @see https://v0.dev/t/nNKYspIket5
*/
import Link from "next/link"
import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
export default function Component() {
return (
<main className="flex flex-col w-full">
<header className="flex items-center justify-between p-4 bg-[#ffffff] border-b">
<Link className="flex items-center gap-2 font-semibold" href="#">
<ShoppingBagIcon className="h-6 w-6" />
<span>Acme Shop</span>
</Link>
<nav className="flex gap-6">
<Link className="text-gray-900 hover:underline" href="#">
Products
</Link>
<Link className="text-gray-900 hover:underline" href="#">
Cart
</Link>
<Link className="text-gray-900 hover:underline" href="#">
Checkout
</Link>
</nav>
</header>
<section className="grid grid-cols-3 gap-4 p-4">
<Card>
<CardHeader>
<CardTitle>Product 1</CardTitle>
</CardHeader>
<CardContent>
<img
alt="Product 1"
className="w-full h-auto"
height="200"
src="/placeholder.svg"
style={{
aspectRatio: "200/200",
objectFit: "cover",
}}
width="200"
/>
<p className="mt-2 text-gray-900">This is a great product!</p>
<Button className="mt-4">Add to Cart</Button>
</CardContent>
</Card>
</section>
<footer className="p-4 bg-[#ffffff] border-t mt-auto">
<p className="text-center text-gray-600">© 2023 Acme Shop. All rights reserved.</p>
</footer>
</main>
)
}
function ShoppingBagIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
<path d="M3 6h18" />
<path d="M16 10a4 4 0 0 1-8 0" />
</svg>
)
}
HTML
<!--
// v0 by Vercel.
// https://v0.dev/t/nNKYspIket5
-->
<main class="min-h-screen w-full bg-gray-100 p-4 lg:p-8">
<header class="flex items-center justify-between mb-8">
<a class="flex items-center gap-2 text-2xl font-semibold" href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-6 w-6 text-black"
>
<circle cx="8" cy="21" r="1"></circle>
<circle cx="19" cy="21" r="1"></circle>
<path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
</svg>
<span>E-Shop</span>
</a>
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
Sign In
</button>
</header>
<section class="grid lg:grid-cols-3 gap-4">
<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
<div class="flex flex-col space-y-1.5 p-6 pb-4">
<h3 class="text-2xl font-semibold leading-none tracking-tight">Product 1</h3>
</div>
<div class="p-6 flex flex-col items-center">
<img
src="/placeholder.svg"
alt="Product 1"
width="200"
height="200"
style="aspect-ratio: 200 / 200; object-fit: cover;"
/>
<p class="my-4">$49.99</p>
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
Add to cart
</button>
</div>
</div>
<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
<div class="flex flex-col space-y-1.5 p-6 pb-4">
<h3 class="text-2xl font-semibold leading-none tracking-tight">Product 2</h3>
</div>
<div class="p-6 flex flex-col items-center">
<img
src="/placeholder.svg"
alt="Product 2"
width="200"
height="200"
style="aspect-ratio: 200 / 200; object-fit: cover;"
/>
<p class="my-4">$29.99</p>
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
Add to cart
</button>
</div>
</div>
<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
<div class="flex flex-col space-y-1.5 p-6 pb-4">
<h3 class="text-2xl font-semibold leading-none tracking-tight">Product 3</h3>
</div>
<div class="p-6 flex flex-col items-center">
<img
src="/placeholder.svg"
alt="Product 3"
width="200"
height="200"
style="aspect-ratio: 200 / 200; object-fit: cover;"
/>
<p class="my-4">$59.99</p>
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
Add to cart
</button>
</div>
</div>
</section>
</main>
作成してくれたUIに対してプロンプトを入力し、AIが更にブラッシュアップ
３つのUIの中でブラッシュアップしたいものは、改めてプロンプトを投げてブラッシュアップすることができます。
カテゴリーが追加されて、少しリッチな感じになった気がします！
抽象的な質問もしてみます。
本当に購買意欲が湧くかは置いといて、しっかり色合いまで考えてくれます！
左側にはヒストリーとして、今まで変更したUIを確認することができます。
画像を添付してUIを作ってもらう
画像を添付してUIを作成してもらうこともできます！
検索バー右側の画像マークをクリックします。
試しにNetflixの画像を使います！
実際に使ったNetflixの画像
プロンプト入力
画像でも3枚のUIを作ってくれました。
1枚目のUI
2枚目のUI
3枚目のUI
凄すぎて草。
フッターに齟齬がありますが、プロンプトを投げて修正すればOKだと思います。
1枚目をブラッシュアップしたら更に良くなりそうです！
▪️他の人のプロンプトを参考にUIを作成することができる。
トップページ下部には他の方が作成したUIを参考にすることができます。
グラフや3Dなども作っていて、V0でここまで出来るのか！？と驚かされます。
さいごに
最後まで見て頂きありがとうございました！
正直めちゃくちゃ便利で、デザインのアイディア出しなどにも使えるな〜と思いました。
ベータ版なので、これからの新機能が楽しみです！