Ở bài trước, chúng ta đã hoàn thiện luồng tiếp nhận yêu cầu tư vấn trên Landing Page Levela. Khi khách hàng gửi form, thông tin có thể được chuyển về EzySupport và khách hàng nhận được email xác nhận sau khi yêu cầu được tiếp nhận thành công.

Đến đây, /levela đã có thể giới thiệu sản phẩm và thu thập khách hàng quan tâm. Tuy nhiên, thông tin trên Product Card vẫn khá ngắn. Nếu khách muốn biết sản phẩm dùng như thế nào, nằm ở bước nào trong routine hoặc cần lưu ý gì khi sử dụng, Landing Page chưa phải nơi phù hợp để trình bày những nội dung dài như vậy.

Thay vì đưa quá nhiều thông tin vào Product Card, trong bài này chúng ta sẽ bổ sung Blog cho Levela. Nội dung bài viết sẽ được AI hỗ trợ tạo bằng Vibe Coding, sau đó quản lý trên EzyPlatform và hiển thị trở lại website.

Đặc biệt, ba sản phẩm hiện có của Levela sẽ được liên kết với ba bài hướng dẫn tương ứng. Khi khách click vào hình ảnh hoặc tên sản phẩm, họ có thể chuyển sang bài Blog để tìm hiểu cách sử dụng trước khi quyết định mua hoặc gửi yêu cầu tư vấn.

1. Xác định cấu trúc Blog cần bổ sung

Trước khi chỉnh sửa source code, chúng ta cần xác định Blog sẽ xuất hiện ở đâu và project hiện tại đã có những thành phần nào có thể tái sử dụng.

Với Levela, Blog cần hai thành phần chính:

Thành phần Mục đích
Blog trên menu Cho phép khách truy cập danh sách bài viết của Levela
Trang chi tiết bài viết Hiển thị đầy đủ nội dung, bao gồm các bài hướng dẫn sử dụng sản phẩm

Chúng ta không cần đưa toàn bộ nội dung Blog vào /levela. Landing Page vẫn tập trung vào giới thiệu sản phẩm và chuyển đổi, còn Blog đảm nhiệm những nội dung cần giải thích chi tiết hơn.

Trước tiên, hãy để AI kiểm tra project.

Prompt mẫu

"Hãy kiểm tra source code website hiện tại.

Tôi muốn bổ sung Blog cho Levela.

Hãy xác định:

  • Cấu trúc Header/Menu hiện tại.
  • Landing Page /levela đang được tạo ở đâu.
  • Project đã có trang danh sách Blog hay chưa.
  • Project đã có trang chi tiết bài viết hay chưa.
  • Cơ chế routing hiện tại.
  • Cấu trúc đang được sử dụng để lưu hoặc đồng bộ nội dung bài viết.
  • Các API hoặc Ezy Function liên quan đến bài viết đã được sử dụng trong project hay chưa.

Ưu tiên tái sử dụng cấu trúc hiện có.

Chưa chỉnh sửa source code."

AI kiểm tra cấu trúc website trước khi bổ sung Blog cho Levela
AI kiểm tra cấu trúc website trước khi bổ sung Blog cho Levela

Mục tiêu của bước này vẫn giống các bài trước: để AI hiểu project trước khi bắt đầu Vibe Coding, tránh tự tạo một kiến trúc Blog mới trong khi website đã có thành phần phù hợp để tái sử dụng.

2. Thêm mục Blog vào menu Levela

Sau khi đã xác định cấu trúc Header, chúng ta có thể bổ sung mục Blog vào menu.

Menu Levela hiện tại có thể đang là: Giới thiệu | Sản phẩm | Lợi ích | Đánh giá | Nhận tư vấn

Sau khi cập nhật: Giới thiệu | Sản phẩm | Lợi ích | Blog | Đánh giá | Nhận tư vấn

Menu Levela trước khi thêm mục Blog
Menu Levela trước khi thêm mục Blog
Menu Levela sau khi thêm mục Blog
Menu Levela sau khi thêm mục Blog

Khác với Sản phẩm, Lợi ích hay Đánh giá chỉ đưa người dùng đến một section trên Landing Page, Blog sẽ mở một trang riêng chứa danh sách bài viết. Ví dụ đường dẫn có thể là:

