Làm trang web đầu tiên cùng AI khi không biết lập trình

Một trang giới thiệu quán có tên, thực đơn, giờ mở cửa và một cái nút bấm vào là gọi được. Trang cỡ đó bạn làm được trong một buổi tối, không cần biết lập trình, không cần thuê ai. Bạn tả bằng lời, AI viết ra một file, bạn mở lên xem, chỗ nào chưa ưng thì nói tiếp.

Bài này đi đúng con đường đó, từ câu mô tả đầu tiên tới lúc có một đường link gửi được cho khách qua Zalo. Có sẵn prompt (đoạn chữ bạn gửi cho AI) để chép, và một trang quán cà phê mẫu để bạn xem trước kết quả trông ra sao.

Web AI247 bạn đang đọc là mình dựng cùng Claude Code, không thuê lập trình viên. Nhưng AI247 phức tạp hơn nhiều: có bài viết, đăng nhập, bình luận. Làm mấy thứ đó rồi mình mới thấy: lần đầu đừng đụng vào chỗ phức tạp. Hãy làm một trang chỉ gồm một file. Không đăng nhập, không lưu thông tin của ai, không nhận tiền. Làm hỏng cũng chẳng mất gì.

Trang kiểu nào thì hợp với cách này

Trang giới thiệu quán, thực đơn, trang cá nhân kiểu hồ sơ xin việc, trang báo tin họp lớp hay đám cưới. Điểm chung: người xem chỉ đọc rồi bấm gọi, bấm chỉ đường. Trang không cần nhớ gì về họ.

Trang cần khách điền form, đặt hàng, trả tiền thì khác hẳn. Phần đó có dữ liệu của người khác, lỗi một chỗ là lộ thông tin. Bài Vibe coding là gì nói rõ ranh giới này; đọc trước khi bạn muốn đi xa hơn một trang giới thiệu.

Một từ sẽ gặp suốt bài: HTML, thứ ngôn ngữ dùng để viết trang web. File có đuôi .html mở bằng trình duyệt (Chrome, Edge, Safari) là thấy ngay trang, không cần cài gì.

Bước 1: tả trang cho AI

Dùng công cụ chat nào bạn quen cũng được. Công cụ khác nhau sẽ ra giao diện khác nhau, nhưng cách làm giống nhau.

Prompt dưới đây có bốn phần: quán là gì, trang có những mục nào theo thứ tự, trông ra sao, và vài yêu cầu kỹ thuật. Bạn thay tên quán, món, mô tả, giá, giờ bằng thông tin thật của mình.

Làm giúp mình một trang web một trang cho quán cà phê nhỏ tên "Gác Mây" ở Đà Lạt.
 
Trang có các phần, theo thứ tự từ trên xuống:
1. Tên quán và một câu giới thiệu: quán nhỏ trên gác, nhìn ra đồi thông, mở cửa từ sáng sớm, có chỗ ngồi yên để đọc sách hay làm việc.
2. Thực đơn 8 món, chia hai nhóm. Mỗi món ghi tên, giá và đúng dòng mô tả dưới đây, không tự viết thêm:
   Cà phê
   - Cà phê phin đen, 25.000đ: phin nhôm, hạt rang mộc, đậm vừa.
   - Cà phê sữa đá, 29.000đ: sữa đặc, đá viên to, tan chậm.
   - Bạc xỉu, 32.000đ: nhiều sữa, ít cà phê, hợp buổi sáng.
   - Cà phê muối, 35.000đ: lớp kem muối mặn nhẹ trên cà phê sữa.
   Không cà phê
   - Trà atiso nóng, 28.000đ: atiso Đà Lạt, ngọt nhẹ.
   - Cacao nóng, 35.000đ: cacao nguyên chất, thêm sữa tươi.
   - Sữa chua dâu, 35.000đ: dâu tây tươi, sữa chua nhà làm.
   - Trà gừng mật ong, 30.000đ: gừng tươi, mật ong, ấm bụng ngày lạnh.
3. Giờ mở cửa: 6:30 đến 22:00 mỗi ngày.
4. Địa chỉ: Số 1 Đường Ví Dụ, Phường Mẫu, Đà Lạt. Điện thoại: 0900 000 000.
 
Kiểu dáng: tông nâu và kem, nền sáng, chữ dễ đọc, nhìn ấm và gọn.
 
Yêu cầu:
- Tất cả nằm trong MỘT file index.html, CSS viết luôn trong file.
- Không dùng JavaScript, không tải font hay ảnh từ trang web khác.
- Đọc tốt trên điện thoại trước, máy tính sau.
- Viết tiếng Việt có dấu.
 
Trả về toàn bộ code của file index.html trong một khối code để mình chép.

Mấy dòng "Yêu cầu" nhìn hơi kỹ thuật, nhưng cứ chép nguyên. CSS là phần quy định màu, cỡ chữ, cách xếp; JavaScript là phần làm trang "động", trang giới thiệu không cần. Nhờ vậy kết quả là đúng một file, mở lên là chạy. Dự án lớn hơn thì xem cách tả kỹ ở bài Viết bản mô tả sản phẩm cho AI.

Phần tốn công nhất không nằm ở code mà ở nội dung. AI không biết quán bạn bán gì, bỏ trống thì nó tự nghĩ ra. Chính trang mẫu của bài là ví dụ: bản prompt đầu đòi mỗi món một dòng mô tả nhưng chỉ đưa tên và giá, thế là Claude tự viết ra "hạt rang mộc", "sữa chua nhà làm". Đọc rất thật, trong khi quán là quán giả định. Vì vậy prompt ở trên ghi sẵn từng dòng mô tả.

Bước 2: lưu thành file và mở trên máy

AI sẽ trả về một khối code dài, thường bắt đầu bằng <!DOCTYPE html>. Bấm nút chép ở góc khối code, rồi:

• Windows: mở Notepad, dán vào. Chọn File, Save As. Đặt tên index.html, ô "Save as type" chọn All files, ô Encoding chọn UTF-8.
• Mac: mở TextEdit, vào Format, chọn Make Plain Text trước khi dán. Chọn File, Save, đặt tên index.html. Máy hỏi dùng đuôi nào thì bấm Use .html.

Bấm đúp vào file vừa lưu, trình duyệt sẽ mở trang lên. Vậy là bạn đã có một trang web, chỉ là nó mới nằm trên máy bạn.

Muốn xem trên điện thoại trông ra sao, kéo hẹp cửa sổ trình duyệt lại. Trang làm tốt sẽ tự dàn thành một cột. Xem trên điện thoại thật thì phải chờ tới bước 4.

Bước 3: sửa bằng lời

Lần đầu hiếm khi ưng ngay, và cũng không cần ưng ngay. Bạn nói thêm từng câu, AI sửa theo. Mẹo nhỏ: nói như đang dặn thợ, chỉ rõ chỗ nào và muốn thành ra sao. "Chữ to hơn" thì AI không biết chữ nào. "Chữ trong phần thực đơn to hơn một chút" thì nó biết.

Mỗi lần sửa, nhớ dặn AI "trả lại toàn bộ file", rồi lưu đè lên index.html. Trước khi lưu đè, đổi tên bản cũ thành index-cu.html để lỡ hỏng còn quay về được.

Vài câu sửa khác, để bạn hình dung độ cụ thể cần có:

Câu giới thiệu dài quá, rút còn một câu dưới 20 chữ.
Đổi màu chủ đạo sang xanh lá đậm, vẫn giữ nền sáng.
Thêm một dòng dưới giờ mở cửa: "Có chỗ để xe máy trước quán."
Thêm ảnh quan.jpg ở đầu trang, ngay dưới tên quán, bo góc nhẹ.

Câu cuối có điều kiện: file quan.jpg phải nằm cùng thư mục với index.html, và tới bước 4 bạn đưa cả hai lên.

Bước 4: đưa lên mạng miễn phí

Chỗ đặt trang tĩnh (chỉ gồm file HTML, ảnh) miễn phí thì có GitHub Pages, Cloudflare Pages, Netlify. Với người mới, mình chọn Netlify Drop: kéo thả một thư mục, không cài gì, không gõ lệnh.

Nói thật trước: AI247 chưa thử bước đưa lên Netlify. Các bước dưới đây theo tài liệu chính thức của Netlify, kiểm tra ngày 02/11/2026.

1. Tạo một thư mục, ví dụ gac-may, bỏ index.html vào (cùng ảnh, nếu có).
2. Đăng ký tài khoản Netlify trước, chọn gói Free (0 USD).
3. Mở app.netlify.com/drop, kéo cả thư mục vào ô thả.
4. Netlify cho bạn một đường link có đuôi netlify.app. Lúc này trang vẫn đang riêng tư, chỉ bạn xem được.
5. Bấm Make public để mở trang cho mọi người. Không thấy nút đó thì vào Project configuration, General, Visitor access, Project visibility, chọn public rồi lưu.
6. Mở link trên điện thoại, thử luôn bằng một máy chưa đăng nhập Netlify (máy người nhà chẳng hạn) để chắc người khác mở được.

Bước 5 là chỗ dễ vấp nhất. Theo trang Project visibility của Netlify, tài khoản tạo từ 28/07/2026 trở đi thì dự án mới mặc định riêng tư; nút Make public hiện ra sau lần đưa lên thành công đầu tiên. Quên bước này mà gửi link qua Zalo thì khách không mở được.

