Thiết kế UI/UX với Claude Code: workflow thật từ ý tưởng tới giao diện (2026)

Claude Code có thiết kế UI/UX được không?

Được - nhưng cần hiểu đúng công cụ. Claude Code là một CLI agentic chạy trong terminal: nó đọc repo của bạn, viết trực tiếp code giao diện (React, Next.js, Tailwind, shadcn/ui) và chạy được ngay, chứ không chỉ vẽ mockup rồi để đó. Đây là điểm khác biệt lớn nhất so với "Claude Design" bản web - thứ mà phần lớn bài tiếng Việt trên SERP đang nhắc tới.

Nói ngắn gọn: Claude Code thiết kế UI/UX theo hướng "từ ý tưởng ra code chạy được", còn Claude Design (web) thiên về wireframe → mockup trực quan. Nếu bạn là dev đang làm một dự án React/Next thật, Claude Code là lựa chọn đúng vì output nằm luôn trong codebase, có Git, có test, có build.

Điểm cần thẳng thắn: mặc định, UI do Claude Code sinh ra thường "an toàn" đến mức nhàm - bố cục đều đều, màu tím gradient, font Inter, card bo góc giống nhau. Không phải nó không làm đẹp được, mà là nó thiếu ràng buộc thẩm mỹ. Phần còn lại của bài này là cách bạn nạp những ràng buộc đó để đẩy chất lượng lên mức "production".

Vì sao UI do Claude Code sinh ra hay bị "generic"?

Hiểu nguyên nhân thì mới fix đúng chỗ. UI generic không phải lỗi model "kém thẩm mỹ", mà là hệ quả của việc thiếu thông tin đầu vào:

• Không có design system. Khi bạn chỉ nói "làm cái landing page", model không có palette, không có scale spacing, không có cặp font - nên nó chọn mặc định an toàn nhất mà nó thấy nhiều nhất trong dữ liệu: Inter, tím/xanh gradient, shadow mềm.
• Không có visual reference. Claude Code làm việc chủ yếu với text. Nếu không được "nhìn" một tham chiếu (ảnh mockup, screenshot trang bạn thích), nó không có mục tiêu thẩm mỹ để bám.
• Không có ràng buộc component. Thiếu chỉ dẫn, nó tự chế button/input/card thay vì dùng một thư viện chuẩn - dẫn tới thiếu nhất quán và thiếu accessibility.
• Không có vòng lặp phản hồi. Nó viết code một lần rồi dừng, không tự nhìn kết quả render để sửa.

Tin tốt: cả bốn nguyên nhân đều xử lý được bằng những bước cụ thể. Đây cũng là lý do bài này tập trung vào quy trình, không phải vào một prompt "thần thánh".

Chuẩn bị: bạn cần gì

Trước khi vào workflow, dựng sẵn môi trường để không phải dừng giữa chừng:

• Claude Code đã cài và đăng nhập (xem cách cài đặt Claude Code nếu bạn chưa có).
• Node.js (cho các MCP server chạy qua npx) và một project React/Next.js + Tailwind đã init.
• Tài khoản/khoá để cắm các MCP server (shadcn, Playwright) - hiểu khái niệm ở bài MCP là gì.

Ba nhóm công cụ chính bạn sẽ dùng:

Workflow 6 bước thiết kế UI/UX với Claude Code

Đây là quy trình mình dùng đi dùng lại. Mỗi bước có mục tiêu rõ, một lệnh/prompt cụ thể và kết quả bạn nên thấy. Bạn không cần làm hết ngay từ đầu - nhưng bỏ bước nào thì UI sẽ "generic" đúng ở chỗ đó.

Bước 1 - Sinh design system chuẩn (skill design-intelligence)

Đây là bước có tác động lớn nhất. Thay vì để model đoán palette và font, bạn dùng một skill design-intelligence để sinh cả hệ thống thiết kế trong một lần: bảng màu, cặp font, thang spacing, bo góc, và guideline UX theo đúng loại sản phẩm (SaaS dashboard, landing, e-commerce...).

Skill kiểu ak-ui-ux-pro-max đối chiếu trên kho tham chiếu lớn - 50+ style, 161 palette, 57 cặp font, 161 product type, 99 UX guideline, 25 loại chart, 10 stack - nên thay vì "đoán cho đẹp", nó chọn tổ hợp đã được kiểm chứng. Bạn mô tả sản phẩm, nó trả về design system dạng tokens sẵn sàng đưa vào Tailwind config.

