TodyAI Learning

Giao diện

Phụ Lục & Tài Nguyên — Khóa Học Vibe Coding với Google AI Studio ​

Tài liệu bổ sung cho 20 bài học chính. Bao gồm: bảng thuật ngữ, prompt mẫu, tips nâng cao, system instructions mẫu, và checklist triển khai.

PHẦN 4: PHỤ LỤC — BẢNG THUẬT NGỮ VIBE CODING ​

STTThuật ngữGiải thích bằng tiếng Việt đời thường
1Vibe CodingTạo phần mềm/website bằng cách mô tả bằng lời nói thay vì viết code — giống như “nói cho đầu bếp biết bạn muốn ăn gì thay vì tự vào bếp nấu”
2Code“Công thức nấu ăn” mà máy tính đọc để biết phải hiển thị gì, làm gì. Trước đây phải tự viết, giờ AI viết thay
3PromptCâu mô tả yêu cầu bạn gõ cho AI — giống như “đơn gọi món” tại nhà hàng. Gõ càng rõ, “món” ra càng đúng ý
4DeployĐưa sản phẩm lên internet — giống như “mở cửa hàng” để mọi người vào xem và mua
5DebugTìm và sửa lỗi — giống như “sửa lỗi chính tả” nhưng cho code. Bạn chỉ cần báo “triệu chứng”, AI tìm và sửa “nguyên nhân”
6API“Ổ cắm điện nối hai thiết bị” — cho phép website của bạn lấy dữ liệu hoặc dùng tính năng từ dịch vụ khác (Google Maps, thanh toán, v.v.)
7Database (Firebase/Firestore)“Sổ ghi chép trên mây” — nơi lưu trữ thông tin (dữ liệu form, tài khoản người dùng…) mà bạn có thể đọc lại bất kỳ lúc nào từ bất kỳ đâu
8Build Mode“Phòng làm việc” chính trong Google AI Studio — nơi bạn gõ mô tả và AI tạo sản phẩm cho bạn
9Live Preview“Gương soi” cho sản phẩm — cửa sổ bên phải hiển thị sản phẩm trông ra sao trước khi đưa lên internet
10ResponsiveKhả năng website tự “uốn mình” theo kích thước màn hình — giống như nước đổ vào bình nào thì thành hình bình đó. Đẹp trên máy tính lẫn điện thoại
11Framework (React, Angular, Next.js)“Phong cách xây nhà” mà AI dùng để tạo sản phẩm cho bạn. Mặc định dùng React — bạn không cần quan tâm, cứ để AI chọn
12GitHub“Google Drive dành cho code” — nơi lưu trữ code trên mây, an toàn, có thể quay về phiên bản cũ
13Cloud Run“Mặt bằng cho thuê trên internet” của Google — nơi website của bạn “sống” và chạy 24/7 sau khi deploy
14Landing PageTrang web có 1 mục đích duy nhất (bán hàng, thu thập email, quảng bá…) — giống “tờ rơi quảng cáo trên internet”
15CTA (Call to Action)Nút kêu gọi hành động — “Mua ngay”, “Đăng ký”, “Liên hệ”. Đây là nút quan trọng nhất trên trang — mục tiêu cuối cùng bạn muốn người xem bấm
16Annotation ModeChế độ vẽ/ghi chú lên giao diện sản phẩm — giống “dùng bút đánh dấu lên bản in và ghi chú sửa bên lề”
17Secrets Manager“Két sắt” lưu mật khẩu và khóa kết nối (API key) — nơi an toàn để cất thông tin nhạy cảm, không ai thấy được
18Antigravity Agent“Trợ lý thông minh” bên trong Google AI Studio — con AI hiểu toàn bộ project của bạn, quản lý nhiều file, và sửa code thông minh hơn
19Open Graph“Thiệp mời” cho link chia sẻ — thông tin ẩn giúp Facebook, Zalo hiển thị hình ảnh đẹp và tiêu đề hấp dẫn khi bạn paste link
20UX (User Experience)“Trải nghiệm khách hàng khi dùng sản phẩm” — trang dễ dùng, dễ tìm, dễ hiểu = UX tốt. Giống như nhà hàng bàn sạch, menu rõ, phục vụ nhanh

PHẦN 5: PHỤ LỤC — BỘ SƯU TẬP 10 PROMPT MẪU “VÀNG” ​

Dưới đây là 10 prompt mẫu đã được kiểm chứng, bạn chỉ cần copy, thay thông tin trong […] bằng thông tin thật của mình, rồi paste vào Google AI Studio Build Mode.

PROMPT 1: Landing Page Bán Sản Phẩm Vật Lý (Shop Online) ​

Tạo landing page bán hàng bằng tiếng Việt cho shop online:

THƯƠNG HIỆU: [TÊN SHOP]
SẢN PHẨM CHÍNH: [TÊN SẢN PHẨM]
ĐỐI TƯỢNG: [MÔ TẢ KHÁCH HÀNG MỤC TIÊU]

CẤU TRÚC:
1. Hero banner: ảnh sản phẩm lớn + tiêu đề "[SLOGAN]" + badge "Bán chạy #1" + nút "Mua ngay" màu [MÀU]
2. Vấn đề: "Bạn có gặp tình trạng [LIỆT KÊ 3 VẤN ĐỀ]?"
3. Giải pháp: Giới thiệu sản phẩm với 4 lợi ích, mỗi lợi ích có icon
4. Sản phẩm chi tiết: ảnh nhiều góc, mô tả, thành phần/chất liệu, cách dùng
5. Bảng giá: giá gốc [GIÁ GỐC] gạch ngang, giá sale [GIÁ SALE], tiết kiệm [%]
6. Combo: 3 combo (1 sản phẩm / 2 sản phẩm / 3 sản phẩm) với giá ưu đãi tăng dần
7. Đánh giá: 5 review 5 sao từ khách hàng (tự tạo phù hợp)
8. FAQ: 5 câu hỏi thường gặp
9. CTA cuối: "Đặt hàng ngay — Giao hàng toàn quốc — Thanh toán khi nhận hàng"
10. Footer: SĐT hotline, Zalo, Facebook