Còn đăng ký trước là vì theo hướng dẫn Netlify Drop, thả thư mục khi chưa đăng nhập thì link bị khoá bằng mật khẩu tạm cho tới khi bạn đăng nhập hoặc đăng ký để "nhận" trang.

Gói Free tính hạn mức bằng credit (điểm dùng, bị trừ khi bạn đưa trang lên và khi có người xem). Theo trang giá của Netlify: mỗi tháng 300 credit, mỗi lần đưa trang lên tốn 15, băng thông 20 credit mỗi GB. Hết credit thì mọi trang trong tài khoản bị tạm dừng tới đầu kỳ sau.

Muốn cập nhật trang (đổi giá, thêm món): sửa xong hết ở máy rồi kéo thư mục mới vào ô thả ở mục Production deploys trong trang quản lý dự án, một lần thôi. Chỉ riêng việc đưa lên, 300 credit chia 15 là tối đa 20 lần một tháng.

Mấy chỗ người mới hay vấp

Mở ra thấy toàn code, không thấy trang

Thường là file thực ra tên index.html.txt, vì Windows ẩn đuôi file. Trong File Explorer, vào View (Windows 11: View, rồi Show), bật File name extensions để thấy đuôi thật, rồi đổi tên cho đúng. Trên Mac, lỗi này hay đến từ việc bấm nhầm nút khi TextEdit hỏi đuôi file ở bước 2.

Chữ tiếng Việt thành ký tự lạ

File chưa lưu ở dạng UTF-8. Lưu lại và chọn UTF-8. Trong file cũng nên có dòng <meta charset="utf-8"> ở gần đầu; thiếu thì nhờ AI thêm vào.

Code dừng giữa chừng

Trang dài thì có lúc AI dừng trước khi viết xong; cuối file không có </html> là dấu hiệu. Ghép hai đoạn bằng tay rất dễ sai, nên bảo AI viết lại cả file và bớt phần trang trí cho ngắn.

Sửa chỗ này, hỏng chỗ kia

Quay về index-cu.html, rồi nói lại yêu cầu cụ thể hơn, mỗi lần một thay đổi. Dồn năm thay đổi vào một tin là cách nhanh nhất để mọi thứ lệch đi một chút.

Tên miền, hosting: cứ để sau

Nhiều người chưa có trang đã tính chuyện tên miền riêng, hosting trả phí, làm sao lên Google. Với mình, mấy chuyện đó xếp sau. Link netlify.app (đã bật công khai) gửi qua Zalo là khách mở được. Khi có khách thật hỏi tới, lúc đó tính tiếp cũng chưa muộn.

Thứ cần để tâm hơn là thông tin trên trang có còn đúng không. Giá cũ, giờ mở cửa sai thì khách tới nơi mới biết, và lỗi đó không AI nào sửa hộ bạn. Mỗi lần đổi thực đơn ngoài đời, nhớ đổi luôn trên trang.

Tới lúc muốn khách điền form đặt bàn thì quay lại bài Vibe coding ở trên đọc trước đã.

Trang mẫu để tải về

Mở trang mẫu quán Gác Mây

Trang này do Claude, trợ lý viết bài của AI247, làm trong Claude Code: tạo file theo bản đầu của prompt ở bước 1 (bản chưa ghi sẵn mô tả món), rồi sửa hai lần theo hai câu ở lượt 2 và 3 của sơ đồ. Nó không được làm trong khung chat ChatGPT hay claude.ai; bạn dán prompt vào khung chat sẽ ra bản khác màu, khác cách xếp, nhưng đủ các phần. Quán, địa chỉ, số điện thoại đều là giả định.

Muốn giữ lại để thử bước 4: mở trang, bấm Ctrl+S (Mac: Cmd+S), đặt tên index.html.

Nguồn

Kiểm tra ngày 02/11/2026.

• Netlify Drop quickstart: Netlify, các bước kéo thả, mật khẩu tạm khi chưa đăng nhập, cách cập nhật trang (trang ghi cập nhật lần cuối 28/07/2026).
• Project visibility: Netlify, nhóm tạo từ 28/07/2026 mặc định riêng tư, nút Make public và đường cài đặt (trang ghi cập nhật lần cuối 07/10/2026).
• Netlify pricing: Netlify, gói Free 0 USD, 300 credit mỗi tháng, 15 credit mỗi lần đưa lên, băng thông 20 credit mỗi GB, tạm dừng khi hết hạn mức.
• Work with HTML documents in TextEdit: Apple, lưu file .html ở chế độ Plain Text và nút Use .html.