<a href="/levela/blog">Blog</a>

Tuy nhiên, đây chỉ là ví dụ. Nếu project đang sử dụng quy tắc routing khác, chúng ta nên giữ nguyên cấu trúc hiện tại thay vì tự quyết định URL mới.

Prompt mẫu

"Hãy thêm mục Blog vào menu của Levela.

Yêu cầu:

  • Blog nằm sau mục Lợi ích.
  • Khi click Blog, chuyển đến trang danh sách bài viết Levela.
  • Sử dụng routing hiện có của project.
  • Giữ nguyên Brand Identity Levela.
  • Menu hoạt động trên cả desktop và mobile.
  • Không làm thay đổi các mục menu hiện tại.

Nếu trang Blog chưa tồn tại, hãy tạo cấu trúc cần thiết theo kiến trúc hiện tại của project.

Chưa tạo dữ liệu bài viết giả."

Kết quả sau khi thêm mục Blog vào menu và tạo trang Blog Levela
Kết quả sau khi thêm mục Blog vào menu và tạo trang Blog Levela

Sau khi AI hoàn thành, hãy Preview và thử mở Blog trên cả desktop lẫn mobile trước khi chuyển sang phần nội dung.

3. Tạo các bài hướng dẫn sử dụng sản phẩm bằng Vibe Coding

Levela hiện có ba sản phẩm chính. Thay vì tạo những bài giới thiệu ngắn, chúng ta sẽ xây dựng mỗi bài như một hướng dẫn sử dụng thực tế.

Sản phẩm Bài Blog tương ứng
Levela Hydrating Serum Hướng dẫn sử dụng Levela Hydrating Serum trong routine hằng ngày
Levela Daily Moisturizer Hướng dẫn sử dụng Levela Daily Moisturizer đúng cách
Levela Gentle Cleanser Hướng dẫn sử dụng Levela Gentle Cleanser trong bước làm sạch da

Trước khi tạo bài, hãy yêu cầu AI kiểm tra định dạng nội dung hiện tại để các bài được tạo có thể tiếp tục sử dụng với EzyPlatform.

Prompt mẫu

"Tôi muốn tạo ba bài Blog hướng dẫn sử dụng sản phẩm Levela bằng Vibe Coding.

Trước tiên hãy kiểm tra project và xác định:

  • Định dạng file bài viết đang được sử dụng.
  • Các trường metadata cần thiết.
  • Cách khai báo title, slug, summary, image và content.
  • Cấu trúc nào có thể sử dụng để sau đó đưa bài viết lên EzyPlatform.

Chưa tạo bài viết.

Hãy đề xuất cách tạo ba bài phù hợp với cấu trúc hiện tại."

Sau khi AI xác định được cấu trúc, chúng ta bắt đầu tạo từng bài.

3.1. Tạo bài hướng dẫn Levela Hydrating Serum

Tiêu đề: Hướng dẫn sử dụng Levela Hydrating Serum trong routine hằng ngày

Slug: huong-dan-su-dung-levela-hydrating-serum

Prompt mẫu

"Hãy tạo một bài Blog hoàn chỉnh: Hướng dẫn sử dụng Levela Hydrating Serum trong routine hằng ngày

Slug: huong-dan-su-dung-levela-hydrating-serum.

Đây là bài hướng dẫn thực tế dành cho người mới skincare. Hãy viết theo từng bước, không chỉ giới thiệu sản phẩm.

Bài viết gồm:

1. Levela Hydrating Serum được sử dụng ở bước nào?
  • Giải thích ngắn vị trí của serum trong routine.
  • Minh họa: Làm sạch → Serum → Kem dưỡng.
  • Giải thích ngắn gọn, dễ hiểu cho người mới.

[Ảnh minh họa 1: Levela Hydrating Serum cùng sơ đồ Làm sạch → Serum → Kem dưỡng.]

2. Chuẩn bị trước khi sử dụng
  • Làm sạch da.
  • Thực hiện bước chuẩn bị theo hướng dẫn hiện có của sản phẩm.
  • Chuẩn bị Levela Hydrating Serum.

[Ảnh minh họa 2: Levela Hydrating Serum trong không gian skincare tối giản.]

