Build App Đầu Tiên Bằng Claude Code: Chỉ Mô Tả Tiếng Việt, Không Cần Code

Định nghĩa

Claude Code cho phép bạn lập trình bằng tiếng Việt thuần túy — chỉ cần diễn đạt ý muốn như đang nhắn tin Zalo cho bạn bè, AI sẽ biến mô tả đó thành ứng dụng chạy được trên trình duyệt hoặc điện thoại. Kỹ thuật này gọi là "Vibe Coding": bạn lo logic nghiệp vụ (app cần làm gì), Claude lo cú pháp kỹ thuật (viết code, sửa lỗi, deploy).

Giải thích chi tiết

Từ "Mô tả Tiếng Việt" thành Code chạy được

Coi Claude Code như trình biên dịch ngôn ngữ tự nhiên. Thay vì gõ mấy dòng khó hiểu kiểu if (user.authenticated) { ... }, bạn nói: "Tạo trang đăng nhập, nếu email đúng định dạng thì cho vào dashboard". Claude sẽ:

1. Hiểu ý định: Phân tích mô tả thành các khối công việc (form nhập liệu, kiểm tra định dạng, chuyển trang)
2. Sinh code tương ứng: Viết HTML forms, JavaScript validation, CSS theo đúng yêu cầu
3. Liên kết tự động: Ghép các file lại thành hệ thống chạy được, tự sửa lỗi nếu thiếu dấu ngoặc hay sai biến số

Điểm mấu chốt: Prompt tiếng Việt là "bản thiết kế duy nhất". Muốn thay đổi tính năng, bạn sửa lại đoạn mô tả, không cần đọc code cũ để refactor. Code chỉ là sản phẩm phụ (artifact), ý định bằng tiếng Việt mới là nguồn sự thật.

Planning Mode: Nhìn trước khi nhảy

Với người mới, lệnh /plan (hoặc flag --permission-mode plan) là bắt buộc. Khi bạn mô tả ý tưởng, Claude sẽ vẽ ra "bản vẽ kiến trúc":

• Chia thành 5-7 bước nhỏ (từ database đến giao diện)
• Ước tính thời gian từng phần (ví dụ: 5 phút cho phần tính toán, 10 phút cho giao diện)
• Liệt kê file sẽ tạo ra (index.html, style.css, app.js)

Tại sao quan trọng: Đây là cách bạn — người không biết code — vẫn kiểm soát được logic nghiệp vụ. Bạn có thể nói "Bỏ bước gửi email đi, tôi chỉ cần lưu vào máy" hoặc "Thêm nút chia sẻ qua Zalo trước khi làm phần in ấn". Không cần đụng vào code vẫn điều khiển được dự án.

Auto Mode: Tự chạy khi đã tin tưởng

Sau 2-3 lần dùng /plan thành công, bật auto mode (--permission-mode auto) để Claude tự:

• Chạy lệnh terminal (npm install, git commit, python -m http.server)
• Sửa lỗi khi thấy bug (đọc error message → sửa file → chạy lại)
• Tạo file mới mà không hỏi lại từng bước

Cơ chế safety classifier tự động chặn lệnh nguy hiểm như rm -rf / hay DROP TABLE, nên bạn vẫn an toàn dù không hiểu chi tiết kỹ thuật.

CLAUDE.md: Sổ tay khẩu hiệu bằng tiếng Việt

File CLAUDE.md trong thư mục project đóng vai trò "bộ não phụ" — nơi ghi quy tắc bằng tiếng Việt để AI nhớ mãi:

# Quy tắc dự án của tôi
- Luôn dùng tiếng Việt cho toàn bộ text trên nút bấm và thông báo lỗi
- Màu chủ đạo: xanh dương navy giống Shopee, không dùng màu chói
- Mọi số tiền phải định dạng có dấu phẩy ngăn cách hàng nghìn (VD: 1,250,000 VNĐ)
- Tối ưu cho màn hình điện thoại trước, desktop sau (mobile-first)

Điều này đảm bảo app của bạn không bị "lẫn" tiếng Anh vào giao diện, và trải nghiệm quen thuộc với người dùng Việt Nam quen dùng Grab, MoMo hay Zalo.

Subagents: Chia nhỏ để không choáng ngợp

Khi app phức tạp hơn 10 file, Claude tự động tách thành các subagent chuyên biệt:

• UI Agent: Chỉ lo phần nhìn (HTML/CSS giống Figma)
• Logic Agent: Chỉ lo tính toán (JavaScript xử lý số liệu)
• Data Agent: Chỉ lo lưu trữ (LocalStorage hoặc SQLite)

Mỗi agent chạy trong "vùng trí nhớ" riêng, tránh tình trạng "nói nhiều quá nên bị lẫn". Kết quả được gộp lại thành app hoàn chỉnh mà bạn chỉ thấy kết quả cuối cùng.

Ví dụ thực tế

App chia tiền đi ăn nhóm (15 phút)

Prompt copy-paste:

Tạo app tính tiền chia đều khi đi ăn nhóm với bạn bè:
- Nhập tổng bill (ví dụ 850k đi ăn lẩu Haidilao)
- Chọn số người (có nút + - để tăng giảm)
- Tự động cộng thêm 10% VAT và 5% tip cho nhân viên phục vụ
- Hiển thị mỗi người cần trả bao nhiêu tiền, làm tròn đến nghìn đồng (VD: 156,000đ)
- Giao diện giống GrabPay, màu xanh lá nhạt, chữ to dễ đọc khi đang ngồi ngoài quán
- Chạy được trên điện thoại, không cần lưu database, chỉ cần tính xong copy kết quả
- Tất cả text tiếng Việt, có emoji 🍲 cho vui

