v0 by Vercel

Tool này là gì?

v0 (v-zero) là sản phẩm của Vercel — công ty đứng sau Next.js. Nó là một AI coding agent chuyên về frontend: bạn mô tả UI bằng tiếng Anh (hoặc paste screenshot Figma), v0 gen ra React + Tailwind + shadcn/ui component chạy được luôn trong preview, deploy 1 click lên Vercel.

Cho PM: v0 là cách nhanh nhất để biến ý tưởng feature thành clickable prototype mà không cần đợi designer + dev. Mình demo cho stakeholder, gather feedback sớm, validate trước khi commit roadmap.

Khi nào nên dùng

• Prototype feature nhanh: "Tạo dashboard analytics có 4 KPI card + 1 chart + 1 table" → clickable demo trong 60 giây.
• Validate concept với user: show prototype thật trong user interview, không cần Figma click-through.
• Pitch nội bộ: thay vì slide wireframe, share link demo thật cho exec.
• Hand-off cho team dev: output là code production-ready (Next.js, Tailwind, shadcn) — dev fork luôn, không cần re-implement từ Figma.
• Component library mini: generate button, modal, table biến thể cho design system mini.

Khi nào KHÔNG nên dùng

• Backend logic phức tạp — v0 chỉ frontend, không hiểu DB/API tốt.
• App có authentication, payment thật — v0 mock được nhưng không production-grade.
• Brand cần pixel-perfect Figma — v0 follow tone shadcn/Tailwind default, hơi "modern minimal".
• Native mobile app (iOS/Android) — v0 chỉ làm web. Cho mobile dùng Bolt hoặc Lovable.

Workflow tiêu biểu

flowchart LR
    A[Ý tưởng feature] --> B[Mô tả + screenshot
inspiration]
    B --> C[v0 generate v1]
    C --> D{Đúng ý?}
    D -->|Tiếp tục refine| E[Follow-up prompt
'add filter sidebar']
    D -->|Có| F[Deploy preview]
    E --> C
    F --> G[Share link
user/exec test]
    G --> H{Validate OK?}
    H -->|Yes| I[Hand-off code cho dev]
    H -->|Refine| E

Best practice: iterate 5–10 lần trong cùng project. Mỗi lần thêm 1 detail nhỏ ("make table sortable", "add empty state"). v0 nhớ context cả thread.

Prompt mẫu

Tạo dashboard cho PM theo dõi A/B test:

Layout:
- Top: 4 KPI card (Active tests, Winning tests, Avg lift,
  Total revenue impact)
- Middle: 1 bảng list test có cột: Name, Status (running/done),
  Variant count, Sample size, Confidence %, Lift %, Decision
- Right sidebar: filter theo team, status, date range

Style: clean, light theme, font Inter, primary color
indigo. Mỗi row có hover state.

Empty state khi không có test: friendly illustration.

(Follow-up trong cùng project)

Add 1 modal "New A/B Test" — click button "+ New" ở góc
phải bảng:
- Tên test (input)
- Hypothesis (textarea)
- Primary metric (dropdown: conversion, revenue, retention)
- Variants (button "+Add variant", min 2, max 5)
- Target audience (multi-select)

Submit: console.log payload (mock).

Mẹo nâng cao

Kết hợp với công cụ khác

flowchart LR
    A[Figma sketch] -->|screenshot| B[v0
generate React]
    B -->|GitHub| C[Cursor
refine + integrate API]
    C --> D[Production deploy]

v0 đóng vai trò "Figma → Code" bridge. Designer vẫn dùng Figma cho exploration, v0 chuyển sang code, Cursor hoàn thiện production.

So với alternatives

Tài nguyên thêm

• Official: v0.dev
• Community gallery: v0.dev/community
• Best-practice: video "Building a SaaS in 1 hour with v0" trên YouTube channel Vercel.