Landing Page thường được sử dụng để giới thiệu một sản phẩm, dịch vụ hoặc phục vụ cho một chiến dịch Marketing cụ thể. Khác với trang chủ có nhiều nội dung và hướng điều hướng khác nhau, Landing Page thường tập trung vào một mục tiêu chính và dẫn người dùng đến một hành động cụ thể.

Ví dụ, với một Landing Page mỹ phẩm, chúng ta có thể tập trung vào việc giới thiệu sản phẩm, những lợi ích nổi bật, đánh giá từ khách hàng và cuối cùng dẫn người dùng đến hành động mua hàng.

Với Vibe Coding, bạn không nhất thiết phải tự viết từng dòng HTML, CSS và JavaScript. Thay vào đó, chúng ta có thể mô tả trang muốn xây dựng bằng ngôn ngữ tự nhiên và để AI hỗ trợ tạo mã nguồn ngay trong Visual Studio Code.

Trong bài viết này, chúng ta sẽ tạo một Landing Page mỹ phẩm độc lập ngay trong VS Code, có đường dẫn riêng. Ở giai đoạn này, chúng ta chỉ tập trung vào cấu trúc và giao diện cơ bản. Logo, màu sắc, font chữ, hình ảnh và bộ nhận diện thương hiệu Levela sẽ được hoàn thiện trong bài tiếp theo.

1. Landing Page chúng ta sẽ xây dựng

Trong bài này, chúng ta sẽ tạo một Landing Page riêng cho thương hiệu mỹ phẩm Levela tại đường dẫn /levela. Ví dụ: https://your-domain.com/levela.

Landing Page có mục tiêu giới thiệu thương hiệu, sản phẩm và khuyến khích khách hàng mua hàng. Trang sẽ gồm các phần chính:

  • Header
  • Hero Section
  • Giới thiệu thương hiệu
  • Sản phẩm nổi bật
  • Lợi ích sản phẩm
  • Đánh giá khách hàng
  • CTA mua hàng
  • Footer

Trong bài này, chúng ta chỉ cần tạo bộ khung Landing Page và đảm bảo đường dẫn /levela hoạt động đúng. Các bước thực hiện:

  • Mở source code
  • →
  • Tạo trang /levela
  • →
  • Dùng AI tạo giao diện
  • →
  • Kiểm tra kết quả

2. Chuẩn bị môi trường Vibe Coding

Trước khi bắt đầu, chúng ta cần chuẩn bị môi trường để làm việc với mã nguồn và AI.

Các công cụ cơ bản gồm:

  • Visual Studio Code.
  • Một AI Assistant hỗ trợ coding như Codex hoặc Claude Code.
  • Source code website.
  • Trình duyệt để kiểm tra kết quả.

Sau khi cài đặt, mở source code website bằng Visual Studio Code.

Tiếp theo, mở AI Assistant và kiểm tra để chắc chắn rằng AI có thể đọc và chỉnh sửa các file trong dự án.

Kiểm tra AI Assistant có thể đọc và chỉnh sửa file trong dự án
Kiểm tra AI Assistant có thể đọc và chỉnh sửa file trong dự án

3. Yêu cầu AI đọc cấu trúc website

Trước khi tạo Landing Page, chúng ta nên để AI đọc cấu trúc source code hiện tại.

Điều này giúp AI hiểu website đang tổ chức các page, CSS, JavaScript và tài nguyên như thế nào.

Có thể sử dụng prompt:

Prompt mẫu

"Hãy đọc và phân tích source code website hiện tại.

Xác định:

  • Cấu trúc thư mục.
  • Cách website đang tổ chức các page.
  • File CSS và JavaScript dùng chung.
  • Cách khai báo đường dẫn cho từng page.
  • Header và Footer dùng chung nếu có.
  • Thư mục chứa hình ảnh và các tài nguyên khác.

Chưa chỉnh sửa mã nguồn.

Sau khi phân tích, hãy tóm tắt cách phù hợp nhất để thêm một Landing Page độc lập với đường dẫn /levela mà không ảnh hưởng đến các trang hiện tại."

AI sẽ đọc source code và xác định cách phù hợp để tạo trang mới.

AI phân tích cấu trúc source code website hiện tại
AI phân tích cấu trúc source code website hiện tại

Bước này đặc biệt hữu ích vì mỗi dự án có thể tổ chức source code khác nhau. Thay vì tự xác định phải đặt file ở đâu, chúng ta để AI dựa trên cấu trúc hiện tại để lựa chọn cách triển khai phù hợp.

4. Tạo trang riêng cho Landing Page

Sau khi AI đã hiểu cấu trúc website, bước tiếp theo là yêu cầu tạo một trang riêng cho Landing Page.

Có thể yêu cầu AI:

Prompt mẫu

"Dựa trên cấu trúc source code hiện tại, hãy tạo một page mới dành riêng cho Landing Page.