THIẾT KẾ: hiện đại, tin cậy, màu [MÀU CHỦ ĐẠO], responsive, có countdown "Ưu đãi còn [X] ngày"

PROMPT 2: Landing Page Dịch Vụ (Spa, Salon, Gym, Tư vấn…) ​

Tạo landing page giới thiệu dịch vụ bằng tiếng Việt:

DOANH NGHIỆP: [TÊN]
DỊCH VỤ: [TÊN DỊCH VỤ]
ĐỊA CHỈ: [ĐỊA CHỈ]
ĐỐI TƯỢNG: [MÔ TẢ]

CẤU TRÚC:
1. Hero: hình ảnh không gian/dịch vụ + "[SLOGAN]" + nút "Đặt lịch ngay"
2. Giới thiệu: 3 câu về triết lý, kinh nghiệm, cam kết
3. Dịch vụ: [SỐ] gói dịch vụ, mỗi gói có: tên, mô tả, thời gian, giá từ [GIÁ]
4. Quy trình: 4-5 bước từ đặt lịch đến hoàn thành, có icon số thứ tự
5. Không gian: gallery 4-6 ảnh (placeholder)
6. Đội ngũ: 3-4 chuyên gia, ảnh tròn + tên + kinh nghiệm
7. Đánh giá: 4 review từ khách hàng với số sao
8. Khuyến mãi: banner "Ưu đãi [NỘI DUNG] khi đặt lịch online"
9. Form đặt lịch: Họ tên, SĐT, Dịch vụ (dropdown), Ngày giờ mong muốn, Ghi chú
10. Bản đồ + thông tin liên hệ

THIẾT KẾ: sang trọng, ấm áp, màu [MÀU], font thanh lịch, responsive

PROMPT 3: Website Doanh Nghiệp Nhiều Trang ​

Tạo website nhiều trang cho doanh nghiệp bằng tiếng Việt:

THÔNG TIN: [TÊN] - [NGÀNH] - [SLOGAN]

4 TRANG:

TRANG CHỦ:
- Hero banner + slogan + CTA
- 3-4 dịch vụ nổi bật (card)
- "Tại sao chọn chúng tôi" (4 lý do + icon)
- Con số: [X]+ khách hàng, [Y] năm kinh nghiệm, [Z]+ dự án
- 3 đánh giá khách hàng
- CTA cuối trang

GIỚI THIỆU:
- Câu chuyện thành lập
- Sứ mệnh / Tầm nhìn / Giá trị cốt lõi (3 box)
- Đội ngũ: [SỐ] thành viên + ảnh + tên + chức vụ

SẢN PHẨM/DỊCH VỤ:
- Grid hiển thị [SỐ] sản phẩm/dịch vụ
- Mỗi mục: ảnh, tên, mô tả, giá/liên hệ

LIÊN HỆ:
- Thông tin: địa chỉ, SĐT, email, giờ làm việc
- Form liên hệ
- Google Maps iframe
- Link MXH

CHUNG: sticky header, hamburger menu mobile, footer nhất quán, màu [MÀU], responsive

PROMPT 4: Máy Tính/Calculator Tool ​

Tạo công cụ tính toán "[TÊN TOOL]" bằng tiếng Việt:

MỤC ĐÍCH: [MÔ TẢ TOOL DÙNG ĐỂ LÀM GÌ]

TRƯỜNG NHẬP LIỆU:
1. [Tên trường 1]: loại [số/text/dropdown], đơn vị [VNĐ/%/...]
2. [Tên trường 2]: loại [...], đơn vị [...]
3. [Tên trường 3]: loại [...], đơn vị [...]

CÔNG THỨC TÍNH:
[Kết quả 1] = [CÔNG THỨC HOẶC MÔ TẢ CÁCH TÍNH]
[Kết quả 2] = [CÔNG THỨC]

HIỂN THỊ KẾT QUẢ:
- [Tên kết quả 1]: số lớn, đậm, màu [MÀU], định dạng VNĐ
- [Tên kết quả 2]: [MÔ TẢ]
- Biểu đồ: [cột/tròn/đường] so sánh [GÌ VỚI GÌ]

THIẾT KẾ:
- Form bên trái, kết quả bên phải (desktop)
- Trên mobile: form trên, kết quả dưới
- Nút "Tính ngay" lớn, nổi bật
- Nút "Xóa" để reset
- Logo: [TÊN THƯƠNG HIỆU]
- Màu: [MÀU], phong cách chuyên nghiệp, responsive

PROMPT 5: Form Thu Thập Khách Hàng (Lead Generation) ​

Tạo trang thu thập thông tin khách hàng tiềm năng bằng tiếng Việt:

TIÊU ĐỀ: "[TIÊU ĐỀ HẤP DẪN - VD: Nhận Tư Vấn Miễn Phí]"
MÔ TẢ: [2-3 CÂU VỀ GIÁ TRỊ KHÁCH NHẬN ĐƯỢC KHI ĐĂNG KÝ]

BỐ CỤC:
- Bên trái: 3-4 lợi ích khi đăng ký (icon + text), hình ảnh minh họa
- Bên phải: form đăng ký

FORM:
- Họ và tên (bắt buộc)
- Số điện thoại (bắt buộc)
- Email
- [Trường tùy chỉnh — VD: "Bạn quan tâm dịch vụ nào?" dropdown]
- Checkbox: "Tôi đồng ý nhận thông tin ưu đãi"
- Nút "Đăng ký nhận [LỢI ÍCH]"

SAU KHI GỬI: popup/thông báo "Đăng ký thành công! Chúng tôi sẽ liên hệ bạn trong 24h."
Validation: hiện lỗi đỏ nếu bỏ trống trường bắt buộc, kiểm tra định dạng email/SĐT

THIẾT KẾ: sạch sẽ, tin cậy, màu [MÀU], form có shadow nhẹ, nền gradient nhẹ, responsive
Lưu dữ liệu vào Firebase nếu có thể.

