v0.dev: สร้าง UI Components ด้วย AI จาก Vercel

v0 (v0.dev) คือ AI tool จาก Vercel ที่สร้าง UI components จาก text prompts ได้ code ที่พร้อมใช้งานทันที พร้อม Tailwind CSS และ shadcn/ui

v0 คืออะไร?

Overview

v0 = AI UI Generator by Vercel

Output:
- React components
- Tailwind CSS styling
- shadcn/ui components
- TypeScript support

ไม่ต้อง design เอง → prompt → ได้ UI

Key Features

1. Text to UI
   อธิบายสิ่งที่ต้องการ → ได้ component

2. Image to UI
   Upload design → ได้ code

3. Iterations
   แก้ไข ปรับปรุงได้หลายรอบ

4. Export Ready
   Copy code ไปใช้ได้เลย

5. shadcn/ui Integration
   ใช้ component library ยอดนิยม

Getting Started

Access v0

1. ไปที่ v0.dev
2. Sign in with Vercel/GitHub
3. เริ่มสร้าง UI ได้เลย

Free tier:
- จำนวน generations ต่อวัน
- Public projects

Pro ($20/mo):
- Unlimited generations
- Private projects
- Priority queue

Basic Prompting

Simple prompt:
"Create a login form with email and password"

Better prompt:
"Create a login form with:
- Email input with validation
- Password input with show/hide toggle
- Remember me checkbox
- Login button
- Forgot password link
- Social login options (Google, GitHub)"

Prompting Techniques

Describe the Component

✅ Good prompts:

"Create a pricing table with 3 tiers:
- Basic ($9/mo)
- Pro ($29/mo)
- Enterprise (Contact us)
Each with 5 features and a CTA button"

"Design a user profile card showing:
- Avatar
- Name and title
- Bio
- Social links
- Follow button
- Stats (followers, following, posts)"

Specify Style

"Create a navigation bar with:
- Logo on the left
- Menu items in center
- Auth buttons on right

Style:
- Dark theme
- Glassmorphism effect
- Rounded corners
- Subtle border"

Reference Designs

"Create a hero section like Stripe.com:
- Large headline
- Subtext
- Two CTA buttons
- Background gradient
- Floating dashboard preview"

"Design a card grid similar to Airbnb listings:
- Image carousel
- Title and location
- Price per night
- Rating with reviews count
- Heart icon for favorites"

Practical Examples

Example 1: Dashboard Layout

Prompt:
"Create a dashboard layout with:

Sidebar:
- Logo
- Navigation items with icons
- Collapsible sections
- User profile at bottom

Main area:
- Header with search and notifications
- Stats cards row (4 cards)
- Chart section
- Recent activity table

Dark theme, modern design"

Example 2: E-commerce Product Card

Prompt:
"Design a product card for an e-commerce site:
- Product image with hover zoom
- Product name and brand
- Star rating (4.5/5)
- Original price crossed out
- Sale price in red
- Color options as circles
- Add to cart button
- Wishlist heart icon

Style: Clean, minimal, white background"

Example 3: Blog Post Layout

Prompt:
"Create a blog post page layout:
- Featured image (full width)
- Title (large, bold)
- Author info (avatar, name, date)
- Read time estimate
- Article content with headings
- Table of contents (sticky sidebar)
- Share buttons
- Related posts grid
- Comments section
- Newsletter signup"

Example 4: Form Wizard

Prompt:
"Build a multi-step form wizard:

Step 1: Personal Info
- Name, email, phone

Step 2: Address
- Street, city, zip, country

Step 3: Payment
- Card number, expiry, CVV

Step 4: Review
- Summary of all info
- Edit buttons

Include:
- Progress indicator
- Back/Next buttons
- Validation messages"

Image to UI

How to Use

1. Upload screenshot/design
2. v0 จะ analyze และ recreate

Works best with:
- Clean screenshots
- UI mockups
- Wireframes
- Existing websites

Tips for Image Prompts

"Recreate this design exactly"

"Make this design but:
- Use blue instead of green
- Add dark mode
- Make it more minimal"

"Convert this design to mobile version"

Iterating on Designs

Refinement Prompts

หลังจาก v0 สร้าง initial design:

"Make the buttons larger"
"Add more spacing between sections"
"Use a different color scheme - blue and white"
"Make it responsive for mobile"
"Add loading states"
"Include hover effects"

Variations

"Show me 3 different versions of this:
1. Minimal design
2. Colorful and playful
3. Corporate/professional"

Exporting Code

Copy to Project

หลังได้ design ที่ถูกใจ:

1. Click "Copy Code"
2. Paste ใน project

Requirements:
- Tailwind CSS setup
- shadcn/ui installed (if using)
- React/Next.js project

CLI Installation

# Using shadcn/ui CLI
npx shadcn-ui@latest add [component-name]

# Or copy manually and install dependencies
npm install @radix-ui/react-* lucide-react

Adapting the Code

อาจต้องปรับ:
- Import paths
- Data fetching
- State management
- Event handlers
- API integration

Best Practices

1. Be Specific

❌ "Create a form"
✅ "Create a contact form with name, email,
    subject dropdown, message textarea,
    and a submit button. Include validation."

2. Include Context

"For a fintech app, create a transaction history
component showing:
- Date
- Description
- Amount (color-coded +/-)
- Category icon
- Status badge"

3. Specify Responsiveness

"Create a features section that:
- Desktop: 3 columns
- Tablet: 2 columns
- Mobile: 1 column
Include icons and descriptions"

4. Ask for States

"Create a button component with states:
- Default
- Hover
- Active/Pressed
- Disabled
- Loading (with spinner)"

Use Cases

Perfect For

✅ Great use cases:
- Landing page sections
- Dashboard components
- Forms and inputs
- Cards and lists
- Navigation elements
- Modals and dialogs
- Marketing pages

Consider Alternatives For

⚠️ May need manual work:
- Complex interactive features
- Real-time updates
- Complex animations
- Data-heavy tables
- Custom charts

Integration with Vercel

Deploy Workflow

1. Generate UI with v0
2. Export to Next.js project
3. Push to GitHub
4. Deploy on Vercel
5. Get live URL instantly

Seamless workflow ถ้าใช้ Vercel ecosystem

Pricing

Free Tier:
- Limited generations/day
- Public only
- Queue wait times

Pro ($20/month):
- Unlimited generations
- Private mode
- Priority processing
- Early access features

Tips & Tricks

1. Use Component Libraries

"Use shadcn/ui components:
- Button
- Input
- Card
- Dialog
- Toast"

2. Request Animations

"Add subtle animations:
- Fade in on load
- Hover scale
- Smooth transitions"

3. Ask for Accessibility

"Make sure the component is accessible:
- Proper ARIA labels
- Keyboard navigation
- Focus indicators
- Screen reader friendly"

สรุป

v0.dev Highlights:

1. Text to UI: สร้าง components จาก prompts
2. Image to UI: Recreate จาก screenshots
3. shadcn/ui: ใช้ component library ยอดนิยม
4. Export Ready: Copy code ไปใช้ได้เลย
5. Vercel Integration: Deploy ง่าย

Best For:

• UI prototyping
• Landing pages
• Dashboard components
• Form designs
• Marketing pages

Remember:

• Be specific in prompts
• Iterate for refinement
• Review and adapt code
• Test responsiveness

---

อ่านเพิ่มเติม:

• What is Vibe Coding
• bolt.new Guide
• Cursor IDE Guide