Vibe Coding với EzyPlatform
Hướng dẫn tạo bộ nhận diện thương hiệu cho website doanh nghiệp
Trước khi yêu cầu AI biến một website mẫu thành website của doanh nghiệp, bạn cần xác định trước hình ảnh thương hiệu: logo, màu sắc, font chữ, phong cách giao diện và cách sử dụng hình ảnh. Đây là nền tảng giúp toàn bộ website nhất quán từ trang chủ đến các trang nội dung.
Ở bài trước, chúng ta đã chuẩn bị môi trường Vibe Coding, kết nối VS Code với EzyPlatform, tải mã nguồn website mẫu và để AI làm quen với cấu trúc dự án. Tuy nhiên, nếu chưa có bộ nhận diện thương hiệu rõ ràng, mỗi lần bạn yêu cầu AI thiết kế một phần của website, AI có thể đưa ra một phương án khác nhau. Trang chủ dùng một màu, trang giới thiệu theo một phong cách khác, hình ảnh và nút bấm cũng thiếu sự thống nhất.
Vì vậy, trước khi bắt đầu code, chúng ta sẽ xây dựng một bộ nhận diện thương hiệu cơ bản để làm nền tảng cho toàn bộ website. Trong bài này, chúng ta sẽ dùng chính AI để hỗ trợ thực hiện việc đó.
Bộ nhận diện thương hiệu cần những gì?
Một bộ nhận diện đầy đủ có thể bao gồm logo, bao bì, danh thiếp, biển hiệu và nhiều tài liệu truyền thông khác. Nhưng với mục tiêu xây dựng website giới thiệu doanh nghiệp, bạn chỉ cần tập trung trước vào những thành phần AI sẽ dùng khi thiết kế giao diện.
- Tên thương hiệu.
- Slogan và thông điệp chính.
- Logo và quy chuẩn sử dụng logo.
- Màu sắc chủ đạo và màu bổ trợ.
- Font chữ cho tiêu đề, nội dung và nút bấm.
- Phong cách hình ảnh.
- Phong cách giao diện tổng thể.
- Giọng điệu nội dung.
Bộ nhận diện thương hiệu mẫu: EZYVORA
Dưới đây là bộ nhận diện thương hiệu mẫu dành cho Ezyvora, một doanh nghiệp giả định cung cấp website và giải pháp công nghệ cho doanh nghiệp nhỏ và vừa. Bộ nhận diện này sẽ được sử dụng xuyên suốt quá trình Vibe Coding website ở các bước tiếp theo.
1. Tổng quan thương hiệu
| Tên thương hiệu | Ezyvora |
|---|---|
| Lĩnh vực | Công nghệ và giải pháp số cho doanh nghiệp. |
| Khách hàng mục tiêu | Doanh nghiệp nhỏ và vừa muốn xây dựng website, số hóa hoạt động và ứng dụng công nghệ nhưng không có đội ngũ kỹ thuật chuyên sâu. |
| Định vị thương hiệu | Ezyvora giúp doanh nghiệp tiếp cận và ứng dụng công nghệ theo cách đơn giản, thực tế và dễ triển khai. |
| Tính cách thương hiệu | Hiện đại, chuyên nghiệp, đáng tin cậy, đơn giản và dễ tiếp cận. |
2. Slogan và thông điệp thương hiệu
| Thông điệp cốt lõi | Công nghệ không cần phải phức tạp. |
|---|---|
| Thông điệp hỗ trợ | Ezyvora giúp doanh nghiệp biến công nghệ thành công cụ phục vụ tăng trưởng. |
3. Logo
Logo Ezyvora sử dụng dạng biểu tượng + tên thương hiệu. Biểu tượng được phát triển từ chữ E cách điệu kết hợp với chuyển động hướng về phía trước, thể hiện sự đơn giản, kết nối và phát triển.
| Logo chính | Biểu tượng + chữ EZYVORA. |
|---|---|
| Biểu tượng | Chữ E cách điệu kết hợp với hình khối hoặc đường chuyển động hướng về phía trước. |
| Ý nghĩa | Thể hiện sự đơn giản, công nghệ, kết nối và hỗ trợ doanh nghiệp tiến về phía trước. |
| Logo Header | Ưu tiên phiên bản logo ngang. |
| Favicon | Chỉ sử dụng biểu tượng chữ E cách điệu. |
| Định dạng | Ưu tiên SVG; chuẩn bị thêm PNG nền trong suốt khi cần. |
| Không nên sử dụng | Logo 3D, quá nhiều gradient hoặc các chi tiết nhỏ khó nhận diện khi thu nhỏ. |
4. Bảng màu thương hiệu
#2563EB#0F172A#06B6D4#F8FAFC| Vai trò | Tên màu | Mã HEX | Cách sử dụng |
|---|---|---|---|
| Primary | Technology Blue | #2563EB |
CTA, button chính, link quan trọng, icon và các thành phần cần nhấn mạnh. |
| Secondary | Deep Navy | #0F172A |
Heading, Header/Footer tối và các khu vực cần tạo cảm giác chuyên nghiệp. |
| Accent | Digital Cyan | #06B6D4 |
Highlight, badge, icon và các chi tiết đồ họa nhỏ. |
| Background | Light Background | #F8FAFC |
Nền chính của website. |
| Surface | White | #FFFFFF |
Card và các khu vực nội dung nổi trên nền. |
| Text | Deep Navy / Slate | #0F172A / #64748B |
Tiêu đề, nội dung chính, mô tả và nội dung phụ. |
| Border | Light Slate | #E2E8F0 |
Border của card, input và các thành phần phân cách. |
5. Typography
Website Ezyvora sử dụng Inter làm font chữ chính. Đây là font dễ đọc trên màn hình, hỗ trợ tiếng Việt tốt và phù hợp với phong cách công nghệ hiện đại.
| Thành phần | Font | Weight | Mục đích |
|---|---|---|---|
| H1 | Inter | 700 | Tiêu đề chính của trang. |
| H2 | Inter | 700 | Tiêu đề section. |
| H3/H4 | Inter | 600 | Tiêu đề nội dung, card hoặc nhóm thông tin. |
| Body | Inter | 400-500 | Nội dung thường và nội dung cần nhấn mạnh. |
| Button | Inter | 600 | CTA và các nút thao tác. |
6. Phong cách giao diện
Phong cách tổng thể của Ezyvora là Modern Technology Corporate: hiện đại, chuyên nghiệp và thân thiện, nhưng không quá futuristic hoặc nặng yếu tố kỹ thuật.
Grid rõ ràng, bố cục thoáng và dễ quét nội dung.
Rộng, giúp phân tách rõ ràng giữa các section.
8px cho button, 12-16px cho card.
Nhẹ, chỉ dùng khi cần phân tách card khỏi background.
Minimal outline, độ dày nét đồng nhất.
Nhẹ và có mục đích; tránh animation phức tạp.
7. Button và Card
Secondary Button
Nền trong suốt, chữ #0F172A, border 1px solid #CBD5E1, bo góc 8px.
1px solid #E2E8F0, bo góc 12-16px, shadow nhẹ và padding thoáng.
Card phù hợp cho dịch vụ, giải pháp, tính năng, case study và bài blog.
8. Header và Hero Banner
| Header Background | Màu trắng. |
|---|---|
| Logo | Logo Ezyvora phiên bản ngang, đặt bên trái. |
| Menu | Trang chủ - Giới thiệu - Giải pháp - Blog - Liên hệ. |
| Header CTA | Nhận tư vấn. |
| Hero Headline | Đơn giản hóa công nghệ cho doanh nghiệp |
| Hero Description | Ezyvora cung cấp website và các giải pháp số giúp doanh nghiệp vận hành hiệu quả hơn mà không cần một đội ngũ kỹ thuật phức tạp. |
| Hero Visual | Minh họa công nghệ, website hoặc dashboard theo phong cách hình ảnh của Ezyvora. |
9. Phong cách hình ảnh
Clean Modern Technology.
Ưu tiên Blue, Navy, Cyan và White.
Sạch, có nhiều khoảng trống và chủ thể rõ ràng.
Sáng, mềm và hiện đại.
Doanh nghiệp, website, dashboard, laptop, smartphone, cloud và dữ liệu.
Cyberpunk, neon mạnh, robot AI sáo rỗng, background quá phức tạp.
10. Giọng điệu nội dung
| Tone of Voice | Chuyên nghiệp nhưng dễ hiểu. |
|---|---|
| Cách trình bày | Ngắn gọn, trực tiếp và tập trung vào giá trị khách hàng nhận được. |
| Thuật ngữ kỹ thuật | Hạn chế; nếu bắt buộc sử dụng cần giải thích theo cách dễ hiểu. |
| Nên viết | Giúp doanh nghiệp quản lý khách hàng dễ dàng hơn. |
| Nên tránh | Triển khai kiến trúc dữ liệu customer-centric đa tầng. |
Brand Guideline tóm tắt dành cho AI
Sau khi đã xác định các thành phần chính, hãy gom chúng lại thành một bảng tóm tắt. Đây là phần bạn có thể đưa trực tiếp cho Claude Code hoặc Codex để AI giữ phong cách nhất quán khi chỉnh sửa website.
- Brand
- Ezyvora
- Slogan
- Công nghệ đơn giản. Doanh nghiệp tiến xa.
- Brand Positioning
- Đơn giản hóa việc ứng dụng công nghệ cho doanh nghiệp nhỏ và vừa.
- Style
- Modern Technology Corporate.
- Primary
#2563EB- Secondary
#0F172A- Accent
#06B6D4- Background
#F8FAFC- Surface
#FFFFFF- Primary Text
#0F172A- Secondary Text
#64748B- Border
#E2E8F0- Font
- Inter.
- Button Radius
- 8px.
- Card Radius
- 12-16px.
- Image Style
- Clean Modern Technology.
- Icon Style
- Minimal Outline.
- Brand Feeling
- Hiện đại - Đơn giản - Chuyên nghiệp - Đáng tin cậy - Dễ tiếp cận.
Kết quả khi đưa guideline cho AI
Khi AI đã có cả mã nguồn website mẫu và bộ nhận diện Ezyvora, chúng ta có thể bắt đầu yêu cầu AI chuyển giao diện mẫu thành website mang nhận diện riêng của doanh nghiệp.
AI sẽ trả kết quả tương tự như ví dụ bên dưới:
