vi
new
0
Avatar
Duong Nguyen @arya.it
24 0 6
Đã đăng vào about 5 hours ago 13 phút đọc
10

[Vibe Coding Thực Chiến #06] Dùng AI Thiết Kế Giao Diện: Brand Brief, Responsive, Dark Mode Sang Trọng Và Tái Sử Dụng Page Fragments!

Tác giả: Lee
Series: Vibe Coding Thực Chiến Cùng EzyPlatform (#06)
Hạ tầng thực nghiệm: VPS Ubuntu 22.04 LTS (157.66.47.xxx) | Domain: https://1576647xxx-admin.interdata.io.vn
Bộ công cụ: VS Code + Extension youngmonkeys.ezyarticle + Claude Code CLI / ChatGPT Codex

Ở bài viết số #05, chúng ta đã cùng nhau trải nghiệm cảm giác "vibe" đỉnh cao khi tự tay dựng và xuất bản một Landing Page lên VPS thật chỉ sau vỏn vẹn 5 phút gõ lệnh.

Thế nhưng, khi bắt đầu mở rộng dự án ra nhiều trang (Trang chủ, Giới thiệu, Bảng giá, Liên hệ...), rất nhiều anh em dev lại đối mặt với một "cơn ác mộng" thẩm mỹ:

"Hôm qua bảo AI làm trang chủ tone màu xanh tím tối giản rất sang. Hôm nay bảo AI làm trang bảng giá, nó lại tự tiện vẽ ra một giao diện tone màu vàng cam rực rỡ với font chữ hoàn toàn lệch pha! Chưa kể, mở trên điện thoại thì vỡ layout tràn mép màn hình, còn nút bấm Dark Mode mỗi lần F5 lại chớp trắng một phát nhức cả mắt!" 😣

Tại sao lại có hiện tượng này? Vì AI bản chất không có trí nhớ thẩm mỹ dài hạn. Nếu bạn không trang bị cho nó một "bộ khung định hướng" (Design System), mỗi phiên chat AI sẽ hành xử như một nhà thiết kế tự do ngẫu hứng — thích gì vẽ nấy!

Hôm nay, mình sẽ cùng bạn giải quyết triệt để bài toán này: từ kỹ thuật thiết lập Brand Brief, kiểm thử Responsive đa thiết bị, xây dựng tính năng Dark Mode chuẩn FOUC-Free (chống chớp màn hình), cho đến cách tách Common Page Fragments để website đồng bộ 100% nhận diện thương hiệu!

1. Thiết lập Brand Brief: Khóa chặt bảng màu và phong cách thiết kế cho AI

Trong thiết kế chuyên nghiệp, tính thẩm mỹ không đến từ sự màu mè hoa mỹ, mà đến từ SỰ NHẤT QUÁN (Consistency). Một trang web trông "xịn sò" khi và chỉ khi tất cả các trang con đều dùng chung một bảng màu, một kiểu font chữ và cùng một quy tắc bo góc (border-radius).

Để AI không "sáng tác bừa bãi", chúng ta áp dụng quy trình chuẩn hóa gồm 4 bước:

Quy trình chuẩn hóa thiết kế giao diện cùng AI Quy trình 4 bước: Brand Brief -> Design Tokens Tailwind -> Component Modularization -> Responsive & Dark Mode.

Tạo khối Brand Brief ngay trong file RULES.md:

Thay vì mỗi lần chat lại phải dặn dò: "Nhớ dùng màu xanh này, font chữ kia nhé", bạn hãy ghi đè bộ quy tắc này vào file RULES.md tại thư mục root của dự án:

Mẫu Brand Brief chuẩn trong VS Code Khai báo Brand Brief Specification trong RULES.md: AI tự động tuân thủ 100% cho mọi trang tiếp theo.

## BRAND BRIEF SPECIFICATION (BẮT BUỘC TUÂN THỦ)

1. PALETTE MÀU SẮC CHUẨN:
   - Background chính: slate-950 (#020617)
   - Card/Container: slate-900/90 (#0f172a)
   - Border & Divider: slate-800 (#1e293b)
   - Điểm nhấn chính (Primary): indigo-500 (#6366f1)
   - Điểm nhấn phụ (Accent): emerald-400 (#34d399)

2. TYPOGRAPHY & SPACING:
   - Font chữ: Google Fonts Inter (sans-serif)
   - Bo góc: rounded-2xl (card lớn), rounded-lg (nút bấm)
   - Hiệu ứng nút: shadow-lg shadow-indigo-500/25

3. RÀNG BUỘC KỸ THUẬT:
   - CẤM tự ý chế thêm màu lạ (tím neon, cam vàng ngẫu nhiên).
   - Sử dụng 100% Tailwind CSS utility classes, không dùng CSS inline.

Từ thời điểm này, bất kể bạn yêu cầu AI viết component nào, nó đều tự động tra cứu vào RULES.md và nhả ra mã nguồn tuân thủ chính xác từng mã màu hex!

2. Kiểm thử Responsive đa thiết bị: Luôn ưu tiên Mobile-First

Rất nhiều bạn khi Vibe Coding chỉ nhìn vào màn hình Desktop rộng thênh thang, đến khi mở bằng điện thoại thì tá hỏa:

  • Chữ tràn mép màn hình, thanh cuộn ngang (horizontal scrollbar) xấu xí xuất hiện.
  • Các nút bấm bị dính sát vào nhau, ngón tay cái không bấm nổi.
  • Bảng giá 3 cột trên máy tính bị co rúm lại thành 3 cột tí hon trên màn hình 375px!

Để tránh thảm họa này, bạn cần đưa từ khóa Mobile-First vào câu lệnh và kiểm thử trực tiếp trên 3 khung hình:

Kiểm thử responsive đa thiết bị Giao diện tự động co giãn thông minh: 1 cột trên Mobile (375px), 2 cột trên Tablet (768px), 3 cột trên Desktop (1440px).

Bí kíp ra lệnh responsive cho AI:

"Hãy áp dụng tư duy Mobile-First với Tailwind breakpoint: Mặc định trên Mobile là 1 cột dọc (grid-cols-1 gap-4), trên tablet hiển thị 2 cột (md:grid-cols-2), và trên desktop hiển thị 3 cột dàn ngang (lg:grid-cols-3). Tuyệt đối không dùng độ rộng cố định dạng pixel như w-[600px], luôn sử dụng w-full max-w-5xl mx-auto."

3. Kiến trúc Dark Mode FOUC-Free: Chống chớp trắng màn hình

Tính năng Dark Mode (chế độ tối) là một trong những tính năng "thời thượng" nhất, nhưng cũng là nơi bộc lộ rõ nhất sự nghiệp dư của người lập trình nếu làm sai!

Hiện tượng FOUC (Flash of Unstyled Content) là gì?

Khi người dùng đang chọn chế độ Dark Mode và bấm F5 tải lại trang:

  1. Trình duyệt vẽ giao diện mặc định (nền trắng tinh) trong khoảng 0.3–0.5 giây.
  2. File script ở chân trang (foot.html) mới chạy, đọc localStorage và thêm class dark.
  3. Màn hình đột ngột chớp từ trắng sang đen! ⚡
  4. ➔ Người dùng bị lóa mắt và cực kỳ khó chịu!

Để triệt tiêu 100% hiện tượng này, chúng ta xây dựng Kiến trúc Dark Mode 2 tầng:

Kiến trúc chuyển đổi Dark Mode 2 tầng chống FOUC Kiến trúc 2 tầng: Inline script ở head.html gán class dark trước khi DOM render + script ở foot.html bắt sự kiện toggle.

Tầng 1: Đặt script chặn đồng bộ ngay trong head.html

File head.html của trang sẽ nạp một đoạn script siêu ngắn (chỉ 5 dòng) chạy ngay lập tức trước khi bất kỳ thẻ HTML nào của content.html được vẽ:

<!-- pages/vibe-landing/head.html -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  // Chạy đồng bộ ngay lập tức trước khi DOM render (Chống FOUC 100%)
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  body { font-family: 'Inter', sans-serif; }
</style>

Tầng 2: Nút bấm Toggle và lưu trữ trạng thái trong foot.html

Ở file foot.html, chúng ta gắn listener cho nút bấm chuyển đổi Mặt trời / Mặt trăng:

<!-- pages/vibe-landing/foot.html -->
<script>
  function toggleDarkMode() {
    const isDark = document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }
</script>

Kết quả thực tế kiểm nghiệm trên VPS 157.66.47.xxx:

So sánh trực tiếp Light Mode và Dark Mode trên VPS Chuyển đổi Light/Dark mode mượt mà, F5 hàng trăm lần vẫn giữ nguyên trạng thái với 0ms giật màn hình!

4. Tái sử dụng Header & Footer bằng Common Page Fragments

Khi bạn có 5 trang: Trang chủ, Khóa học, Bảng giá, Blog, Liên hệ... bạn có muốn mỗi lần đổi hotline lại phải mở cả 5 file ra sửa không? Chắc chắn là không!

Đây là lúc tính năng Page Fragments của EzyPlatform phát huy uy lực tối đa:

Quản lý Common Fragments trong Template Explorer Cây thư mục Template Explorer trên VPS: Tách biệt rạch ròi giữa các trang độc lập (PAGE) và khối dùng chung (FRAGMENT).

Cách triển khai thực tế trên VS Code:

  1. Tạo thư mục: fragments/common-header/
  2. Tạo file meta.json:
    {
  "slug": "common-header",
  "title": "Thanh Điều Hướng Dùng Chung",
  "pageType": "FRAGMENT",
  "contentType": "HTML",
  "status": "PUBLISHED"
}
  3. Tạo file content.html chứa logo, menu và nút toggle Dark Mode.
  4. Nhấn Ctrl + S để extension tự sync lên VPS 157.66.47.xxx.

Từ nay về sau, khi bạn ra lệnh cho AI viết trang mới (ví dụ trang Bảng giá), trong prompt bạn chỉ cần nói:

"Hãy viết duy nhất phần bảng giá (Pricing Table) cho file content.html, không sinh Header và không sinh Footer."

Hệ thống Thymeleaf Server sẽ tự động ghép common-header và common-footer vào hai đầu trang web. Khi cần sửa logo hay menu, bạn chỉ sửa 1 lần duy nhất tại fragment, toàn bộ các trang con sẽ tự động cập nhật ngay tức khắc!

5. 3 bẫy lỗi kinh điển khi dùng AI thiết kế UI & Cách né trong 1 nốt nhạc 😡

Trong quá trình thực tế, đây là 3 vấn đề phổ biến nhất mà anh em dev hay gặp phải:

Bẫy lỗi #1: AI tự ý chế màu sắc ngẫu nhiên làm gãy Brand Identity 😣

  • Hiện tượng: Trang chủ dùng màu xanh Indigo, sang trang Giới thiệu AI lại tự động ném vào các nút bấm màu cam rực và viền hồng neon.
  • Nguyên nhân: Không đưa các biến màu cụ thể vào câu prompt hoặc quên chỉ định file RULES.md.
  • Cách né (Recommend 👍): Luôn khóa chặt bằng câu lệnh: "Bắt buộc sử dụng đúng palette màu trong RULES.md: Nền slate-950, card slate-900, nút bấm indigo-500. Cấm tuyệt đối sử dụng các gam màu khác ngoài thỏa thuận."

Bẫy lỗi #2: Lỗi nhấp nháy trắng màn hình (FOUC) khi tải lại trang Dark Mode 😡

  • Hiện tượng: Cứ mỗi lần bấm F5 trình duyệt, màn hình lại chớp trắng một phát rồi mới tối lại, trông rất nghiệp dư và gây khó chịu cho người dùng.
  • Nguyên nhân: Đặt script kiểm tra localStorage.theme trong file foot.html. Trình duyệt đã vẽ xong body màu trắng rồi script mới kịp đổi sang màu đen.
  • Cách né (Bí kíp 💡): Luôn chuyển script kiểm tra theme lên đầu trang, đặt trực tiếp dưới dạng inline script trong head.html.

Bẫy lỗi #3: Vỡ layout ngang trên Mobile do dùng Fixed Width ⚠️

  • Hiện tượng: Mở web trên iPhone thì xuất hiện thanh cuộn ngang, giao diện bị lệch sang một bên, chữ bị cắt cụt.
  • Nguyên nhân: AI tiện tay gán các class có kích thước cố định như w-[600px], min-w-[500px] hoặc quên đặt overflow-x-hidden.
  • Cách né (Lưu ý ⚠️): Luôn kiểm tra thẻ <section> bao ngoài: Bắt buộc dùng w-full overflow-hidden, bọc container bằng max-w-5xl mx-auto px-4 sm:px-6 lg:px-8.

6. Cheatsheet & Code Mẫu Dùng Ngay (Copy & Lưu Bookmark) 📋

Dưới đây là đoạn mã hoàn chỉnh của bộ đôi head.html và foot.html chuẩn Dark Mode FOUC-Free để bạn copy vào dự án của mình:

File head.html (Đặt ở đầu trang):

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: 'class',
  }
</script>
<script>
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  body { font-family: 'Inter', sans-serif; }
</style>

File foot.html (Đặt ở chân trang):

<script>
  // Hàm chuyển đổi theme toàn cục
  function toggleTheme() {
    const html = document.documentElement;
    const isDark = html.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    console.log("Current theme:", isDark ? "dark" : "light");
  }
</script>

7. Tổng kết & Kỳ tiếp theo

Thiết kế giao diện bằng AI không phải là "vẽ tranh ngẫu hứng", mà là nghệ thuật thiết lập quy chuẩn và ràng buộc. Khi bạn đã nắm vững Brand Brief, kiểm soát Responsive và làm chủ Page Fragments, AI sẽ trở thành một cánh tay đắc lực giúp bạn sản xuất hàng chục trang web đồng bộ chỉ trong vài nốt nhạc!

🎯 3 điểm cốt lõi cần nhớ từ bài viết này:

  1. Khóa chặt bản sắc bằng Brand Brief: Đưa bảng màu và font chữ vào RULES.md để AI luôn tuân thủ 100%.
  2. Dark Mode FOUC-Free 2 tầng: Script kiểm tra đặt ở head.html để triệt tiêu hiện tượng chớp trắng màn hình.
  3. Tái sử dụng bằng Fragments: Tách Header/Footer thành component dùng chung để sửa 1 nơi, ăn toàn bộ hệ thống.

Ở bài viết tiếp theo, chúng ta sẽ bước sang một lãnh địa mới — không chỉ dừng lại ở giao diện tĩnh, mà bắt đầu xây dựng logic tương tác phía Client cho ứng dụng:

👉 [Vibe Coding Thực Chiến #07] Xây Dựng Tính Năng Frontend: Giỏ Hàng, Đặt Hàng Và Quản Lý State Bằng LocalStorage!

Chúng ta sẽ cùng AI xây dựng một luồng thương mại điện tử hoàn chỉnh: chọn sản phẩm, thêm vào giỏ hàng, tính tổng tiền và thanh toán giả lập mượt mà phía Client trước khi ghép nối Database!

💬 Góc thảo luận: Anh em theo trường phái thích dùng giao diện Light Mode sáng sủa hay Dark Mode huyền bí khi code và lướt web? Anh em đã bao giờ bực mình vì lỗi nhấp nháy FOUC chưa? Hãy để lại bình luận bên dưới nhé!

Nếu thấy bài viết này hữu ích và giúp bạn nâng tầm thẩm mỹ khi Vibe Coding, đừng quên bấm Upvote 👍 và Bookmark (Clip) 🔖 bài viết nhé. Hẹn gặp lại anh em ở Bài #07!

AI Coding Tailwind Css uiux

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí