Course එකට ආපසු

Getting Started with v0.dev

20 මිනිත්තු🏋️Activity

Getting Started with v0.dev

Let's dive into v0.dev — the AI-powered platform that transforms your descriptions into beautiful UI components.

🎯 Lesson Objectives

By the end of this lesson, you will:

  • Create and set up a v0.dev account
  • Understand the v0 interface
  • Generate your first AI-created UI component
  • Learn to iterate and refine your creations

What is v0.dev?

The v0 Promise

"Describe what you want. Get what you described."

v0.dev is an AI-powered tool by Vercel that generates UI components from natural language descriptions. No coding required!

Key Features:

  • Describe UI in plain English
  • AI generates working code
  • Multiple design options to choose from
  • Iterate with follow-up prompts
  • Get shareable links instantly

Step 1: Create Your Account

✅ v0.dev Account Setup

0/5

Pro Tip

Use Google sign-up for the fastest account creation — just one click!

Step 2: Understanding the Interface

Text

Key Areas:

  • Prompt input — Where you describe what you want
  • Generate button — Sends your request to AI
  • Results area — Where your generated designs appear
  • Account menu — Access settings and history

Step 3: Your First v0 Prompt

Let's create something simple but impressive — a profile card.

Your First v0 Prompt
Create a simple profile card with: - A circular placeholder for a profile photo - A name 'Alex Johnson' in bold - A job title 'Web Developer' below the name - A short bio: 'I love creating beautiful websites' - Two buttons: 'Contact' and 'Portfolio' - Modern, clean design with soft blue colors
ChatGPTClaude

What to do:

  1. Copy this prompt
  2. Paste it into v0.dev
  3. Click Generate (or press Enter)
  4. Wait a few seconds...

Step 4: Understanding Your Results

After generating, you'll see:

v0 Results

  • Multiple options — Usually 3 different designs
  • Preview — See how each looks
  • Code tab — View the generated code (optional)
  • Iterate button — Make changes with follow-up prompts

What to look for:

  1. Which design is closest to your vision?
  2. What's working well?
  3. What needs adjustment?

Step 5: Iterating (Refining Your Design)

Your first generation is rarely perfect — and that's okay! Iteration is the key.

Example follow-up prompts:

Try this prompt
Make the buttons darker blue and add a subtle gradient background
ChatGPTClaude
Try this prompt
Put the buttons side by side instead of stacked vertically
ChatGPTClaude
Try this prompt
Add social media icons (Twitter, LinkedIn, GitHub) below the bio
ChatGPTClaude
Try this prompt
Make the card wider and add a subtle shadow
ChatGPTClaude

The Iteration Pattern

Generate → Review → Identify what to change → Refine → Repeat

Most good designs take 3-5 iterations. That's normal!

Practice Exercise: Build a Quote Card

Now try it yourself! Create a quote card.

Quote Card Challenge
Create an inspirational quote card with: - A large quotation mark icon at the top - The quote: 'The only way to do great work is to love what you do' - Attribution to 'Steve Jobs' below the quote - Elegant typography - A soft gradient background (light purple to light pink) - Rounded corners and a subtle shadow
ChatGPTClaude

✅ Quote Card Exercise

0/7

v0 Prompt Tips

❌ Weak Prompts
✅ Strong Prompts
Make a card
Make a profile card with photo, name, title, and contact button
Make it look nice
Use soft blue colors with rounded corners and subtle shadows
Add a button
Add a blue 'Contact Me' button with white text, centered below the bio
Change the style
Use a minimalist style with lots of whitespace and Inter font

Key tips:

  • Be specific about what you want
  • Describe visual style (modern, minimal, playful, corporate)
  • Specify colors (use color names or hex codes)
  • Mention layout (centered, left-aligned, grid, etc.)
  • Use design language (card, hero section, navbar, footer)

Common Issues & Solutions

ProblemSolution
Generation is slowComplex prompts take longer — be patient
Doesn't match what I wantedBe more specific in your description
Design looks brokenTry "fix the layout" or "make it responsive"
Can't find share buttonLook for the share icon (box with arrow) in top-right
Hit generation limitFree tier has limits — wait or try tomorrow

✅ Lesson Summary

What you learned:

  1. How to create a v0.dev account
  2. How to write effective prompts
  3. How to iterate to improve designs
  4. The importance of being specific

The v0 Workflow

  1. Describe what you want clearly
  2. Generate and review options
  3. Select the closest match
  4. Iterate with refinements
  5. Share your creation!

📝 Quick Quiz

📝 Quiz

1/3

How many design options does v0 typically generate?

➡️ Next Lesson

Next, we'll explore Replit — an alternative that shows you the actual code and has a great mobile app!