v0.dev by Vercel: Tạo UI components React chỉ với prompt AI (2025)

7 tháng trước · 8 phút đọc

v0.dev là gì và tại sao mình chuyển sang dùng nó

Mình nhớ hồi đầu năm ngoái, mỗi lần cần làm một cái card component mới là mình mở Tailwind docs, mở Figma, rồi gõ tay từng class một. Mất khoảng 40-60 phút cho một component không phức tạp. Sau đó mình thử v0.dev - gõ đúng một câu, nhấn Enter, 30 giây sau component hiện ra. Không hoàn hảo 100%, nhưng đủ 80% để mình chỉ cần sửa thêm một chút.

v0.dev là công cụ AI của Vercel, ra mắt public beta cuối 2023 và liên tục cập nhật. Cách hoạt động đơn giản: bạn nhập mô tả bằng text (tiếng Anh hoặc tiếng Việt đều được), v0 sinh ra React component sử dụng Tailwind CSS và shadcn/ui. Bạn có thể chỉnh sửa bằng cách chat tiếp, rồi copy code hoặc deploy thẳng lên Vercel.

Điểm khác biệt so với ChatGPT hay Claude khi dùng để generate code UI:

v0 hiểu design context - nó biết component này dùng ở đâu trong layout
Output là code chạy được ngay, không cần sửa import
Có live preview ngay trong giao diện
Lịch sử chat liên kết với project, không bị mất context

342047 Từ prompt đến component - workflow mà cả designer lẫn dev đều dùng được

Một điều ít người để ý: v0 không chỉ dành cho developer. Designer không biết code vẫn có thể dùng để generate prototype nhanh, rồi đưa link cho dev review. Đây là workflow mình sẽ nói kỹ hơn ở phần sau.

Viết prompt hiệu quả - bí quyết để ra component đúng ý

Prompt kém ra component kém. Đây là sự thật đơn giản nhất khi dùng v0.

Sau vài tháng dùng, mình nhận ra công thức prompt cho v0 khác với ChatGPT thông thường. Với v0, bạn cần mô tả visual cụ thể hơn là logic. Thay vì "tạo form đăng nhập", hãy thử:

"Tạo form đăng nhập với 2 input (email, mật khẩu), nút Submit màu xanh đậm, link 'Quên mật khẩu' canh phải, card trắng shadow nhẹ, bo góc 12px, font Inter"

Khác biệt rõ ràng. Phiên bản đầu ra component generic. Phiên bản sau ra component gần đúng với design bạn muốn ngay từ lần đầu.

342048 Prompt chi tiết về visual giúp v0 ra output đúng hơn ngay lần đầu

Cấu trúc prompt mình hay dùng:

[Loại component] + [Layout/Cấu trúc] + [Màu sắc/Style] + [Nội dung mẫu] + [Tương tác nếu có]

Ví dụ thực tế cho một dự án thương mại điện tử Việt:

Tạo product listing card theo kiểu Shopee:
- Ảnh sản phẩm 1:1 ở trên, badge "Giảm 30%" góc trái đỏ
- Tên sản phẩm 2 dòng, font nhỏ gray-700
- Giá gốc gạch ngang, giá sale đỏ đậm
- Số lượng đã bán (ví dụ "Đã bán 1.2k")
- Nút yêu thích tim góc phải ảnh
- Hover: shadow nâng lên nhẹ
Dùng Tailwind, responsive mobile-first

Kết quả? Component ra ngay, đúng khoảng 85%. Mình chỉ cần chat thêm 1-2 turn để chỉnh màu brand và font.

Một tip nhỏ: tiếng Việt hoạt động tốt với v0. Mình thường viết tên field và nội dung mẫu bằng tiếng Việt trong prompt ("Họ tên", "Số điện thoại", "Tỉnh/Thành phố") và v0 hiểu đúng context.

Tích hợp v0 vào Next.js 15 - workflow thực tế

Generate component trên v0.dev xong, bước tiếp theo là đưa vào project. Với Next.js 15 (App Router), có 2 cách:

Cách 1: Copy code thủ công - Nhanh nhưng phải tự xử lý dependencies.

Cách 2: Dùng v0 CLI - Chuẩn hơn, tự động cài shadcn/ui components cần thiết.

Mình thường dùng Cách 2 cho project thật:

# Cài v0 CLI
npx v0@latest init

# Add component từ v0 vào project
npx v0@latest add [component-url-hoặc-id]

Sau lệnh add, CLI tự động:

Tải code component về thư mục components/
Kiểm tra và cài các shadcn/ui primitives còn thiếu (Button, Card, Input...)
Cập nhật tailwind.config.ts nếu cần

342049 v0 CLI xử lý dependency tự động - không cần tự cài từng shadcn component

Với Next.js 15 App Router, component generate từ v0 mặc định là Client Component (vì hay dùng state, event handler). Nếu bạn cần Server Component, nhớ bỏ "use client" và kiểm tra lại xem có hook nào không.

