Hướng dẫn áp dụng bộ nhận diện thương hiệu Levela vào Landing Page với Vibe Coding

Ở bài trước, chúng ta đã xây dựng xong Brand Identity cho Levela, bao gồm định hướng thương hiệu, slogan, bảng màu, typography, logo, phong cách hình ảnh và UI Style. Cuối cùng, những yếu tố này đã được tổng hợp thành một Brand Guideline để làm quy chuẩn chung cho thương hiệu.

Ở bài này, chúng ta sẽ không xây dựng lại những thành phần đó. Thay vào đó, chúng ta sẽ quay lại source code của Landing Page /levela, đưa các tài nguyên thương hiệu vào project và sử dụng Brand Guideline làm đầu vào cho AI để chuyển giao diện mẫu thành giao diện mang phong cách Levela.

1. Đưa tài nguyên thương hiệu Levela vào source code

Bộ nhận diện ở bài trước không chỉ bao gồm các quy tắc về màu sắc hay typography mà còn có những tài nguyên thực tế cần được sử dụng trên website, đặc biệt là logo và favicon.

Ví dụ, chúng ta đã chuẩn bị:

• Logo chính.
• Logo ngang.
• Logo trên nền tối.
• Logo icon.
• Favicon.

Bước đầu tiên là đưa những file này vào source code của website. Tuy nhiên, mỗi project có thể có cấu trúc thư mục khác nhau. Có project lưu hình ảnh trong assets, project khác sử dụng images, public, static hoặc một cấu trúc riêng.

Vì vậy, thay vì tự tạo thêm một thư mục mới, chúng ta có thể để AI kiểm tra project trước.

Mở source code trong Visual Studio Code và sử dụng prompt:

Sau khi AI xác định được vị trí phù hợp, chúng ta đưa các file logo và favicon vào những thư mục tương ứng.

Ví dụ, nếu project đang sử dụng thư mục assets/images, AI có thể đề xuất:

<code>assets/
└── images/
    └── levela/
        ├── levela-logo.svg
        ├── levela-logo-horizontal.svg
        ├── levela-logo-dark.svg
        ├── levela-icon.svg
        └── levela-favicon.svg</code>

Đây chỉ là ví dụ. Vị trí thực tế nên dựa trên cấu trúc source code mà chúng ta đang sử dụng.

2. Cung cấp Brand Guideline cho AI

Sau khi các tài nguyên thương hiệu đã nằm trong project, bước tiếp theo là cung cấp Brand Guideline đã xây dựng ở bài trước cho AI. Chúng ta không cần yêu cầu AI đề xuất lại màu sắc, font chữ, button hay phong cách hình ảnh.

Brand Guideline đã đóng vai trò là quy chuẩn cuối cùng. Nhiệm vụ của AI trong bài này là đọc và thực hiện theo quy chuẩn đó.

Có thể sử dụng prompt:

Sau prompt này, AI đã có hai nhóm thông tin cần thiết như sau:

Brand Guideline cho AI biết giao diện phải trông như thế nào, còn nhóm còn lại cung cấp những tài nguyên thực tế để AI sử dụng. Lúc này chúng ta có thể bắt đầu chuyển đổi Landing Page.

3. Yêu cầu AI chuyển đổi giao diện /levela

Đây là bước chính của bài.

Landing Page /levela đã có cấu trúc từ bài đầu tiên, vì vậy chúng ta không cần yêu cầu AI tạo lại Header, Hero, Product Section hay Footer.

Thay vào đó, hãy yêu cầu AI giữ lại cấu trúc hiện tại và chuyển phần giao diện sang Brand Identity Levela.

Sử dụng prompt:

AI lúc này có thể bắt đầu chỉnh sửa các file liên quan đến /levela.

Điểm khác so với bài trước là chúng ta không còn mô tả lại màu nào cần sử dụng, font nào cần dùng hay button phải bo góc bao nhiêu. Những thông tin đó đã nằm trong Brand Guideline.

AI chỉ cần lấy quy chuẩn đã có và áp dụng vào giao diện.

Ví dụ, nếu Header hiện tại vẫn sử dụng logo mẫu, AI sẽ thay bằng logo Levela. Nếu Hero đang sử dụng màu sắc cũ, AI sẽ chuyển sang Design System trong Brand Guideline. Các button, card, icon và những thành phần còn lại cũng được xử lý tương tự.

Sau khi AI hoàn thành, hãy chạy lại project và truy cập /levela để xem kết quả.

4. Xem kết quả và tiếp tục phản hồi cho AI

Một trong những điểm quan trọng của Vibe Coding là không nhất thiết kết quả đầu tiên của AI phải hoàn hảo. Sau lần chỉnh sửa đầu tiên, Landing Page có thể đã đúng Brand Guideline nhưng vẫn còn một số chi tiết chưa phù hợp.

Thay vì yêu cầu AI làm lại toàn bộ trang, chúng ta chỉ cần mô tả những vấn đề nhìn thấy và yêu cầu AI chỉnh đúng các phần đó.

Ví dụ:

Sau khi AI chỉnh sửa, chúng ta lại mở Landing Page để xem kết quả. Nếu vẫn còn điểm chưa phù hợp, tiếp tục phản hồi.

Đây cũng là cách làm Vibe Coding thực tế hơn so với việc viết một prompt rất dài và yêu cầu AI hoàn thành toàn bộ website trong một lần.

5. Hoàn thiện Landing Page và kiểm tra các trang khác

Khi giao diện /levela đã đúng với mong muốn, chúng ta cần thực hiện một lượt kiểm tra cuối.

Có thể yêu cầu AI kiểm tra:

Sau bước này, Landing Page đã được chuyển từ giao diện mẫu sang giao diện mang nhận diện Levela mà không cần xây dựng lại toàn bộ trang từ đầu.

Kết luận

Trong bài này, chúng ta đã lấy Brand Identity được xây dựng ở bài trước và đưa nó vào quá trình phát triển Landing Page thực tế.

Sau bước này, Landing Page /levela đã có giao diện thương hiệu tương đối hoàn chỉnh. Ở bài tiếp theo, chúng ta sẽ bắt đầu thay dữ liệu mẫu bằng nội dung, hình ảnh và sản phẩm thật, để đưa Landing Page đến gần hơn với phiên bản có thể sử dụng thực tế.