Tạo 1 file index.html duy nhất, tôi sẽ mở trên điện thoại và chia tiền ngay tại bàn.

Kết quả: File HTML 200 dòng, mở trên Safari/Chrome mobile là chạy, tính toán real-time khi nhập số. Bạn có thể gửi file này qua Zalo cho bạn bè cùng mở.

App xem tỷ giá ngoại tệ (20 phút)

Prompt copy-paste:

Tạo app xem tỷ giá USD/VND/EUR cho dân buôn hàng order:
- Lấy tỷ giá thật từ API của Vietcombank hoặc trang web ngân hàng (dùng fetch)
- Hiển thị 1 USD = bao nhiêu VND, cập nhật theo ngày, có ghi chú "Cập nhật lúc 14:30"
- Cho phép nhập số tiền USD (ví dụ 100$ hàng Amazon) để quy đổi ra VND ngay lập tức
- Thêm nút "Sao chép" để paste kết quả vào Zalo/MoMo khi chia tiền hàng với bạn
- Giao diện đơn giản, load nhanh trên điện thoại Android cấu hình thấp
- Màu trắng xanh như app ngân hàng, số tiền hiển thị to và rõ

Deploy lên Netlify hoặc chạy local đều được.

Kết quả: Trang web tra cứu tỷ giá real-time, dùng được ngay trên điện thoại mà không cần cài app nặng như các ứng dụng ngân hàng.

Trang portfolio cá nhân (25 phút)

Prompt copy-paste:

Tạo trang web giới thiệu bản thân để gửi nhà tuyển dụng:
- Header: Ảnh đại diện tròn (dùng placeholder), tên Nguyễn Văn A, chức danh "Digital Marketing Specialist"
- Section "Kinh nghiệm": 3 công ty gần nhất (Cốc Cốc, Shopee, Tiki) với bullet points thành tích có số liệu (VD: "Tăng 150% traffic")
- Section "Kỹ năng": Thanh progress bar biết Photoshop, Google Ads, Facebook Marketing
- Nút "Tải CV" màu cam giống ShopeeFood nổi bật ở giữa màn hình
- Footer: SĐT 090xxxx và email, link LinkedIn (dùng icon đẹp)
- Responsive, khi mở trên điện thoại vẫn đẹp, không bị vỡ layout
- Hiệu ứng cuộn chuột mượt mà, load nhanh dưới 3 giây

Code trong 1 file HTML duy nhất kèm CSS và JavaScript, tôi sẽ upload lên Vercel.

Kết quả: Trang portfolio chuyên nghiệp, có thể gửi link cho nhà tuyển dụng thay vì gửi file PDF tĩnh.

Ứng dụng

Sinh viên đại học Bách Khoa, Kinh tế

• Làm prototype cho đồ án môn Lập trình ứng dụng web mà không cần học React trong 1 tuần
• Tạo app tính điểm GPA theo hệ 4 và hệ 10 để chia sẻ cho cả lớp dùng
• Xây dựng landing page giới thiệu dự án khởi nghiệp (startup) trong các cuộc thi Sinh viên khởi nghiệp

Dân văn phòng làm việc tại quận 1, quận 7

• Biến file Excel quản lý công việc hàng ngày thành web app nội bộ cho team 3-5 người, tránh tình trạng file bị ghi đè
• Tạo công cụ tự động tính toán KPI thay vì ngồi copy-paste số liệu từ báo cáo trên email

Chủ shop nhỏ trên Shopee, Lazada

• Trang landing page giới thiệu sản phẩm handmade không cần thuê dân IT, chi phí chỉ vài đô API thay vì 5-10 triệu thuê freelance
• App quản lý đơn hàng đơn giản trên điện thoại, thay vì ghi chép vào sổ tay dễ nhầm lẫn

Freelancer đăng ký trên VietnamWorks, Upwork

• Ship MVP cho khách hàng trong 1 buổi sáng thay vì 1 tuần, test thị trường trước khi đầu tư viết code "chuẩn chỉnh"
• Tạo mockup tương tác (interactive prototype) để demo cho khách hàng xem trước khi ký hợp đồng

So sánh

Kết luận: Vibe Coding là "khoảng trống" hoàn hảo giữa tốc độ của no-code và sức mạnh của coding truyền thống. Phù hợp cho MVP nhanh, công cụ nội bộ doanh nghiệp nhỏ, và những người cần giải pháp gấp mà không muốn bị khóa vào nền tảng của bên thứ ba như Bubble hay Webflow.

Bài viết liên quan

Cùng cụm

• Vibe Coding là gì? Người không biết code cũng build được app — Hiểu sâu hơn về triết lý, lịch sử và giới hạn của Vibe Coding trước khi bắt đầu
• Build công cụ cá nhân: Todo app, quản lý chi tiêu, tracker — Các template cho công cụ dùng hàng ngày như quản lý thói quen, chi tiêu cá nhân
• Build Chrome Extension trong 45 phút — không cần biết JavaScript — Nâng cao với browser automation và extension chạy trên Chrome
• Build landing page chuyên nghiệp trong 1 giờ — Tối ưu cho marketing, bán hàng và thu thập lead khách hàng

Đọc tiếp

• Làm việc hàng ngày với Claude Code — Quay lại Level 1 để nắm các lệnh cơ bản như /plan, /commit, cách di chuyển file và debug khi Vibe Coding gặp lỗi
• Case study: Build dự án thực tế — Khi đã quen với app đơn giản, chuyển sang Level 4 để học cách xây dựng hệ thống production-grade với CI/CD và testing tự động