Chương 7. Thiết kế giao diện bằng AI

Một giao diện đẹp không chỉ để "cho vui mắt" — nó quyết định khách hàng có ở lại trang của bạn hay rời đi chỉ sau vài giây. Chương này sẽ giúp bạn dùng AI để tạo giao diện chuyên nghiệp: từ lập hồ sơ nhận diện thương hiệu, sinh HTML/CSS, đảm bảo responsive, thêm dark mode, tối ưu trải nghiệm người dùng (UX), cho đến việc tách giao diện thành các thành phần dùng chung để dễ tái sử dụng.

Trước tiên: lập hồ sơ nhận diện thương hiệu (brand brief)

Trước khi yêu cầu AI thiết kế bất kỳ pixel nào, hãy dành thời gian trả lời một loạt câu hỏi về doanh nghiệp và thương hiệu của bạn. Đây chính là "creative brief" mà các agency thiết kế chuyên nghiệp luôn yêu cầu khách hàng điền trước khi bắt tay vào việc. Trả lời càng chi tiết, AI càng ít phải đoán mò, và bản thiết kế đầu tiên sẽ càng gần với hình dung của bạn.

1. Thông tin doanh nghiệp

• Lịch sử thành lập: hoạt động bao nhiêu năm, quy mô, số lượng nhân sự?
• Sứ mệnh và tầm nhìn: doanh nghiệp ra đời để giải quyết vấn đề gì, muốn đạt tới điều gì?
• Lĩnh vực hoạt động: sản phẩm hoặc dịch vụ chính bạn cung cấp là gì?

2. Thông tin thương hiệu

• Mục tiêu nhận diện: thương hiệu cần thể hiện điều gì (ví dụ: thông minh, thân thiện, đáng tin cậy)?
• Tên thương hiệu và ý nghĩa: tên gọi xuất phát từ đâu, mang ý nghĩa gì?
• Slogan (nếu có) và ý nghĩa: câu khẩu hiệu bạn muốn gắn với thương hiệu.
• Thông điệp thương hiệu: một câu duy nhất bạn muốn khách hàng ghi nhớ.
• Tính cách thương hiệu: tối đa 5 tính từ, sắp xếp theo mức độ quan trọng giảm dần.
• Điểm khác biệt (USP): bạn khác gì so với đối thủ cùng lĩnh vực?
• Phân khúc: bình dân, trung cấp, cao cấp hay đẳng cấp?

3. Khách hàng mục tiêu

• Nhân khẩu học: giới tính, độ tuổi, nơi sinh sống, nghề nghiệp.
• Insight: điều họ mong muốn khi dùng sản phẩm/dịch vụ của bạn.
• Lý do lựa chọn: vì sao họ chọn bạn thay vì đối thủ?

4. Đối thủ cạnh tranh

• Trong nước: tên và đặc điểm nhận diện thương hiệu của họ.
• Nước ngoài: tên và đặc điểm nhận diện thương hiệu của họ.

5. Thiết kế nhận diện

• Loại logo: biểu tượng + chữ, chỉ chữ (logotype), hay linh vật (mascot) + chữ?
• Nơi ứng dụng: website, sự kiện, ấn phẩm truyền thông, mạng xã hội...
• Màu thương hiệu: màu sắc đề xuất và lý do lựa chọn.
• Hình ảnh/biểu tượng: yếu tố muốn xuất hiện trong logo và ý nghĩa của nó.

Ví dụ: brief đã điền cho Sweet Home Bakery

Để dễ hình dung, đây là bộ nhận diện thương hiệu điền mẫu cho tiệm bánh "Sweet Home Bakery" ở Chương 6 — bạn có thể điền brief của mình theo cùng cấu trúc này:

Sau khi điền xong, hãy dán toàn bộ nội dung này vào một prompt để AI nắm được bối cảnh thương hiệu trước khi đề xuất hướng thiết kế. Bước này chỉ là trò chuyện để lên ý tưởng, chưa cần đụng đến file dự án nào cả — vì vậy hãy prompt trên chatgpt.com hoặc claude.ai (bản web) thay vì AI Assistant trong VS Code. Cửa sổ chat riêng giúp bạn thoải mái hỏi đi hỏi lại, so sánh nhiều phương án màu sắc/phong cách mà không làm rối ngữ cảnh coding của dự án:

