Mở đầu — vì sao bài này quan trọng
Cách đây vài năm, nếu bạn nói với một UI designer rằng chỉ trong 30 phút họ có thể tạo ra 20 phương án bố cục màn hình onboarding, viết được toàn bộ microcopy cho một form đăng ký, và dựng một prototype tương tác chạy được — người ta sẽ nghĩ bạn đang mơ. Đến năm 2026, đó là công việc buổi sáng của rất nhiều designer.
Nhưng đây mới là điều quan trọng mà nhiều bạn hiểu sai: AI không thay thế designer, AI thay thế designer không biết dùng AI. Câu này nghe sáo rỗng, nhưng ẩn sau nó là một sự thật rất cụ thể về nghề. Một junior biết prompt tốt có thể tạo ra sản lượng ý tưởng gần bằng một mid-level. Ngược lại, một designer giỏi nhưng từ chối động vào AI đang tự đặt mình vào thế bất lợi về tốc độ — mà trong môi trường product, tốc độ khám phá ý tưởng (exploration velocity) là một lợi thế cạnh tranh thật sự.
Bài này không dạy bạn "AI thần thánh thế nào". Nó dạy bạn đặt AI vào đúng vị trí trong workflow của một UI designer: khi nào dùng ChatGPT/Claude để brainstorm, khi nào dùng Midjourney để tìm hướng visual, khi nào dùng v0 để nhảy thẳng từ ý tưởng sang code UI — và quan trọng nhất, khi nào không nên dùng AI. Vì mỗi công cụ có một điểm ngọt (sweet spot) riêng, và dùng sai công cụ cho sai việc còn tệ hơn là không dùng.
Khái niệm cốt lõi
Hãy hình dung quy trình thiết kế UI như một cái phễu: từ ý tưởng mơ hồ → hướng hình ảnh → layout cụ thể → màn hình có thể ship. AI có công cụ chuyên biệt cho từng khúc của phễu này. Sai lầm phổ biến nhất là dùng một công cụ cho cả phễu.
Ba nhóm AI mà UI designer cần nắm
1. LLM tư duy — ChatGPT, Claude (giai đoạn tư duy & ngôn ngữ). Đây là công cụ bạn dùng nhiều nhất mà ít ai coi là "AI design tool". LLM mạnh ở: brainstorm ý tưởng flow, đặt tên component/token, viết microcopy (nhãn nút, thông báo lỗi, empty state), phản biện quyết định thiết kế của bạn, và tóm tắt research. Nó xử lý ngôn ngữ và logic, không tạo pixel. Điểm ngọt: mọi thứ liên quan đến chữ, cấu trúc, và tư duy.
2. AI tạo hình ảnh — Midjourney, DALL·E, Stable Diffusion (giai đoạn khám phá visual). Đây là nơi hay bị hiểu lầm nhất. Midjourney không thiết kế UI cho bạn — nó không hiểu grid 8pt, không biết contrast ratio, không xuất ra layer chỉnh sửa được. Cái nó giỏi là tạo mood, hướng thẩm mỹ, minh hoạ, hero imagery, texture, concept art. Bạn dùng nó để trả lời câu hỏi "app này nên có cảm giác gì?" chứ không phải "nút này đặt ở đâu?". Kết quả Midjourney là cảm hứng, không phải deliverable.
3. AI tạo UI/code — v0 (Vercel), Lovable, Bolt, Visual Copilot (giai đoạn dựng nhanh). Đây là thế hệ công cụ đưa bạn từ mô tả text hoặc ảnh thẳng sang UI thật chạy bằng code (thường là React + Tailwind). v0 đặc biệt mạnh: bạn mô tả "dashboard quản lý đơn hàng cho shop thời trang, có sidebar, bảng đơn, filter theo trạng thái" và nó dựng ra một layout tương tác được trong vài chục giây. Điểm ngọt: prototype có độ trung thực cao (high-fidelity), thử nghiệm layout nhanh, hoặc tạo điểm khởi đầu cho dev.
Nguyên tắc vàng: AI tạo bản nháp, bạn tạo quyết định
Điểm chung của cả ba nhóm: chúng giỏi tạo ra số lượng và bản nháp đầu tiên, nhưng dở ở phán đoán và tính nhất quán hệ thống. AI không biết design system của công ty bạn, không biết brand guideline, không biết người dùng ngân hàng ở Việt Nam khác người dùng ở Mỹ ra sao. Việc của bạn — người designer — là biên tập (curate), hiệu chỉnh (refine), và ra quyết định (decide). AI mở rộng không gian lựa chọn; bạn thu hẹp nó về đúng một đáp án.
Prompt là kỹ năng thiết kế mới
Prompt tốt cho công việc UI có ba thành phần: bối cảnh (đây là app gì, cho ai), ràng buộc (design system nào, nền tảng gì, tone ra sao), và định dạng đầu ra (bạn muốn 10 phương án, dạng bảng, hay một prototype). Prompt "thiết kế màn hình đăng nhập đẹp" cho ra rác. Prompt "thiết kế màn hình đăng nhập cho app ví điện tử tại VN, ưu tiên đăng nhập bằng số điện thoại + OTP, tuân theo Material 3, tone tin cậy — cho tôi 3 phương án bố cục kèm lý do" cho ra thứ dùng được.
Tình huống thực tế
Ví dụ 1 — Startup fintech ở TP.HCM: nén sprint khám phá từ 1 tuần xuống 1 ngày
Một startup ví điện tử giả định tên MoMoo (10 người, chưa có design system hoàn chỉnh) cần thiết kế lại luồng onboarding cho người dùng lần đầu. Trước đây, designer duy nhất của họ mất khoảng 4–5 ngày chỉ để ra được các hướng ý tưởng.
Lần này họ đổi cách làm. Buổi sáng, designer mở Claude và prompt: "Liệt kê 10 hướng onboarding flow cho app ví điện tử tại VN, người dùng phổ thông ít rành công nghệ, mục tiêu là hoàn tất KYC trong dưới 3 phút. Với mỗi hướng nêu số bước và rủi ro drop-off." Trong 2 phút, cô có 10 hướng — chọn ra 3 hướng khả thi. Buổi trưa, cô dùng Midjourney tìm mood cho phần illustration chào mừng (kết quả không dùng trực tiếp, nhưng chốt được hướng "minh hoạ phẳng, màu ấm, thân thiện" thay vì hình 3D lạnh lẽo). Buổi chiều, cô mô tả 1 trong 3 hướng vào v0 để dựng prototype clickable, mang đi test nhanh với 3 đồng nghiệp.
Kết quả: một sprint khám phá đáng lẽ 1 tuần rút còn 1 ngày. Bài học: giá trị lớn nhất của AI với team nhỏ không phải là "đẹp hơn" mà là rút ngắn vòng lặp từ ý tưởng đến thứ có thể phản hồi được. Càng sớm có thứ để người khác bấm vào, càng sớm học được điều đúng.
Ví dụ 2 — Agency ở Hà Nội: khi Midjourney bị dùng sai chỗ
Một agency giả định làm website cho chuỗi cà phê. Junior designer háo hức dùng Midjourney generate luôn cả các màn hình giao diện — menu, trang đặt hàng, giỏ hàng. Ảnh trông rất "wow": bóng đổ mềm, gradient sang chảnh, typography bay bổng.
Vấn đề lộ ra khi handoff cho dev: không có gì trong đống ảnh đó là thật. Text là chữ giả (Midjourney nổi tiếng viết chữ sai), spacing không theo bất kỳ grid nào, không có state (hover, disabled, error), không có layer để chỉnh, và tệ nhất — hai màn hình cạnh nhau dùng hai bảng màu khác nhau vì AI generate độc lập. Dev không thể build. Cả tuần công gần như bỏ đi, phải dựng lại từ đầu trong Figma.
Bài học: Midjourney là công cụ khám phá cảm hứng, không phải công cụ sản xuất giao diện. Nó không hiểu tính hệ thống — cái cốt lõi của UI design. Dùng nó để chốt mood và hướng minh hoạ thì tuyệt; dùng nó để ra màn hình handoff thì bạn đang xây nhà trên cát. Ranh giới này bạn phải nằm lòng.
Ví dụ 3 — Product designer chuyển v0 output thành design system chuẩn
Một product designer tại một công ty SaaS tầm trung ở Singapore cần dựng nhanh một trang settings phức tạp để thuyết phục PM về hướng đi. Cô mô tả vào v0, nhận về một React component chạy được trong 90 giây, gửi link cho PM bấm thử ngay trong cuộc họp — được duyệt hướng.
Nhưng cô không dừng ở đó. Cô biết v0 output không tự động khớp design system. Sau khi hướng được duyệt, cô mang layout đó về Figma, thay toàn bộ màu/spacing/typography bằng design token của công ty, chuẩn hoá component theo library nội bộ, bổ sung các state mà v0 bỏ sót. v0 lo phần "ý tưởng có chạy được không", cô lo phần "nó có nhất quán và maintain được không".
Bài học: dùng AI-to-code như một cỗ máy tạo prototype để ra quyết định, không phải nguồn code cuối cùng. Nó thắng ở khâu "thuyết phục nhanh", bạn thắng ở khâu "làm cho đúng chuẩn". Hai vai trò này bổ sung nhau chứ không thay thế nhau.
Hướng dẫn từng bước
Đây là workflow tích hợp AI mà bạn có thể áp dụng cho gần như mọi dự án UI:
Bước 1 — Brainstorm bằng LLM (ChatGPT/Claude). Bắt đầu bằng chữ, không bằng pixel. Prompt mẫu: "Tôi đang thiết kế [tính năng] cho [đối tượng người dùng] trên [nền tảng]. Cho tôi 10 hướng tiếp cận, mỗi hướng nêu ưu/nhược và rủi ro chính." Đọc, gạch bỏ, chọn 2–3 hướng. Đừng để AI chọn hộ — bạn chọn.
Bước 2 — Khám phá visual direction bằng Midjourney (nếu cần mood/illustration). Chỉ làm bước này khi dự án cần định hướng thẩm mỹ hoặc tài nguyên hình ảnh. Prompt theo hướng mô tả cảm giác: "warm, trustworthy, flat illustration, fintech onboarding, soft palette". Lưu lại 3–4 ảnh làm moodboard. Không đưa ảnh này vào file handoff.
Bước 3 — Viết microcopy & đặt tên bằng LLM. Nhờ AI draft nhãn nút, tiêu đề, thông báo lỗi, empty state, tooltip. Luôn yêu cầu nhiều biến thể để bạn chọn tone. Ví dụ: "Viết 5 phiên bản thông báo lỗi 'sai OTP' cho app ví VN — thân thiện, không đổ lỗi người dùng."
Bước 4 — Dựng prototype nhanh bằng v0/Lovable (khi cần validate layout). Mô tả màn hình đã chọn ở Bước 1 vào v0. Nhận prototype tương tác. Dùng nó để test với người thật hoặc thuyết phục stakeholder — không để làm output cuối.
Bước 5 — Đưa mọi thứ về Figma và chuẩn hoá. Đây là bước không thể bỏ. Chuyển layout đã validate về Figma, áp design token, dùng component từ library, bổ sung đầy đủ state, kiểm accessibility. Đây là nơi bạn — designer — thêm giá trị mà AI không thể.
Bước 6 — Dùng LLM để phản biện lần cuối. Trước khi handoff, prompt: "Đây là mô tả màn hình X. Chỉ ra 5 vấn đề usability hoặc accessibility tiềm ẩn." AI là một reviewer thứ hai rẻ và nhanh — không thay được review của người, nhưng bắt được nhiều lỗi ngớ ngẩn.
Lỗi thường gặp & mẹo
Lỗi 1 — Coi output AI là bản cuối. Đây là lỗi chết người. Mọi thứ AI tạo ra đều là nháp. Nếu bạn ship thẳng, bạn ship luôn cả lỗi hệ thống, thiếu state, và sự thiếu nhất quán của nó.
Lỗi 2 — Dùng Midjourney để "thiết kế UI". Như ví dụ 2. Nó tạo ảnh của UI, không phải UI. Không layer, không grid, không chỉnh được.
Lỗi 3 — Prompt quá mơ hồ. "Thiết kế màn hình đẹp" cho ra kết quả vô dụng. Luôn nạp bối cảnh + ràng buộc + định dạng đầu ra.
Lỗi 4 — Bỏ qua bản quyền và bảo mật. Đừng dán thông tin nội bộ nhạy cảm hoặc dữ liệu người dùng thật vào công cụ AI công khai. Với hình ảnh Midjourney thương mại, kiểm tra kỹ điều khoản license trước khi dùng cho khách hàng.
Lỗi 5 — Để AI làm mòn "gu" của bạn. Nếu bạn luôn chọn phương án đầu tiên AI đưa ra, dần dần bạn ngừng suy nghĩ. AI nên khuếch đại phán đoán của bạn, không thay thế nó.
Mẹo — Xây "prompt library" cá nhân. Lưu lại các prompt hiệu quả (brainstorm flow, viết microcopy, review a11y) thành template. Bạn sẽ tái sử dụng liên tục và tiết kiệm hàng giờ.
Mẹo — Luôn hỏi AI "còn cách nào khác?". Sau khi có kết quả, prompt tiếp "cho tôi 3 hướng hoàn toàn khác". Đây là cách rẻ nhất để phá vỡ tư duy đóng khung.
Mẹo — Ghép AI với con người. AI cho draft, đồng nghiệp cho critique, người dùng cho sự thật. Đừng để AI là tiếng nói duy nhất.
Bài tập thực hành
Chọn một tính năng nhỏ — ví dụ màn hình quên mật khẩu cho một app bạn tự nghĩ ra (app đặt lịch khám bệnh tại VN chẳng hạn).
- Brainstorm: Dùng ChatGPT hoặc Claude, prompt để lấy 8 hướng thiết kế luồng quên mật khẩu. Chọn ra 2 hướng và ghi lý do bạn chọn.
- Microcopy: Nhờ AI viết 5 biến thể cho: tiêu đề màn hình, nhãn nút chính, và thông báo lỗi "email không tồn tại". Chọn và tinh chỉnh lại theo tone bạn muốn.
- Prototype: Mô tả 1 hướng đã chọn vào v0 (hoặc Lovable). Chụp lại kết quả.
- Curate: Viết một đoạn ngắn (150 từ) phân tích: v0 làm đúng gì, bỏ sót gì (state? spacing? accessibility?), và bạn sẽ sửa gì khi mang về Figma.
- Phản biện: Cuối cùng, prompt AI chỉ ra 3 vấn đề usability của thiết kế bạn chọn. Ghi lại có vấn đề nào bạn đồng ý và sẽ sửa.
Tóm tắt
- AI không thay thế designer — nó thay thế designer không biết dùng AI. Giá trị của bạn dịch chuyển từ "tạo pixel" sang "phán đoán và biên tập".
- Ba nhóm công cụ, ba điểm ngọt khác nhau: LLM (ChatGPT/Claude) cho tư duy, brainstorm và ngôn ngữ; Midjourney cho mood và hình ảnh minh hoạ (không phải UI); v0/Lovable/Bolt cho prototype UI chạy bằng code.
- Nguyên tắc vàng: AI tạo bản nháp, bạn tạo quyết định. Mọi output AI đều là điểm khởi đầu, không phải deliverable.
- Prompt tốt = bối cảnh + ràng buộc + định dạng đầu ra. Prompt mơ hồ cho ra kết quả vô dụng.
- Workflow chuẩn: brainstorm (LLM) → visual direction (Midjourney) → microcopy (LLM) → prototype (v0) → chuẩn hoá trong Figma → phản biện cuối (LLM).
- Đừng bao giờ ship thẳng output AI, đừng dùng Midjourney làm handoff, và đừng để AI làm mòn gu thiết kế của bạn. AI khuếch đại phán đoán, không thay thế nó.