Tendril

Tendril · Builders · Tools Literacy

AI and v0.dev: turning prompts into UI components

Use v0 to generate React components from a description.

40 min · Reviewed 2026

The big idea

v0 by Vercel takes a description like 'a card with a price, three features, and a buy button' and generates the React + Tailwind code. It's a designer's first pass at superhuman speed.

Some examples

Generate a pricing card from a description
Generate a navbar with mobile menu
Iterate on the design with chat
Copy the code into your real project

Try it!

Go to v0.dev. Describe a UI component you've been putting off building. Generate it. Tweak the prompt twice to get closer to your vision.

AI and v0.dev: Generate UI From a Sentence

The big idea

v0.dev generates React + Tailwind + shadcn UI from a prompt. Iterate visually, then copy the code into your Next.js project. Great for landing pages and dashboards.

Some examples

Prompt: 'A SaaS pricing page with monthly/yearly toggle and 3 tiers.'
v0 lets you fork variants and pick your favorite.
Generated code uses shadcn components — easy to customize.
Push your v0 generation to a live Vercel deploy in one click.

Try it!

Generate a v0 page for a fake side project. Tweak it 3 times. Copy the code into a Next.js app.

Vibe-Coding With v0 and Lovable When You Just Want a Working App

The big idea

Vercel's v0 and Lovable are AI app builders. You describe what you want in plain English ('a habit tracker with dark mode'), and they generate a real, working, hosted Next.js app you can share with a link. They're not a substitute for learning to code — they're a way to ship a prototype before you've learned all of React.

Some examples

v0: 'Build me a Pokémon team builder with drag-and-drop.' Out comes a working UI in 90 seconds.
Lovable: 'A diary app where each entry has a mood emoji and a date.' Real, hosted, works.
Both let you keep iterating ('make the buttons bigger', 'add login') in plain English.
Both export real Next.js code so you can graduate to editing it yourself in Cursor or VS Code.

Try it!

Build something silly on v0.dev or Lovable in 10 minutes — a meme generator, a homework randomizer. Share the link.

v0, Bolt, and Lovable: AI Tools That Build Whole Apps

The big idea

These tools generate, host, and let you edit full web apps from a prompt. Vercel's v0 makes Next.js apps from natural language. Bolt.new spins up a working dev environment in the browser. Lovable handles design + code + hosting in one. Great for hackathons, side projects, MVPs.

Some examples

v0: 'Build a landing page for my LARP club' → working Next.js + Tailwind site.
Bolt.new: 'Build a Pomodoro timer with leaderboard' → live editable project.
Lovable: 'Build a Spanish flashcard app with login' → deployed, with database.
All three let you edit the result by chatting more, or by dropping into the code.

Try it!

Pick one (v0, Bolt, or Lovable). Build a small idea you've had for months. Note how long it took.

Prototyping a UI in v0.dev Before Touching Real Code

The big idea

v0.dev is built for one job: turn a description or screenshot into a real React component. Use it before you write any UI code — even if you throw away the output, you'll have explored more options in 5 minutes than in an hour of coding.

Some examples

You sketch a dashboard in v0, generate 3 versions, then implement the one you like by hand.
v0 reads your screenshot of a competitor and outputs a similar Tailwind layout to start from.
You iterate on a settings page in v0 with prompts like 'make it denser' before committing.
v0's output drops into a Next.js project with minimal cleanup.

Try it!

Open v0.dev. Describe a UI you've been putting off. Generate three versions. Pick one to start from.

Going from a Sketch to React with v0

The big idea

image-to-code is real now and it is fast for prototypes

Some examples

Sketching a settings panel on paper
Refining with prompts after the first draft
Pasting the result into your project

Try it!

Open your favorite AI tool and try one of the examples above. Pick the one that matches what you are actually working on this week. Spend 10 minutes, no more. Notice what worked and what did not — that's the real lesson.

v0.dev: prototype an app from one sentence

The big idea

