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:

  1. Nhập mô tả nội dung bằng tiếng Việt
  2. AI tạo block và render ngay trên editor kéo thả
  3. Chỉnh sửa text, màu sắc theo ý muốn
  4. Nhấn "Sao chép HTML" và dán vào CMS

Bước 1: Đăng ký tài khoản

Truy cập trang đăng ký, nhập email và mật khẩu. Không cần xác nhận email — bạn được đăng nhập ngay và chuyển đến giao diện editor. Tài khoản miễn phí cho phép tạo nội dung không giới hạn trong thời gian dùng thử.

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.

Thanh nhập prompt trong editor AITaoPage
Ô nhập prompt nằm ở thanh trên cùng — nhập mô tả bằng tiếng Việt rồi nhấn "Tạo nội dung"

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 "Tạo nội dung" (hoặc Enter). AI sẽ xử lý trong khoảng 5–15 giây.

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
Canvas editor hiển thị block nội dung vừa được AI tạo
Block nội dung hiển thị ngay trên canvas — click để chọn, double-click để sửa text

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 "Sao chép HTML" ở góc trên phải. Thông báo "Sao chép thành công!" xuất hiện — HTML đã vào clipboard.

Nút Sao chép HTML và thông báo sao chép thành công
Nhấn "Sao chép HTML" — thông báo xanh xuất hiện xác nhậ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 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.