PROMPT 6: Bộ Đếm Ngược Khuyến Mãi + Sản Phẩm Sale ​

Tạo trang khuyến mãi đếm ngược bằng tiếng Việt:

SỰ KIỆN: [TÊN SỰ KIỆN - VD: Flash Sale Cuối Tuần]
THỜI HẠN: đếm ngược đến [NGÀY GIỜ KẾT THÚC]

CẤU TRÚC:
1. Banner: "[TÊN SỰ KIỆN]" + bộ đếm ngày/giờ/phút/giây realtime + "Nhanh tay kẻo lỡ!"
2. Danh sách [SỐ] sản phẩm sale, mỗi sản phẩm:
   - Ảnh, tên, giá gốc (gạch), giá sale (đỏ), badge "Giảm [%]"
   - Thanh progress "Đã bán [X]%" 
   - Nút "Mua ngay"
3. Điều kiện: "Miễn phí ship cho đơn từ [SỐ TIỀN]"
4. CTA cuối: "Đừng bỏ lỡ — chỉ còn [X] sản phẩm!"

THIẾT KẾ: urgency (gấp gáp), nền đỏ/đen, chữ trắng/vàng, số đếm lớn kiểu digital, hiệu ứng nhấp nháy nhẹ, responsive
Khi hết giờ: hiển thị "Khuyến mãi đã kết thúc. Hẹn gặp bạn lần sau!"

PROMPT 7: Bảng So Sánh Gói Dịch Vụ/Sản Phẩm (Pricing Table) ​

Tạo bảng so sánh [SỐ] gói dịch vụ bằng tiếng Việt:

CÁC GÓI:
1. [TÊN GÓI 1] - [GIÁ]/tháng
   Tính năng: [LIỆT KÊ]
2. [TÊN GÓI 2] - [GIÁ]/tháng (PHỔ BIẾN NHẤT)
   Tính năng: [LIỆT KÊ]
3. [TÊN GÓI 3] - [GIÁ]/tháng
   Tính năng: [LIỆT KÊ]

THIẾT KẾ:
- 3 cột song song, gói giữa nổi bật (viền màu, badge "Phổ biến nhất", scale lớn hơn 5%)
- Mỗi tính năng: ✅ có / ❌ không
- Nút "Chọn gói" dưới mỗi cột, gói giữa nút màu khác
- Toggle chuyển đổi "Theo tháng / Theo năm" (năm giảm 20%)
- Hover effect: cột nổi lên nhẹ
- Mobile: card xếp dọc
- FAQ bên dưới: 3 câu hỏi về gói dịch vụ

PROMPT 8: Trang Sự Kiện / Workshop / Webinar ​

Tạo trang đăng ký sự kiện bằng tiếng Việt:

SỰ KIỆN: [TÊN SỰ KIỆN]
NGÀY: [NGÀY GIỜ]
ĐỊA ĐIỂM: [ĐỊA ĐIỂM HOẶC "Online qua Zoom"]
PHÍ: [GIÁ HOẶC "Miễn phí"]

CẤU TRÚC:
1. Hero: tên sự kiện lớn + ngày giờ + bộ đếm ngược + nút "Đăng ký ngay"
2. Mô tả sự kiện: 3-4 đoạn về nội dung, ai nên tham gia
3. Diễn giả: [SỐ] người, ảnh + tên + chức danh + mô tả ngắn
4. Agenda: timeline dọc, mỗi phần có giờ + tiêu đề + mô tả
5. "Bạn sẽ nhận được gì": 4-5 lợi ích với icon
6. Đánh giá: 3 đánh giá từ người đã tham gia sự kiện trước
7. Form đăng ký: Họ tên, Email, SĐT, "Bạn biết sự kiện từ đâu?" (dropdown)
8. FAQ: 4 câu hỏi

THIẾT KẾ: năng động, chuyên nghiệp, màu [MÀU], responsive

PROMPT 9: Portfolio / Showcase Cá Nhân (Freelancer) ​

Tạo trang portfolio cá nhân bằng tiếng Việt cho freelancer:

THÔNG TIN:
- Tên: [TÊN]
- Chuyên môn: [VD: Thiết kế đồ họa / Viết nội dung / Chụp ảnh]
- Kinh nghiệm: [SỐ] năm
- Email: [EMAIL]

CẤU TRÚC:
1. Hero: tên lớn + chuyên môn + tagline "[TAGLINE]" + ảnh avatar + nút "Xem portfolio" và "Liên hệ"
2. Về tôi: 3-4 câu giới thiệu, tính cách, phong cách làm việc
3. Dịch vụ: 3-4 dịch vụ cung cấp, mỗi dịch vụ có icon + mô tả + giá từ
4. Portfolio: grid 6-8 ảnh placeholder (đại diện cho dự án đã làm), click để xem lớn + mô tả dự án
5. Quy trình làm việc: 4 bước (Trao đổi → Báo giá → Thực hiện → Bàn giao)
6. Khách hàng đã hợp tác: 4-6 logo (placeholder)
7. Đánh giá: 3 review từ khách hàng
8. CTA: "Sẵn sàng hợp tác? Liên hệ ngay" + form liên hệ ngắn

THIẾT KẾ: sáng tạo, cá tính, tối giản, nền tối, accent color [MÀU], font hiện đại, responsive

PROMPT 10: Dashboard / Bảng Điều Khiển Đơn Giản ​

Tạo dashboard (bảng điều khiển) đơn giản bằng tiếng Việt:

MỤC ĐÍCH: [VD: Theo dõi doanh thu / Quản lý đơn hàng / Theo dõi KPI marketing]

PHẦN TRÊN - TỔNG QUAN (4 card):
1. [Chỉ số 1 - VD: Tổng doanh thu]: [SỐ MẪU] + icon + so với tháng trước (+/-%)
2. [Chỉ số 2 - VD: Tổng đơn hàng]: [SỐ MẪU]
3. [Chỉ số 3 - VD: Khách hàng mới]: [SỐ MẪU]
4. [Chỉ số 4 - VD: Tỷ lệ chuyển đổi]: [SỐ MẪU]%

