Vibe Coding với EzyPlatform
Đưa bộ nhận diện thương hiệu vào VS Code và bắt đầu Vibe Coding website
Sau khi đã có brand guideline cho Ezyvora, bước tiếp theo là đưa tài nguyên thương hiệu vào dự án, cung cấp đúng ngữ cảnh cho AI và từng bước chuyển website mẫu thành website mang nhận diện riêng.
Ở bài trước, chúng ta đã xây dựng bộ nhận diện thương hiệu cho Ezyvora, bao gồm logo, slogan, bảng màu, typography, phong cách giao diện và phong cách hình ảnh. Đây là nền tảng giúp AI chỉnh sửa website một cách nhất quán thay vì mỗi phần đi theo một phong cách khác nhau.
Trong bài này, chúng ta sẽ quay lại VS Code, đưa bộ nhận diện vào dự án và làm việc với Claude Code hoặc Codex theo từng bước nhỏ. Cách làm này giúp bạn kiểm soát tốt hơn kết quả, dễ preview, dễ phản hồi và hạn chế việc AI sửa quá nhiều phần cùng lúc.
Quy trình tổng quan
Đừng yêu cầu AI hoàn thiện toàn bộ website trong một prompt. Hãy đi theo nhịp sau:
- Để AI đọc lại cấu trúc dự án và xác định các phần có thể tái sử dụng.
- Đưa logo, favicon và tài nguyên thương hiệu vào đúng thư mục media.
- Cung cấp Brand Guideline Ezyvora cho AI.
- Yêu cầu AI lập kế hoạch chuyển đổi website trước khi sửa code.
- Áp dụng design system dùng chung: màu sắc, font chữ, button, card, spacing.
- Thay logo, favicon, header, hero banner và các section chính.
- Preview từng vòng trên desktop, tablet, mobile rồi mới chuyển sang phần tiếp theo.
Bước 0
Cho AI đọc lại cấu trúc website mẫu
Trước khi đưa brand guideline vào, hãy để AI đọc lại toàn bộ dự án. Việc này giúp AI hiểu đâu là page, đâu là fragment, đâu là media, CSS, JavaScript và những thành phần có thể tái sử dụng.
Hãy đọc và phân tích toàn bộ mã nguồn của dự án hiện tại. Xác định cấu trúc thư mục, các trang hiện có, Header, Footer, CSS, JavaScript, hình ảnh và những thành phần có thể tái sử dụng. Chưa chỉnh sửa bất kỳ file nào. Sau khi đọc xong, hãy tóm tắt cấu trúc website và cho tôi biết những phần chính của template hiện tại.
Bước 1
Đưa tài nguyên thương hiệu vào dự án
Hãy đưa các tài nguyên thương hiệu đã chuẩn bị ở bài trước vào mã nguồn website. Với EzyArticle, các file ảnh
nên được đặt trong api/v1/media để có thể đồng bộ lên server và sử dụng qua URL dạng
/api/v1/media/ten-file.png.
- Logo Ezyvora dùng trên nền sáng.
- Logo Ezyvora phiên bản sáng hoặc tối tùy khu vực sử dụng.
- Icon thương hiệu.
- Favicon.
- Các hình ảnh thương hiệu nếu đã chuẩn bị.
Tôi đã có các file logo, logo nền tối, icon và favicon của Ezyvora. Hãy kiểm tra cấu trúc dự án hiện tại và cho tôi biết nên đặt từng file vào thư mục nào để phù hợp với cách tổ chức mã nguồn hiện có. Chưa chỉnh sửa code.
Bước 2
Cung cấp Brand Guideline cho AI
Sau khi tài nguyên đã nằm trong dự án, hãy đưa toàn bộ bộ nhận diện cho Claude Code hoặc Codex. Đây là bộ quy tắc mà AI cần tuân theo khi chỉnh sửa giao diện.
- Brand
- Ezyvora
- Slogan
- Công nghệ đơn giản. Doanh nghiệp tiến xa.
- 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- Text
#0F172Avà#64748B- Border
#E2E8F0- Font
- Inter
- Radius
- Button 8px, card 12-16px
- Image Style
- Clean Modern Technology
Hãy sử dụng bộ nhận diện trên cho toàn bộ website. Trước tiên, hãy đối chiếu với giao diện hiện tại và cho tôi biết những thành phần nào cần thay đổi. Chưa chỉnh sửa code.
Bước 3
Yêu cầu AI lập kế hoạch chuyển đổi website
Khi AI đã có cả mã nguồn website mẫu và bộ nhận diện Ezyvora, bạn vẫn chưa nên cho AI sửa code ngay. Hãy yêu cầu AI lập kế hoạch để xác định phần nào giữ lại, phần nào chỉnh sửa và phần nào cần tạo mới.
Dựa trên mã nguồn hiện tại và Brand Guideline Ezyvora, hãy lập kế hoạch chuyển website mẫu thành website giới thiệu doanh nghiệp Ezyvora. Website cần có: Trang chủ, Giới thiệu, Giải pháp, Blog và Liên hệ.
- Thành phần có thể giữ nguyên.
- Thành phần cần chỉnh sửa.
- Thành phần cần tạo mới.
- CSS cần thay đổi.
- Hình ảnh cần thay thế.
- Nội dung cần viết lại.
- Component có thể tái sử dụng.
Ưu tiên tận dụng mã nguồn hiện tại thay vì viết lại toàn bộ. Chưa chỉnh sửa code.
Bước 4
Áp dụng Design System Ezyvora
Sau khi kế hoạch phù hợp, hãy bắt đầu từ những thành phần dùng chung trên toàn website. Việc chuẩn hóa design system trước giúp các phần sau tự động có cùng màu sắc, font chữ, spacing và phong cách.
Kế hoạch phù hợp. Hãy bắt đầu áp dụng Design System Ezyvora vào dự án. Kiểm tra CSS hiện tại và ưu tiên tạo hoặc chỉnh sửa các biến CSS dùng chung thay vì hard-code màu sắc lặp lại ở nhiều nơi. Tận dụng cấu trúc CSS hiện tại nếu có thể. Chưa thay đổi bố cục các trang. Sau khi hoàn thành, hãy cho tôi biết những file đã thay đổi.
Bước 5
Thay logo và favicon
Tiếp theo, thay toàn bộ nhận diện của template bằng Ezyvora. Sau khi AI hoàn thành, hãy preview website và kiểm tra header, mobile header, footer và favicon.
Hãy thay nhận diện logo hiện tại của website bằng Ezyvora. Sử dụng logo Ezyvora cho header nền sáng, logo phiên bản sáng nếu footer dùng nền tối, và icon Ezyvora làm favicon. Kiểm tra toàn bộ dự án để không còn logo hoặc tên thương hiệu cũ. Logo trên header cần có kích thước cân đối và rõ ràng trên mobile. Không thay đổi những phần khác của giao diện.
Bước 6
Chỉnh sửa Header và Hero Banner
Header là nơi nhận diện thương hiệu xuất hiện liên tục trên toàn website. Với Ezyvora, menu nên gồm Trang chủ, Giới thiệu, Giải pháp, Blog, Liên hệ và CTA Nhận tư vấn.
Hãy chỉnh sửa header theo nhận diện Ezyvora. Menu gồm Trang chủ, Giới thiệu, Giải pháp, Blog và Liên hệ. Bên phải có primary CTA "Nhận tư vấn". Sử dụng logo Ezyvora đã thêm vào dự án. Phong cách header hiện đại, tối giản và chuyên nghiệp. Không làm header quá cao. Menu phải hoạt động tốt trên mobile. Ưu tiên chỉnh sửa header hiện tại thay vì tạo lại hoàn toàn.
Nội dung hero đề xuất
Headline: Đơn giản hóa công nghệ cho doanh nghiệp
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.
Primary CTA: Nhận tư vấn
Secondary CTA: Khám phá giải pháp
Hãy chỉnh sửa Hero Banner của Trang chủ theo thương hiệu Ezyvora. Giữ phong cách Modern Technology Corporate, sử dụng đúng Design System Ezyvora, ưu tiên tái sử dụng cấu trúc hero hiện tại. Nếu hình ảnh hiện tại không phù hợp, hãy đề xuất hình ảnh cần thay thế, chưa tự tạo hình ảnh mới. Đảm bảo responsive trên desktop, tablet và mobile.
Bước 7
Hoàn thiện các section còn lại
Sau Header và Hero, hãy xử lý phần còn lại của Trang chủ theo từng section. Không nhất thiết phải xóa template rồi tạo lại tất cả. Hãy để AI đánh giá section nào giữ lại, section nào sửa, section nào bỏ.
Tóm tắt Ezyvora là ai và giúp doanh nghiệp giải quyết vấn đề gì.
Liệt kê các nhóm dịch vụ hoặc giải pháp chính.
Nêu rõ kết quả doanh nghiệp nhận được sau khi sử dụng giải pháp.
Giúp khách hàng hiểu cách Ezyvora làm việc.
Trình bày dự án, ví dụ hoặc kết quả tiêu biểu nếu có.
Dẫn khách truy cập sang bước liên hệ hoặc nhận tư vấn.
Hãy tiếp tục chuyển các section còn lại của Trang chủ sang thương hiệu Ezyvora. Với từng section hiện tại: giữ lại nếu phù hợp, chỉnh sửa nếu có thể tái sử dụng, viết lại nội dung theo Ezyvora, loại bỏ nếu không còn phù hợp, và chỉ tạo section mới khi thật sự cần thiết. Toàn bộ giao diện phải tuân theo Brand Guideline Ezyvora. Không tự ý thêm màu hoặc phong cách thiết kế mới.
Preview và rà soát toàn bộ website
Sau khi hoàn thành Trang chủ, hãy kiểm tra toàn bộ hành trình: Header, Hero, nội dung, CTA và Footer. Đồng thời kiểm tra trên desktop, tablet và mobile.
Hãy rà soát toàn bộ website Ezyvora và đối chiếu với Brand Guideline. Kiểm tra logo và favicon, header và footer, màu sắc, typography, button, card, icon, spacing, responsive, điều hướng giữa các trang, nội dung hoặc hình ảnh còn sót lại từ template cũ. Trước tiên hãy liệt kê các vấn đề tìm thấy. Chưa sửa code.
