Dùng Claude thiết kế UI/UX: Khi AI trở thành "design partner" thay vì chỉ là công cụ

Thứ Hai, 9 giờ sáng, bạn nhận được Jira ticket: "Thiết kế lại CX Dashboard cho khách hàng enterprise — 12 widget, 3 persona, 5 use case chính. Deadline: Thứ Sáu."

Bốn năm trước, ticket này có nghĩa là 2 tuần cho designer, 1 tuần cho dev, 3 ngày cho QA. Hôm nay, bạn mở Claude, gõ một câu prompt, và 15 phút sau đã có wireframe đầu tiên. Đến thứ Tư, bản Figma đã xong. Thứ Năm, code đã chạy. Thứ Sáu, ship.

Nhưng đây không phải là chuyện "AI thay thế designer". Đây là chuyện một loại design partner mới — không biết mệt, không ego, sẵn sàng tranh luận về typography lúc 2 giờ sáng, và có thể đọc toàn bộ design system của bạn trong 30 giây.

Bài viết này chia sẻ cách đội Filum đang dùng Claude để thiết kế sản phẩm CX — từ brainstorm user journey, ra wireframe, viết code component, cho tới review accessibility. Không phải demo "AI vẽ được nút bấm", mà là workflow thật, pitfalls thật, và lý do tại sao chúng tôi tin rằng đây là cách design sẽ được làm trong 5 năm tới.

Design workflow truyền thống đang vỡ ở đâu

Trước khi nói Claude giải quyết gì, cần nói rõ vấn đề. Một designer ở công ty B2B SaaS cỡ trung (50-200 nhân sự) thường mắc kẹt ở 4 nút thắt:

1. Brainstorm mất quá lâu. Nghiên cứu competitor, vẽ user journey, align với PM về scope — mỗi bước tốn nửa ngày. Không phải vì công việc khó, mà vì phải "khởi động" lại context mỗi lần.

2. Từ wireframe sang mockup là một vực sâu. Wireframe trên giấy hoặc Miro trông hợp lý, nhưng khi chuyển sang Figma với đúng spacing, color token, typography scale — 70% thời gian thiết kế bốc hơi ở đây.

3. Handoff là nghĩa địa của design intent. Designer giao Figma cho dev, dev build xong, PM review, 40% chi tiết bị lệch. Padding sai 4px, color token dùng nhầm, empty state bị quên. Mỗi vòng iterate thêm 2-3 ngày.

4. Design system không sống. Công ty nào cũng có Figma library, nhưng nửa năm sau thì 30% component không ai dùng, 20% component dev tự đẻ ra ngoài system. Không có ai "chạy" design system — nó là tài sản chết.

"Designer không thiếu tài năng. Họ thiếu thời gian để dùng tài năng đó vào đúng chỗ."

Claude không sửa 4 vấn đề trên bằng cách làm việc thay designer. Nó sửa bằng cách nén thời gian của những việc mang tính cơ học — research, translation, handoff, audit — để designer có thời gian cho phần khó: judgment, taste, quyết định trade-off.

Claude không thay designer — Claude là "design partner"

Cách tư duy phổ biến về AI trong design hiện tại có 2 thái cực, cả 2 đều sai.

Thái cực 1: "AI vẽ được UI, chỉ cần prompt là có mockup." Đúng trên demo video, sai trên production. AI-generated UI thường đẹp-nhưng-sai-bối-cảnh: nó không biết design system của bạn, không biết brand voice, không biết user đang kẹt ở bước nào trong flow.

Thái cực 2: "AI không hiểu design, designer không cần quan tâm." Sai vì nếu bạn không dùng AI bây giờ, đồng nghiệp bạn đã dùng — và họ đang ship nhanh gấp 3.

Cách tiếp cận thực tế: Claude là một junior designer + senior developer có quyền truy cập toàn bộ knowledge của bạn. Bạn giao cho Claude những việc mà một người mới vào team có thể làm được nếu đọc đủ doc — nhưng Claude làm trong 2 phút thay vì 2 ngày.