Đây là bộ nhận diện thương hiệu của Sweet Home Bakery: [dán toàn bộ
nội dung bảng brief ở trên]. Dựa vào đó, hãy đề xuất bảng màu, phong
cách thiết kế (hiện đại / tối giản / vui nhộn...) và bố cục logo phù
hợp cho website của tiệm.

Kết quả AI đề xuất (ví dụ)

Đây là một ví dụ về kết quả bạn có thể nhận được — cấu trúc câu trả lời thường xoay quanh ba phần: bảng màu, phong cách thiết kế và bố cục logo.

1. Bảng màu (Color Palette)

Giữ tinh thần "be và nâu ấm áp" làm chủ đạo, nhưng chia thành hệ màu rõ ràng để dùng cho web:

Nguyên tắc phối: nền be sáng làm chủ đạo (70%) → nâu caramel làm điểm nhấn thương hiệu (20%) → nâu đậm/hồng phấn cho chi tiết nhỏ (10%). Cách phối này giữ cảm giác "bánh nướng mới ra lò" mà vẫn đủ tương phản để đọc dễ trên web.

2. Phong cách thiết kế

Với định vị "ấm áp – gần gũi – đáng tin cậy – tinh tế", phong cách phù hợp nhất là Tối giản ấm áp (Warm Minimalist) — không phải tối giản lạnh kiểu Scandinavian trắng-xám, mà là tối giản có "nhiệt độ": nhiều khoảng trắng/be, đường nét bo tròn mềm mại, ít chi tiết rườm rà, nhưng vẫn có điểm nhấn thủ công (texture giấy, nét vẽ tay nhẹ ở tiêu đề). Phân khúc trung cấp cần trông chuyên nghiệp, không lòe loẹt như tiệm bánh giá rẻ, trong khi khách hàng mục tiêu (gia đình trẻ, nhân viên văn phòng 25-45 tuổi) thích sự rõ ràng, dễ tìm thông tin, hình ảnh món bánh chân thực.

• Font tiêu đề: dạng serif mềm hoặc script nhẹ nhàng, gợi viết tay thủ công (ví dụ "Playfair Display" hoặc "Caveat" cho slogan).
• Font nội dung: sans-serif tròn, dễ đọc (ví dụ "Nunito", "Quicksand").
• Ảnh sản phẩm: chụp thật, ánh sáng ấm, bối cảnh gia đình/bàn gỗ — tránh ảnh stock quá "công nghiệp".

3. Bố cục logo trên website

Vì logo là dạng kết hợp (combination mark) — icon "mái nhà ôm lấy chiếc bánh" cùng chữ — nên cần bố trí linh hoạt theo từng vị trí:

• Header: bố cục ngang, icon bên trái, tên "Sweet Home Bakery" bên phải cùng hàng; icon nên đơn giản hóa để vẫn rõ nét khi thu nhỏ còn 32-40px trên mobile.
• Trang chủ (Hero section): bố cục dọc — icon lớn ở trên, tên thương hiệu ở giữa, slogan "Bánh ngọt handmade mỗi ngày" nhỏ hơn phía dưới, nền be nhạt và logo màu nâu đậm để nổi bật.
• Footer: logo dạng đơn giản (chỉ icon hoặc icon + tên viết tắt), màu trắng hoặc be nhạt trên nền nâu đậm để khép trang bằng cảm giác ấm áp.
• Favicon / app icon: chỉ dùng riêng phần icon, bỏ chữ, vì ở kích thước 16-32px chữ sẽ không đọc được.

Tạo logo bằng AI

Có bảng màu và mô tả bố cục rồi, bước tiếp theo là tạo ra hình ảnh logo thật. Lưu ý: Claude hiện chưa tạo được ảnh, nên nếu bạn vừa brainstorm trên claude.ai, hãy mang bảng màu và mô tả biểu tượng đã chốt sang chatgpt.com (có khả năng tạo ảnh tích hợp sẵn) hoặc một công cụ tạo ảnh chuyên dụng như Ideogram, Midjourney.

Prompt tạo logo nên gom đủ những gì bạn đã chốt ở bước trước: tên thương hiệu, ý nghĩa biểu tượng, mã màu cụ thể và phong cách thiết kế — càng cụ thể, AI càng ít "tự sáng tạo" lệch hướng:

Tạo logo dạng biểu tượng + chữ (combination mark) cho tiệm bánh
"Sweet Home Bakery".

