Course එකට ආපසු

v0.dev එක්ක පටන් ගමු

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

Getting Started with v0.dev

v0.dev ට dive කරමු — ඔයාගේ descriptions beautiful UI components වලට transform කරන AI-powered platform එක.

🎯 පාඩමේ අරමුණු

මේ පාඩම ඉවර වෙද්දී ඔයාට:

  • v0.dev account create කරලා setup කරන්න පුළුවන් වෙයි
  • v0 interface එක understand කරන්න පුළුවන් වෙයි
  • First AI-created UI component generate කරන්න පුළුවන් වෙයි
  • Creations iterate කරලා refine කරන්න ඉගෙන ගන්න පුළුවන් වෙයි

v0.dev කුමක්ද?

v0 Promise එක

"ඕන දේ describe කරන්න. Describe කළ දේ ලැබෙනවා."

v0.dev Vercel විසින් හදපු AI-powered tool එකක් natural language descriptions වලින් UI components generate කරනවා. Coding ඕන නැහැ!

Key Features:

  • Plain English වලින් UI describe කරන්න
  • AI working code generate කරනවා
  • Choose කරන්න multiple design options
  • Follow-up prompts එක්ක iterate කරන්න
  • Instantly shareable links ලැබෙනවා

Step 1: ඔයාගේ Account Create කරන්න

✅ v0.dev Account Setup

0/5

Pro Tip

Fastest account creation වලට Google sign-up use කරන්න — just one click!

Step 2: Interface එක Understanding

Text

Key Areas:

  • Prompt input — ඕන දේ describe කරන තැන
  • Generate button — AI ට request send කරනවා
  • Results area — Generated designs appear වෙන තැන
  • Account menu — Settings සහ history access

Step 3: ඔයාගේ First v0 Prompt

Simple but impressive එකක් create කරමු — profile card එකක්.

ඔයාගේ First v0 Prompt
Simple profile card create කරන්න: - Profile photo සඳහා circular placeholder එකක් - Bold වලින් name 'Alex Johnson' - Name එකට පහළින් job title 'Web Developer' - Short bio: 'I love creating beautiful websites' - Buttons දෙකක්: 'Contact' සහ 'Portfolio' - Soft blue colors එක්ක modern, clean design
ChatGPTClaude

කරන්න ඕන දේ:

  1. මේ prompt copy කරන්න
  2. v0.dev එකට paste කරන්න
  3. Generate click කරන්න (හෝ Enter press කරන්න)
  4. Seconds කීපයක් wait කරන්න...

Step 4: ඔයාගේ Results Understanding

Generate කළාට පස්සේ, මේවා පෙනෙනවා:

v0 Results

  • Multiple options — Usually different designs 3ක්
  • Preview — Each එකක් look කරන විදිය බලන්න
  • Code tab — Generated code එක බලන්න (optional)
  • Iterate button — Follow-up prompts එක්ක changes කරන්න

Look කරන්න ඕන දේ:

  1. ඔයාගේ vision එකට closest design එක කුමක්ද?
  2. Well work කරන්නේ මොනවද?
  3. Adjustment ඕන මොනවද?

Step 5: Iterating (Design Refine කිරීම)

First generation rarely perfect — ඒක okay! Iteration key එක.

Example follow-up prompts:

Try this prompt
Buttons darker blue කරන්න, subtle gradient background add කරන්න
ChatGPTClaude
Try this prompt
Buttons vertically stacked වෙනුවට side by side put කරන්න
ChatGPTClaude
Try this prompt
Bio එකට පහළින් social media icons (Twitter, LinkedIn, GitHub) add කරන්න
ChatGPTClaude
Try this prompt
Card wider කරන්න, subtle shadow add කරන්න
ChatGPTClaude

Iteration Pattern එක

Generate → Review → Change කරන්න ඕන මොනවද identify → Refine → Repeat

Good designs බොහොමයක් iterations 3-5ක් ගන්නවා. ඒක normal!

Practice Exercise: Quote Card Build කරන්න

දැන් ඔයාම try කරන්න! Quote card එකක් create කරන්න.

Quote Card Challenge
Inspirational quote card එකක් create කරන්න: - Top එකේ large quotation mark icon එකක් - Quote: 'The only way to do great work is to love what you do' - Quote එකට පහළින් 'Steve Jobs' attribution - Elegant typography - Soft gradient background (light purple to light pink) - Rounded corners සහ subtle shadow
ChatGPTClaude

✅ Quote Card Exercise

0/7

v0 Prompt Tips

❌ Weak Prompts
✅ Strong Prompts
Card එකක් හදන්න
Photo, name, title, contact button එක්ක profile card හදන්න
Nice look කරන්න
Rounded corners සහ subtle shadows එක්ක soft blue colors use කරන්න
Button එකක් add කරන්න
Bio එකට පහළින් centered, white text එක්ක blue 'Contact Me' button add කරන්න
Style එක change කරන්න
Inter font එක්ක whitespace ගොඩක් තියෙන minimalist style use කරන්න

Key tips:

  • ඕන දේ ගැන specific වෙන්න
  • Visual style describe කරන්න (modern, minimal, playful, corporate)
  • Colors specify කරන්න (color names හෝ hex codes)
  • Layout mention කරන්න (centered, left-aligned, grid, etc.)
  • Design language use කරන්න (card, hero section, navbar, footer)

Common Issues & Solutions

ProblemSolution
Generation slowComplex prompts වැඩි වෙලා ගන්නවා — patient වෙන්න
ඕන දේ match වුනේ නැහැDescription එකේ more specific වෙන්න
Design broken look"fix the layout" හෝ "make it responsive" try කරන්න
Share button හොයාගන්න බැහැTop-right එකේ share icon (box with arrow) හොයන්න
Generation limit hitFree tier limits තියෙනවා — wait කරන්න හෝ හෙට try කරන්න

✅ පාඩමේ සාරාංශය

ඉගෙන ගත්ත දේ:

  1. v0.dev account create කරන විදිය
  2. Effective prompts write කරන විදිය
  3. Designs improve කරන්න iterate කරන විදිය
  4. Specific වීමේ වැදගත්කම

v0 Workflow එක

  1. ඕන දේ clearly Describe කරන්න
  2. Generate කරලා options review කරන්න
  3. Closest match Select කරන්න
  4. Refinements එක්ක Iterate කරන්න
  5. ඔයාගේ creation Share කරන්න!

📝 Quick Quiz

📝 Quiz

1/3

How many design options does v0 typically generate?

➡️ Next Lesson

Next, Replit explore කරනවා — actual code show කරන, great mobile app එකක් තියෙන alternative එකක්!