Hướng dẫn dùng Lovable AI trên ChatGPT tạo website cực nhanh

Lovabe là công cụ vibe coding quen thuộc với nhiều người và hiện bạn đã có thể dùng trên ChatGPT thông qua plugin. Bạn thực hiện mô tả ý tưởng bằng ngôn ngữ tự nhiên và AI thực hiện xây dựng website, ứng dụng web và các tính năng tương tác mà không cần tự viết từng dòng code.

Bài viết dưới đây sẽ hướng dẫn sử dụng Lovable trên ChatGPT để tạo và xây dựng website dựa trên những gì bạn mô tả.

Cách sử dụng Lovable trên ChatGPT tạo website

Bước 1:

Bạn truy cập vào plugin trên ChatGPT sau đó nhập từ khóa Lovable vào thanh tìm kiếm. Tiếp đến trong giao diện thông tin Lovable bạn nhấn vào Cài đặt để cài trên ChatGPT.

Tiếp đến bạn tiến hành tạo tài khoản Lovable và đồng ý truy cập ChatGPT để thực hiện.

Bước 2:

Sau khi cài đặt plugin thành công, trong khung chat bạn nhấn @lovable rồi nhấn vào ứng dụng bên dưới để sử dụng.

Bước 3:

Tại đây bạn tiến hành nhập yêu cầu mô tả tạo website gồm chủ đề gì, nội dung gì, thiết kế ra sao, phong cách như nào. Bạn có thể tải tài liệu lên để Lovable tạo website theo tài liệu gốc đó.

Bạn hãy nhập câu lệnh tạo giao diện phiên bản đầu tiên, sau đó yêu cầu chỉnh từng phần sẽ tốt hơn so với việc yêu cầu tạo mọi thứ trong một lần duy nhất. Ví dụ với câu lệnh tạo website dưới đây.

Hãy tạo một website học tiếng Anh dành cho học sinh lớp 6.

Website có giao diện hiện đại, thân thiện và responsive trên máy tính lẫn điện thoại. Trang chủ gồm tiêu đề, giới thiệu ngắn và 3 nút: “Bài học”, “Luyện tập” và “Trò chơi”.

Tạo 3 bài học mẫu về từ vựng tiếng Anh. Mỗi bài gồm danh sách từ vựng, nghĩa tiếng Việt và câu ví dụ.

Thêm một bài quiz 10 câu trắc nghiệm. Sau khi học sinh hoàn thành, hiển thị số câu đúng, điểm số và nút “Làm lại”.

Thêm một trò chơi ghép từ tiếng Anh với nghĩa tiếng Việt. Khi trả lời đúng, cộng điểm và hiển thị thông báo; khi trả lời sai, cho phép người dùng thử lại.

Sử dụng thiết kế trực quan, màu sắc phù hợp với học sinh và tạo sẵn dữ liệu mẫu để có thể sử dụng ngay.

Bước 4:

Sau đó quá trình phân tích yêu cầu, tạo giao diện cũng như các tính năng theo những gì bạn mô tả sẽ được Lovable thực hiện.

Khi hoàn thiện bạn sẽ nhận được thông báo mở website trên Lovable để xem và trực tiếp chỉnh sửa lại.

Trong giao diện này bạn có thể điều chỉnh những giao diện nếu chưa ưng ý.

Bạn truy cập từng phần để kiểm tra xem nội dung và các yêu cầu về kiến thức, các mục đã đúng ý bạn chưa.

Bước 5:

Chỉnh sửa xong bạn nhấn vào Xuất bạn để nhận URL website, điều chỉnh quyền truy cập nếu cần.

Bạn có thể truy cập theo link dưới đây để xem website học tiếng Anh lớp 6 xây dựng trên Lovable qua ChatGPT.

https://english-quest-for-kids.lovable.app/

Lưu ý sử dụng Lovable trên ChatGPT

Để Lovable tạo website đúng với mong muốn, bạn nên mô tả yêu cầu cụ thể ngay từ đầu. Một prompt tốt nên có các thông tin sau:

• Mục đích website: Website dùng để học tập, bán hàng, giới thiệu sản phẩm hay làm trò chơi.
• Đối tượng sử dụng: Ví dụ học sinh lớp 6, giáo viên hoặc người mới học tiếng Anh.
• Giao diện: Màu sắc, phong cách thiết kế, bố cục và khả năng hiển thị trên điện thoại.
• Các trang cần có: Trang chủ, bài học, quiz, trò chơi, kết quả...
• Tính năng: Nêu rõ những gì người dùng có thể thực hiện, chẳng hạn chọn đáp án, tính điểm, chuyển bài hoặc theo dõi tiến độ.
• Dữ liệu mẫu: Yêu cầu Lovable tạo sẵn nội dung để có thể kiểm tra website ngay.

Cách viết prompt cho Lovable

Bạn có thể áp dụng công thức đơn giản:

Tạo [loại website] + dành cho [đối tượng] + gồm [các trang] + có [tính năng] + giao diện [phong cách].

Ví dụ:

Tạo một website học tiếng Anh dành cho học sinh lớp 6. Website gồm trang chủ, bài học, quiz và trò chơi. Quiz có 10 câu hỏi, tự động chấm điểm và hiển thị kết quả. Trò chơi cho phép người học ghép từ tiếng Anh với nghĩa tiếng Việt. Thiết kế hiện đại, màu sắc thân thiện và responsive trên điện thoại.

Khi website cơ bản đã hoàn thành, bạn có thể tiếp tục yêu cầu Lovable bổ sung từng tính năng thay vì viết lại toàn bộ prompt. Cách này giúp quá trình xây dựng dễ kiểm soát và việc sửa lỗi cũng đơn giản hơn.