# Trong Claude Code, mô tả sản phẩm để skill sinh design system
Dùng skill ui-ux design-intelligence: sinh design system cho một
landing page SaaS quản lý công việc, tông chuyên nghiệp - hiện đại,
đối tượng dev. Trả về palette (kèm mã hex), 1 cặp font (heading/body),
scale spacing, radius, và 5 UX guideline chính. Xuất ra dạng tokens.

Kết quả kỳ vọng: một bảng tokens cụ thể (không phải "màu xanh dịu"), có thể copy thẳng vào tailwind.config. Từ đây trở đi, mọi component sẽ tham chiếu cùng một nguồn.

Bước 2 - Viết rule thẩm mỹ vào CLAUDE.md

Design system chỉ hữu ích nếu Claude Code tuân theo nó ở mọi session. Cách bền nhất là hardcode luật vào file CLAUDE.md ở gốc repo - file này được nạp tự động vào ngữ cảnh mỗi lần bạn làm việc (chi tiết ở bài viết file CLAUDE.md chuẩn).

# CLAUDE.md - Design rules (UI/UX)

## Thẩm mỹ (bắt buộc tuân thủ)
- KHÔNG dùng font Inter hoặc Roboto. Dùng cặp font trong design tokens.
- KHÔNG dùng gradient tím/xanh mặc định. Chỉ dùng màu trong palette tokens.
- Mọi spacing/màu/radius phải tham chiếu tokens, không hardcode giá trị rời.
- Component UI phải dùng shadcn/ui, không tự chế button/input/card.
- Contrast tối thiểu 4.5:1; mọi element tương tác có focus ring rõ.
- Vùng chạm tối thiểu 44x44px; không tạo horizontal scroll trên mobile.

Đây là "hàng rào" quan trọng nhất: nó biến các quyết định thẩm mỹ thành ràng buộc cứng, không phải gợi ý mềm. Mỗi khi Claude Code định "tiện tay" dùng Inter, luật này kéo nó lại.

Bước 3 - Cắm component library qua MCP (shadcn/ui)

Để Claude Code lắp component chuẩn thay vì tự viết lại, cắm shadcn qua MCP. Component từ shadcn/ui đã lo sẵn accessibility (Radix bên dưới) và nhất quán về style:

claude mcp add shadcn -- npx -y shadcn@latest mcp

Sau khi cắm, bạn yêu cầu theo kiểu "dùng shadcn để thêm form đăng nhập", và Claude Code sẽ kéo đúng component (button, input, dialog...) rồi ráp theo tokens ở bước 1. Kết quả: ít component "tự chế", ít bug a11y, và UI đồng bộ hơn hẳn.

Bước 4 - Cho Claude Code một visual reference

Model làm UI tốt hơn nhiều khi có một mục tiêu để bám. Trước khi bảo nó code màn hình, hãy đưa một tham chiếu trực quan: ảnh mockup, screenshot một trang bạn thích, hoặc một component có sẵn.

Cách làm hiệu quả: dán ảnh reference vào phiên làm việc và mô tả cụ thể điều bạn muốn lấy - "bám bố cục hero và nhịp spacing của ảnh này, nhưng dùng palette và font trong tokens của mình". Càng cụ thể ("khoảng trắng rộng", "typography là điểm nhấn", "CTA nổi bật") thì kết quả càng ít generic. Đừng chỉ nói "làm cho đẹp" - hãy chỉ ra đẹp theo kiểu gì.

Bước 5 - Vòng lặp screenshot → so sánh → tinh chỉnh (Playwright MCP)

Đây là bước tách bài viết này khỏi các hướng dẫn khác. Thay vì bạn tự chụp màn hình rồi mô tả lại lỗi, hãy cho Claude Code tự "nhìn" kết quả bằng Playwright MCP: nó mở trang đang render, chụp screenshot, so với reference, rồi sửa code - lặp ít nhất 2 vòng.

claude mcp add playwright -- npx -y @playwright/mcp@latest

Prompt vòng lặp:

Dùng Playwright MCP: mở http://localhost:3000, chụp screenshot màn hình
hero. So sánh với reference đã cho về: spacing, hierarchy, tương phản.
Liệt kê 3 điểm lệch lớn nhất, sửa code, chụp lại, và lặp cho tới khi
khớp reference. Giữ nguyên ràng buộc trong CLAUDE.md.

