v0 by Vercel

Viết Prompt Mô Tả Component

Mô tả rõ số gói giá, tính năng nổi bật và phong cách thiết kế mong muốn.

Nhập prompt: 'Tạo trang bảng giá 3 gói (Cơ bản, Chuyên nghiệp, Doanh nghiệp) dạng thẻ, có nút CTA nổi bật ở gói giữa, phong cách tối giản'.

Nêu rõ tông màu thương hiệu để bản sinh đầu tiên gần với yêu cầu thực tế hơn.

So Sánh Các Phiên Bản Được Tạo

Xem qua các biến thể thiết kế khác nhau mà v0 đề xuất.

Cuộn qua các phiên bản, chọn bản có bố cục gần đúng ý nhất để tiếp tục tinh chỉnh.

Không cần chọn bản hoàn hảo nhất ngay, có thể kết hợp ý tưởng từ nhiều bản qua các lượt chat tiếp theo.

Tinh Chỉnh Qua Hội Thoại

Yêu cầu chỉnh sửa chi tiết như khoảng cách, màu sắc hoặc thêm badge khuyến mãi.

Nhập yêu cầu tiếp theo như 'thêm badge Phổ Biến Nhất cho gói giữa và tăng độ tương phản nút CTA'.

Chỉnh từng chi tiết nhỏ một để dễ kiểm soát và tránh v0 sinh lại toàn bộ component không cần thiết.

Sao Chép Code Vào Dự Án

Lấy code component đã hoàn thiện để đưa vào codebase thực tế.

Nhấn Copy Code hoặc dùng tích hợp trực tiếp để thêm component vào dự án Next.js hiện có.

Kiểm tra các dependency (như shadcn/ui, lucide-react) đã được cài đặt trong dự án trước khi dán code vào.

Điều Chỉnh Theo Design System Hiện Có

Đồng bộ màu sắc, font chữ và spacing với hệ thống thiết kế sẵn có của công ty.

Cập nhật lại các biến Tailwind theme (màu, font) trong file cấu hình để component khớp với các trang khác trong dự án.

Tạo sẵn theme token dùng chung để các component tạo từ v0 sau này tự động đồng bộ mà không cần sửa tay từng lần.