Yêu cầu:

  • Tên page: Levela Landing Page.
  • Đường dẫn: /levela.
  • Page hoạt động độc lập với trang chủ.
  • Không thay đổi nội dung của các page hiện tại.
  • Tận dụng cấu trúc dự án hiện có.
  • Chưa cần tạo giao diện chi tiết.

Sau khi hoàn thành, hãy cho tôi biết những file nào đã được tạo hoặc chỉnh sửa."

AI sẽ dựa vào cách website hiện tại tổ chức các page để tạo file cần thiết.

Điểm quan trọng là /levela phải hoạt động như một trang riêng và việc tạo Landing Page không làm thay đổi các page khác.

5. Kiểm tra đường dẫn Landing Page

Sau khi AI tạo page, hãy chạy website trên môi trường phát triển.

Mở trình duyệt và truy cập đường dẫn /levela.

Ví dụ page được mở thành công, chúng ta đã có khu vực riêng để bắt đầu xây dựng Landing Page.

Kiểm tra đường dẫn /levela hoạt động đúng
Kiểm tra đường dẫn /levela hoạt động đúng

Ở bước này, Landing Page có thể vẫn đang trống hoặc chỉ có nội dung thử nghiệm. Điều quan trọng là đường dẫn đã hoạt động đúng. Đồng thời, hãy mở lại trang chủ và một số page hiện tại để chắc chắn rằng việc thêm /levela không làm ảnh hưởng đến website.

6. Xác định yêu cầu cho Landing Page

Trước khi yêu cầu AI tạo giao diện, chúng ta cần xác định Landing Page muốn xây dựng.

Không cần chuẩn bị một tài liệu thiết kế quá chi tiết. Trong giai đoạn đầu, chúng ta chỉ cần xác định mục tiêu, phong cách và cấu trúc.

Mục tiêu

Landing Page được sử dụng để giới thiệu thương hiệu mỹ phẩm và hướng khách hàng đến các sản phẩm nổi bật.

Phong cách

Landing Page hướng đến phong cách:

  • Hiện đại.
  • Tối giản.
  • Nhẹ nhàng.
  • Nhiều khoảng trắng.
  • Tập trung vào hình ảnh sản phẩm.
  • Phù hợp với mỹ phẩm và chăm sóc da.

Ở giai đoạn này, chúng ta chưa cần xác định chính xác logo, font chữ hoặc bảng màu thương hiệu.

AI có thể sử dụng dữ liệu, màu sắc và hình ảnh mẫu để chúng ta tập trung vào việc hoàn thiện bố cục trước.

Cấu trúc

Landing Page sẽ gồm:

  1. Header.
  2. Hero Section.
  3. Giới thiệu.
  4. Sản phẩm nổi bật.
  5. Lợi ích sản phẩm.
  6. Đánh giá khách hàng.
  7. CTA.
  8. Footer.

Khi đã có những yêu cầu cơ bản này, chúng ta có thể bắt đầu Vibe Coding.

7. Yêu cầu AI tạo giao diện Landing Page

Mở AI Assistant và cung cấp yêu cầu:

Prompt mẫu

"Hãy xây dựng giao diện cho page /levela vừa tạo.

Đây là Landing Page giới thiệu mỹ phẩm.

Mục tiêu: Giới thiệu thương hiệu mỹ phẩm và các sản phẩm chăm sóc da nổi bật.

Phong cách:

  • Hiện đại.
  • Tối giản.
  • Nhẹ nhàng.
  • Phù hợp với lĩnh vực mỹ phẩm.
  • Nhiều khoảng trắng.
  • Tập trung vào hình ảnh sản phẩm.

Landing Page gồm:

  1. Header
    • Logo dạng chữ tạm thời.
    • Menu: Giới thiệu, Sản phẩm, Lợi ích, Đánh giá.
    • Nút "Mua ngay".
  2. Hero Section
    • Tiêu đề chính.
    • Mô tả ngắn.
    • Nút "Khám phá sản phẩm".
    • Hình ảnh sản phẩm minh họa.
  3. Giới thiệu
    • Tiêu đề.
    • Nội dung giới thiệu ngắn.
    • Hình ảnh minh họa.
  4. Sản phẩm nổi bật
    • Hiển thị 3 sản phẩm.
    • Mỗi sản phẩm có hình ảnh, tên, mô tả ngắn, giá và nút "Mua ngay".
  5. Lợi ích sản phẩm
    • Thành phần an toàn.
    • Dịu nhẹ cho da.
    • Dưỡng ẩm.
    • Phù hợp sử dụng hằng ngày.
  6. Đánh giá khách hàng
    • Hiển thị 3 đánh giá.
  7. CTA
    • Nội dung kêu gọi khách hàng khám phá sản phẩm.
    • Nút "Mua ngay".
  8. Footer
    • Tên thương hiệu.
    • Thông tin liên hệ.
    • Liên kết mạng xã hội.

