Tự tạo web app của riêng bạn, không cần biết code
App có đăng nhập Google, mỗi người một không gian riêng, phân quyền nhân viên, trang quản trị và tên miền riêng. Claude viết toàn bộ code; bạn chỉ chép câu lệnh, bấm vài nút và gửi ảnh chụp màn hình.
[chữ vàng] cho đúng app của mình
Dán vào Claude, bấm Enter
01Cài skill
Dùng app Claude trên máy tính, gói Pro trở lên. Tải file build-saas-app-skill.zip bằng nút bên dưới. Không cần giải nén.
- Mở Claude, vào Settings → Capabilities.
- Tìm mục Skills, bấm Upload skill, chọn file build-saas-app-skill.zip.
- Bật công tắc của skill build-saas-app.
Tên menu có thể khác một chút giữa các phiên bản app; cứ tìm chữ Skills trong Settings. Kiểm tra skill đã vào chưa:
Bạn đã có skill build-saas-app chưa? Tóm tắt giúp mình skill đó làm được gì.
02Tài khoản & kết nối
Làm một lần duy nhất. Tất cả đều có gói miễn phí và đăng ký bằng Gmail.
- Neon (neon.tech): nơi lưu dữ liệu app. Bấm Sign up with Google.
- Vercel (vercel.com): nơi đưa app lên mạng. Bấm Continue with Google.
- Logo ảnh vuông. Chưa có thì Claude làm logo chữ cho bạn.
- Tên miền riêng (ví dụ app.tenban.com): có thì tốt, không có vẫn chạy được.
Kết nối Neon và Vercel vào Claude
- Vào Settings → Connectors, tìm Neon, bấm Connect.
- Ở trang Neon, chọn All projects và quyền Read and write, bấm Authorize.
- Làm tương tự với Vercel.
Kiểm tra giúp mình Neon và Vercel đã kết nối với Claude chưa.
03Ra lệnh tạo app
Chọn loại app để xem câu mẫu, rồi sửa chữ vàng theo đúng việc bạn quản lý:
Dùng skill build-saas-app, tạo cho mình app [quản lý spa: khách hàng, lịch hẹn, dịch vụ, doanh thu, nhân viên]. Mình chưa biết code, hướng dẫn mình từng bước một.Đang quản lý bằng Excel hay sổ sách? Gửi ảnh cho Claude
Đây là bảng mình đang dùng để quản lý [kéo ảnh / file Excel vào khung chat]. Làm app có các cột và cách tính y như bảng này.Claude sẽ gửi checklist chuẩn bị, rồi dẫn bạn qua 10 chặng. Đầu mỗi tin nhắn có dòng 📍 cho biết đang ở chặng nào.
04Trả lời phiếu yêu cầu
Claude hỏi bằng các nút chọn: tên app, màu, ai được đăng ký, có những vai trò gì. Bấm chọn là xong; không chắc thì chọn dòng có chữ (Recommended).
Đây là logo app của mình [kéo logo vào khung chat]. Lấy màu chủ đạo theo logo và làm biểu tượng app (favicon).Email quản trị hệ thống là [email@gmail.com]. Ai đăng ký cũng được dùng thử [30] ngày, hết hạn thì mình gia hạn tay.
Mỗi [chủ spa] có không gian riêng và được mời [nhân viên] vào cùng làm. Nhân viên chỉ được thêm, sửa; không được xoá.
05Xem thử & sửa
Claude tự dựng app, chạy thử và chụp màn hình cho bạn xem. Muốn sửa gì cứ nói như đang nói với người thiết kế.
Cho mình xem ảnh chụp trang [Tổng quan] trên máy tính và trên điện thoại.Sửa giúp mình: [nút "Thêm khách" to hơn, đổi chữ "Doanh thu" thành "Tiền vào", thêm cột Số điện thoại].06Đưa app lên mạng
Đóng gói app thành file zip để mình đưa lên Vercel, hướng dẫn mình từng bước.
- Tải file zip Claude gửi, bấm đúp để giải nén ra một thư mục.
- Mở vercel.com/new, kéo cả thư mục thả vào khung tải lên.
- Bấm Deploy, chờ khoảng 1 phút tới khi hiện chúc mừng. Chép đường link app.
Mình deploy xong rồi, link là [https://ten-app.vercel.app]. Kiểm tra và bật đăng nhập Google cho link này.Mỗi lần có bản mới, bạn làm lại đúng 3 bước trên với cùng dự án trên Vercel.
07Tên miền riêng
Mình muốn dùng tên miền [app.tenban.com] cho app. Hướng dẫn mình cài đặt từng bước và thêm vào danh sách đăng nhập.- Trên Vercel: mở dự án → Settings → Domains → Add, nhập tên miền.
- Vào nơi bạn mua tên miền, thêm đúng bản ghi Vercel hiện ra (thường là CNAME).
- Chờ Vercel báo Valid Configuration, chụp màn hình gửi Claude.
08Thử đăng nhập
Thử đủ 3 cách trước khi mời người khác dùng:
- Đăng nhập Google trên máy tính.
- Đăng nhập Google trên iPhone (Safari) và điện thoại Android.
- Đăng ký bằng email, nhận mã 6 số (xem cả hộp thư Spam).
Mình đã thử đăng nhập, đây là ảnh màn hình [kéo ảnh vào]. Kiểm tra giúp mình có lỗi gì không.09Lên Google
Làm SEO để app lên Google với từ khoá [app quản lý spa], rồi hướng dẫn mình khai báo Google Search Console từng bước.Google thường mất vài ngày đến vài tuần để hiện trang mới. Search Console cho bạn xem tiến độ.
10Thêm tính năng
App chạy rồi vẫn thêm được bất cứ lúc nào. Mở trò chuyện mới trong cùng Project:
Thêm vào app [trang báo cáo doanh thu theo tháng, có biểu đồ]. Xong gửi mình file zip bản mới.Thêm nút "Đồng hành cùng dự án" với mã QR [MoMo / ngân hàng] này [kéo ảnh QR vào] và nút tham gia cộng đồng [link nhóm].
Cho khách tự [đặt lịch hẹn] qua một trang công khai, không cần đăng nhập.11Dữ liệu bị mất hay bị đổi
App lưu lịch sử 60 ngày, nên hầu hết trường hợp đều lấy lại được. Đừng nhập lại vội, nhờ Claude kiểm tra trước:
Dữ liệu [giao dịch ngày 12/10] của tài khoản [email@gmail.com] bị mất. Kiểm tra trên Neon và khôi phục giúp mình. Hỏi mình trước khi xoá bất cứ thứ gì.
Kiểm tra giúp mình tài khoản [email@gmail.com] đang nhìn thấy dữ liệu của những ai, có đúng quyền không.12Khi gặp lỗi
App báo lỗi [dán chữ lỗi hoặc kéo ảnh vào] khi mình [bấm đăng nhập trên iPhone]. Kiểm tra và sửa giúp mình.
| Bạn thấy | Nguyên nhân thường gặp | Nói với Claude |
|---|---|---|
| HTTP 403 | Tên miền mới chưa được phép đăng nhập | "Thêm tên miền [..] vào danh sách đăng nhập" |
| HTTP 400 trên iPhone | Safari chặn cookie, bản deploy thiếu phần proxy | "Gửi lại bản zip đầy đủ có proxy đăng nhập" |
| HTTP 404 | Kéo thả thiếu thư mục api hoặc file vercel.json | Giải nén lại, kéo cả thư mục, deploy lại |
| "not signed in" | Phiên đăng nhập chưa sẵn sàng | Bấm Thử lại; báo Claude nếu lặp lại |
| Không nhận mã OTP | Email rơi vào Spam | Xem hộp thư Spam / Quảng cáo |
| Claude báo mất kết nối Neon | Connector hết hạn | Settings → Connectors → Neon → Connect lại |
13Mẹo dùng lâu dài
- Luôn gửi ảnh chụp màn hình thay vì mô tả bằng lời.
- Claude dừng giữa chừng thì gõ tiếp tục.
- Trò chuyện quá dài thì mở trò chuyện mới trong cùng Project và dán câu dưới đây.
Dùng skill build-saas-app. Đọc lại tiến độ app [App Spa] trong project này rồi làm tiếp bước còn dở, hướng dẫn mình từng bước.