PHẦN GIỮA - BIỂU ĐỒ:
- Biểu đồ đường: [chỉ số] theo 7 ngày gần nhất (dữ liệu mẫu)
- Biểu đồ cột: so sánh [chỉ số A] vs [chỉ số B]

PHẦN DƯỚI - BẢNG DỮ LIỆU:
- Bảng [SỐ] dòng gần nhất: [Cột 1], [Cột 2], [Cột 3], [Cột 4], Trạng thái (badge màu)

THIẾT KẾ: dark theme (nền tối), card có border nhẹ + shadow, số liệu lớn đậm, tăng = xanh lá, giảm = đỏ, biểu đồ dùng thư viện hiện đại (Recharts), responsive, sidebar menu bên trái

🎉 CHÚC MỪNG BẠN ĐÃ HOÀN THÀNH KHÓA HỌC!

Bạn đã đi từ “chưa biết Vibe Coding là gì” đến “tự tay tạo và deploy sản phẩm số lên internet.” Đây không phải kết thúc — đây là bước khởi đầu. Mỗi sản phẩm bạn tạo ra từ đây sẽ tốt hơn sản phẩm trước, vì bạn đã có nền tảng tư duy và kỹ năng. Hãy tiếp tục tạo, tiếp tục thử, và tiếp tục đưa ý tưởng thành hiện thực.

BỔ SUNG & NÂNG CẤP KHÓA HỌC ​

Dưới đây là các phần bổ sung quan trọng dựa trên nghiên cứu mới nhất về Google AI Studio (cập nhật đến tháng 4/2026), bao gồm: tips nâng cao từ chuyên gia Google, tính năng mới chưa đề cập, và các phụ lục bổ sung.

PHỤ LỤC 3: TIPS NÂNG CAO TỪ CHUYÊN GIA — “9 BÍ KÍP VIBE CODING HIỆU QUẢ” ​

Các tips này được tổng hợp từ blog chính thức của Google AI, các chuyên gia đã dùng AI Studio thực tế, và cộng đồng vibe coding quốc tế — diễn giải lại bằng ngôn ngữ dễ hiểu cho người không biết code.

Bí kíp 1: Thiết kế trước, xây sau — Đừng “nhảy vào” ngay ​