Yêu cầu kỹ thuật:

  • Responsive trên desktop, tablet và mobile.
  • Tận dụng cấu trúc CSS và JavaScript hiện tại nếu phù hợp.
  • Chỉ tạo CSS hoặc JavaScript riêng khi cần thiết.
  • Chỉ chỉnh sửa những file phục vụ /levela.
  • Không làm thay đổi giao diện các page khác.
  • Có thể sử dụng nội dung, màu sắc và hình ảnh mẫu.
  • Chưa cần xây dựng bộ nhận diện thương hiệu hoàn chỉnh."

AI sẽ dựa trên yêu cầu và cấu trúc source code hiện tại để xây dựng Landing Page.

Landing Page mỹ phẩm Levela sau khi AI xây dựng giao diện
Landing Page mỹ phẩm Levela sau khi AI xây dựng giao diện

8. Kiểm tra Landing Page đầu tiên

Sau khi AI hoàn thành, mở lại địa chỉ tương ứng. Ở lần kiểm tra này, chúng ta chưa cần quá chú trọng đến logo, màu sắc, font chữ hoặc hình ảnh sản phẩm.

Hãy tập trung kiểm tra:

  • Các section đã xuất hiện đầy đủ chưa.
  • Thứ tự nội dung có đúng với yêu cầu không.
  • Hero Section có được đặt đúng vị trí không.
  • Khu vực sản phẩm đã có cấu trúc phù hợp chưa.
  • CTA đã xuất hiện đúng vị trí chưa.
  • Landing Page có thể truy cập độc lập qua /levela hay chưa.
  • Việc thêm Landing Page có làm ảnh hưởng đến các trang khác hay không.

Nếu những thành phần cơ bản đã xuất hiện đúng, chúng ta đã có một bộ khung đủ để tiếp tục phát triển Landing Page.

Ở thời điểm này, chưa cần dành quá nhiều thời gian chỉnh màu sắc, font chữ, hình ảnh hay từng chi tiết nhỏ của giao diện. Những yếu tố này nên được xác định dựa trên một bộ nhận diện thương hiệu thống nhất thay vì chỉnh sửa riêng lẻ ngay từ đầu.

9. Bước tiếp theo: Xây dựng bộ nhận diện thương hiệu Levela

Đến đây, chúng ta đã hoàn thành mục tiêu chính của bài viết: tạo một Landing Page mỹ phẩm độc lập bằng Vibe Coding và có đường dẫn riêng: https://fashion.ezyplatform.com/levela. Landing Page hiện tại đã có cấu trúc cần thiết, nhưng vẫn đang sử dụng những thành phần tạm thời như tên thương hiệu, logo dạng chữ, màu sắc, font chữ, hình ảnh và nội dung mẫu.

Nếu tiếp tục chỉnh sửa giao diện ngay lúc này, chúng ta có thể gặp tình trạng mỗi section sử dụng một phong cách khác nhau hoặc phải thay đổi lại nhiều thành phần khi thương hiệu được xác định sau đó.

Landing Page Levela vẫn đang dùng thành phần tạm thời, chờ bộ nhận diện thương hiệu
Landing Page Levela vẫn đang dùng thành phần tạm thời, chờ bộ nhận diện thương hiệu

Vì vậy, trước khi tiếp tục hoàn thiện Landing Page, trong bài tiếp theo sẽ là xây dựng bộ nhận diện thương hiệu Levela.

Kết luận

Đến đây, chúng ta đã hoàn thành phần nền tảng của Landing Page Levela: tạo một trang độc lập, có đường dẫn riêng và xây dựng được đầy đủ các khu vực cần thiết bằng Vibe Coding.

Ở giai đoạn này, Landing Page vẫn chủ yếu sử dụng màu sắc, font chữ, hình ảnh và nội dung mẫu. Đây là bước hợp lý để chúng ta tập trung trước vào cấu trúc và cách tổ chức nội dung, thay vì chỉnh sửa quá sâu về mặt hình ảnh.

Bước tiếp theo là xây dựng một bộ nhận diện thương hiệu thống nhất cho Levela, bao gồm logo, bảng màu, font chữ, phong cách hình ảnh và các quy tắc giao diện. Sau đó, những yếu tố này sẽ được áp dụng lại vào Landing Page để tạo nên một giao diện hoàn chỉnh và đồng nhất hơn.

  • Tạo Landing Page
  • →
  • Xây dựng bộ nhận diện Levela
  • →
  • Hoàn thiện giao diện thương hiệu

Trong bài tiếp theo, chúng ta sẽ bắt đầu xây dựng bộ nhận diện thương hiệu Levela và sử dụng bộ nhận diện đó làm cơ sở để tiếp tục hoàn thiện Landing Page.