Quan trọng hơn: Claude không có ego. Bạn có thể nói "phương án này tệ, làm lại theo hướng X" mười lần liên tục, nó không giận. Bạn có thể yêu cầu giải thích tại sao nó chọn spacing 16px thay vì 12px, nó sẽ giải thích đàng hoàng. Đây là đối tác tranh luận lý tưởng.

4 lớp dùng Claude cho design workflow

Chúng tôi chia workflow thành 4 lớp, mỗi lớp Claude đóng vai khác nhau.

Lớp 1 — Brainstorm & Research (Claude là analyst)

Trước khi vẽ gì, bạn cần biết: (a) user là ai, (b) họ đang kẹt ở đâu, (c) competitor đang giải quyết thế nào. 3 câu hỏi này truyền thống mất 1-2 ngày. Với Claude:

Prompt mẫu:

"Tôi đang thiết kế CX Dashboard cho enterprise retailer Việt Nam. User chính: CX Director, 40-50 tuổi, quản lý 20 store. Pain point: không biết store nào có vấn đề service cho tới khi complaint leo thang. Hãy liệt kê 5 user journey điển hình trong tuần của họ, 7 thông tin quan trọng nhất họ cần thấy trên dashboard, và 3 competitor tham khảo tốt nhất (có link/hình nếu biết)."

Claude trả về trong 2 phút: user journey chi tiết, thông tin cần hiển thị, phân tích competitor với lý do. Bạn không lấy output nguyên xi — bạn dùng nó làm điểm khởi đầu. 60% đúng, 40% cần sửa. Nhưng 60% này tiết kiệm nửa ngày.

Mẹo: Đưa Claude đọc user interview transcript (có thể paste 5000 chữ một lúc) và yêu cầu tổng hợp pattern. Điều mà một analyst mất 3 giờ để làm.

Lớp 2 — Wireframe, IA & Copy (Claude là co-designer)

Đây là lớp Claude tạo ra giá trị nhiều nhất. Với Claude Artifacts, bạn mô tả một màn hình và Claude render ra HTML/React tương tác thật sự — không phải ảnh tĩnh. Bạn có thể click vào, xem state change, đổi layout trong lúc trò chuyện.

Workflow thực tế:

Prompt 1: Mô tả dashboard, yêu cầu 3 layout khác nhau (split view, card grid, timeline-first). Claude render 3 artifact, mỗi cái là 1 prototype chạy được.
Prompt 2: "Phương án 2 tốt nhưng card quá dày — làm lại với density cao hơn, và thêm filter bar trên cùng."
Prompt 3: "Empty state khi chưa có data thì sao? Thêm vào."
Prompt 4: "Viết microcopy cho 3 CTA chính, tone professional nhưng không cứng — tham khảo tone Filum: chuyên nghiệp, có chiều sâu, tránh buzzword."

Sau 30 phút trò chuyện, bạn có một prototype tương tác có thể cho stakeholder xem. Không phải để ship — để align vision. Meeting tuần sau, bạn không còn trình Figma, bạn trình link artifact. Stakeholder click vào, thử, feedback. Quyết định nhanh gấp 3.

Lớp 3 — Component code & Design token (Claude là developer)

Đây là lớp mà 90% designer bỏ qua — nhưng thực ra là lớp mang lại impact lớn nhất. Với Claude Code + shadcn/ui + Tailwind, bạn có thể đi thẳng từ wireframe sang code production, bỏ qua bước Figma.

Không phải designer nào cũng muốn code. Nhưng designer hiểu được code của Claude thì có 3 siêu năng lực:

Siêu năng lực 1: Audit design token. Yêu cầu Claude đọc toàn bộ codebase và liệt kê mọi color, spacing, typography đang dùng. Bạn sẽ thấy codebase có 17 shade of gray, 9 biến thể spacing "gần giống", 4 font-size giống nhau nhưng khác tên. Đây là rác mà designer không thấy được trong Figma.