Một vấn đề thực tế hay gặp: v0 generate Tailwind class theo design system mặc định của shadcn (màu primary, secondary, muted...). Nếu brand của bạn dùng màu riêng, cần map lại trong tailwind.config.ts:

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        // Ghi đè màu brand Việt của bạn
        primary: {
          DEFAULT: '#E84141', // Đỏ thương hiệu
          foreground: '#FFFFFF',
        },
        secondary: {
          DEFAULT: '#FFA500', // Cam phụ
          foreground: '#1A1A1A',
        },
      },
    },
  },
}

Sau bước này, mọi component từ v0 dùng màu primary sẽ tự động theo màu brand của bạn. Mình làm bước này một lần duy nhất ở đầu project, sau đó không cần lo nữa.

Customize cho thương hiệu Việt - từ generic đến đúng chất

Component từ v0 ra mặc định sẽ trông như mọi SaaS app Mỹ. Để biến nó thành UI phù hợp người dùng Việt, có vài điểm cần chú ý.

Typography: Font mặc định của shadcn là Inter - ổn với Latin nhưng tiếng Việt có dấu đôi khi bị lạc nhịp. Mình chuyển sang Be Vietnam Pro (Google Fonts, thiết kế riêng cho tiếng Việt) hoặc Lexend. Thêm vào layout.tsx:

import { Be_Vietnam_Pro } from 'next/font/google'

const beVietnam = Be_Vietnam_Pro({
  subsets: ['vietnamese', 'latin'],
  weight: ['400', '500', '600', '700'],
})

Format số và ngày: v0 hay generate $1,299 và MM/DD/YYYY. Cần đổi sang 1.299.000đ và DD/MM/YYYY. Tạo utility function một lần:

// lib/format.ts
export const formatVND = (amount: number) =>
  new Intl.NumberFormat('vi-VN', {
    style: 'currency',
    currency: 'VND',
  }).format(amount)
// Output: 1.299.000 ₫

export const formatDateVN = (date: Date) =>
  new Intl.DateTimeFormat('vi-VN').format(date)
// Output: 15/01/2025

342050 Vài dòng config là đủ để component ra đúng chất thương hiệu Việt

Prompt để ra UI Việt ngay từ đầu: Thay vì sửa sau, mình thêm vào cuối mọi prompt:

"...sử dụng locale Việt Nam: giá dạng 1.299.000đ, ngày dạng DD/MM/YYYY, font Be Vietnam Pro, placeholder tiếng Việt"

Cách này tiết kiệm 1-2 turn chat chỉnh sửa. Với form địa chỉ Việt Nam, mình thêm: "dropdown Tỉnh/Thành phố → Quận/Huyện → Phường/Xã" và v0 generate đúng cấu trúc phân cấp hành chính Việt Nam.

Một trade-off thật: shadcn/ui component mà v0 dùng khá nặng nếu bạn chỉ cần component đơn giản. Với landing page nhỏ, đôi khi copy code Tailwind thuần và xóa các shadcn import sẽ nhẹ hơn.

Workflow thực tế cho team designer + dev

Mình đã thử v0.dev với workflow 2 kiểu: solo dev và team designer-dev. Kết quả khác nhau khá nhiều.

Solo dev: Tiết kiệm rõ ràng nhất. Mình ước tính mỗi component tốn ít hơn đáng kể thời gian so với viết tay, không tính thời gian lên Figma. Workflow: prompt → preview → copy code → chỉnh brand → done.

Team designer + dev: Đây mới là chỗ v0 tỏa sáng. Designer dùng v0 để tạo prototype tương tác, share link (v0 có tính năng share public URL). Dev nhận link, đánh giá component, chạy lệnh npx v0 add để pull về. Không cần qua giai đoạn "dịch Figma sang code" thủ công nữa.

342051 Designer tạo prototype, dev pull code - bỏ được bước dịch Figma sang code

Tuy nhiên, có giới hạn cần biết:

Free tier của v0 có giới hạn số lần generate mỗi ngày. Với team thì nên nâng lên Pro.
Component phức tạp (data table với sort, filter, pagination) v0 hay generate thiếu logic - phần UI đúng nhưng phần xử lý state cần tự làm thêm.
v0 không biết design system riêng của công ty bạn trừ khi bạn mô tả trong prompt hoặc dùng tính năng custom instructions (hiện đang thử nghiệm).

Một cách mình hay làm để giải quyết vấn đề design system: tạo một file v0-context.md lưu các quy tắc brand (màu sắc, font, border-radius, spacing scale) và paste vào đầu mỗi prompt quan trọng. Mất 30 giây nhưng giảm đáng kể số turn chat cần để chỉnh.

Giờ bạn đã có đủ để bắt đầu:

Vào v0.dev, tạo tài khoản (free)
Tải file prompt templates ở phần trước, chọn 1 template phù hợp
Paste prompt, xem preview, chat chỉnh thêm 1-2 turn
Chạy npx v0@latest init trong Next.js project, rồi npx v0 add [url]
Config font Be Vietnam Pro và màu brand một lần trong tailwind.config.ts

Gặp component nào v0 generate lạ hoặc thiếu feature, drop comment mình xem thử.