Mỗi vòng, model tự thấy khoảng cách giữa "cái nó code" và "cái nó nên đạt", nên chất lượng tăng dần thay vì đứng yên sau lần đầu. Đây là cách gần nhất để bù cho điểm yếu visual của một công cụ text-first.

Bước 6 - Khóa design tokens & kiểm a11y

Khi UI đã ưng, khóa lại để không "trôi" ở các session sau. Xuất design tokens ra một file nguồn duy nhất (ví dụ tokens.css hoặc block trong tailwind.config) và ghi vào CLAUDE.md rằng đây là nguồn chân lý - mọi màn hình mới phải tham chiếu, không tạo giá trị rời.

Ngay sau đó, chạy một lượt kiểm accessibility nhanh (xem chi tiết ở phần dưới): contrast 4.5:1, focus ring hiển thị, vùng chạm ≥44px, không horizontal scroll, tôn trọng prefers-reduced-motion. Việc khóa token + kiểm a11y biến một "bản đẹp may mắn" thành một hệ thống lặp lại được.

Ví dụ thật: dựng 1 landing page trước/sau

Để cụ thể, đây là một case minh hoạ với landing page cho một SaaS quản lý công việc (đối tượng dev VN). Quy trình đúng theo 6 bước trên.

Bản v1 (chưa có ràng buộc): Claude Code trả về đúng kiểu "generic" - hero căn giữa, font Inter, một gradient tím ở nút CTA, ba card feature bo góc giống hệt nhau. Chạy được, nhưng nhìn là biết "AI làm".

Sau khi áp bước 1-5: design system đổi sang cặp font có cá tính hơn (một serif cho heading, một sans cho body), palette trung tính + một màu nhấn ấm, spacing rộng hơn, CTA đặc màu thay vì gradient. Qua 3 vòng Playwright loop, hierarchy rõ hơn và các feature card có nhịp khác nhau thay vì lặp.

Trung thực về giới hạn: Claude Code làm rất tốt phần bố cục, spacing hệ thống và ráp component. Nhưng phần mình vẫn phải sửa tay là micro-interaction (timing animation, easing) và một vài quyết định thẩm mỹ mang tính "gu" mà rule text khó truyền tải hết. Nói cách khác: nó lo được 80% khung, 20% cuối vẫn cần mắt người. Nếu bạn muốn đi sâu phần dựng frontend, xem bài dựng frontend React với Claude Code.

Kiểm tra accessibility & responsive (đừng bỏ)

Phần lớn hướng dẫn chỉ bàn "đẹp" mà bỏ qua accessibility - trong khi đây lại là chỗ Claude Code hỗ trợ rất tốt vì nó kiểm được bằng code. Chạy checklist này trước khi coi là xong:

• Contrast ≥ 4.5:1 cho text thường (3:1 cho text lớn) - theo chuẩn WCAG 2.1 AA.
• Focus visible: mọi element tương tác (link, button, input) có focus ring rõ khi tab bằng bàn phím.
• Vùng chạm ≥ 44×44px trên mobile để bấm không trượt.
• Không horizontal scroll ở các breakpoint chính (360px, 768px, 1024px).
• Tôn trọng prefers-reduced-motion: tắt/giảm animation cho người nhạy cảm chuyển động.
• Semantic HTML + alt: heading đúng cấp, ảnh có alt, form có label.

Bạn có thể giao thẳng: "kiểm toàn bộ trang theo checklist a11y trong CLAUDE.md, liệt kê vi phạm kèm dòng code, và sửa". Vì đây là việc dựa trên quy tắc rõ ràng, Claude Code làm nhanh và ít sai.

Giới hạn thật của Claude Code khi thiết kế UI/UX

Để bạn đặt kỳ vọng đúng - và đây là phần mà hầu hết bài tiếng Việt né tránh:

• Visual reasoning phức tạp còn yếu. Nó "đọc" screenshot ở mức khá, nhưng đánh giá tinh tế về cân bằng thị giác, nhịp điệu bố cục thì chưa bằng designer.
• Không pixel-perfect. Đừng kỳ vọng khớp Figma tới từng pixel; nó bám tinh thần thiết kế, không phải bản vẽ chính xác.
• Rule text không thay được hình ảnh. Bạn có thể mô tả "sang trọng" bằng chữ, nhưng một reference trực quan luôn hiệu quả hơn nhiều.
• Micro-interaction & animation tinh vi. Timing, easing, chuyển cảnh mượt - phần này thường phải chỉnh tay.
• Vẫn cần người review. Nó tăng tốc rất mạnh, nhưng quyết định thẩm mỹ cuối và trải nghiệm cảm xúc vẫn thuộc về bạn.