v0 generates real shadcn/Tailwind code — not a mockup, actual code you can edit.

Some examples

Describe your UI in one sentence.
Iterate by describing changes ('make the button red').
Eject the code into your real project.

Try it!

Generate a landing page on v0 in 10 minutes. Eject it. Push to GitHub.

Understanding "v0.dev: prototype an app from one sentence" in practice: Understanding AI in this area gives you a real advantage in how you work and think. Vercel's v0 turns a description into a working React component you can deploy — and knowing how to apply this gives you a concrete advantage.

Apply the concepts from v0.dev: prototype an app from one sentence directly
Identify where this fits into your current workflow
Measure the before/after difference when you apply this
Iterate and refine — first attempts rarely nail it

Apply v0.dev: prototype an app from one sentence in a live project this week
Write a short summary of what you'd do differently after learning this
Share one insight with a colleague

End-of-lesson check

15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-builders-tools-AI-and-v0-design-teen

What does v0.dev primarily do when you give it a text description?
1. Generates a complete website hosted on the internet
2. Converts existing images into editable code
3. Generates React code with Tailwind styling for a UI component
4. Creates a database to store your design preferences
After v0 generates a UI component for you, what is the next step in the workflow?
1. Publish it immediately to a live website
2. Iterate on the design using chat to get closer to your vision
3. Delete the component and start over with a different tool
4. Send the design to a professional designer for review
Which programming framework and styling library does v0 use in its generated code?
1. Next.js and plain CSS
2. Vue and Material UI
3. Angular and Bootstrap
4. React and Tailwind CSS
A student describes a component to v0 as 'a blue button that says Submit'. The output is a blue button that says 'Click Here'. What should the student do next?
1. Tell v0 to make the button say 'Submit' instead
2. Give up and build the button manually
3. Add more unrelated features to distract from the error
4. Start over with a completely different description
What does the lesson mean when it says 'your job is to make it yours'?
1. You must pay v0 to use the generated code in production
2. You should credit v0 as the designer in your project
3. You need to customize and adapt the generated code to fit your specific needs
4. You should never modify the code that v0 generates
Which of these is NOT something v0 can help you create, based on the lesson examples?
1. A UI component from a description
2. A navbar with a mobile menu
3. A pricing card with features and a buy button
4. A complete backend database with user accounts
A friend tells you that v0 can read your mind and design exactly what you're thinking without you typing anything. What is accurate about this?
1. This is false — you must provide a text description of what you want
2. This is true — v0 has mind-reading capabilities
3. This is partially true depending on your subscription
4. This is only false for mobile users
The lesson describes v0 as 'a designer's first pass at superhuman speed.' What does 'first pass' mean in this context?
1. An initial version that gets you started quickly
2. A design that is too complicated to be useful
3. A design that must be approved by a supervisor
4. The final and only version of the design
What type of component would be most appropriate to ask v0 to generate if you've been 'putting off building' a feature on your website?
1. A UI component you've been avoiding because it seemed difficult
2. A complex machine learning algorithm
3. An entire operating system
4. A text document explaining your company's history
What happens when you 'iterate on the design with chat' in v0?
1. The chat feature automatically fixes all errors
2. Chat is only available on weekends
3. You can have a conversation with v0 to refine and improve the component
4. You must physically travel to Vercel's office
Why might a developer choose to use v0 instead of building a UI component from scratch?
1. To avoid learning how to code entirely
2. Because v0 is free and gives you ownership of the code without any terms
3. To get a fast starting point rather than designing and coding everything manually
4. Because v0 always produces perfect production-ready code with no need for review
Which company created the v0 tool?
1. Amazon
2. Meta
3. Google
4. Vercel
The lesson notes that v0 generates code 'at superhuman speed.' What does this suggest about v0's main advantage?
1. It requires superhuman abilities to use
2. It is slower than human designers
3. It only works during business hours
4. It can generate UI code much faster than a human could manually code it
After v0 generates a component, a student immediately publishes it to their live website without any changes. Based on the lesson, is this recommended?
1. No, because v0 requires you to pay before using the code
2. No, because the lesson says v0 gives you a starting design and your job is to make it yours
3. Yes, because the student should trust AI completely
4. Yes, because v0 always generates perfect code
What skill will you develop by using v0 to generate components and then customizing them?
1. Designing without any understanding of UI
2. How to avoid writing any code at all
3. Mind-reading abilities
4. How to collaborate with AI to build user interfaces

