Tổng quan — Bạn sẽ làm được gì trong 60 giây?
AITaoPage giúp bạn đi từ ý tưởng đến một block nội dung HTML hoàn chỉnh — sẵn sàng dán vào Haravan, Sapo, hay WordPress — chỉ trong 60 giây. Không cần biết code, không cần Photoshop, không cần thuê designer.
Quy trình gồm 4 bước chính:
- Nhập mô tả nội dung bằng tiếng Việt
- AI tạo block và render ngay trên editor kéo thả
- Chỉnh sửa text, màu sắc theo ý muốn
- Nhấn "Sao chép HTML" và dán vào CMS
- Hoặc có thể export file
index.htmlđưa vào dự án của bạn
Bước 1: Đăng ký tài khoản
Truy cập trang đăng ký, chọn gói bạn muốn sử dụng Free Basic Pro, bạn có thể chọn gói Free để trải nghiệm trước, nâng cấp sau nếu muốn, nhập email và mật khẩu. sẽ gửi OTP về email của bạn để xác nhận (bởi vì chúng tôi chống spam) — bạn được đăng nhập ngay và chuyển đến giao diện editor. Tài khoản miễn phí sẽ bị giới hạn một số tính năng nhưng đủ để bạn trải nghiệm.
Bước 2: Nhập prompt mô tả nội dung
Ở thanh trên cùng của editor, bạn sẽ thấy ô nhập liệu với placeholder "Mô tả nội dung bạn muốn tạo...". Đây là nơi bạn nói chuyện với AI.
Ví dụ prompt đơn giản để bắt đầu:
Tạo banner giới thiệu sản phẩm kem dưỡng da nghệ, dành cho phụ nữ 25–40 tuổi, màu vàng ấm, có nút "Mua ngay"
- Nhấn nút "Bắt đầu" (hoặc Enter). AI sẽ xử lý trong khoảng 5–15 giây.
- AI sẽ phân tích yêu cẩu của bạn và đưa ra một số câu hỏi để hiểu yêu cầu của bạn, bạn có thể nhập câu trả lời hoặc có thể chọn những gợi ý mà AI đưa ra, một số câu hỏi chẳng hạn: Phong cách bạn muốn là gì? Màu sắc chủ đạo?...
- Sau khi AI đã phân tích xong bạn, sẽ tổng hợp lại yêu cầu của bạn, nếu bạn đã đúng hết yêu cầu của bạn, bạn có thể nhấn Hãy tạo nội dung ngay
- Chuyển chế độ xem Desktop / Mobile để kiểm tra responsive
Bước 3: Xem kết quả trên editor kéo thả
Khi AI hoàn thành, block nội dung xuất hiện ngay trên canvas GrapesJS bên dưới. Bạn có thể:
- Double-click vào text để sửa nội dung trực tiếp
- Click chọn element rồi kéo để thay đổi vị trí
- Dùng thanh toolbar để Undo (Ctrl+Z) hoặc Redo (Ctrl+Y)
- Chuyển chế độ xem Desktop / Mobile để kiểm tra responsive
Bước 4: Sao chép HTML và dán vào CMS
Khi hài lòng với nội dung, nhấn nút "Xuất HTML" ở góc trên phải, bạn có thể sao chép HTML đã tạo hoặc tải xuống dưới dạng tệp. Thông báo "Sao chép thành công!" xuất hiện — HTML đã vào clipboard.
Mở CMS của bạn (Haravan, Sapo, WordPress...), vào vị trí muốn chèn block, chuyển sang chế độ Source Code / HTML, dán HTML vào. Nội dung hiển thị đúng định dạng ngay lập tức vì đã dùng inline CSS.
Lịch sử tự động lưu
Mỗi block bạn tạo được tự động lưu khi bạn nhấp vào nút Lưu vào lịch sử với tên lấy từ 50 ký tự đầu của prompt. Để xem lại, click biểu tượng lịch sử ở sidebar bên phải — bạn có thể mở lại, tiếp tục chỉnh sửa, hoặc xóa các block cũ.
Mẹo cho lần đầu sử dụng
- Bắt đầu bằng prompt đơn giản, sau đó thêm chi tiết dần — AI xử lý tốt hơn khi thông tin rõ ràng
- Nếu kết quả chưa đúng ý, thử lại với prompt mô tả cụ thể hơn về màu sắc, font, phong cách
- Dùng chế độ xem Mobile để đảm bảo block hiển thị đẹp trên điện thoại trước khi sao chép
- Lưu nhiều phiên bản khác nhau — lịch sử không giới hạn số lượng block
Kết luận
Chỉ 4 bước đơn giản và bạn đã có HTML block chuyên nghiệp sẵn sàng dán vào CMS. Thực hành với một vài prompt đơn giản trước, rồi dần tạo các block phức tạp hơn — landing page section, bảng giá, block testimonial, v.v. Toàn bộ quy trình không quá 60 giây từ ý tưởng đến HTML production-ready.