Siêu năng lực 2: Enforce design system. Viết lint rule hoặc test script để cảnh báo khi dev dùng color không có trong token. Claude viết giúp bạn trong 10 phút. Tự nhiên design system sống lại.

Siêu năng lực 3: Ship small fix trực tiếp. Lỗi spacing, icon sai, label lệch — bạn mở Claude Code, fix trong 2 phút, PR cho dev review. Không cần đợi dev rảnh.

Lớp 4 — QA & Accessibility (Claude là auditor)

Accessibility review là việc quan trọng nhưng ai cũng trốn. Claude không trốn. Đưa Claude screenshot hoặc code, hỏi:

"Review screen này theo WCAG 2.2 AA. Check: color contrast, focus indicator, keyboard navigation, screen reader label, touch target size, motion preference. Liệt kê tất cả issue với mức độ nghiêm trọng."

Claude trả về checklist chi tiết. Bạn fix, rồi paste lại — nó review vòng 2. Đây là loại audit mà agency bên ngoài tính 2000 USD để làm.

Tương tự với performance review, responsive review, dark mode review. Mỗi review trước đây mất nửa ngày, giờ mất 15 phút.

Case thật: Filum thiết kế CX Dashboard trong 3 ngày

Đầu tháng 4, đội sản phẩm Filum cần ship một CX Dashboard mới cho tier enterprise. Yêu cầu: 12 widget, 3 persona (CX Director, Store Manager, CS Agent), 5 use case (daily check, complaint triage, trend analysis, team performance, executive report). Scope như một dự án 4 tuần. Thời gian có: 5 ngày làm việc.

Chúng tôi chia làm 3 ngày, mỗi ngày tương ứng 1 lớp workflow.

Ngày 1 — Research + IA. Buổi sáng, designer lead ngồi với Claude 2 giờ, đi qua 15 transcript user interview đã có, tổng hợp pattern. Buổi chiều, cùng Claude phác thảo IA cho 3 persona khác nhau, xác định 7 widget core + 5 widget optional. Kết ngày: có doc IA 12 trang + 3 user flow đã validate.

Ngày 2 — Wireframe + Prototype. Dùng Claude Artifacts, chạy 4 vòng iterate. Mỗi vòng 45 phút. Cuối ngày có 3 prototype tương tác cho 3 persona. Share link cho PM + CEO, thu feedback trong 2 giờ. Chọn phương án final buổi tối.

Ngày 3 — Code + Polish. Mở Claude Code, tạo các component thật bằng shadcn/ui + Tailwind trên codebase Next.js có sẵn. Designer ngồi cùng 1 senior dev, Claude làm "pair" giữa 2 người: dev dẫn về kiến trúc, designer dẫn về visual, Claude viết code. Cuối ngày đã merge 70% vào staging. 2 ngày còn lại dành cho QA + a11y + edge case.

Ship đúng ngày thứ Sáu. Tổng thời gian: 5 ngày thay vì 4 tuần. Không phải vì cắt scope — vì cắt overhead.

5 pitfall cần tránh

Tất cả những điều trên nghe rất mượt, nhưng chúng tôi đã vấp đủ lần để liệt kê 5 cạm bẫy lớn nhất:

Pitfall 1 — Prompt quá ngắn, output generic. "Design cho tôi một dashboard" sẽ ra dashboard template generic. Bạn phải cho Claude biết brand, audience, constraint, tone. Prompt tốt dài 200-500 chữ, ngắn hơn là lười.

Pitfall 2 — Copy-paste output mà không critique. Claude đúng 60-70%, 30-40% còn lại cần judgment của bạn. Nếu bạn ship thẳng, product sẽ có cảm giác "AI-generated" — tức là hơi đúng nhưng không có linh hồn. Luôn review, cắt, viết lại phần cần.

Pitfall 3 — Không cho Claude đọc design system hiện có. Paste Figma token, Tailwind config, component API vào context. Nếu không, Claude sẽ đẻ ra design token mới — và bạn vừa tăng nợ kỹ thuật.