← Back to interactive lesson

Tendril · Builders · Tools Literacy

AI and v0.dev: turning prompts into UI components

Use v0 to generate React components from a description.

40 min · Reviewed 2026

The big idea

v0 by Vercel takes a description like 'a card with a price, three features, and a buy button' and generates the React + Tailwind code. It's a designer's first pass at superhuman speed.

Some examples

Generate a pricing card from a description
Generate a navbar with mobile menu
Iterate on the design with chat
Copy the code into your real project

Try it!

Go to v0.dev. Describe a UI component you've been putting off building. Generate it. Tweak the prompt twice to get closer to your vision.

AI and v0.dev: Generate UI From a Sentence

The big idea

v0.dev generates React + Tailwind + shadcn UI from a prompt. Iterate visually, then copy the code into your Next.js project. Great for landing pages and dashboards.

Some examples

Prompt: 'A SaaS pricing page with monthly/yearly toggle and 3 tiers.'
v0 lets you fork variants and pick your favorite.
Generated code uses shadcn components — easy to customize.
Push your v0 generation to a live Vercel deploy in one click.

Try it!

Generate a v0 page for a fake side project. Tweak it 3 times. Copy the code into a Next.js app.

Vibe-Coding With v0 and Lovable When You Just Want a Working App

The big idea

Some examples

v0: 'Build me a Pokémon team builder with drag-and-drop.' Out comes a working UI in 90 seconds.
Lovable: 'A diary app where each entry has a mood emoji and a date.' Real, hosted, works.
Both let you keep iterating ('make the buttons bigger', 'add login') in plain English.
Both export real Next.js code so you can graduate to editing it yourself in Cursor or VS Code.

Try it!

Build something silly on v0.dev or Lovable in 10 minutes — a meme generator, a homework randomizer. Share the link.

v0, Bolt, and Lovable: AI Tools That Build Whole Apps

The big idea

Some examples

v0: 'Build a landing page for my LARP club' → working Next.js + Tailwind site.
Bolt.new: 'Build a Pomodoro timer with leaderboard' → live editable project.
Lovable: 'Build a Spanish flashcard app with login' → deployed, with database.
All three let you edit the result by chatting more, or by dropping into the code.

Try it!

Pick one (v0, Bolt, or Lovable). Build a small idea you've had for months. Note how long it took.

Prototyping a UI in v0.dev Before Touching Real Code

The big idea

Some examples

You sketch a dashboard in v0, generate 3 versions, then implement the one you like by hand.
v0 reads your screenshot of a competitor and outputs a similar Tailwind layout to start from.
You iterate on a settings page in v0 with prompts like 'make it denser' before committing.
v0's output drops into a Next.js project with minimal cleanup.

Try it!

Open v0.dev. Describe a UI you've been putting off. Generate three versions. Pick one to start from.

Going from a Sketch to React with v0

The big idea

image-to-code is real now and it is fast for prototypes

Some examples

Sketching a settings panel on paper
Refining with prompts after the first draft
Pasting the result into your project

Try it!

v0.dev: prototype an app from one sentence

The big idea

v0 generates real shadcn/Tailwind code — not a mockup, actual code you can edit.

Some examples

Describe your UI in one sentence.
Iterate by describing changes ('make the button red').
Eject the code into your real project.

Try it!

Generate a landing page on v0 in 10 minutes. Eject it. Push to GitHub.