3. Cách sử dụng Levela Hydrating Serum
  • Bước 1: Hoàn thành bước làm sạch.
  • Bước 2: Lấy lượng serum theo hướng dẫn sử dụng của sản phẩm.
  • Bước 3: Thoa serum nhẹ nhàng và đều.
  • Bước 4: Tiếp tục bước dưỡng tiếp theo.

Không tự đặt số giọt hoặc lượng sử dụng cụ thể nếu dữ liệu sản phẩm chưa cung cấp.

[Ảnh minh họa 3: Quy trình sử dụng Levela Hydrating Serum theo từng bước.]

4. Đưa serum vào routine hằng ngày

Minh họa routine: Gentle Cleanser → Hydrating Serum → Daily Moisturizer

[Ảnh minh họa 4: Bộ ba Levela theo thứ tự Cleanser → Serum → Moisturizer.]

5. Một số lưu ý khi sử dụng
  • Ưu tiên hướng dẫn sử dụng đã có của sản phẩm.
  • Không tự tạo thành phần hoặc công dụng.
  • Không tự xác định loại da phù hợp.
  • Không đưa ra cam kết về hiệu quả hoặc thời gian có kết quả.
6. Tiếp tục routine cùng Levela

Tạo CTA:

  • Xem Levela Hydrating Serum.
  • Nhận tư vấn về sản phẩm.

Viết bằng tiếng Việt, giọng văn nhẹ nhàng, hiện đại và dễ hiểu.

Sử dụng dữ liệu sản phẩm hiện có trong project.

Tạo bài theo đúng cấu trúc Blog vừa phân tích và đặt placeholder ảnh vào đúng vị trí."

3.2. Tạo bài hướng dẫn Levela Daily Moisturizer

Tiêu đề: Hướng dẫn sử dụng Levela Daily Moisturizer đúng cách

Slug: huong-dan-su-dung-levela-daily-moisturizer

Prompt mẫu

"Hãy tạo bài Blog hoàn chỉnh: Hướng dẫn sử dụng Levela Daily Moisturizer đúng cách

Slug: huong-dan-su-dung-levela-daily-moisturizer.

Bài viết gồm:

1. Daily Moisturizer nằm ở đâu trong routine?

Giải thích vị trí của bước dưỡng ẩm và minh họa: Gentle Cleanser → Hydrating Serum → Daily Moisturizer

[Ảnh minh họa 1: Daily Moisturizer ở vị trí cuối trong routine ba bước Levela.]

2. Chuẩn bị trước khi sử dụng
  • Hoàn thành bước làm sạch.
  • Hoàn thành những bước skincare đứng trước kem dưỡng.
  • Chuẩn bị Levela Daily Moisturizer.

[Ảnh minh họa 2: Hũ Levela Daily Moisturizer trong không gian skincare tối giản.]

3. Cách sử dụng Levela Daily Moisturizer
  • Bước 1: Hoàn thành các bước skincare trước đó.
  • Bước 2: Lấy lượng sản phẩm theo hướng dẫn sử dụng.
  • Bước 3: Thoa sản phẩm nhẹ nhàng và đều.
  • Bước 4: Hoàn thành routine theo hướng dẫn phù hợp.

Không tự đặt lượng kem hoặc tần suất sử dụng nếu chưa có dữ liệu chính thức.

[Ảnh minh họa 3: Các bước sử dụng Levela Daily Moisturizer.]

4. Kết hợp với các sản phẩm Levela

Levela Gentle Cleanser → Levela Hydrating Serum → Levela Daily Moisturizer

[Ảnh minh họa 4: Bộ ba Levela theo đúng thứ tự routine.]

5. Những lưu ý khi sử dụng

Chỉ sử dụng thông tin có trong dữ liệu sản phẩm. Không tự tạo cảnh báo, thành phần, công dụng, loại da phù hợp hoặc cam kết hiệu quả.

6. Tìm hiểu thêm về Levela

Tạo CTA:

  • Xem Levela Daily Moisturizer.
  • Nhận tư vấn.

Giữ cùng cấu trúc, phong cách viết và Brand Identity với bài Levela Hydrating Serum.

Tạo trực tiếp bài viết theo cấu trúc Blog hiện tại."

3.3. Tạo bài hướng dẫn Levela Gentle Cleanser

