Xây dựng Brand Identity cho tiệm nail với Vibe Coding
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Ở bài trước, chúng ta đã có website giới thiệu Nuny Nail với đủ trang chủ, dịch vụ và bảng giá, album mẫu móng, liên hệ và trang đặt lịch đang chờ xây dựng. Nhưng màu sắc, font chữ và phong cách của website lúc này vẫn do AI tự chọn, nên trông giống nhiều website mẫu khác.
Khách thường gặp tiệm ở nhiều nơi: bài đăng Facebook, video TikTok, tin nhắn Zalo, rồi mới tới website và cuối cùng là đến tiệm. Nếu ở mỗi nơi tiệm trông một kiểu, khách khó nhớ và khó tin đó là cùng một tiệm. Brand Identity (bộ nhận diện thương hiệu) giải quyết việc này: một bộ quy tắc về màu sắc, font chữ, logo, hình ảnh và cách nói chuyện để tiệm trông nhất quán ở mọi nơi.
Trong bài này, chúng ta sẽ để AI cùng xây dựng bộ nhận diện cho Nuny Nail, ghi lại thành một file hướng dẫn trong dự án, rồi áp dụng lên website.
Phần 1. Để AI hiểu cửa hàng trước khi thiết kế
Bộ nhận diện tốt bắt đầu từ việc hiểu tiệm phục vụ ai và muốn khách cảm thấy thế nào. Thay vì để AI đoán, hãy cho AI đọc dự án hiện tại và hỏi lại những gì còn thiếu:
Prompt mẫu
"Tôi muốn xây dựng Brand Identity cho tiệm Nuny Nail. Hãy đọc website hiện tại trong thư mục dự án để hiểu tiệm và các dịch vụ. CHƯA sửa file nào. Hãy: Tóm tắt những gì bạn hiểu về tiệm: dịch vụ, mức giá, khách hàng có thể là ai. Đặt cho tôi tối đa 8 câu hỏi cần thiết để xây dựng bộ nhận diện (ví dụ: khách hàng chính, cảm giác muốn khách có khi đến tiệm, tiệm đối thủ không muốn giống)."
Trả lời các câu hỏi càng cụ thể càng tốt. Ví dụ:
- Khách chính: nữ 20 đến 35 tuổi, nhân viên văn phòng và sinh viên gần khu vực tiệm.
- Cảm giác mong muốn: nhẹ nhàng, sạch sẽ, thư giãn, giá vừa phải nhưng không rẻ tiền.
- Không muốn: quá sặc sỡ, quá nhiều hiệu ứng, trông giống tiệm bình dân.
Những câu trả lời này sẽ là căn cứ để chọn màu, font và cách viết ở các bước sau.
Phần 2. Xây dựng bộ nhận diện
Bước 1: Chọn bảng màu
Prompt mẫu
"Dựa trên thông tin về tiệm, hãy đề xuất 3 bảng màu cho Nuny Nail. CHƯA sửa file. Mỗi bảng màu gồm: Màu chủ đạo, màu phụ, màu nhấn cho nút 'Đặt lịch ngay', màu nền, màu chữ (kèm mã HEX). Cảm giác mà bảng màu mang lại và lý do phù hợp với tiệm. Kiểm tra độ tương phản giữa chữ và nền, giữa chữ trắng và màu nút, để chữ vẫn dễ đọc trên điện thoại khi ra ngoài trời."
Khi chọn, hãy để ý màu của nút "Đặt lịch ngay". Đây là nút quan trọng nhất trên website, nên nó phải nổi bật nhất trang, và màu nhấn này không nên dùng tràn lan ở chỗ khác.
Bước 2: Chọn font chữ
Website tiếng Việt cần font hiển thị đầy đủ dấu. Nhiều font đẹp trên mạng bị lỗi dấu, ví dụ chữ "ợ", "ữ" bị lệch hoặc thay bằng font khác.
Prompt mẫu
"Hãy đề xuất 2 cặp font cho Nuny Nail (một font cho tiêu đề, một font cho nội dung). CHƯA sửa file. Yêu cầu: Có trên Google Fonts và hỗ trợ đầy đủ tiếng Việt. Font nội dung dễ đọc ở cỡ chữ nhỏ trên điện thoại. Hợp với bảng màu đã chọn. Cho tôi một đoạn văn bản mẫu có dấu để thử, ví dụ: 'Sơn gel tay, đắp bột, vẽ móng nghệ thuật. Đặt lịch ngay hôm nay!'"
Mở Google Fonts, dán đoạn chữ mẫu để xem trước. Chỉ cần 2 font là đủ: dùng nhiều font hơn sẽ khiến website rối và tải chậm hơn.
Bước 3: Tạo logo
Nếu tiệm đã có logo, chỉ cần đưa file logo vào thư mục dự án và bỏ qua bước này. Nếu chưa, có thể nhờ AI tạo một logo đơn giản dạng chữ (wordmark) bằng SVG:
Prompt mẫu
"Hãy tạo logo cho Nuny Nail dạng file SVG, dùng font và màu đã chọn. CHƯA chèn vào website. Cần các phiên bản: Logo ngang (tên tiệm + biểu tượng nhỏ) dùng cho header website. Biểu tượng vuông dùng làm ảnh đại diện Facebook, Zalo, TikTok. Favicon (biểu tượng nhỏ trên tab trình duyệt). Bản màu trắng để đặt trên nền màu chủ đạo. Logo phải rõ ràng khi thu nhỏ, không quá nhiều chi tiết. Lưu các file vào thư mục assets/brand và liệt kê các file đã tạo."
Các phiên bản logo của Nuny Nail:
Thử thu nhỏ logo thật nhỏ và xem trên nền sáng lẫn nền tối. Nếu chưa ưng, mô tả cụ thể chỗ cần đổi. Logo do AI tạo phù hợp để bắt đầu nhanh. Khi tiệm phát triển, bạn có thể thuê nhà thiết kế làm lại logo dựa trên bộ nhận diện này.
Bước 4: Ghi lại thành file hướng dẫn thương hiệu
Đây là bước quan trọng nhất của bài. Nếu bộ nhận diện chỉ nằm trong cuộc trò chuyện, ở các bài sau AI sẽ không nhớ và có thể tự chọn màu, font khác. Hãy ghi tất cả vào một file trong dự án:
Prompt mẫu
"Hãy tổng hợp những gì đã chốt thành file brand-guide.md ở thư mục gốc dự án, gồm: Thông tin tiệm và khách hàng mục tiêu. Bảng màu (tên, mã HEX, dùng ở đâu). Font tiêu đề, font nội dung, cỡ chữ cho máy tính và điện thoại. Các phiên bản logo, đường dẫn file và cách dùng. Quy tắc cho nút 'Đặt lịch ngay'. Chỉ tạo file này, chưa sửa giao diện."
Từ giờ, mỗi khi yêu cầu AI làm giao diện mới, chỉ cần thêm câu "làm theo brand-guide.md" là AI sẽ dùng đúng bộ nhận diện của tiệm.
Phần 3. Áp dụng bộ nhận diện lên website
Bước 1: Để AI phân tích trước khi sửa
Website đã có CSS từ bài trước. Trước khi sửa, hãy để AI xem cần đổi những gì:
Prompt mẫu
"Hãy đọc brand-guide.md và toàn bộ CSS, HTML hiện tại. CHƯA sửa file. Cho tôi biết: Những chỗ đang dùng màu, font viết cứng cần thay. Đề xuất gom màu, font, khoảng cách vào biến CSS (CSS variables) ở một file chung, để sau này đổi màu chỉ cần sửa một chỗ. Danh sách file sẽ thay đổi."
Gom màu và font vào biến CSS giúp các trang làm ở bài sau (trang đặt lịch, trang quản lý lịch hẹn) dùng chung đúng bộ nhận diện mà không phải chép lại mã màu.
Bước 2: Áp dụng lên header, footer và nút bấm
Prompt mẫu
"Hãy áp dụng bộ nhận diện theo brand-guide.md và đề xuất ở trên: Tạo biến CSS cho màu, font, bo góc, khoảng cách trong một file chung. Thay logo ở header bằng logo ngang, thêm favicon. Footer dùng màu chủ đạo, logo bản màu trắng. Tất cả nút dùng chung một kiểu; nút 'Đặt lịch ngay' dùng màu nhấn và nổi bật nhất trang. Áp dụng font tiêu đề và font nội dung cho toàn website. Yêu cầu: Giữ nguyên cấu trúc trang và nội dung, chỉ thay đổi giao diện. Không viết lại website từ đầu. Sau khi xong, liệt kê các file đã thay đổi và dừng lại để tôi xem trước."
Kết luận
Qua bài này, Nuny Nail đã có một bộ nhận diện thương hiệu riêng thay vì giao diện do AI tự chọn: từ việc để AI hiểu tiệm phục vụ ai và muốn khách cảm thấy thế nào, đến chọn bảng màu có nút "Đặt lịch ngay" nổi bật, cặp font hiển thị đầy đủ tiếng Việt, bộ logo dùng được cho website lẫn Facebook, Zalo, TikTok, rồi áp dụng tất cả lên website thông qua biến CSS mà không phải viết lại từ đầu.
Điều quan trọng nhất là mọi quyết định đã được ghi lại trong file brand-guide.md, nên từ nay mỗi khi làm giao diện mới, bạn chỉ cần nhắc AI "làm theo brand-guide.md" là tiệm luôn giữ được vẻ ngoài nhất quán, giúp khách dễ nhận ra và tin tưởng dù gặp tiệm ở bài đăng, video hay ngay trên website.
Ở bài tiếp theo, chúng ta sẽ dựa trên nền tảng này để xây dựng trang dịch vụ, bảng giá và album mẫu móng, nơi hình ảnh thương hiệu bắt đầu thực sự giúp khách đưa ra quyết định đặt lịch.