Apply the concepts from v0.dev: prototype an app from one sentence directly
Identify where this fits into your current workflow
Measure the before/after difference when you apply this
Iterate and refine — first attempts rarely nail it

Apply v0.dev: prototype an app from one sentence in a live project this week
Write a short summary of what you'd do differently after learning this
Share one insight with a colleague

End-of-lesson check

15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-builders-tools-AI-and-v0-design-teen

What does v0.dev primarily do when you give it a text description?
1. Generates a complete website hosted on the internet
2. Converts existing images into editable code
3. Generates React code with Tailwind styling for a UI component
4. Creates a database to store your design preferences
After v0 generates a UI component for you, what is the next step in the workflow?
1. Publish it immediately to a live website
2. Iterate on the design using chat to get closer to your vision
3. Delete the component and start over with a different tool
4. Send the design to a professional designer for review
Which programming framework and styling library does v0 use in its generated code?
1. Next.js and plain CSS
2. Vue and Material UI
3. Angular and Bootstrap
4. React and Tailwind CSS
A student describes a component to v0 as 'a blue button that says Submit'. The output is a blue button that says 'Click Here'. What should the student do next?
1. Tell v0 to make the button say 'Submit' instead
2. Give up and build the button manually
3. Add more unrelated features to distract from the error
4. Start over with a completely different description
What does the lesson mean when it says 'your job is to make it yours'?
1. You must pay v0 to use the generated code in production
2. You should credit v0 as the designer in your project
3. You need to customize and adapt the generated code to fit your specific needs
4. You should never modify the code that v0 generates
Which of these is NOT something v0 can help you create, based on the lesson examples?
1. A UI component from a description
2. A navbar with a mobile menu
3. A pricing card with features and a buy button
4. A complete backend database with user accounts
A friend tells you that v0 can read your mind and design exactly what you're thinking without you typing anything. What is accurate about this?
1. This is false — you must provide a text description of what you want
2. This is true — v0 has mind-reading capabilities
3. This is partially true depending on your subscription
4. This is only false for mobile users
The lesson describes v0 as 'a designer's first pass at superhuman speed.' What does 'first pass' mean in this context?
1. An initial version that gets you started quickly
2. A design that is too complicated to be useful
3. A design that must be approved by a supervisor
4. The final and only version of the design
What type of component would be most appropriate to ask v0 to generate if you've been 'putting off building' a feature on your website?
1. A UI component you've been avoiding because it seemed difficult
2. A complex machine learning algorithm
3. An entire operating system
4. A text document explaining your company's history
What happens when you 'iterate on the design with chat' in v0?
1. The chat feature automatically fixes all errors
2. Chat is only available on weekends
3. You can have a conversation with v0 to refine and improve the component
4. You must physically travel to Vercel's office
Why might a developer choose to use v0 instead of building a UI component from scratch?
1. To avoid learning how to code entirely
2. Because v0 is free and gives you ownership of the code without any terms
3. To get a fast starting point rather than designing and coding everything manually
4. Because v0 always produces perfect production-ready code with no need for review
Which company created the v0 tool?
1. Amazon
2. Meta
3. Google
4. Vercel
The lesson notes that v0 generates code 'at superhuman speed.' What does this suggest about v0's main advantage?
1. It requires superhuman abilities to use
2. It is slower than human designers
3. It only works during business hours
4. It can generate UI code much faster than a human could manually code it
After v0 generates a component, a student immediately publishes it to their live website without any changes. Based on the lesson, is this recommended?
1. No, because v0 requires you to pay before using the code
2. No, because the lesson says v0 gives you a starting design and your job is to make it yours
3. Yes, because the student should trust AI completely
4. Yes, because v0 always generates perfect code
What skill will you develop by using v0 to generate components and then customizing them?
1. Designing without any understanding of UI
2. How to avoid writing any code at all
3. Mind-reading abilities
4. How to collaborate with AI to build user interfaces

← Back to interactive lesson