Ở bài trước, chúng ta đã đưa Brand Identity Levela vào source code và hoàn thiện giao diện cho Landing Page /levela.
Trang lúc này đã có logo, màu sắc, typography và phong cách giao diện thống nhất. Tuy nhiên, một Landing Page đẹp vẫn chưa đủ để đưa vào sử dụng nếu các khu vực như giới thiệu thương hiệu, sản phẩm, hình ảnh hay CTA vẫn đang sử dụng dữ liệu mẫu.
Trong bài này, chúng ta sẽ tiếp tục sử dụng Vibe Coding để thay dữ liệu mẫu bằng nội dung và sản phẩm thật, đồng thời đảm bảo các CTA trên Landing Page dẫn người dùng đến đúng hành động mong muốn.
1. Xác định những dữ liệu mẫu cần thay thế
Trước khi sửa source code, hãy mở lại /levela và xác định những nội dung nào hiện vẫn chỉ được sử dụng để dựng giao diện.
Thông thường sẽ có một số phần như:
- Nội dung Hero.
- Giới thiệu Levela.
- Hình ảnh Hero.
- Danh sách sản phẩm.
- Tên và giá sản phẩm.
- Hình ảnh sản phẩm.
- Đánh giá khách hàng.
- CTA và đường dẫn của CTA.
- Thông tin ở Footer.
Không nhất thiết phải thay tất cả cùng lúc. Trước tiên, có thể nhờ AI kiểm tra:
Prompt mẫu
"Hãy kiểm tra Landing Page /levela hiện tại.
Xác định những nội dung nào vẫn đang sử dụng dữ liệu mẫu, bao gồm:
- Text.
- Hình ảnh.
- Sản phẩm.
- Giá.
- Đánh giá khách hàng.
- CTA và đường dẫn.
- Thông tin Footer.
Hãy liệt kê vị trí cần cập nhật.
Chưa chỉnh sửa source code."
Kết quả này sẽ trở thành checklist cho những bước tiếp theo.
2. Thay nội dung mẫu bằng nội dung thật
Bắt đầu với những nội dung trực tiếp giới thiệu Levela. Ví dụ:
Nội dung Hero Section
| Thành phần | Nội dung |
|---|---|
| Headline | Chăm sóc làn da, tỏa sáng mỗi ngày |
| Mô tả | Levela mang đến trải nghiệm skincare đơn giản, nhẹ nhàng và dễ dàng đồng hành cùng bạn trong thói quen chăm sóc da mỗi ngày. |
| CTA chính | Khám phá sản phẩm |
| CTA phụ | Tìm hiểu Levela |
| Điểm đến CTA chính | Product Section |
| Điểm đến CTA phụ | Giới thiệu Levela |
Nội dung giới thiệu thương hiệu
| Thành phần | Nội dung |
|---|---|
| Tiêu đề | Skincare đơn giản cho mỗi ngày |
| Mô tả chính | Levela là thương hiệu mỹ phẩm và chăm sóc da dành cho những người trẻ yêu thích vẻ đẹp tự nhiên. Chúng tôi hướng đến trải nghiệm skincare đơn giản, dễ tiếp cận và phù hợp với nhịp sống hiện đại. |
| Mô tả bổ sung | Với Levela, chăm sóc da không cần phải là một quy trình phức tạp. Mỗi sản phẩm được lựa chọn để dễ dàng kết hợp vào routine hằng ngày, giúp bạn dành thời gian chăm sóc bản thân theo cách nhẹ nhàng hơn. |
Ở bước này, không cần yêu cầu AI viết lại toàn bộ Landing Page. Chúng ta cung cấp nội dung đã duyệt và yêu cầu AI thay đúng vị trí.
Prompt mẫu
"Hãy cập nhật nội dung thật cho Landing Page /levela.
Tôi sẽ cung cấp nội dung cho từng khu vực:
[Dán nội dung Hero, giới thiệu thương hiệu và các nội dung đã chuẩn bị]
Hãy thay thế nội dung mẫu bằng nội dung tôi cung cấp.
Yêu cầu:
- Không tự thay đổi ý nghĩa nội dung.
- Giữ nguyên cấu trúc Landing Page.
- Giữ nguyên Brand Identity Levela.
- Không thay đổi những section không liên quan.
Như vậy chúng ta tách rõ thiết kế giao diện và nội dung thực tế, giúp việc chỉnh sửa bằng AI dễ kiểm soát hơn.
3. Đưa sản phẩm thật vào Landing Page
Product Section là một trong những phần quan trọng nhất của Landing Page mỹ phẩm.
Thay vì các sản phẩm demo như Product 01, Product 02, Product 03, chúng ta cần sử dụng dữ liệu sản phẩm thực tế. Với mỗi sản phẩm, Landing Page chỉ cần những thông tin cần thiết để khách hàng đưa ra quyết định:
| Dữ liệu | Mục đích |
|---|---|
| Tên sản phẩm | Cho khách hàng biết sản phẩm là gì |
| Hình ảnh | Giúp nhận diện sản phẩm |
| Mô tả ngắn | Nêu công dụng hoặc điểm nổi bật |
| Giá | Thông tin mua hàng |
| CTA | Dẫn đến hành động tiếp theo |
Không nên đưa quá nhiều thông tin kỹ thuật vào Product Card vì sẽ làm Landing Page trở nên nặng và khó đọc. Ví dụ dữ liệu ban đầu có thể được cung cấp cho AI:
| Sản phẩm | Tên hiển thị | Mô tả | Giá | CTA |
|---|---|---|---|---|
| Sản phẩm 1 | Levela Hydrating Serum | Serum với kết cấu nhẹ, phù hợp để bổ sung vào chu trình chăm sóc da hằng ngày và mang lại cảm giác mềm mại, dễ chịu khi sử dụng. | 299.000đ | Xem sản phẩm |
| Sản phẩm 2 | Levela Daily Moisturizer | Kem dưỡng với phong cách chăm sóc đơn giản, dễ sử dụng trong routine hằng ngày và phù hợp với tinh thần skincare nhẹ nhàng của Levela. | 349.000đ | Xem sản phẩm |
| Sản phẩm 3 | Levela Gentle Cleanser | Sản phẩm làm sạch dành cho bước đầu tiên trong chu trình skincare hằng ngày, hướng đến trải nghiệm sử dụng nhẹ nhàng và thuận tiện. | 219.000đ | Xem sản phẩm |
Sau đó yêu cầu:
Prompt mẫu
"Hãy thay dữ liệu mẫu trong Product Section của /levela bằng danh sách sản phẩm tôi cung cấp.
[Dán dữ liệu sản phẩm]
Mỗi Product Card chỉ hiển thị:
- Hình ảnh.
- Tên sản phẩm.
- Mô tả ngắn.
- Giá.
- CTA.
Giữ nguyên Product Card theo Brand Guideline Levela.
Không thiết kế lại section nếu không cần thiết."
4. Thay hình ảnh thật
Sau nội dung và sản phẩm, chúng ta cần thay những hình ảnh placeholder còn lại.
Đối với Landing Page Levela, những vị trí đáng ưu tiên nhất là:
- Hero
- →
- Product
- →
- Brand/Benefit
Không cần tạo hàng chục hình ảnh chỉ để trang trông nhiều nội dung hơn.
Hình ảnh Hero cần thu hút sự chú ý. Hình sản phẩm cần rõ ràng và thống nhất. Hình minh họa khác chỉ nên xuất hiện khi thực sự hỗ trợ nội dung.
Đưa các file ảnh vào project theo cấu trúc hiện tại, sau đó có thể yêu cầu AI:
Prompt mẫu
"Tôi đã thêm hình ảnh thật của Levela vào project.
Hãy thay các hình ảnh mẫu trên /levela bằng những hình ảnh tương ứng.
Ưu tiên:
- Hero image.
- Product images.
- Hình giới thiệu thương hiệu nếu cần.
Giữ đúng tỷ lệ hình ảnh, không làm méo sản phẩm.
Không thay đổi layout nếu không cần thiết và tiếp tục tuân theo Brand Guideline Levela."
Sau khi thay ảnh, cần kiểm tra lại cả desktop và mobile vì ảnh thật có thể có tỷ lệ khác với placeholder ban đầu.
5. Kết nối CTA với hành động thật
Một phần rất quan trọng nhưng dễ bị bỏ qua là các button trên Landing Page. Nếu CTA chỉ đẹp nhưng bấm vào không dẫn đến đâu thì Landing Page chưa thực sự hoàn chỉnh.
Đối với các CTA khác, cần thay bằng đường dẫn thực tế tương ứng.
Có thể yêu cầu AI:
Prompt mẫu
"Hãy kiểm tra toàn bộ CTA trên Landing Page /levela.
Đảm bảo mỗi CTA có hành động rõ ràng.
- "Khám phá sản phẩm" → cuộn đến Product Section.
- "Xem sản phẩm" → mở trang sản phẩm tương ứng.
- "Mua ngay" → dẫn đến hành động mua hàng đã cấu hình.
- Các CTA khác → sử dụng đúng đường dẫn tôi cung cấp.
Không để button hoặc link sử dụng # nếu chưa có mục đích cụ thể.
Không thay đổi giao diện của button."
Đây là bước giúp Landing Page chuyển từ trang trình diễn giao diện thành trang có hành trình người dùng rõ ràng.
6. Kiểm tra lại Landing Page bằng hành trình của khách hàng
Sau khi đã thay nội dung, sản phẩm, hình ảnh và CTA, thay vì chỉ kiểm tra Landing Page có đẹp hay không, hãy thử sử dụng trang như một khách hàng thực tế.
Nếu một trong những câu hỏi trên chưa rõ, đó thường là vị trí Landing Page cần tiếp tục chỉnh sửa.
Prompt cuối cùng có thể đơn giản:
Prompt mẫu
"Hãy kiểm tra Landing Page /levela theo hành trình của một khách hàng lần đầu truy cập.
Kiểm tra:
- Nội dung có dễ hiểu không.
- Sản phẩm có đủ thông tin cần thiết không.
- Hình ảnh có hiển thị đúng không.
- CTA có rõ ràng và hoạt động đúng không.
- Có link nào bị lỗi hoặc chưa có đích đến không.
- Trải nghiệm có hoạt động tốt trên desktop và mobile không.
Chỉ liệt kê những vấn đề thực sự ảnh hưởng đến trải nghiệm hoặc chuyển đổi.
Không đề xuất thêm section nếu không thực sự cần thiết."
Sau khi AI kiểm tra và trả kết quả phản hồi như sau đây:
Kết luận
Đến đây, Landing Page Levela đã được thay thế phần lớn dữ liệu mẫu bằng nội dung, sản phẩm và hình ảnh thực tế. Giao diện cũng đã hiển thị ổn định trên desktop và mobile.
Tuy nhiên, Landing Page vẫn chưa hoàn thiện hành trình chuyển đổi. Một số CTA như "Mua ngay" và "Xem sản phẩm" chưa dẫn đến hành động thực tế, thông tin sản phẩm còn thiếu và các thông tin liên hệ ở Footer vẫn cần được cập nhật.
Vì vậy, ở bài tiếp theo, chúng ta sẽ tập trung hoàn thiện hành trình chuyển đổi trên Landing Page Levela, từ CTA đến form thu thập thông tin, giúp khách hàng có thể thực hiện bước tiếp theo thay vì chỉ dừng lại ở việc xem sản phẩm.