Yesterday, after a long wait, I received private access to the new version of v0! If you live on Mars and don’t know what v0 is, it’s a product by Vercel that allows you to create UI interfaces and components using generative AI (e.g. prompts). Given my fascination with generative artificial intelligence, I decided to take it for a ride! So let’s dive in!

If you get access to the Alpha product, you get 200 credits for your account, as well as a minimal user interface that basically only lets you browse user-generated UIs, as well as an input field that you can use to formulate an idea for a component or layout.

Prompt: A modern music player that shows album image, artist name, song title and basic music controls.

Cost: 30 (10x3) credits.

https://v0.dev/t/mHWFry53YIo

Code:

1**
2 * v0 by Vercel.
3 * @see https://v0.dev/t/mHWFry53YIo
4 */
5import { Button } from "@/components/ui/button"
6
7export default function Component() {
8  return (
9    <div className="flex flex-col items-center justify-center bg-white dark:bg-zinc-800 min-h-screen">
10      <div className="p-4 sm:p-8 lg:p-16">
11        <div className="relative rounded-lg overflow-hidden aspect-w-1 aspect-h-1 bg-zinc-200 dark:bg-zinc-700">
12          <img
13            alt="Album cover"
14            height="500"
15            layout="fill"
16            objectFit="cover"
17            src="/placeholder.svg"
18            style={{
19              aspectRatio: "500/500",
20              objectFit: "cover",
21            }}
22            width="500"
23          />
24        </div>
25        <h2 className="text-2xl mt-8 text-center font-semibold text-zinc-900 dark:text-zinc-50">Song Title</h2>
26        <p className="text-lg text-center text-zinc-600 dark:text-zinc-400">Artist Name</p>
27        <div className="flex items-center justify-center gap-8 mt-8">
28          <Button size="icon" variant="ghost">
29            <svg
30              className=" h-6 w-6"
31              fill="none"
32              height="24"
33              stroke="currentColor"
34              strokeLinecap="round"
35              strokeLinejoin="round"
36              strokeWidth="2"
37              viewBox="0 0 24 24"
38              width="24"
39              xmlns="http://www.w3.org/2000/svg"
40            >
41              <path d="m15 18-6-6 6-6" />
42            </svg>
43            <span className="sr-only">Previous</span>
44          </Button>
45          <Button className="text-white bg-zinc-900 dark:bg-zinc-50" size="icon" variant="primary">
46            <svg
47              className=" h-6 w-6"
48              fill="none"
49              height="24"
50              stroke="currentColor"
51              strokeLinecap="round"
52              strokeLinejoin="round"
53              strokeWidth="2"
54              viewBox="0 0 24 24"
55              width="24"
56              xmlns="http://www.w3.org/2000/svg"
57            >
58              <polygon points="5 3 19 12 5 21 5 3" />
59            </svg>
60            <span className="sr-only">Play</span>
61          </Button>
62          <Button size="icon" variant="ghost">
63            <svg
64              className=" h-6 w-6"
65              fill="none"
66              height="24"
67              stroke="currentColor"
68              strokeLinecap="round"
69              strokeLinejoin="round"
70              strokeWidth="2"
71              viewBox="0 0 24 24"
72              width="24"
73              xmlns="http://www.w3.org/2000/svg"
74            >
75              <path d="m9 18 6-6-6-6" />
76            </svg>
77            <span className="sr-only">Next</span>
78          </Button>
79        </div>
80      </div>
81    </div>
82  )
83}

https://v0.dev/t/ZgxbJ7ggtKb

Code:

1/**
2 * v0 by Vercel.
3 * @see https://v0.dev/t/ZgxbJ7ggtKb
4 */
5import { Button } from "@/components/ui/button"
6
7export default function Component() {
8  return (
9    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-100">
10      <div className="w-80 h-80 rounded-lg overflow-hidden shadow-lg">
11        <img
12          alt="Album cover"
13          height="320"
14          src="/placeholder.svg"
15          style={{
16            aspectRatio: "320/320",
17            objectFit: "cover",
18          }}
19          width="320"
20        />
21      </div>
22      <h2 className="mt-4 text-2xl font-bold">Song Title</h2>
23      <h3 className="mt-2 text-xl text-gray-500 dark:text-gray-400">Artist Name</h3>
24      <div className="mt-8 w-full flex items-center justify-center">
25        <Button size="icon" variant="ghost">
26          <svg
27            className=" h-6 w-6"
28            fill="none"
29            height="24"
30            stroke="currentColor"
31            strokeLinecap="round"
32            strokeLinejoin="round"
33            strokeWidth="2"
34            viewBox="0 0 24 24"
35            width="24"
36            xmlns="http://www.w3.org/2000/svg"
37          >
38            <polygon points="11 19 2 12 11 5 11 19" />
39            <polygon points="22 19 13 12 22 5 22 19" />
40          </svg>
41          <span className="sr-only">Previous</span>
42        </Button>
43        <Button className="mx-4" color="primary" variant="solid">
44          <svg
45            className=" h-6 w-6"
46            fill="none"
47            height="24"
48            stroke="currentColor"
49            strokeLinecap="round"
50            strokeLinejoin="round"
51            strokeWidth="2"
52            viewBox="0 0 24 24"
53            width="24"
54            xmlns="http://www.w3.org/2000/svg"
55          >
56            <polygon points="5 3 19 12 5 21 5 3" />
57          </svg>
58          <span className="sr-only">Play</span>
59        </Button>
60        <Button size="icon" variant="ghost">
61          <svg
62            className=" h-6 w-6"
63            fill="none"
64            height="24"
65            stroke="currentColor"
66            strokeLinecap="round"
67            strokeLinejoin="round"
68            strokeWidth="2"
69            viewBox="0 0 24 24"
70            width="24"
71            xmlns="http://www.w3.org/2000/svg"
72          >
73            <polygon points="13 19 22 12 13 5 13 19" />
74            <polygon points="2 19 11 12 2 5 2 19" />
75          </svg>
76          <span className="sr-only">Next</span>
77        </Button>
78      </div>
79      <div className="mt-4 w-full h-1 bg-gray-300 dark:bg-gray-700 rounded-full">
80        <div
81          className="h-full bg-primary-600 rounded-full"
82          style={{
83            width: "50%",
84          }}
85        />
86      </div>
87      <div className="mt-8 w-full flex items-center justify-between">
88        <Button size="icon" variant="ghost">
89          <svg
90            className=" h-6 w-6"
91            fill="none"
92            height="24"
93            stroke="currentColor"
94            strokeLinecap="round"
95            strokeLinejoin="round"
96            strokeWidth="2"
97            viewBox="0 0 24 24"
98            width="24"
99            xmlns="http://www.w3.org/2000/svg"
100          >
101            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
102            <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
103            <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
104          </svg>
105          <span className="sr-only">Volume</span>
106        </Button>
107        <Button size="icon" variant="ghost">
108          <svg
109            className=" h-6 w-6"
110            fill="none"
111            height="24"
112            stroke="currentColor"
113            strokeLinecap="round"
114            strokeLinejoin="round"
115            strokeWidth="2"
116            viewBox="0 0 24 24"
117            width="24"
118            xmlns="http://www.w3.org/2000/svg"
119          >
120            <path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22" />
121            <path d="m18 2 4 4-4 4" />
122            <path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2" />
123            <path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8" />
124            <path d="m18 14 4 4-4 4" />
125          </svg>
126          <span className="sr-only">Shuffle</span>
127        </Button>
128      </div>
129    </div>
130  )
131}

https://v0.dev/t/QaHy0BaZ97d

Code:

1/**
2 * v0 by Vercel.
3 * @see https://v0.dev/t/QaHy0BaZ97d
4 */
5import { Button } from "@/components/ui/button"
6
7export default function Component() {
8  return (
9    <div className="bg-white dark:bg-zinc-800 rounded-lg overflow-hidden shadow-lg max-w-md mx-auto">
10      <img
11        alt="Album cover"
12        className="object-cover w-full h-64"
13        height="300"
14        src="/placeholder.svg"
15        style={{
16          aspectRatio: "300/300",
17          objectFit: "cover",
18        }}
19        width="300"
20      />
21      <div className="p-4">
22        <h3 className="font-bold text-xl mb-1">Song Title</h3>
23        <p className="text-zinc-500 dark:text-zinc-400">Artist Name</p>
24        <div className="mt-4 flex justify-between items-center">
25          <Button size="icon" variant="ghost">
26            <svg
27              className=" h-6 w-6"
28              fill="none"
29              height="24"
30              stroke="currentColor"
31              strokeLinecap="round"
32              strokeLinejoin="round"
33              strokeWidth="2"
34              viewBox="0 0 24 24"
35              width="24"
36              xmlns="http://www.w3.org/2000/svg"
37            >
38              <path d="m17 2 4 4-4 4" />
39              <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
40              <path d="m7 22-4-4 4-4" />
41              <path d="M21 13v1a4 4 0 0 1-4 4H3" />
42            </svg>
43          </Button>
44          <Button size="icon" variant="ghost">
45            <svg
46              className=" h-6 w-6"
47              fill="none"
48              height="24"
49              stroke="currentColor"
50              strokeLinecap="round"
51              strokeLinejoin="round"
52              strokeWidth="2"
53              viewBox="0 0 24 24"
54              width="24"
55              xmlns="http://www.w3.org/2000/svg"
56            >
57              <path d="m12 19-7-7 7-7" />
58              <path d="M19 12H5" />
59            </svg>
60          </Button>
61          <Button className="px-4" variant="outline">
62            <svg
63              className=" h-6 w-6"
64              fill="none"
65              height="24"
66              stroke="currentColor"
67              strokeLinecap="round"
68              strokeLinejoin="round"
69              strokeWidth="2"
70              viewBox="0 0 24 24"
71              width="24"
72              xmlns="http://www.w3.org/2000/svg"
73            >
74              <polygon points="5 3 19 12 5 21 5 3" />
75            </svg>
76          </Button>
77          <Button size="icon" variant="ghost">
78            <svg
79              className=" h-6 w-6"
80              fill="none"
81              height="24"
82              stroke="currentColor"
83              strokeLinecap="round"
84              strokeLinejoin="round"
85              strokeWidth="2"
86              viewBox="0 0 24 24"
87              width="24"
88              xmlns="http://www.w3.org/2000/svg"
89            >
90              <path d="M5 12h14" />
91              <path d="m12 5 7 7-7 7" />
92            </svg>
93          </Button>
94          <Button size="icon" variant="ghost">
95            <svg
96              className=" h-6 w-6"
97              fill="none"
98              height="24"
99              stroke="currentColor"
100              strokeLinecap="round"
101              strokeLinejoin="round"
102              strokeWidth="2"
103              viewBox="0 0 24 24"
104              width="24"
105              xmlns="http://www.w3.org/2000/svg"
106            >
107              <path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22" />
108              <path d="m18 2 4 4-4 4" />
109              <path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2" />
110              <path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8" />
111              <path d="m18 14 4 4-4 4" />
112            </svg>
113          </Button>
114        </div>
115        <div className="mt-4 flex items-center">
116          <p className="text-zinc-500 dark:text-zinc-400">0:00</p>
117          <div className="mx-2 flex-1 bg-zinc-200 rounded-full h-1">
118            <div
119              className="bg-zinc-900 rounded-full h-1"
120              style={{
121                width: "50%",
122              }}
123            />
124          </div>
125          <p className="text-zinc-500 dark:text-zinc-400">3:30</p>
126        </div>
127        <div className="mt-4 flex items-center justify-between">
128          <div className="flex items-center gap-4">
129            <svg
130              className=" h-6 w-6"
131              fill="none"
132              height="24"
133              stroke="currentColor"
134              strokeLinecap="round"
135              strokeLinejoin="round"
136              strokeWidth="2"
137              viewBox="0 0 24 24"
138              width="24"
139              xmlns="http://www.w3.org/2000/svg"
140            >
141              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
142              <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
143              <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
144            </svg>
145            <div className="bg-zinc-200 rounded-full h-1 w-20">
146              <div
147                className="bg-zinc-900 rounded-full h-1"
148                style={{
149                  width: "75%",
150                }}
151              />
152            </div>
153          </div>
154          <Button size="icon" variant="ghost">
155            <svg
156              className=" h-6 w-6"
157              fill="none"
158              height="24"
159              stroke="currentColor"
160              strokeLinecap="round"
161              strokeLinejoin="round"
162              strokeWidth="2"
163              viewBox="0 0 24 24"
164              width="24"
165              xmlns="http://www.w3.org/2000/svg"
166            >
167              <path d="M21 15V6" />
168              <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
169              <path d="M12 12H3" />
170              <path d="M16 6H3" />
171              <path d="M12 18H3" />
172            </svg>
173          </Button>
174        </div>
175      </div>
176    </div>
177  )
178}

