Bốn thứ cần chuẩn bị sẵn.
Năm phút chuẩn bị giúp 90 phút sau trôi mượt.
Trước khi mở Cursor, kiểm tra bạn có đủ bốn thứ dưới đây. Thiếu cái nào thì cài cái đó trước — đừng vừa làm vừa cài, dễ bị rối.
Một laptop có Internet
macOS, Windows hoặc Linux đều được. RAM ≥ 8GB. Trình duyệt Chrome hoặc Edge mới nhất. Kết nối ổn định — bạn sẽ tải khoảng 300MB dependencies.
Node.js phiên bản 20 trở lên
Đây là "động cơ" để Next.js chạy. Tải bản LTS từ trang chính thức, cài như một app bình thường. AI trong Cursor sẽ tự check version giúp bạn — nhưng cài sẵn cho chắc.
Tải Node.js LTS →Cursor (Agent)
Cursor là code editor có Agent tích hợp sẵn — bạn giao việc bằng tiếng Việt, Agent tự đọc file trong project, chạy lệnh terminal và viết code thay bạn. Có free tier để bắt đầu. Mở Agent bằng Cmd+I (mac) hoặc Ctrl+I (Windows).
Tải Cursor →GitHub & Vercel (miễn phí)
Để lưu code và đăng portfolio lên Internet. Đăng ký một lần, đăng nhập Vercel bằng GitHub là xong. Không cần thẻ trả phí cho gói free.
Tạo tài khoản Vercel →Ba mươi phút đầu, bạn sẽ gặp một mớ thứ lạ hoắc — cái terminal đen sì, lệnh toàn tiếng Anh, file chẳng hiểu để làm gì. Không sao đâu, đừng cố hiểu hết làm gì. Mục tiêu của bài này không phải biến bạn thành lập trình viên trong một buổi chiều. Chỉ cần làm ra được một sản phẩm chạy thật trước đã. Còn phần hiểu sâu, cứ từ từ — làm vài lần tự nhiên sẽ quen
Cài đặt tool và dựng khung project.
Bước 01 đến 03. Xong ba bước này, bạn có một project Next.js trống và bộ spec nằm sẵn trong đó. Mọi thứ đã sẵn sàng, chỉ còn chờ bạn ra lệnh.
Khởi động Cursor và mở Agent
Cursor là một editor, nhưng từ đây bạn gần như không gõ thẳng vào file nữa. Bạn giao việc cho Agent, còn việc chạy lệnh terminal, tạo file, cài thư viện thì để nó lo. Agent chính là thứ làm nên cảm giác "vibe coding" — bạn nói, nó làm.
Mở Cursor (đã cài ở phần Pre-flight). Khi cửa sổ hiện ra, mở Agent bằng phím tắt Cmd+I (macOS) hoặc Ctrl+I (Windows/Linux) — panel Agent sẽ hiện ở cạnh phải. Ở đầu panel có ô chọn chế độ; hãy chắc chắn nó đang để Agent (không phải Ask hay Manual).
Cursor có vài chế độ trong cùng một panel. Agent được tự chạy lệnh terminal, tạo và sửa nhiều file, làm trọn cả việc lớn — đây là chế độ bạn dùng suốt bài. Ask chỉ trả lời câu hỏi, không động vào code. Cần đổi qua lại thì nhấn Cmd/Ctrl+. ngay trong ô nhập.
Từ đây trở đi, mỗi khối PROMPT chỉ là một đoạn chữ — bạn copy, dán vào ô nhập của Agent rồi nhấn Enter. Phần còn lại Agent lo: chạy lệnh, tạo file, chỗ nào cần thì nó hỏi lại. Bạn đọc tóm tắt rồi đi tiếp.
Bảo Cursor dựng project Next.js
Bạn khỏi cần thuộc nằm lòng câu lệnh npx create-next-app. Cứ nói ý mình muốn gì bằng tiếng Việt, Cursor đọc xong sẽ chạy đúng lệnh trong terminal của nó rồi báo lại khi xong.
Trước tiên, tạo một thư mục trống tên tvd-avocadoo-portfolio trên máy (ví dụ ở Desktop), rồi mở nó bằng Cursor: menu File → Open Folder → chọn đúng thư mục đó. Đây sẽ là gốc project. Sau đó mở Agent (Cmd/Ctrl+I) và paste prompt dưới đây:
Tôi muốn tạo web portfolio bằng Next.js, tên project "tvd-avocadoo-portfolio", dùng luôn thư mục hiện tại làm gốc.
1. Init project Next.js 15 ngay trong thư mục hiện tại với các option: TypeScript, Tailwind v4, App Router, ESLint, KHÔNG dùng src/, import alias "@/*", dùng npm (không yarn/pnpm).
2. Thiếu Node.js hay tool/thư viện nào để chạy được → tự cài hết giúp tôi; cái nào phải cài tay thì chỉ rõ.
3. Lệnh nào hỏi xác nhận → chọn mặc định (Yes/Enter).
4. Xong thì list file/folder vừa tạo để tôi xem.app/, package.json, node_modules/, public/… trong tvd-avocadoo-portfolio/.
Vì bạn đã mở sẵn thư mục tvd-avocadoo-portfolio/ làm workspace, project được tạo ngay tại đây — không phát sinh thư mục con. Từ bước 03 trở đi cứ làm tiếp trong workspace này, Agent đã nhìn đúng file rồi, không cần mở lại gì.
Dựng spec library cho project
Spec library giống như tập "bản vẽ chi tiết" của portfolio: trang trông ra sao, có những gì, dùng công nghệ nào — tất cả nằm trong đó. Có bản vẽ rồi, Agent cứ theo đó mà dựng, đỡ phải đoán và đỡ tự bịa. Đây mới là phần "spec-first" làm nên vibe coding nghiêm túc.
Cách "chuẩn" để có spec library là nhờ chính Agent viết ra — bạn đưa cho nó một prompt mô tả sản phẩm, nó sinh ra cả bộ tài liệu. Paste prompt dưới đây vào Agent (đặt ở gốc tvd-avocadoo-portfolio/):
Tôi muốn bạn tạo một "spec library" — bộ tài liệu Markdown trong thư mục specs/ — mô tả đầy đủ một portfolio web để dựa vào đó build ra đúng sản phẩm. Bạn tự đề xuất cách chia folder/file cho gọn, mỗi file một chủ đề.
SẢN PHẨM
Personal portfolio 1 trang cho Thai Van Dung (TVD) — Founder & CEO của Avocadoo, một app studio làm sản phẩm trên ba mảng: học ngôn ngữ (edtech), productivity, và outsourcing. Mục tiêu: vài giây đầu cho thấy đây là một founder đã ship nhiều sản phẩm thật, trưng các app đã lên store, và mở kênh liên hệ để hợp tác.
THÔNG TIN CÁ NHÂN & DATA
- Tên: Thai Van Dung; vai trò Founder & CEO Avocadoo; ở Bà Rịa - Vũng Tàu, Việt Nam; email thaivandung.ftu2@gmail.com.
- Nổi bật: ~13 app học ngôn ngữ (Trung, Nhật, Anh, Tây Ban Nha); tổng ~500.000 users, dẫn đầu là Speak Chinese ~180.000 và BaoBao ~120.000.
- ĐỌC DATA THẬT tôi cung cấp (link store, mô tả app, con số, social...) — TUYỆT ĐỐI KHÔNG bịa. Thiếu thông tin gì thì gom lại HỎI tôi, đừng tự chế.
YÊU CẦU (ghi rõ thành guideline trong spec)
- Ngôn ngữ: toàn bộ copy/nội dung hiển thị trên portfolio viết bằng TIẾNG ANH (chỉ địa danh có thể giữ tiếng Việt, vd Bà Rịa - Vũng Tàu).
- Design: UI/UX hiện đại, tinh tế, KHÔNG nhìn giống template do AI sinh ra. Dark theme, một màu accent duy nhất dùng tiết chế, để typography gánh phần lớn hệ thống.
- Sections: hero, metrics, apps grid, spotlight app nổi bật, about, contact, footer (bạn đề xuất thứ tự hợp lý).
- Data: tách riêng ra file data, mọi component đọc từ đó — không hard-code nội dung vào UI.
- Animation: có chuyển động tinh tế (page load, scroll reveal, hover) VÀ vài điểm tương tác chơi được (vd click vào icon app thì nó nảy/xáo lung tung, kéo thả được) — luôn tôn trọng prefers-reduced-motion.
- Icon: chỉ dùng icon từ thư viện (vd lucide-react). TUYỆT ĐỐI KHÔNG dùng emoji.
- Stack gợi ý: Next.js + TypeScript + Tailwind + Framer Motion (bạn chốt version cụ thể).
Bắt đầu: đề xuất cấu trúc specs/ cho tôi xem trước, rồi sinh lần lượt từng file. Chỗ nào cần data thật mà tôi chưa đưa → HỎI, không bịa.Viết được prompt như trên mới là kỹ năng thật — nhưng để Agent sinh hết vài chục file spec sẽ tốn kha khá thời gian. Nên trong buổi học, bộ specs/ này đã được chuẩn bị sẵn trong bộ tài liệu Vibe Coding: bạn cứ kéo thả thẳng thư mục specs/ vào gốc tvd-avocadoo-portfolio/ cho nhanh, rồi chạy prompt kiểm tra bên dưới. Về nhà, hãy thử chạy Prompt 02 để tự tay dựng lại từ đầu.
Agent sẽ tự đề xuất cách chia folder, nên không có cấu trúc nào "đúng tuyệt đối". Dưới đây chỉ là một cấu trúc tham khảo (cũng là cách bộ specs có sẵn được tổ chức) để bạn hình dung kết quả trông ra sao:
tvd-avocadoo-portfolio/
├── app/
├── public/
├── specs/ ← spec library (Agent dựng hoặc bạn copy vào)
│ ├── INDEX.md
│ ├── 00-overview/
│ ├── 01-design/
│ ├── 02-components/
│ ├── 03-sections/
│ ├── 04-data/
│ ├── 05-animations/
│ └── 06-tech/
├── package.json
└── ...Nhờ Agent kiểm lại giúp cho chắc:
Kiểm tra spec library trong thư mục `specs/` đã sẵn sàng chưa. Liệt kê:
1. Các nhóm folder trong specs/ (bản chuẩn bị sẵn gồm 7: 00-overview, 01-design, 02-components, 03-sections, 04-data, 05-animations, 06-tech — bản Agent tự dựng có thể chia khác đôi chút).
2. File mục lục (INDEX.md hoặc tương đương) có tồn tại không.
3. Tổng số file .md trong toàn bộ specs/ (đệ quy).
Nếu trống trơn hoặc thiếu file mục lục, dừng lại và báo chính xác cái gì thiếu để tôi bổ sung.Giao việc lớn, AI tự đọc, lên plan, hỏi, và build.
Bước 04. Đây là tinh thần vibe coding thật sự: bạn không micro-manage từng task. Một prompt duy nhất, AI tự đọc toàn bộ specs, lên plan, hỏi bạn xác nhận chỗ cần — rồi build.
Để AI tự đọc, lên plan, và build toàn bộ portfolio
Lần này bạn không ngồi xé nhỏ từng đầu việc. Bạn giao nguyên một việc lớn, kèm đủ ngữ cảnh (chính là bộ specs), rồi để AI tự lên plan, tự hỏi lại những chỗ còn mơ hồ, tự quyết phần kỹ thuật và bắt tay build. Việc của bạn nhẹ thôi: nó hỏi thì trả lời, nó báo cáo thì đọc lướt, tới lúc cần thì cho save game.
Mở Agent (Cmd/Ctrl+I) trong workspace tvd-avocadoo-portfolio/, để chế độ Agent. Paste prompt dưới đây — đây là prompt dài nhất, cũng là quan trọng nhất:
Bạn là engineer đang giúp tôi build portfolio Next.js theo spec library trong thư mục specs/. Làm việc qua 4 phase sau, DỪNG đúng chỗ tôi yêu cầu trước khi sang phase kế tiếp.
PHASE 1 · HIỂU
1. Đọc specs/INDEX.md để biết toàn bộ cấu trúc.
2. Đọc tuần tự tất cả file trong các folder: specs/00-overview/ (4 file), specs/01-design/ (6 file), specs/04-data/ (5 file), specs/02-components/ (9 file), specs/03-sections/ (10 file), specs/05-animations/ (8 file), specs/06-tech/ (8 file).
3. Tóm tắt cho tôi (5-8 dòng tiếng Việt): sản phẩm này là gì, cho ai, stack chốt, sections sẽ có, design tone.
PHASE 2 · PLAN
4. Liệt kê các task lớn theo thứ tự thực hiện (setup → data → components → sections → animation → QA).
5. Mỗi task: tên ngắn, file/folder sẽ đụng vào, ước tính độ phức tạp (S/M/L).
PHASE 3 · CONFIRM
6. Đặt câu hỏi cho tôi về NỘI DUNG nếu specs còn mơ hồ hoặc cần lựa chọn (vd: hero copy có 3 variants — chọn cái nào? Bio Thai Van Dung rút gọn không? Social URL thực?). Tối đa 5 câu, ưu tiên cái quan trọng nhất.
7. Với QUYẾT ĐỊNH KỸ THUẬT (chọn lib version cụ thể, naming convention chi tiết, thứ tự imports, cách break component nhỏ...) → TỰ QUYẾT, KHÔNG hỏi tôi. Note vắn tắt vào tóm tắt.
8. DỪNG. Đợi tôi trả lời các câu hỏi nội dung.
PHASE 4 · EXECUTE
9. Sau khi tôi confirm, bắt đầu build theo plan. Mỗi task hoàn thành — báo cáo 1 dòng (vd "✓ lib/data/apps.ts — 13 apps, typed").
10. Sau MỖI nhóm task lớn (setup xong / data xong / components xong / sections xong / animation xong), DỪNG lại: tóm tắt vắn tắt đã làm gì, hỏi tôi có muốn `git commit` save game không, rồi đợi tôi cho phép tiếp tục.
11. Khi xong toàn bộ, chạy `npm run dev` (trong terminal panel của Cursor), in URL localhost và mời tôi mở browser xem.
QUY TẮC CHUNG
- KHÔNG bịa data. Mọi data lấy từ specs/04-data/.
- KHÔNG đụng file ngoài phạm vi spec yêu cầu.
- Lỗi không tự fix được sau 2 lần thử → DỪNG, mô tả lỗi rõ ràng, hỏi tôi.
- Respect prefers-reduced-motion ở mọi animation (dùng useReducedMotion() của Framer Motion).
- TypeScript strict, không dùng any.
Bắt đầu Phase 1 ngay.Đang chạy thì cứ để nó chạy — đừng chen thêm prompt, đợi nó dừng lại hỏi đã. Trả lời gọn thôi, một hai câu là đủ. Mỗi lần nó báo xong việc, bạn liếc qua phần tóm tắt; thấy nó đụng vào file nào lạ thì hỏi luôn "Sao lại sửa file X vậy?". Khi nó rủ save game, đáp "Ừ, commit giúp với message Y".
Sau mỗi nhóm việc, AI sẽ tự rủ git commit — cứ gật đầu. Coi như mỗi lần commit là một lần "save game": lỡ sau này có prompt nào làm vỡ layout, bạn chỉ cần bảo Cursor "Quay lại commit gần nhất giúp mình" là về lại đúng chỗ đang ngon lành.
Sẽ có lúc nó hỏi một câu mà bạn cũng chưa biết trả lời sao — kiểu "Chọn hero copy bản nào?" trong khi bạn còn chưa kịp đọc spec. Đừng để kẹt ở đó: cứ bảo "Bạn chọn giúp đi, nói ngắn lý do, mình xem rồi confirm hoặc đổi sau". Không việc gì phải dừng cả buổi vì một câu nhỏ.
Tự kiểm tra trên localhost, rồi đẩy lên Internet.
Bước 05 và 06. Trang đã chạy được — giờ là rà soát mắt thật, rồi deploy để có URL công khai.
Tự kiểm tra trên localhost
Trước khi đưa lên cho thiên hạ xem, bạn ngồi lướt một lượt như một người dùng bình thường. Mỗi mục dưới chỉ mất vài giây — bắt được lỗi lúc này vẫn dễ thở hơn nhiều so với lúc đã chia link đi khắp nơi.
Bước này không cần AI — bạn chạy dev server trực tiếp trong terminal panel của Cursor. Mở nó bằng Ctrl+` (backtick, phím dưới Esc), gõ:
npm run devSau ~5 giây, terminal sẽ in Ready in … và URL. Mở http://localhost:3000 trên trình duyệt và đối chiếu checklist dưới (click vào ô để đánh dấu đã xong):
- Hero hiện tên "Thai Van Dung" và tagline rõ ràng, không tràn ra khỏi viewport.
- Metrics section đếm hoặc hiện đúng các con số (vd 500k+ tổng users).
- Apps grid hiện đủ 13 card, mỗi card có tên + tech badge.
- Hover vào một app card — có hiệu ứng lift, link không bị hỏng.
- Spotlight section nổi bật được app chủ lực (Speak Chinese).
- About section đọc được phần story Thai Van Dung.
- Contact section có email hoặc social link click được.
- Thu nhỏ trình duyệt xuống ~375px (mobile) — không có element nào tràn ngang.
- Mở DevTools console — không có lỗi đỏ.
Thấy lỗi thì đừng vội xắn tay sửa tay. Quay lại Agent và tả thật cụ thể bạn thấy gì: "Trên mobile, card thứ 3 trong apps grid bị tràn ra ngoài màn hình". Tả rõ vậy thì Agent sửa trúng hơn hẳn so với một câu chung chung kiểu "trang xấu quá, sửa giúp".
Đẩy lên Internet với Vercel
Localhost thì chỉ mình bạn xem được. Bước cuối là đẩy nó lên Internet để có một đường link ai cũng mở được — chừng 3 phút là xong.
Cách A · Vercel CLI (nhanh nhất, không cần GitHub). Dán prompt dưới vào Agent:
Deploy project hiện tại lên Vercel ở môi trường production.
1. Kiểm tra vercel CLI đã cài chưa (`vercel --version`). Nếu chưa, chạy `npm install -g vercel` để cài global.
2. Kiểm tra tôi đã login Vercel chưa (`vercel whoami`). Nếu chưa, chạy `vercel login` — tôi sẽ tự confirm trong browser khi nó mở ra.
3. Chạy `vercel --yes` từ thư mục project để deploy lần đầu với cấu hình mặc định (tên project = tên thư mục, không link project cũ, root directory = ./).
4. Sau khi deploy xong, chạy `vercel --prod --yes` để promote lên production.
Cuối cùng in ra URL production cho tôi (dạng *.vercel.app).Cách B · qua GitHub (khuyến nghị cho lâu dài — push code lên GitHub, import vào Vercel, auto-deploy mỗi lần push):
Push project lên một GitHub repo public mới.
1. Stage tất cả file thay đổi và commit với message "ready to ship".
2. Kiểm tra GitHub CLI đã cài chưa (`gh --version`). Nếu chưa, hướng dẫn tôi cài (https://cli.github.com/). Nếu chưa login, chạy `gh auth login` và để tôi confirm browser.
3. Tạo repo public mới tên "tvd-avocadoo-portfolio" từ thư mục hiện tại và push lên (gh repo create … --public --source=. --push).
4. In ra URL của repo GitHub vừa tạo.
Sau đó tôi sẽ vào vercel.com/new để import repo và deploy.Sau khi Prompt 06 (Push GitHub) chạy xong, vào vercel.com/new, chọn repo vừa push, bấm Deploy. Lần sau mỗi khi git push, Vercel tự deploy bản mới.
tvd-avocadoo-portfolio-xxx.vercel.app. Mở URL đó trên điện thoại để xác nhận trang chạy đúng. Chia sẻ link này cho bạn bè được rồi.
Nếu bạn có domain riêng (vd thaivandung.com): trong Vercel dashboard → project → Settings → Domains → Add. Vercel hướng dẫn cấu hình DNS theo từng nhà cung cấp domain. SSL tự động.
Bạn vừa ship một portfolio. Còn nhiều thứ phía sau.
Nếu mọi bước trên đã chạy, bạn vừa làm một việc mà ba năm trước cần một developer ngồi cạnh cả tuần: dựng một sản phẩm web có thiết kế nghiêm túc, deploy lên Internet, share link được. Không phải tự bạn viết từng dòng — nhưng bạn đã ra quyết định ở từng bước, đã đọc tóm tắt của AI, đã quay lại sửa khi thấy sai. Đó là làm vibe coding nghiêm túc.
Từ đây, có vài hướng đi tự nhiên. Một là, sửa portfolio này thành của bạn: đổi tên, đổi apps, đổi màu accent — mỗi thay đổi là một prompt nhỏ. Hai là, thử ý tưởng tiếp theo — landing cho sự kiện, công cụ nội bộ, demo cho buổi gọi đầu tư. Mọi project sau sẽ nhanh hơn project này, vì bạn đã quen quy trình.
Ba là, viết spec library của riêng bạn cho thứ bạn hay làm. Bộ spec bạn vừa dùng là tài sản — lần sau muốn build portfolio cho người khác, chỉ cần đổi data và một vài chi tiết design. Spec tốt là cách bạn "nhân bản" kỹ năng của mình mà không cần ngồi làm lại từ đầu.
Một vòng tròn vừa khép lại
Lý thuyết đã đọc, thực hành đã xong. Còn lại là chuyện lặp lại.
Mỗi lần lặp, bạn nhanh hơn một chút. Mỗi lần lặp, ý tưởng bạn ra được nhiều hơn. Đó là toàn bộ "bí mật" của vibe coding — không có bí mật, chỉ có thói quen tốt và nhiều lần thử.
← Xem lại bài lý thuyết Bắt đầu lại từ đầu