- Biểu tượng: hình mái nhà nhỏ ôm lấy một chiếc bánh nướng, nét vẽ
  đơn giản, đường bo tròn mềm mại, không chi tiết rườm rà.
- Phong cách: tối giản ấm áp (warm minimalist), tránh màu sặc sỡ.
- Màu sắc: nâu caramel #8B5E3C làm màu chính, be sữa #FAF3E7 làm nền,
  có thể nhấn thêm nâu socola đậm #5C3A21.
- Chữ "Sweet Home Bakery" đặt bên phải hoặc bên dưới biểu tượng,
  dùng kiểu chữ serif mềm hoặc script nhẹ nhàng, gợi cảm giác thủ công.
- Nền trong suốt (transparent background), bố cục vuông, đủ rõ nét
  khi thu nhỏ.

Lần đầu AI thường trả về một phiên bản logo đầy đủ (icon + chữ trong cùng một khối). Đừng dừng ở đó — hãy yêu cầu thêm các biến thể để dùng đúng chỗ như đã bố trí ở phần trên:

• "Tạo thêm phiên bản chỉ có icon, bỏ chữ, dùng cho favicon."
• "Tạo thêm phiên bản logo nằm ngang, icon và chữ cùng một hàng, dùng cho header."
• "Tạo phiên bản logo màu trắng, dùng trên nền màu nâu đậm, cho phần footer."

Nếu cần bản vector (SVG) để phóng to/thu nhỏ mà không vỡ nét — ví dụ dùng trên biển hiệu hay in ấn — hãy nhờ AI mô tả lại đường nét dưới dạng SVG, hoặc dùng một công cụ vector hoá ảnh riêng, vì phần lớn AI tạo ảnh hiện chỉ xuất ra file PNG/JPG.

Khi đã ưng ý với logo, bạn có thể tải xuống ngay. Tuỳ công cụ — có AI chỉ sinh ra một loại logo duy nhất, có AI sinh ra sẵn cả hai loại logo vuông và logo nằm ngang. Trước khi đưa vào dự án, hãy đổi tên file sang dạng tiếng Anh, không dấu, không khoảng trắng, ví dụ:

sweet-home-bakery-logo-square.svg
sweet-home-bakery-logo-horizontal.svg

Sau đó sao chép cả hai tập tin này vào thư mục api/v1/media của dự án trong VS Code — logo sẽ được tự động đồng bộ lên máy chủ, sẵn sàng để tham chiếu trong content.html.

Bạn không cần trả lời hết tất cả các mục ngay từ đầu — nhưng ít nhất hãy xác định rõ tên thương hiệu, tính cách thương hiệu và màu sắc chủ đạo, vì đây là ba yếu tố ảnh hưởng trực tiếp đến mọi giao diện bạn sẽ yêu cầu AI thiết kế sau này. Khi đã có bảng màu, phong cách và các file logo, hãy mang tất cả quay lại VS Code — từ đây trở đi mọi prompt sẽ được gửi cho AI Assistant để nó viết trực tiếp ra HTML/CSS, gắn logo vào đúng vị trí trong dự án của bạn.

Sinh HTML/CSS bằng mô tả

Có bộ nhận diện thương hiệu trong tay, mọi mô tả gửi cho AI Assistant trong VS Code từ giờ nên gắn kèm đúng mã màu, font chữ và file logo đã chốt ở phần trên — thay vì chỉ nói "màu ấm áp" chung chung. Ví dụ, gắn logo vào header cho trang Sweet Home Bakery:

Thêm logo vào góc trái header, dùng file
sweet-home-bakery-logo-horizontal.svg trong thư mục media. Header nền
be sữa (#FAF3E7), chữ menu màu nâu đen ấm (#3B2A1E), font chữ menu
dùng kiểu sans-serif tròn (Nunito).

AI sẽ sửa content.html (thêm thẻ ảnh logo) và head.html (CSS màu nền, màu chữ) của trang. Nhớ lưu lại (Cmd+S / Ctrl+S) cả hai file này, sau đó chuột phải vào trang và chọn Preview Page để xem kết quả:

Ưng ý với kết quả rồi thì đừng bỏ qua bước lưu lại lịch sử thay đổi: chat với AI Assistant "Hãy chạy git add . và git commit để lưu lại thay đổi vừa rồi." Thói quen commit sau mỗi bước giúp bạn luôn có một điểm để quay lại nếu bước chỉnh sửa sau đó làm hỏng giao diện. Nếu dự án của bạn có kho từ xa (remote repository, ví dụ trên GitHub), hãy chat thêm để AI chạy luôn git push sau khi commit, để code cũng được sao lưu từ xa.

Tương tự với các khu vực khác, hãy mô tả theo bố cục thị giác — cách một người thiết kế sẽ nghĩ — và luôn gắn kèm màu, font đã chốt:

Tạo section "Bánh nổi bật" gồm 3 thẻ (card) xếp ngang trên desktop,
xếp dọc trên điện thoại. Mỗi thẻ có: ảnh bánh, tên bánh (font Playfair
Display), giá (font Nunito). Thẻ nền be sữa (#FAF3E7), bo góc, đổ
bóng nhẹ; khi rê chuột vào thì nhích lên nhẹ và viền chuyển sang màu
nâu caramel (#8B5E3C).

AI sẽ thêm section mới vào content.html và phần CSS tương ứng vào head.html. Lưu lại cả hai file, sau đó Preview lại để kiểm tra bố cục 3 thẻ và hiệu ứng hover:

Ưng ý rồi thì lại nhờ AI Assistant chat lệnh git add . và git commit (kèm git push nếu có kho từ xa) để lưu lại thay đổi trước khi sang bước tiếp theo.

Mô tả theo cách này giúp AI hiểu đúng ý định thị giác của bạn, thay vì phải đoán bạn muốn "div" hay "flex" hay "grid" — đó là việc của AI, không phải của bạn. Nhờ luôn gắn kèm mã màu và font cụ thể, mọi khu vực mới trên trang đều đồng bộ với bộ nhận diện thương hiệu đã lập từ đầu chương.

Responsive: đẹp trên mọi màn hình

Responsive nghĩa là giao diện tự điều chỉnh để hiển thị tốt trên cả máy tính, máy tính bảng và điện thoại. Đây không phải là tùy chọn — phần lớn khách truy cập ngày nay dùng điện thoại. Khi mô tả yêu cầu, luôn nhắc AI về hành vi trên điện thoại:

• "Trên điện thoại, các cột xếp chồng lên nhau theo chiều dọc."
• "Menu điều hướng thu gọn thành biểu tượng hamburger trên màn hình nhỏ."
• "Logo header tự thu gọn thành phiên bản chỉ icon (sweet-home-bakery-logo-square.svg) trên màn hình nhỏ, để tiết kiệm không gian."
• "Chữ và nút bấm đủ lớn để dễ chạm bằng ngón tay."

Nếu bạn quên nhắc, hãy kiểm tra lại bằng cách thu nhỏ cửa sổ trình duyệt lúc Preview — nếu bố cục vỡ hoặc chữ quá nhỏ, hãy yêu cầu AI chỉnh lại phần responsive cụ thể của khu vực đó.

Responsive ổn rồi cũng nhờ AI Assistant chạy git add . và git commit (kèm git push nếu có kho từ xa) để lưu lại thay đổi.

Dark mode: một lựa chọn ngày càng phổ biến

Nhiều người dùng thích giao diện tối (dark mode) để đỡ chói mắt, đặc biệt vào buổi tối. Bạn có thể yêu cầu AI thêm chế độ này bằng CSS, tự động theo cài đặt hệ điều hành của người dùng — và vẫn giữ đúng màu nhấn thương hiệu đã chốt:

Thêm dark mode cho trang này, tự động áp dụng theo cài đặt hệ thống
của người dùng (prefers-color-scheme). Ở chế độ tối: nền màu nâu đen
ấm (#3B2A1E), chữ màu be sữa (#FAF3E7), giữ nguyên màu nhấn thương
hiệu nâu caramel (#8B5E3C) cho nút bấm và viền hover. Ngoài ra thêm switch chuyển đổi chế độ sáng tối vào header

AI sẽ bổ sung CSS dark mode vào head.html, thêm nút switch vào content.html và đoạn script xử lý bật/tắt vào foot.html. Lưu lại cả ba file, sau đó Preview lại — thử đổi chế độ sáng/tối của hệ điều hành để kiểm tra:

Kiểm tra dark mode ổn rồi, nhờ AI Assistant chạy git add . và git commit (kèm git push nếu có kho từ xa) để lưu lại thay đổi.

Tối ưu trải nghiệm người dùng (UX)

Giao diện đẹp chưa chắc đã dễ dùng. Một vài nguyên tắc UX đơn giản bạn nên nhắc AI khi thiết kế:

• Độ tương phản đủ rõ: chữ phải dễ đọc trên mọi nền màu.
• Khoảng trắng hợp lý: đừng nhồi nhét quá nhiều nội dung sát nhau.
• Nút hành động rõ ràng: nút quan trọng nhất (như "Đặt bánh ngay") nên dùng đúng màu nhấn thương hiệu (nâu caramel #8B5E3C) và nổi bật nhất trên trang.
• Phản hồi tức thì: khi người dùng bấm nút, cần có dấu hiệu nhận biết (đổi màu, hiệu ứng nhẹ).

Tách giao diện thành các thành phần để tái sử dụng

Khi trang web của bạn có thêm nhiều trang mới — trang thực đơn, trang giới thiệu, trang liên hệ... — phần header và footer thường lặp lại y hệt nhau trên mọi trang. Nếu để nguyên header, footer bên trong từng trang, mỗi lần muốn đổi logo, thêm mục menu hay sửa thông tin ở footer, bạn sẽ phải sửa lặp lại ở tất cả các trang — rất dễ sót và mất công. Giải pháp là tách những phần dùng chung này ra thành page fragment: viết một lần, dùng lại ở bất kỳ trang nào cần.

Vì thao tác này đụng trực tiếp vào cấu trúc file của dự án — tạo thư mục mới, di chuyển code, đổi loại nội dung của trang — nên hãy gửi prompt này cho AI Assistant ngay trong VS Code, không dùng khung chat rời như chatgpt.com hay claude.ai:

Tách header, footer từ content của trang sweet-home-bakery ra thành
các page fragment riêng, tên page fragment có tiền tố là:
sweet_bakery. Sau đó cập nhật lại trang, chuyển content type của
trang từ HTML sang THYMELEAF.

AI sẽ tạo ra một thư mục page-fragments mới với cấu trúc như sau:

page-fragments/
└── sweet_bakery/
    ├── header/
    │   ├── content.html
    │   ├── head.html
    │   ├── foot.html
    │   └── meta.json
    └── footer/
        ├── content.html
        ├── head.html
        ├── foot.html
        └── meta.json

• header/content.html và footer/content.html — chứa đúng phần HTML của header, footer vốn trước đó nằm lẫn trong content.html của trang.
• head.html, foot.html — chứa CSS/JavaScript đi kèm riêng của header, footer, ví dụ script xử lý switch chuyển dark mode ở header.
• meta.json — khai báo tiêu đề và content type của từng fragment, mặc định là HTML.

Trong content.html của trang sweet-home-bakery, hai khối header/footer giờ chỉ còn là một dòng tham chiếu đến fragment tương ứng:

<ezy:block ezy:replace="~{sweet_bakery/header :: content}" />

<!-- Nội dung chính của trang: banner, danh sách bánh, liên hệ... -->

<ezy:block ezy:replace="~{sweet_bakery/footer :: content}" />

Cú pháp ezy:replace="~{sweet_bakery/header :: content}" là cú pháp Thymeleaf — đây cũng là lý do trang phải đổi content type từ HTML sang THYMELEAF trong meta.json, nếu không hệ thống sẽ hiển thị nguyên văn dòng chữ đó thay vì render ra header/footer thật.

Lưu lại toàn bộ file mà AI vừa tạo/sửa: content.html, head.html, foot.html, meta.json của cả hai fragment header và footer, cùng content.html và meta.json của trang sweet-home-bakery. Sau đó xuất bản các page fragment lên máy chủ trước — chuột phải vào thư mục page-fragments/sweet_bakery, chọn Publish Content To Server. Nếu publish trang trước khi fragment tồn tại trên máy chủ, trang sẽ không tìm thấy header/footer để render.

Sau khi fragment đã lên máy chủ, quay lại trang sweet-home-bakery và Preview lại lần nữa. Nếu header, footer (kèm switch dark mode) vẫn hiển thị y hệt như trước khi tách, việc chuyển sang page fragment coi như thành công — chỉ khác là giờ đây, header và footer này có thể tái sử dụng ở mọi trang khác của Sweet Home Bakery mà không cần viết lại từ đầu.

Đây là một thay đổi cấu trúc lớn, nên càng cần một điểm mốc rõ ràng để quay lại nếu cần — nhờ AI Assistant chat git add . và git commit (kèm git push nếu có kho từ xa) để lưu lại lần tách fragment này.