Tiêu đề: Hướng dẫn sử dụng Levela Gentle Cleanser trong bước làm sạch da

Slug: huong-dan-su-dung-levela-gentle-cleanser

Prompt mẫu

"Hãy tạo bài Blog hoàn chỉnh: Hướng dẫn sử dụng Levela Gentle Cleanser trong bước làm sạch da

Slug: huong-dan-su-dung-levela-gentle-cleanser.

Bài viết tập trung vào hướng dẫn thực tế:

1. Bắt đầu routine với bước làm sạch

Giải thích Levela Gentle Cleanser nằm ở đầu routine: Gentle Cleanser → Hydrating Serum → Daily Moisturizer

[Ảnh minh họa 1: Gentle Cleanser ở vị trí đầu tiên trong routine Levela.]

2. Chuẩn bị trước khi làm sạch
  • Chuẩn bị sản phẩm.
  • Thực hiện các bước chuẩn bị theo hướng dẫn thực tế của sản phẩm.
  • Không tự suy đoán cách sử dụng nếu dữ liệu hiện tại không cung cấp.

[Ảnh minh họa 2: Levela Gentle Cleanser trong không gian skincare sáng và tối giản.]

3. Cách sử dụng Levela Gentle Cleanser

Trình bày thành các bước dựa trên hướng dẫn sản phẩm hiện có.

Nếu chưa có dữ liệu chính thức về lượng sản phẩm, thời gian làm sạch hoặc nhiệt độ nước thì không tự tạo các con số này.

[Ảnh minh họa 3: Quy trình sử dụng Levela Gentle Cleanser theo từng bước.]

4. Sau bước làm sạch nên làm gì?

Giới thiệu bước tiếp theo: Gentle Cleanser → Hydrating Serum → Daily Moisturizer

[Ảnh minh họa 4: Bộ ba Levela theo thứ tự sử dụng.]

5. Những lưu ý khi sử dụng

Chỉ sử dụng thông tin đã được cung cấp. Không tự tạo thành phần, công dụng, claim hoặc hướng dẫn mang tính điều trị.

6. Tiếp tục chăm sóc da cùng Levela

Tạo CTA:

  • Xem Levela Gentle Cleanser.
  • Nhận tư vấn.

Viết chi tiết nhưng dễ đọc, ưu tiên hướng dẫn từng bước và giữ Brand Identity Levela.

Tạo trực tiếp bài viết theo cấu trúc Blog hiện tại."

4. Chuẩn bị và đưa ảnh minh họa vào các bài Blog

Ba bài Blog đã có vị trí dành cho ảnh nhưng chúng ta chưa nên để AI tự lấy ảnh ngẫu nhiên trên Internet. Sau khi các ảnh đã được chuẩn bị và đưa vào project, hãy yêu cầu AI ghép chúng vào bài:

Prompt mẫu

"Các ảnh minh họa cho Blog Levela đã được thêm vào project.

Hãy kiểm tra thư mục chứa ảnh và thay toàn bộ placeholder ảnh trong ba bài Blog bằng đúng hình tương ứng.

Yêu cầu:

  • Sử dụng đúng đường dẫn ảnh hiện có.
  • Chọn ảnh đúng với nội dung đang được minh họa.
  • Thêm alt text mô tả đúng nội dung.
  • Không làm méo ảnh.
  • Lazy load những ảnh phù hợp.
  • Giữ giao diện bài viết responsive.
  • Không thay đổi nội dung bài viết.

Sau khi hoàn thành, hãy kiểm tra lại cả ba bài trên desktop và mobile."

Bài Blog Levela sau khi thay placeholder bằng ảnh thật
Bài Blog Levela sau khi thay placeholder bằng ảnh thật

Ở bước này, cần đặc biệt kiểm tra nội dung do AI tạo. Vì các sản phẩm Levela trong series hiện vẫn mang tính minh họa, không nên để AI tự bổ sung thành phần, công dụng, loại da phù hợp, tần suất sử dụng hoặc cam kết hiệu quả nếu chưa có dữ liệu sản phẩm tương ứng.

5. Sử dụng MCP để tìm chức năng lấy dữ liệu Blog

Sau khi các bài đã có trên EzyPlatform, bước tiếp theo là lấy dữ liệu trở lại website.

Tương tự cách chúng ta đã làm với EzySupport, không nên tự đoán endpoint. Hãy để AI sử dụng MCP Server tìm API hoặc Ezy Function phù hợp.

Prompt mẫu

"Hãy sử dụng MCP Server để kiểm tra các API hoặc Ezy Function hiện có trên EzyPlatform dành cho bài viết.

Tôi cần xây dựng Blog cho Levela với hai chức năng:

  • Lấy danh sách các bài Blog Levela đã xuất bản.
  • Lấy chi tiết một bài viết theo routing hiện tại.

Hãy xác định:

  • API hoặc Ezy Function phù hợp.
  • Các tham số cần truyền.
  • Dữ liệu trả về.
  • Cách phân trang nếu danh sách hỗ trợ pagination.
  • Cách lấy chi tiết bài viết.

Ưu tiên chức năng đã có trên EzyPlatform.

Không tự tạo API mới.

Chưa chỉnh sửa source code."

AI xác định API/Ezy Function phù hợp để lấy dữ liệu Blog
AI xác định API/Ezy Function phù hợp để lấy dữ liệu Blog

Nếu MCP trả về nhiều chức năng, hãy lựa chọn dựa trên nhu cầu thực tế của trang Blog thay vì yêu cầu AI viết thêm một API mới.

6. Đưa danh sách bài viết vào trang Blog

Khi đã xác định được chức năng lấy dữ liệu, chúng ta bắt đầu ghép dữ liệu thật vào trang Blog.

Mỗi Blog Card chỉ cần những thông tin giúp khách quyết định có muốn đọc bài hay không:

Dữ liệu Hiển thị
Ảnh đại diện Hình ảnh chính của bài viết
Tiêu đề Tên bài Blog
Mô tả ngắn Giới thiệu nhanh nội dung bài
CTA Đọc bài viết

Tiếp tục Vibe Coding:

Prompt mẫu

"Dựa trên API/Ezy Function Blog vừa tìm được, hãy đưa dữ liệu bài viết thật từ EzyPlatform vào trang Blog Levela.

Mỗi Blog Card hiển thị:

  • Ảnh đại diện.
  • Tiêu đề.
  • Mô tả ngắn.
  • CTA Đọc bài viết.

Khi click vào card hoặc CTA, chuyển đến đúng trang chi tiết của bài viết.

Yêu cầu:

  • Không hard-code danh sách bài viết trong HTML.
  • Chỉ hiển thị dữ liệu bài viết phù hợp và đã xuất bản.
  • Giữ đúng Brand Identity Levela.
  • Tái sử dụng component và CSS hiện có nếu phù hợp.
  • Hiển thị tốt trên desktop và mobile.
  • Không thêm thư viện mới nếu không cần thiết.

Sau khi hoàn thành, hãy liệt kê các file đã thay đổi và dừng lại để tôi Preview."

Trang Blog Levela hiển thị dữ liệu bài viết thật từ EzyPlatform
Trang Blog Levela hiển thị dữ liệu bài viết thật từ EzyPlatform

7. Liên kết Product Card với bài hướng dẫn tương ứng

Đây là phần kết nối Blog trở lại Landing Page. Product Card trên /levela hiện đã cho khách biết tên, hình ảnh, mô tả và giá sản phẩm. Bây giờ chúng ta sẽ cho phép khách click vào ảnh hoặc tên sản phẩm để đọc bài hướng dẫn tương ứng.

Điều quan trọng là không làm mất hành vi của CTA Mua ngay đã xây dựng trước đó. Hai hành động cần được tách rõ:

  • Click ảnh hoặc tên sản phẩm
  • →
  • Mở bài hướng dẫn
  • Click Mua ngay
  • →
  • Tiếp tục đưa khách đến form tư vấn

Prompt mẫu

"Hãy liên kết các Product Card trên Landing Page /levela với bài Blog hướng dẫn sử dụng tương ứng.

Mapping:

  • Levela Hydrating Serum → bài hướng dẫn sử dụng Levela Hydrating Serum.
  • Levela Daily Moisturizer → bài hướng dẫn sử dụng Levela Daily Moisturizer.
  • Levela Gentle Cleanser → bài hướng dẫn sử dụng Levela Gentle Cleanser.

