Claude Design: Hướng dẫn tạo thiết kế, prototype bằng AI

Claude Design là một trong những công cụ AI thiết kế UI/UX cho phép bạn tạo thiết kế, prototype tương tác, bài thuyết trình và nhiều định dạng khác thông qua hội thoại với Claude. Hướng dẫn này sẽ giúp bạn tạo project đầu tiên, tinh chỉnh thiết kế và khai thác tối đa công cụ.

Nội dung

Thank you for reading this post, don't forget to subscribe!

Hướng dẫn này giả định design system của tổ chức bạn đã được thiết lập, vì vậy mọi thứ bạn tạo sẽ tự động dùng đúng màu thương hiệu, kiểu chữ và pattern component. Nếu bạn là trưởng nhóm thiết kế cần thiết lập hoặc chỉnh sửa design system, hãy xem Thiết lập design system trong Claude Design.

Cách Claude Design hoạt động

Claude Design có hai khu vực chính: giao diện chat bên trái và canvas bên phải. Bạn mô tả điều mình muốn trong chat, Claude sẽ tạo một bản thiết kế hoàn chỉnh trên canvas. Từ đó, bạn lặp lại—tinh chỉnh qua hội thoại, bình luận inline và thao tác trực tiếp trên canvas—cho đến khi ưng ý.

Quy trình thông thường sẽ là:

Di chuyển giữa Claude Design và Claude Code

Bạn có thể chuyển qua lại giữa Claude Design và Claude Code mà vẫn đồng bộ công việc. Dùng lệnh /design-sync để kéo design system vào, nhờ đó mọi thứ bạn dựng trong Claude Design đều bắt đầu từ các component hiện có. Khi thiết kế đã sẵn sàng để chuyển thành phần mềm, bạn có thể bàn giao cho Claude Code, và nó sẽ tiếp tục từ công việc hiện tại thay vì bắt đầu lại từ screenshot.

Nếu bạn muốn làm việc từ Claude Code, hãy kết nối MCP server của Claude Design để tạo và chỉnh sửa thiết kế ngay trong terminal:

2. Chạy /design-login để đăng nhập.

Sau khi kết nối, bạn có thể import một thiết kế vào codebase, xuất mã nguồn thành prototype trực tiếp, hoặc để Claude dựng toàn bộ từ đầu đến cuối.

Tạo project mới

Khi bạn tạo project, project tự động kế thừa design system của tổ chức. Bạn không cần upload bộ nhận diện thương hiệu hay cấu hình gì cả—màu thương hiệu, font chữ và component đã sẵn sàng.

Đính kèm hoặc import design system

Bạn có thể đưa vào một hoặc nhiều design system từ GitHub repo, file thiết kế, bản upload thô hoặc codebase cục bộ bằng lệnh /design-sync trong Claude Code. Claude sẽ dựng bằng đúng component trong design system thật, kiểm tra output của nó với design system và tự sửa trước khi bạn nhìn thấy.

Đối với team lớn, vai trò tùy chỉnh Claude Design Admin cho phép quản trị viên duyệt một hệ thống chuẩn và khóa chỉnh sửa, để công việc luôn khớp với guidelines công ty.

Thêm ngữ cảnh cho project

Bạn cung cấp càng nhiều ngữ cảnh, output từ Claude càng chất lượng. Bạn có thể đính kèm tài liệu tham khảo vào bất kỳ lúc nào trong project.

Viết prompt hiệu quả

Bạn không cần là nhà thiết kế vẫn có thể đạt kết quả tốt. Hãy nói rõ bạn đang xây dựng gì, dành cho ai và điều gì quan trọng nhất.

Một prompt tốt gồm mục tiêu (bạn đang xây dựng gì), bố cục (cách sắp xếp), nội dung (thông tin cần hiển thị) và đối tượng (ai sẽ dùng). Claude cũng sẽ hỏi thêm câu làm rõ nếu cần thông tin.

Dưới đây là một số ví dụ prompt hiệu quả:

Tinh chỉnh thiết kế

Bản tạo ra đầu tiên chỉ là điểm khởi đầu. Giá trị thực sự nằm ở việc lặp lại và cải tiến.

Dùng chat

Chat phù hợp nhất cho những thay đổi lớn ảnh hưởng đến tổng thể thiết kế:

Bạn cũng có thể nhờ Claude giải thích các quyết định thiết kế, đề xuất cải tiến hoặc rà soát thiết kế về khả năng tiếp cận (accessibility).

Dùng bình luận inline

Bình luận inline cho phép bạn nhấp trực tiếp vào một phần cụ thể trên canvas và yêu cầu thay đổi đúng chỗ. Cách này nhanh hơn việc mô tả vị trí trong chat.

Ví dụ về bình luận inline tốt:

Chỉnh sửa trực tiếp trên canvas

Dùng các control bố cục phong phú để thay đổi nhanh về mặt hình ảnh và thẩm mỹ, cụ thể là kéo, resize và căn chỉnh phần tử trực tiếp.

Khi nào nên dùng chat, bình luận hay chỉnh sửa trực tiếp

Dùng bình luận cho những thay đổi có chủ đích ở cấp component (ví dụ: ‘sửa nút này’, ‘chỉnh khoảng cách này’). Dùng chat cho thay đổi cấu trúc, thêm section mới hoặc bất cứ điều gì cần giải thích hay ngữ cảnh. Chỉnh sửa trực tiếp cho các thay đổi nhanh về hình ảnh và thẩm mỹ.

Quản lý phiên bản và bản chỉnh sửa

Nếu muốn thử một hướng đi khác mà không mất công việc hiện tại, hãy nói với Claude: «Lưu những gì chúng ta đang có và thử một cách tiếp cận hoàn toàn khác». Claude sẽ lưu project hiện tại và xác nhận nơi lưu, để bạn dễ dàng tham chiếu các phiên bản trước trong hội thoại.

Xuất và chia sẻ

Khi thiết kế đã sẵn sàng, bạn có thể chia sẻ với đồng nghiệp hoặc xuất ra để dùng nơi khác. Định dạng phù hợp tùy thuộc vào mục đích—dù bạn cần phản hồi từ stakeholder, bàn giao cho bộ phận kỹ thuật hay trình bày trước nhóm.

Dùng nút «Export» ở góc trên bên phải khi xem project để chọn định dạng xuất phù hợp.

Bạn cũng có thể chia sẻ project trong tổ chức bằng link chia sẻ. Các tùy chọn chia sẻ gồm xem-only, bình luận và chỉnh sửa.

Mức sử dụng và giá

Claude Design được tính vào cùng hạn mức sử dụng với các tính năng khác của Claude. Hoạt động thiết kế dùng chung nguồn tài nguyên với chat, Claude Code và Cowork, nên không cần theo dõi hạn mức riêng cho Claude Design. Project phức tạp với codebase lớn hoặc nhiều lần lặp sẽ tiêu tốn nhiều hơn.

Nếu bạn đạt đến hạn mức sử dụng, Claude Design sẽ không khả dụng cho đến khi hạn mức được đặt lại. Nếu bạn đã bật usage credits, bạn có thể tiếp tục làm việc sau khi hết hạn mức bao gồm. Tìm hiểu thêm về cách hoạt động của hạn mức sử dụng và độ dài.

Lưu ý: Claude Design trước đây có hạn mức tuần riêng, tách biệt với các giới hạn sử dụng khác. Hiện tại, mọi hoạt động Claude Design đều được tính vào hạn mức dùng chung của gói.