Hướng dẫn xây dựng bộ nhận diện thương hiệu Levela với Vibe Coding

Ở bài trước, chúng ta đã tạo một Landing Page mỹ phẩm độc lập tại đường dẫn /levela. Landing Page đã có các thành phần cơ bản như Header, Hero Section, giới thiệu thương hiệu, sản phẩm nổi bật, lợi ích, đánh giá khách hàng, CTA và Footer.

Tuy nhiên, giao diện hiện tại mới chỉ là bộ khung. Tên thương hiệu, logo, màu sắc, font chữ và hình ảnh vẫn chưa được xây dựng thành một phong cách thống nhất. Trong bài này, chúng ta sẽ tiếp tục sử dụng Vibe Coding để xây dựng bộ nhận diện thương hiệu Levela, sau đó cung cấp bộ nhận diện này cho AI để cập nhật Landing Page /levela.

1. Bộ nhận diện chúng ta sẽ xây dựng

Một bộ nhận diện thương hiệu đầy đủ có thể bao gồm rất nhiều thành phần như logo, bao bì, name card, tài liệu Marketing, Social Media, biển hiệu và nhiều tài sản khác. Tuy nhiên, với Landing Page Levela, chúng ta chưa cần xây dựng toàn bộ những thành phần đó.

Trước tiên, chỉ cần tập trung vào những yếu tố ảnh hưởng trực tiếp đến giao diện website:

• Tên thương hiệu.
• Định hướng thương hiệu.
• Slogan.
• Màu sắc.
• Typography.
• Logo.
• Phong cách hình ảnh.
• UI Style.

Quy trình thực hiện sẽ là:

• Xác định thương hiệu
• →
• Chọn màu sắc
• →
• Chọn font chữ
• →
• Tạo logo
• →
• Xác định phong cách hình ảnh
• →
• Tạo Brand Guideline

Sau khi hoàn thành, Brand Guideline này sẽ trở thành tài liệu đầu vào để AI tiếp tục xây dựng Landing Page Levela.

2. Xác định định hướng thương hiệu Levela

Trước khi lựa chọn logo hay màu sắc, chúng ta cần xác định Levela là thương hiệu như thế nào. Trong ví dụ này, Levela là thương hiệu mỹ phẩm và chăm sóc da hướng đến nhóm khách hàng trẻ, yêu thích phong cách hiện đại, nhẹ nhàng và dễ tiếp cận.

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

Sau khi AI đề xuất, chúng ta có thể thống nhất một định hướng cơ bản như sau:

Từ thời điểm này, các yếu tố như màu sắc, logo và hình ảnh nên được xây dựng dựa trên định hướng trên.

3. Xây dựng bảng màu thương hiệu

Màu sắc là một trong những yếu tố quan trọng nhất trong bộ nhận diện. Với Levela, chúng ta lựa chọn hồng kết hợp gradient nâu làm màu nhận diện chính. Hồng giúp tạo cảm giác trẻ trung và nữ tính, trong khi nâu mang lại cảm giác tinh tế, ấm áp và đáng tin cậy.

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

Sau khi AI đề xuất, chúng ta có thể thống nhất Bảng màu thương hiệu Levela như sau:

Gradient chính: background: linear-gradient(135deg, #F7658B 0%, #C17A6B 100%);

4. Lựa chọn font chữ

Sau màu sắc, chúng ta cần thống nhất typography.

Một lỗi thường gặp khi thiết kế Landing Page là sử dụng quá nhiều font hoặc quá nhiều font weight khác nhau.

Với Levela, chúng ta nên sử dụng một font đơn giản, hiện đại và dễ đọc.

Đề xuất:

DM Sans phù hợp với Landing Page hiện đại và có thể sử dụng tốt cho cả tiêu đề lẫn nội dung.

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

Ngoài font chữ, nên giữ nguyên tắc:

• Heading lớn và rõ ràng.
• Body dễ đọc.
• Hạn chế sử dụng chữ in hoa toàn bộ.
• Không sử dụng quá nhiều kích thước chữ khác nhau.
• Khoảng cách giữa các dòng đủ rộng.

5. Xây dựng logo Levela

Sau khi đã có định hướng, màu sắc và typography, chúng ta có thể bắt đầu xây dựng logo.

Với Levela, logo nên theo hướng Wordmark + Symbol. Trong đó:

• Wordmark sử dụng chữ Levela.
• Symbol có thể cách điệu từ chữ L.
• Có thể kết hợp hình cánh hoa, giọt serum hoặc chiếc lá.
• Logo sử dụng gradient hồng → nâu.

Logo cần đảm bảo:

• Dễ đọc trên Header.
• Không quá nhiều chi tiết.
• Hiển thị tốt ở kích thước nhỏ.
• Có thể sử dụng trên nền sáng và nền tối.
• Có thể phát triển thành favicon.

Các phiên bản nên có:

• Logo chính.
• Logo ngang.
• Logo trên nền tối.
• Logo icon.
• Favicon.
• Phiên bản một màu hồng.
• Phiên bản một màu nâu.

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

Sau khi lựa chọn được hướng phù hợp, chúng ta có thể tiếp tục sử dụng AI tạo bộ logo hoàn chỉnh.

6. Xác định phong cách hình ảnh

Với Landing Page mỹ phẩm, hình ảnh chiếm một phần rất lớn trong trải nghiệm thị giác. Nếu mỗi hình ảnh sử dụng một phong cách khác nhau, thương hiệu sẽ rất khó tạo cảm giác thống nhất. Vì vậy, Levela cần có một quy tắc hình ảnh cơ bản.

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

Sau này, chúng ta có thể sử dụng chính các quy tắc này khi yêu cầu AI tạo hình ảnh cho Hero Section hoặc sản phẩm.

Sau khi AI đề xuất, chúng ta có thể thống nhất phong cách hình ảnh thương hiệu Levela như sau. Phong cách hình ảnh của Levela nên theo hướng Modern Beauty / Minimal / Soft & Clean, đồng nhất với bộ nhận diện hồng – nâu hiện tại.

7. Xác định UI Style

Bộ nhận diện không chỉ dừng lại ở logo và màu sắc. Để Landing Page thống nhất, chúng ta cũng cần xác định cách các thành phần giao diện được hiển thị.

Với Levela, UI Style có thể sử dụng:

Gradient chính cho CTA có thể dùng: background: linear-gradient(135deg, #F7658B 0%, #C17A6B 100%);

Shadow nên giữ rất nhẹ: box-shadow: 0 8px 24px rgba(78, 59, 54, 0.08);

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

8. Tổng hợp thành Brand Guideline

Sau khi xác định các yếu tố nhận diện, chúng ta có thể tổng hợp thành một Brand Guideline ngắn gọn. Đây sẽ là cơ sở để AI áp dụng thống nhất thương hiệu Levela trong những bước tiếp theo.

Tài liệu tóm tắt này có thể được lưu trong project hoặc cung cấp trực tiếp cho AI để làm quy chuẩn chung khi thiết kế và chỉnh sửa Landing Page /levela.

9. Cung cấp bộ nhận diện cho AI

Sau khi Brand Guideline hoàn thành, quay lại VS Code và mở AI Assistant.

Trước tiên, yêu cầu AI đọc bộ nhận diện:

Bước này giúp AI hiểu rõ phong cách trước khi bắt đầu chỉnh sửa Landing Page.

10. Áp dụng bộ nhận diện vào Landing Page

Sau khi AI đã hiểu bộ nhận diện Levela, chúng ta có thể yêu cầu cập nhật Landing Page.

Có thể sử dụng prompt:

Sau khi AI hoàn thành, mở lại Landing Page và kiểm tra kết quả.

11. Kiểm tra tính đồng nhất

Sau khi áp dụng Brand Identity, chúng ta cần kiểm tra lại toàn bộ giao diện.

Hãy chú ý:

• Logo đã đúng phiên bản chưa.
• Màu gradient có được sử dụng nhất quán không.
• Font chữ đã thống nhất chưa.
• Button có cùng một style không.
• Product Card có cùng cấu trúc không.
• Background có đủ sáng và sạch không.
• Hình ảnh có cùng phong cách không.
• Có còn màu hoặc font mẫu cũ không.

Nếu phát hiện những thành phần chưa đồng nhất, có thể tiếp tục yêu cầu AI:

Sau bước này, Landing Page sẽ có một phong cách thống nhất hơn và bắt đầu thể hiện rõ hình ảnh thương hiệu Levela.

Kết luận

Đến đây, chúng ta đã hoàn thành bộ nhận diện cơ bản cho Levela, gồm định hướng thương hiệu, slogan, màu sắc, typography, logo, phong cách hình ảnh và UI Style.

Nhờ có Brand Guideline, AI sẽ có một bộ quy tắc chung để áp dụng khi thiết kế, giúp Landing Page /levela giữ được phong cách hiện đại, nữ tính và thống nhất.

• Xây dựng Brand Identity
• →
• Cung cấp cho AI
• →
• Áp dụng vào Landing Page

Trong bài tiếp theo, chúng ta sẽ sử dụng bộ nhận diện này để hoàn thiện giao diện Landing Page Levela bằng Vibe Coding.