Yêu cầu:

  • Click vào ảnh hoặc tên sản phẩm → mở bài Blog tương ứng.
  • Nút Mua ngay vẫn giữ nguyên hành động hiện tại và dẫn đến form tư vấn.
  • Không để việc click Product Card ảnh hưởng đến CTA Mua ngay.
  • Sử dụng URL bài viết thực tế từ dữ liệu EzyPlatform nếu có.
  • Không hard-code URL nếu dữ liệu hiện tại đã cung cấp slug hoặc đường dẫn.
  • Không thay đổi giao diện Product Card nếu không cần thiết.

Sau khi hoàn thành, hãy liệt kê mapping giữa từng sản phẩm và bài Blog tương ứng."

Product Card liên kết với bài Blog hướng dẫn sử dụng - phần 1
Product Card liên kết với bài Blog hướng dẫn sử dụng (1/2)
Product Card liên kết với bài Blog hướng dẫn sử dụng - phần 2
Product Card liên kết với bài Blog hướng dẫn sử dụng (2/2)

Blog lúc này không phải một khu vực tách rời khỏi Landing Page. Nó trở thành phần nội dung hỗ trợ khách hàng tìm hiểu sâu hơn trước khi chuyển đổi.

8. Kiểm tra toàn bộ luồng Blog

Sau khi hoàn thành, chúng ta cần kiểm tra cả luồng Blog lẫn những chức năng đã xây dựng ở các bài trước, hãy để AI rà soát toàn bộ chức năng:

Prompt mẫu

"Hãy kiểm tra toàn bộ chức năng Blog vừa tích hợp cho Levela.

Kiểm tra:

  • Menu Blog hoạt động trên desktop và mobile.
  • Trang Blog lấy dữ liệu thật từ EzyPlatform.
  • Không còn dữ liệu Blog demo được hard-code.
  • Ảnh trong bài viết hiển thị đúng và không bị méo.
  • Click Blog Card mở đúng bài viết.
  • Trang chi tiết hiển thị đúng dữ liệu.
  • Click ảnh hoặc tên sản phẩm trên /levela mở đúng bài hướng dẫn tương ứng.
  • Nút Mua ngay vẫn dẫn đến form tư vấn như trước.
  • Không có link # hoặc đường dẫn không hoạt động.
  • Không ảnh hưởng đến luồng EzySupport đã hoàn thiện.
  • Giao diện hoạt động tốt trên desktop và mobile.

Nếu phát hiện lỗi, chỉ sửa những phần liên quan trực tiếp đến Blog và liên kết sản phẩm.

Không thêm chức năng mới."

AI rà soát kết quả toàn bộ luồng Blog và liên kết sản phẩm
AI rà soát kết quả toàn bộ luồng Blog và liên kết sản phẩm

Sau khi AI hoàn thành, chúng ta vẫn nên tự mở lần lượt cả ba sản phẩm để chắc chắn mỗi Product Card đều dẫn đến đúng bài hướng dẫn và nút Mua ngay vẫn hoạt động bình thường.

Kết luận

Đến đây, Levela không còn chỉ có một Landing Page giới thiệu sản phẩm. Chúng ta đã bổ sung Blog, sử dụng Vibe Coding để xây dựng các bài hướng dẫn sử dụng, đưa nội dung lên EzyPlatform và lấy dữ liệu trở lại website để hiển thị.

Quan trọng hơn, từng sản phẩm trên /levela đã được kết nối với bài hướng dẫn tương ứng. Khách hàng có thể click vào sản phẩm để tìm hiểu cách sử dụng và vị trí của sản phẩm trong routine trước khi đưa ra quyết định.

Tuy nhiên, nút Mua ngay hiện vẫn đưa khách hàng đến form để gửi yêu cầu tư vấn. Nếu muốn Levela tiến thêm một bước từ Landing Page thu thập khách hàng tiềm năng thành một website có khả năng bán hàng trực tiếp, chúng ta cần bổ sung quy trình để khách có thể tự chọn sản phẩm và tạo đơn hàng.

Ở bài tiếp theo, chúng ta sẽ tiếp tục sử dụng Vibe Coding để thêm giỏ hàng và thanh toán vào Landing Page Levela, từ đó mở rộng hành trình thành một website có thể bán hàng trực tiếp.