Trước khi gõ prompt, hãy dành 5-10 phút phác thảo trên giấy hoặc dùng công cụ Stitch (https://stitch.withgoogle.com/) để tạo mockup (bản phác thảo giao diện). Sau đó chụp ảnh phác thảo và gửi kèm prompt cho AI. AI “nhìn hình” tạo ra kết quả chính xác hơn nhiều so với chỉ đọc mô tả bằng chữ.

Giống như khi bạn đến thợ may: đưa ảnh mẫu áo bạn muốn thì nhanh hơn nhiều so với mô tả miệng “tôi muốn áo kiểu gì đó hiện đại, cổ hơi cao nhưng không quá cao…”

Cách áp dụng: Vẽ sơ bộ bố cục trang trên giấy → chụp ảnh → kéo vào ô nhập AI Studio kèm prompt mô tả.

Bí kíp 2: Lưu checkpoint thường xuyên — Biết lúc nào nên “quay xe” ​

Google AI Studio có tính năng Checkpoint (điểm lưu) — mỗi khi bạn có phiên bản hoạt động tốt, hệ thống tự lưu lại. Nếu lần chỉnh sửa sau bị hỏng, bạn có thể quay về checkpoint trước đó.

Quy tắc vàng từ chuyên gia: Nếu AI không sửa được lỗi sau 2 lần thử, hãy quay về checkpoint trước đó thay vì tiếp tục “tranh cãi” với AI. Nhiều người mất hàng giờ cố sửa một lỗi trong khi quay về bản cũ chỉ mất 10 giây.

Cách áp dụng: Trong phần preview của AI Studio, tìm mục “Checkpoints” (thường ở timeline bên trái hoặc trong menu). Click vào checkpoint bất kỳ để khôi phục phiên bản đó.

⚠️ Lưu ý quan trọng: Checkpoint khôi phục code nhưng KHÔNG khôi phục thay đổi database (Firebase). Nếu bạn đã thay đổi database rồi quay checkpoint, hãy copy code từ checkpoint cũ, rồi load lại phiên bản mới nhất, và nhờ AI sửa dựa trên code cũ.

Bí kíp 3: Dùng đa phương thức — Không chỉ gõ chữ ​

AI Studio hỗ trợ 4 cách giao tiếp:

Gõ chữ (text): Phù hợp cho mô tả chi tiết, prompt phức tạp. Dùng khi bạn muốn chính xác.

Nói bằng giọng (voice): Bấm biểu tượng micro, nói tiếng Việt hoặc tiếng Anh. Phù hợp khi muốn thêm tính năng nhanh, đặc biệt tiện khi dùng điện thoại. Không nên dùng cho thay đổi chính xác (ví dụ: “đổi màu #FF5733” thì gõ chữ tốt hơn nói).

Vẽ lên giao diện (annotation): Bật Annotation Mode, khoanh vùng phần muốn thay đổi, ghi chú. Phù hợp nhất cho chỉnh sửa giao diện — “di chuyển nút này sang phải”, “tăng kích thước phần này”, “xóa phần này đi.”

Gửi hình ảnh: Chụp ảnh trang web tham khảo, bản phác thảo trên giấy, hoặc screenshot lỗi → kéo vào ô nhập. AI nhìn ảnh và hiểu ngay.

Mẹo pro: Luôn kết hợp annotation + mô tả bằng chữ. Ví dụ: vẽ khoanh vùng nút CTA + gõ “Đổi nút này sang màu đỏ, tăng kích thước 150%, thêm hiệu ứng nhấp nháy nhẹ.” Cho AI cả “bản đồ” (annotation) lẫn “chỉ dẫn” (text) sẽ chính xác nhất.

Bí kíp 4: Yêu cầu AI tách file — Tránh “nhồi tất cả vào 1 chỗ” ​

Đây là mẹo kỹ thuật nhưng rất quan trọng: theo mặc định, AI thường dồn tất cả code vào 1 file duy nhất. Khi sản phẩm lớn lên, AI dễ bị “quên” hoặc viết sai vì file quá dài.

Bạn không cần hiểu về file, chỉ cần thêm dòng này vào System Instructions hoặc prompt đầu tiên:

Hãy tách mỗi tính năng thành file riêng biệt. Không dồn hết vào 1 file. Mỗi file có ghi chú ở đầu giải thích file đó làm gì.

Giống như: thay vì nhét tất cả đồ vào 1 ngăn tủ (khó tìm, dễ lộn), bạn sắp xếp: ngăn áo, ngăn quần, ngăn phụ kiện (dễ tìm, dễ sửa).

Bí kíp 5: Bắt AI viết tài liệu — Để AI tự nhắc chính nó ​

Khi sản phẩm phức tạp lên, AI có thể “quên” tính năng đã tạo trước đó và vô tình xóa hoặc viết đè. Giải pháp: bắt AI duy trì một file tài liệu tên Design.md — giống như “sổ ghi nhớ” của cả dự án.

Thêm vào System Instructions:

Duy trì file Design.md ở gốc dự án, ghi lại tất cả tính năng đã tạo, cấu trúc trang, và trạng thái hiện tại. Cập nhật file này sau mỗi thay đổi lớn.

Giống như danh sách mua sắm: nếu không ghi ra giấy, đi siêu thị sẽ quên. File Design.md giúp AI “không quên” những gì đã làm.

Bí kíp 6: Tùy chỉnh System Instructions — “Huấn luyện” AI làm việc theo cách bạn muốn ​

System Instructions là “bản quy tắc” mà AI phải tuân theo trong suốt phiên làm việc. Bạn không cần nhắc đi nhắc lại mỗi lần chat — cài một lần, AI nhớ suốt.

Cách truy cập: Vào Settings (biểu tượng bánh răng) → tìm phần “System Instructions” → dán bản quy tắc vào.

Đây là bộ System Instructions mẫu bằng tiếng Việt dành cho người không biết code:

## QUY TẮC LÀM VIỆC

1. Tất cả nội dung hiển thị trên giao diện phải bằng tiếng Việt.
2. Mỗi tính năng tách thành file riêng. Không dồn vào 1 file.
3. Ghi chú ở đầu mỗi file giải thích file làm gì.
4. Duy trì file Design.md ghi lại tất cả tính năng và cấu trúc.
5. Thiết kế responsive cho mobile (breakpoint 768px).
6. Dùng Tailwind CSS cho styling.
7. Font chữ đẹp từ Google Fonts.
8. Tất cả nút bấm phải có hiệu ứng hover.
9. Khi sửa lỗi, giải thích ngắn gọn lỗi là gì trước khi sửa.
10. Không thay đổi các phần đang hoạt động tốt khi sửa phần khác.

App Gallery (https://aistudio.google.com/apps?source=showcase) là kho ứng dụng mẫu mà cộng đồng và Google đã tạo. Bạn không chỉ xem — bạn có thể Remix (sao chép và chỉnh sửa) bất kỳ app nào.

Quy trình “Remix”: Tìm app gần giống ý tưởng bạn muốn → bấm “Copy App” hoặc “Remix” → chỉnh sửa thành của bạn. Nhanh hơn nhiều so với tạo từ đầu.

Giống như nấu ăn: thay vì nghĩ ra công thức mới từ đầu, bạn lấy công thức có sẵn rồi điều chỉnh theo khẩu vị.

Bí kíp 8: Code assistant chạy nền — Đóng tab vẫn tiếp tục ​

Tính năng mới: code assistant giờ chạy server-side — nghĩa là nếu bạn gửi yêu cầu phức tạp cho AI, bạn có thể đóng tab trình duyệt hoặc chuyển sang thiết bị khác. AI vẫn tiếp tục xử lý. Khi bạn mở lại, kết quả đã sẵn sàng.

Rất tiện khi tạo sản phẩm phức tạp: gửi prompt → đi pha cà phê → quay lại đã có sản phẩm.

Bí kíp 9: Biết khi nào chuyển sang Antigravity ​

Google AI Studio là “phòng thí nghiệm nhanh” — tuyệt vời cho prototype (bản mẫu), landing page, mini tool, website nhỏ. Nhưng nếu bạn muốn xây sản phẩm phức tạp hơn (ứng dụng lớn, backend nặng, nhiều người dùng đồng thời), Google Antigravity (https://antigravity.google/) là bước tiếp theo.

Hãy nghĩ: AI Studio = bếp gia đình (nấu cho gia đình), Antigravity = bếp nhà hàng (nấu cho khách hàng quy mô lớn). Bạn bắt đầu ở bếp gia đình, khi “đông khách” thì chuyển lên bếp nhà hàng.

Tin tốt: Google đang phát triển tính năng chuyển từ AI Studio sang Antigravity chỉ bằng 1 nút bấm — khi tính năng này ra mắt, bạn không cần làm lại từ đầu.

PHỤ LỤC 4: SYSTEM INSTRUCTIONS MẪU — COPY-PASTE NGAY VÀO GOOGLE AI STUDIO ​

Dưới đây là 3 bộ System Instructions mẫu cho 3 mục đích khác nhau. Bạn chỉ cần copy và dán vào phần System Instructions trong Settings của AI Studio.

Bộ 1: Dành cho tạo Landing Page / Website (Phổ thông nhất) ​

## VAI TRÒ
Bạn là web developer chuyên tạo landing page và website cho doanh nghiệp vừa & nhỏ tại Việt Nam. Bạn giỏi về thiết kế UI/UX, React, Tailwind CSS.

## QUY TẮC CODE
- Tất cả nội dung trên giao diện bằng tiếng Việt
- Tách mỗi trang/component thành file riêng
- Duy trì file Design.md ghi lại cấu trúc website
- Responsive cho mobile (breakpoint 768px, 1024px)
- Dùng Tailwind CSS
- Google Fonts cho typography đẹp
- Tất cả hình ảnh dùng placeholder từ picsum.photos hoặc gradient đẹp
- Hiệu ứng hover trên tất cả nút và link
- Scroll animation nhẹ nhàng (fade-in khi cuộn)
- Lazy loading cho hình ảnh

## QUY TẮC THIẾT KẾ
- Tối đa 3 màu chủ đạo
- Khoảng cách (padding) giữa section tối thiểu 60px
- Font tiêu đề và font nội dung khác nhau
- Nút CTA luôn nổi bật, kích thước tối thiểu 48x48px
- Tương phản cao giữa chữ và nền

## QUY TẮC GIAO TIẾP
- Khi sửa lỗi: giải thích ngắn gọn lỗi là gì trước khi sửa
- Khi thêm tính năng: cập nhật Design.md
- Không thay đổi phần đang hoạt động tốt khi sửa phần khác
- Nếu không chắc ý người dùng, hỏi lại trước khi làm

Bộ 2: Dành cho tạo Mini Tool / Calculator ​

## VAI TRÒ
Bạn là developer chuyên tạo công cụ tính toán (calculator/tool) web cho doanh nghiệp Việt Nam.

## QUY TẮC CODE
- Nội dung tiếng Việt
- Tách logic tính toán thành file riêng
- Comment kỹ mỗi công thức tính
- Validate input: kiểm tra người dùng nhập đúng dạng số, không cho phép âm (trừ khi hợp lý)
- Hiển thị kết quả định dạng VNĐ (dùng Intl.NumberFormat)
- Tách file: UI (giao diện), Logic (tính toán), Config (cấu hình)
- Duy trì Design.md

## QUY TẮC THIẾT KẾ
- Form nhập bên trái, kết quả bên phải (desktop)
- Mobile: form trên, kết quả dưới
- Kết quả hiển thị số lớn, đậm, có icon
- Biểu đồ (nếu có) dùng Recharts
- Nút "Tính" lớn, nổi bật
- Nút "Xóa/Reset" phụ
- Loading indicator khi đang tính

## QUY TẮC GIAO TIẾP
- Sau khi tạo tool, tự test với 2-3 bộ số liệu mẫu và báo kết quả
- Nếu công thức phức tạp, giải thích logic cho người dùng hiểu

Bộ 3: Dành cho tạo Dashboard / Bảng điều khiển ​

## VAI TRÒ
Bạn là data visualization developer, chuyên tạo dashboard cho doanh nghiệp Việt Nam.

## QUY TẮC CODE
- Nội dung tiếng Việt
- React + Tailwind CSS + Recharts
- Tách: components, services, config, types
- Mock data (dữ liệu giả) nếu chưa có dữ liệu thật
- Duy trì Design.md

## QUY TẮC THIẾT KẾ
- Dark theme mặc định (có toggle light/dark)
- Card layout cho số liệu tổng quan
- Màu: xanh lá = tăng/tốt, đỏ = giảm/xấu, vàng = cảnh báo
- Sidebar navigation bên trái (co lại trên mobile)
- Biểu đồ: tooltip khi hover, responsive
- Bảng dữ liệu: sortable, searchable

## QUY TẮC GIAO TIẾP
- Giải thích ý nghĩa mỗi chỉ số khi tạo
- Đề xuất thêm chỉ số nếu thấy phù hợp

PHỤ LỤC 5: BẢNG SO SÁNH NHANH — KHI NÀO DÙNG GÌ ​

Bạn muốn…Dùng công cụ nàoPrompt/Cách làm
Tạo trang giới thiệu 1 trang nhanhAI Studio Build ModeGõ prompt + bấm Build
Chỉnh sửa giao diện cụ thểAnnotation ModeVẽ lên preview + ghi chú
Thêm tính năng khi đang đi đườngVoice Input (micro)Nói yêu cầu bằng tiếng Việt
Tham khảo phong cách thiết kếGửi ảnh screenshotKéo ảnh vào ô nhập + mô tả
Lưu dữ liệu formFirebase integrationNói “lưu vào database” → bấm Enable
Cho phép đăng nhậpFirebase AuthNói “thêm đăng nhập bằng Google”
Kết nối API bên ngoài (Maps, thanh toán…)Secrets ManagerVào Settings → Secrets → thêm API key
Chia sẻ cho đồng nghiệp reviewShareBấm Share → copy link
Đưa lên internet chính thứcDeploy to Cloud RunBấm Deploy → chọn project → Deploy app
Lưu code an toànGitHubBấm icon GitHub → Create repo
Quay về phiên bản cũCheckpointClick checkpoint trong timeline
Tạo app đa người dùng realtimeMultiplayer modeNói “make this multiplayer” → AI xử lý
Xem code AI viếtCode TabClick tab “Code” trong preview
Sửa code trực tiếpCode Tab → EditClick vào file trong Code tab → sửa
Tải code về máyDownload ZIPBấm nút Download

PHỤ LỤC 6: CÁC TÍNH NĂNG MỚI NHẤT CỦA GOOGLE AI STUDIO (CẬP NHẬT 2026) ​

Dựa trên nghiên cứu mới nhất, đây là các tính năng bạn nên biết — nhiều tính năng trong số này được phát hành từ cuối 2025 đến đầu 2026:

1. Full-Stack Runtime (Server-Side) ​

AI Studio giờ không chỉ tạo giao diện (frontend) mà còn tạo cả phần “hậu trường” (backend/server). Điều này cho phép: lưu trữ dữ liệu an toàn, gọi API bên ngoài mà không lộ mật khẩu, tạo ứng dụng đa người dùng realtime.

Bạn không cần hiểu “server” là gì — chỉ cần biết rằng bây giờ AI Studio tạo được ứng dụng “đầy đủ” hơn, không chỉ là trang web tĩnh.

2. Multiplayer / Real-time ​

Bạn có thể tạo ứng dụng mà nhiều người dùng cùng lúc — ví dụ: bảng trắng cộng tác, game nhiều người chơi, danh sách chia sẻ. Chỉ cần nói “Make this multiplayer” trong prompt.

Cách test: mở app trong nhiều tab cùng lúc → mỗi tab mô phỏng 1 người dùng.

3. Firebase Auto-Setup ​

Khi bạn yêu cầu lưu dữ liệu hoặc đăng nhập, AI tự phát hiện và đề xuất kết nối Firebase. Bạn chỉ cần bấm “Enable.” AI tự tạo database, tự cấu hình đăng nhập Google, tự viết code kết nối — bạn không cần động tay vào phần kỹ thuật nào.

4. NPM Package Support ​

AI có thể tự cài đặt “thư viện” (package) — các bộ công cụ code có sẵn mà lập trình viên dùng. Ví dụ: thư viện vẽ biểu đồ (Recharts), thư viện animation (Framer Motion), thư viện icon (Lucide). Bạn không cần biết tên thư viện — chỉ cần mô tả hiệu ứng muốn có, AI tự chọn và cài thư viện phù hợp.

5. Framework Choice (React / Angular / Next.js) ​

Trong Settings, bạn có thể chọn “phong cách xây dựng” (framework). Mặc định là React — phù hợp cho hầu hết mọi trường hợp. Angular phù hợp cho ứng dụng doanh nghiệp lớn. Next.js phù hợp cho website cần SEO tốt. Nếu bạn không biết chọn gì, cứ để React mặc định.

6. Server-Side Code Assistant ​

Code assistant giờ chạy trên server — nghĩa là khi bạn gửi yêu cầu phức tạp, AI xử lý “trên mây” thay vì trên máy tính bạn. Bạn có thể đóng tab, chuyển thiết bị, rồi quay lại — kết quả vẫn đang chờ bạn.

7. OAuth Integration ​

Nếu bạn cần ứng dụng kết nối với dịch vụ bên ngoài (Google Sheets, Stripe thanh toán, Calendar…), AI Studio hỗ trợ thiết lập OAuth (giao thức cho phép ứng dụng truy cập tài khoản bên ngoài một cách an toàn). AI sẽ hướng dẫn bạn từng bước khi cần thiết.

PHỤ LỤC 7: CÂU HỎI THƯỜNG GẶP (FAQ) CỦA HỌC VIÊN ​

Câu hỏiTrả lời
Google AI Studio có miễn phí không?Có! Mức sử dụng cơ bản hoàn toàn miễn phí. Bạn được dùng Build Mode, Chat, Share, Deploy đều free. Chỉ tính phí khi dùng Cloud Run với lưu lượng lớn hoặc model trả phí.
Tôi cần biết tiếng Anh không?Không bắt buộc. Bạn hoàn toàn gõ tiếng Việt vào prompt, AI hiểu tốt. Tuy nhiên, đôi khi prompt tiếng Anh cho kết quả chính xác hơn ở phần kỹ thuật. Khóa học cung cấp prompt mẫu cả 2 ngôn ngữ.
Sản phẩm tôi tạo có thuộc về tôi không?Có. Code do AI tạo ra thuộc về bạn. Bạn có thể tải về, đưa lên hosting riêng, sử dụng cho mục đích thương mại.
Bao nhiêu người có thể truy cập website tôi deploy?Không giới hạn về số người. Cloud Run tự mở rộng theo lượng truy cập. Nhưng phí sẽ tăng nếu lượng truy cập rất lớn (hàng ngàn người/ngày). Với lượng nhỏ (dưới vài trăm/ngày), phí gần 0.
Tôi có thể dùng tên miền riêng (ví dụwww.tentoicuoi.com) không?Có, nhưng cần mua domain riêng (khoảng 200.000-500.000đ/năm) và cấu hình Cloud Run custom domain. Đây là bước nâng cao ngoài phạm vi khóa học cơ bản.
Nếu AI tạo ra sản phẩm xấu hoặc sai thì sao?Bạn chỉnh sửa qua chat, annotation, hoặc voice. Không ai làm đúng từ lần đầu — kể cả lập trình viên giỏi. Trung bình cần 5-15 lần chỉnh sửa để có sản phẩm hoàn chỉnh.
Sản phẩm có bị mất nếu tôi tắt máy không?Không. Google AI Studio lưu project tự động. Bạn đóng tab, tắt máy, mở lại sau vẫn thấy project ở đó. Nếu lo lắng, lưu thêm lên GitHub.
Tôi có thể tạo app cho điện thoại (iOS/Android) không?AI Studio Build Mode tạo web app (ứng dụng web), không phải native app (ứng dụng cài từ App Store). Tuy nhiên web app responsive hiện đại trông và hoạt động gần giống native app trên điện thoại. Nếu cần app cài đặt thực sự, đây là bước nâng cao ngoài phạm vi khóa học.
AI có thể tạo tính năng thanh toán online không?Có thể, nhưng cần tích hợp cổng thanh toán (Stripe, VNPay, MoMo…) qua Secrets Manager + API. Đây là tính năng nâng cao, nên tìm hiểu thêm sau khi hoàn thành khóa cơ bản.
Dữ liệu khách hàng trên Firebase có an toàn không?Firebase của Google có mã hóa dữ liệu và tuân thủ tiêu chuẩn bảo mật quốc tế. Tuy nhiên, bạn vẫn cần tuân thủ luật bảo vệ dữ liệu cá nhân khi thu thập thông tin khách hàng.

PHỤ LỤC 8: LỘ TRÌNH SAU KHÓA HỌC — “ĐÃ TỐT NGHIỆP, GIỜ LÀM GÌ?” ​

Tuần/ThángMục tiêuHành động cụ thể
Tuần 1-2Hoàn thiện sản phẩm chínhSửa hết lỗi dựa trên phản hồi, tối ưu mobile, deploy bản hoàn thiện
Tháng 1Mua tên miền + Đo lườngMua domain (Tenten.vn, Mắt Bão), kết nối Cloud Run. Cài Google Analytics
Tháng 2SEO cơ bảnThêm meta tags, tối ưu tốc độ tải, đăng ký Google Search Console. Dùng prompt: “Tối ưu SEO cho website này: thêm meta tags, alt text cho ảnh, cải thiện heading structure”
Tháng 3Tính năng nâng caoTích hợp thanh toán, blog, CRM. Tìm hiểu Google Antigravity cho dự án lớn hơn
Tháng 4-6Mở rộngTạo sản phẩm cho khách hàng/đối tác. Hoặc nhận đơn freelance tạo landing page bằng AI Studio
Dài hạnNâng cấp kỹ năngHọc thêm Antigravity, học cơ bản về React (nếu muốn), tham gia cộng đồng r/vibecoding trên Reddit

PHỤ LỤC 9: BẢNG KIỂM TRA CHẤT LƯỢNG SẢN PHẨM TRƯỚC KHI DEPLOY ​

Bạn có thể in bảng này ra hoặc lưu trên điện thoại, dùng mỗi khi chuẩn bị deploy sản phẩm:

=== CHECKLIST TRƯỚC KHI DEPLOY ===

NỘI DUNG:
□ Tất cả nội dung bằng tiếng Việt, chính xác
□ Không có lorem ipsum / placeholder text còn sót
□ Thông tin liên hệ đúng (SĐT, email, địa chỉ)
□ Giá cả cập nhật, đúng
□ Không có lỗi chính tả
□ Nội dung phù hợp với đối tượng khách hàng

GIAO DIỆN:
□ Responsive: đẹp trên desktop (>1024px)
□ Responsive: đẹp trên tablet (768-1024px)
□ Responsive: đẹp trên mobile (<768px)
□ Font chữ dễ đọc, kích thước phù hợp
□ Hình ảnh hiển thị đúng (không méo, không mất)
□ Màu sắc nhất quán toàn bộ trang
□ Khoảng cách giữa các phần hợp lý
□ Nút CTA nổi bật, dễ nhận thấy

CHỨC NĂNG:
□ Tất cả nút bấm hoạt động
□ Menu chuyển trang hoạt động (nếu nhiều trang)
□ Form điền được, gửi được, hiện thông báo
□ Bộ đếm/máy tính cho kết quả đúng
□ Link mạng xã hội mở đúng trang
□ Logo click về trang chủ
□ Cuộn trang mượt mà

KỸ THUẬT:
□ Trang load dưới 5 giây
□ Không có lỗi trên Console (F12 → Console)
□ Open Graph tags đã thêm (link preview đẹp khi share)
□ Ảnh placeholder đã thay bằng ảnh thật (nếu có)

BẢO MẬT:
□ Không có API key lộ trong code client-side
□ Secrets đã lưu trong Secrets Manager (nếu dùng)
□ Firebase security rules đã kiểm tra (nếu dùng)

PHỤ LỤC 10: TÀI NGUYÊN HỌC THÊM ​

Link chính thức:

Cộng đồng:

Hướng dẫn thực hành:

Công cụ hỗ trợ:

TÓM TẮT TOÀN BỘ KHÓA HỌC — NHÌN LẠI HÀNH TRÌNH ​

TRƯỚC KHÓA HỌC:                     SAU KHÓA HỌC:
─────────────────                    ──────────────
❌ Không biết code                   ✅ Vẫn không cần biết code — nhưng tạo 
                                        được sản phẩm số chuyên nghiệp
❌ Phải thuê dev 10-30 triệu         ✅ Tự tạo miễn phí, bao nhiêu sản phẩm 
                                        tùy thích
❌ Chờ dev 2-4 tuần                   ✅ Tạo trong 1-2 giờ
❌ Muốn sửa phải gọi dev             ✅ Tự sửa ngay bằng cách nói chuyện 
                                        với AI
❌ Không có website/landing page      ✅ Có ít nhất 3 sản phẩm, 1 cái live 
                                        trên internet
❌ Phụ thuộc đội IT                   ✅ Tự chủ công nghệ cho doanh nghiệp

SẢN PHẨM ĐÃ TẠO:
├── 🎴 Card visit online (Bài 3-4)
├── 📄 Landing page bán hàng/dịch vụ (Bài 9-10)
├── 🛠️ Mini tool hữu ích (Bài 11-12)
├── 🌐 Website 4 trang hoàn chỉnh (Bài 13-14)
└── 🚀 Ít nhất 1 sản phẩm deploy live trên internet (Bài 18-20)

KỸ NĂNG ĐÃ HỌC:
├── Tư duy sản phẩm (nghiên cứu → phân tích → mô tả → tạo)
├── Viết prompt hiệu quả
├── Sử dụng thành thạo Google AI Studio Build Mode
├── Debug (sửa lỗi) bằng AI
├── Tối ưu giao diện & responsive
├── Deploy lên internet
└── Duy trì & cải tiến sản phẩm

🎯 LỜI KẾT

Khóa học này không chỉ dạy bạn dùng một công cụ — nó trao cho bạn một tư duy mới : bạn không cần phải là lập trình viên để tạo ra sản phẩm số. Trong thời đại Vibe Coding, người thắng cuộc không phải người viết code giỏi nhất, mà là người mô tả rõ nhất điều mình muốn và biết cách cải tiến liên tục dựa trên phản hồi thực tế .

Mỗi sản phẩm bạn tạo từ hôm nay sẽ tốt hơn sản phẩm hôm qua. Hãy bắt đầu — ngay bây giờ.

📝 Bài Tập Về Nhà ​

🏆 Achievement Bài 20 ​

  • [ ] Hoàn thành đọc phần kiến thức
  • [ ] Làm xong các bước thực hành
  • [ ] Nộp bài tập về nhà
  • [ ] Ghi chú những điều học được

Powered by CodyMaster × VitePress

© 2026 Todyle. All rights reserved.