Pitfall 4 — Dùng Claude như Google Search. Claude mạnh ở tổng hợp và suy luận, yếu ở sự kiện mới. Đừng hỏi "xu hướng design 2026 là gì" — đó là câu trả lời nhạt. Hãy hỏi "dựa trên 3 competitor tôi đang cạnh tranh (paste link), đâu là khoảng trống họ bỏ qua mà tôi có thể chiếm?" — câu này Claude trả lời sắc.

Pitfall 5 — Dùng một mình. Claude là đối tác, không phải solo tool. Designer giỏi nhất chúng tôi gặp đều dùng Claude theo cặp: một người prompt, một người critique. Kết quả tốt hơn 40% so với dùng một mình. Cặp designer + PM dùng Claude cùng nhau còn ra quyết định nhanh hơn nữa.

Workflow template 7 bước cho dự án design mới

Đây là template chúng tôi dùng cho mọi dự án design > 1 tuần:

Bước 1 — Context briefing (30 phút). Mở Claude, paste: brand guideline, persona, user research key findings, design system token, 3 competitor screenshot. Kết thúc bằng câu "Tóm tắt cho tôi bạn hiểu gì về bối cảnh." Nếu tóm tắt sai, sửa cho tới khi đúng. Đây là lớp context mà mọi prompt sau sẽ dùng chung.

Bước 2 — Problem framing (30 phút). Yêu cầu Claude reframe problem từ 3 góc nhìn khác nhau (user, business, technical). Chọn góc nhìn nào đáng theo đuổi nhất.

Bước 3 — Divergent ideation (1 giờ). Yêu cầu 5 phương án khác biệt, mỗi phương án phải có trade-off rõ ràng. Tránh nhận "phương án an toàn" — bạn có thể tự làm rồi, không cần AI.

Bước 4 — Convergent selection (30 phút). Chọn 1-2 phương án, yêu cầu Claude làm prototype tương tác bằng Artifacts. Click thử, cảm nhận.

Bước 5 — Stakeholder review (async). Share artifact link. Thu feedback bằng comment hoặc voice note. Cho Claude tổng hợp feedback thành action items.

Bước 6 — Implementation handoff hoặc code (varies). Hoặc export sang Figma với Claude viết spec, hoặc đi thẳng qua Claude Code để build component. Tuỳ team.

Bước 7 — QA pass (1 giờ). Chạy 4 review: visual, a11y, responsive, edge case. Claude check, bạn xác nhận.

Tổng: 3-4 giờ làm việc tập trung cho một screen chất lượng cao. Tuần trước, designer senior của Filum ship được 3 feature với workflow này. Tuần này, đang làm 5.

Điều gì đến tiếp theo

Chúng tôi không tin AI sẽ thay thế designer. Chúng tôi tin AI sẽ thay thế những designer không dùng AI — và khoảng cách này sẽ lớn dần theo quý, không phải năm.

Design trong thời AI-native không phải là "dùng AI tool", mà là thay đổi ai làm việc gì:

Designer dành nhiều thời gian hơn cho judgment, taste, quyết định trade-off — những thứ Claude không thay được.
Claude làm research, viết copy, render prototype, audit code, lint design token — những thứ tốn thời gian nhưng không tốn trí.
PM và dev trở thành đối tác thực sự của designer vì handoff đã bớt masa, giờ mọi người cùng đứng trước một prototype chạy được.

Nếu bạn là designer đang đọc bài này và chưa bắt đầu — hôm nay là ngày tốt. Đừng đọc thêm article, đừng xem thêm YouTube tutorial. Mở Claude, paste một brief thật bạn đang làm, thử lớp 1 trong 30 phút. Sau 30 phút đó, bạn sẽ biết cách nghĩ của tôi đúng hay sai cho bạn.

Filum sẽ tiếp tục share workflow chi tiết cho từng lớp — Artifacts cho wireframe, Claude Code cho component, audit scripts cho design system. Nếu bạn muốn nhận sớm, subscribe blog.