Khi nào vẫn cần designer thật? Khi bạn xây một brand identity mới từ đầu, hoặc cần một hệ thống thiết kế phức tạp nhiều sản phẩm. Claude Code là "cánh tay dựng nhanh và nhất quán", không phải người thay thế tư duy thiết kế.

Tăng tốc: bộ skill UI/UX dựng sẵn trong AgentKit

Bước 1 (sinh design system) là chỗ tốn công nhất nếu bạn tự dựng skill. Đây là lúc một bộ skill dựng sẵn tiết kiệm nhiều thời gian: ak-ui-ux-pro-max - bản đầy đủ với 161 palette, 57 cặp font, 99 UX guideline, 25 loại chart và 10 stack - đi kèm AgentKit. Claude Code tự gọi skill này khi bạn làm UI, nên bạn không phải viết lại rule design từ số 0 cho mỗi dự án.

Một dòng phân biệt để tránh nhầm: AgentKit ở đây là bộ kit cho Claude Code (agentkit.best, dùng CLI ak), khác OpenAI AgentKit (Agent Builder/ChatKit). Nếu quan tâm phần kit dev, xem Engineer Kit có gì - Engineer Kit hiện có giá $99 (trang không nêu phí định kỳ), kèm "money-back guarantee" và "lifetime updates" theo thông tin trên trang.

Muốn bỏ qua bước tự chế design system? Bộ skill UI/UX của AgentKit ship sẵn ak-ui-ux-pro-max để Claude Code có ngay palette, font và UX guideline chuẩn.

Câu hỏi thường gặp (FAQ)

Claude Code khác Claude Design (web) chỗ nào?

Claude Code là CLI agentic chạy trong terminal, viết trực tiếp code UI vào repo và chạy được ngay. Claude Design (web) thiên về wireframe → mockup trực quan trên trình duyệt. Nếu bạn làm dự án React/Next thật, Claude Code hợp hơn vì output nằm trong codebase.

UI do Claude Code làm ra có "production" được không?

Có, nếu bạn áp workflow đủ bước: design system + ràng buộc CLAUDE.md + component chuẩn (shadcn) + vòng lặp tinh chỉnh + kiểm a11y. Thiếu các bước này thì UI dễ bị generic. Phần micro-interaction và thẩm mỹ tinh vi vẫn nên review tay.

Cần biết Figma không?

Không bắt buộc. Bạn có thể làm hoàn toàn bằng mô tả text + một ảnh reference. Nhưng nếu có mockup Figma, bạn dùng nó làm visual reference sẽ giúp Claude Code bám thẩm mỹ tốt hơn.

Có cần skill trả phí không?

Không nhất thiết. Bạn có thể tự viết rule design vào CLAUDE.md miễn phí. Skill dựng sẵn như ak-ui-ux-pro-max chỉ giúp nhảy cóc bước dựng design system - tiện khi bạn làm nhiều dự án và muốn nhất quán, không phải điều kiện bắt buộc.

Nên cắm MCP nào cho thiết kế UI?

Hai MCP đáng cắm nhất: shadcn MCP (để lắp component chuẩn, có sẵn accessibility) và Playwright MCP (để Claude Code tự chụp UI đang render, so sánh reference và tinh chỉnh theo vòng lặp).

Làm sao để UI đỡ generic?

Nạp ràng buộc: cấm font/màu mặc định trong CLAUDE.md, đưa một visual reference cụ thể, dùng design system riêng thay vì để model đoán, và chạy vòng lặp screenshot → so sánh → sửa ít nhất 2 lần.

Kết luận + bước tiếp theo

Tóm lại, Claude Code thiết kế UI/UX tốt khi bạn cho nó đủ ràng buộc: sinh design system, khóa luật thẩm mỹ vào CLAUDE.md, cắm shadcn + Playwright qua MCP, cho một reference trực quan, chạy vòng lặp tinh chỉnh rồi khóa tokens và kiểm a11y. Đừng kỳ vọng pixel-perfect - hãy dùng nó như một cánh tay dựng nhanh và nhất quán, còn quyết định gu thẩm mỹ giữ lại cho mình.

Bước tiếp theo: đọc dựng frontend React với Claude Code để đi sâu phần code giao diện, và nếu muốn bỏ qua công dựng design system thủ công, cân nhắc dùng skill ak-ui-ux-pro-max đi kèm AgentKit (xem box bên dưới).