The third variation was the one I liked most, but it felt a bit monotonous and too minimalistic. Luckily, v0 does allow you to fine-tune the results by adding more context. In this case, I asked AI to add bold colors. Now let’s see the result:

Add bold colors and change the font that will make the layout more appealing to gen-z.

There was a cost of 10 additional credits for this. Here is what the AI came up with:

https://v0.dev/t/7TIGMatZcW6

In order to add functionality to the layout, all I have to do is run the following command in my development environment:

1npx v0 add 7TIGMatZcW6

Neat!

Prompt: layout for a fintech blog

Cost: 30 (10x3) credits.

https://v0.dev/t/8lwwCW9LvTo

https://v0.dev/t/OJtUaN62nP6

https://v0.dev/t/oOfkGOkOks2

It seems like the second variation makes the most sense to me, and so I will continue to play with it as I continue with this test.

In all layouts and 2nd variation, the social icons are aligned vertically. With the “pick and edit” feature, it’s easy to adjust that alignment. Let’s change that by using the “pick and edit” feature.

The pick and edit operation is going to cost you an additional 10 credits, but it will be totally worth it when you see how perfectly aligned the social icons are now:

• At its current stage, v0 is not a plug-n-play solution. Its current price ranges from $10 to $50. In my opinion, the 200 credits a month plan isn’t sufficient for enough iterations to come up with an effective design. But don’t get me wrong — v0 can save your team hours of tedious work by generating a baseline layout that they can take and work on. I am confident that with time, Vercel’s AI model will become much smarter and generate better and more precise results.

• The code generator used in v0 includes the use of best practices and takes advantage of frameworks such as TailwindCSS in order to generate modern code.
• However, having said that, due to some reason, v0 does not use a framework for icon creation and instead uses SVG files. It could easily leverage react-icons or the infamous font-awesome frameworks.
• The v0 CLI tool is really cool! With a single command, it adds your creation to your project. Can’t be more convenient.
• It would be even cooler if I could edit the generated code and work with the AI companion on it.
• If you are not a Vercel user, v0 will let you fork the code and work with it directly in a clean repository.

In conclusion, the direction of taking advantage in generative AI in web development is a game changer for everyone involved: designers, developers and product managers. It opens the doors for non-tech savvy people to express their requirements more precisely, build functional wireframes and mockups. For us, the developers, it will soon be possible to concentrate on functionality and write high-quality code, and not waste precious time playing around with pixels. The future is bright!