Lộc Nguyễn
Claude Design là công cụ của Anthropic dựng bản thử giao diện, slide và trang giới thiệu từ một đoạn mô tả bằng lời. Tôi dùng nó để phác nhanh: có bản nhìn được trong một buổi, sửa bằng lời, rồi giao cho Claude Code làm thật. Nó chưa thay được Figma cho hệ thống thiết kế lớn.
Trên blog này đã có vài bài về Claude Design, viết từ lúc công cụ còn mới. Bài này không lặp lại phần giới thiệu. Tôi viết về chuyện dùng hằng ngày: Claude Design hiện nằm ở đâu sau đợt thay đổi tháng 10 và 11/2026, một vòng làm việc từ mô tả tới bản giao cho lập trình, chỗ nó hay vấp, và lúc nào tôi vẫn mở Figma. Mọi thông tin về gói và tính năng dưới đây tôi đối chiếu lại trên trang chính thức của Anthropic ngày 09/11/2026.
Claude Design bây giờ nằm ở đâu và ai dùng được
Anthropic Labs giới thiệu Claude Design ngày 17/04/2026 dưới dạng bản xem trước nghiên cứu (research preview), chạy trên Claude Opus 4.7 và lúc đó chỉ mở cho các gói Pro, Max, Team, Enterprise (Anthropic, 17/04/2026). Bảy tháng sau, cách dùng đã khác khá nhiều:
- Có trong mọi gói, kể cả Free. Trang giá ghi rõ dòng «Claude Design, Slides, Docs» trong quyền lợi của gói miễn phí (claude.com/pricing, kiểm 09/11/2026).
- Chạy ngay trong cuộc trò chuyện. Trang sản phẩm ghi Claude Design dùng được trong bất kỳ cuộc trò chuyện nào với Claude, kể cả trong Claude Code và thẻ Artifacts. Trang riêng claude.ai/design chỉ còn tới ngày 14/12/2026 (claude.com/product/design, kiểm 09/11/2026).
- Tốn hạn mức của gói. Mỗi bản thiết kế tính vào giới hạn sử dụng; một yêu cầu lớn như cả bộ slide tốn nhiều hơn một tin nhắn thường.
- Doanh nghiệp bật theo quản trị viên. Với gói Enterprise, Anthropic ghi ba loại nội dung chính được bật mặc định từ 15/10/2026, trừ tổ chức có chế độ HIPAA.
Nếu anh chị đang cân nhắc gói nào, bài so sánh Claude Free, Pro và Team có bảng quyền lợi chi tiết hơn. Riêng với Claude Design, gói Free đủ để thử; khi làm thật cả bộ màn hình, hạn mức của gói miễn phí hết khá nhanh.
Claude Design làm được gì trong một buổi làm việc
Thay vì liệt kê tính năng, tôi kể theo đầu ra mà tôi thực sự cần khi làm sản phẩm:
- Bản thử giao diện bấm được. Mô tả màn hình bằng lời (ai dùng, cần thấy gì, bấm gì tiếp), Claude dựng bản đầu tiên. Có thể bấm chọn từng phần tử để góp ý, sửa chữ trực tiếp, kéo thanh trượt chỉnh khoảng cách và màu.
- Slide và trang một mặt (one-pager). Hữu ích khi cần trình bày một tính năng mới cho khách mà chưa có người thiết kế.
- Hệ thống thiết kế lấy từ mã nguồn. Claude đọc kho mã hoặc tệp thiết kế, rút ra màu, kiểu chữ, thành phần để dùng lại ở các bản sau. Có thể nhập cả tệp DOCX, PPTX, XLSX làm tư liệu.
- Xuất ra ngoài. PPTX, PDF, HTML, hoặc gói bàn giao cho Claude Code để lập trình tiếp.
Cách tôi dùng Claude Design: từ mô tả tới bản giao cho lập trình
Ở bài làm lại giao diện ZaloCRM bằng Claude Design, tôi đã kể một dự án cụ thể. Ở đây tôi rút ra vòng làm việc mà tôi lặp lại cho các màn hình mới.
Bước 1: viết mô tả như viết cho người thiết kế thật
Câu «làm trang quản lý khách hàng đẹp» cho ra một trang chung chung, ai làm cũng giống ai. Mô tả tốt có bốn phần: người dùng là ai (nhân viên bán hàng dùng điện thoại, hay quản lý ngồi máy tính), họ mở màn hình này để làm việc gì, dữ liệu thật trông thế nào (tên khách tiếng Việt dài, số tiền có dấu chấm), và việc tiếp theo họ bấm. Tôi thường dán kèm vài dòng dữ liệu mẫu đã che thông tin cá nhân, vì chữ thật làm lộ lỗi bố cục mà chữ mẫu không làm lộ.
Bước 2: nạp hệ thống thiết kế trước khi vẽ màn đầu tiên
Nếu sản phẩm đã có mã nguồn, tôi cho Claude đọc kho mã để lấy màu, phông chữ, nút, ô nhập. Bước này đỡ cho tôi việc sửa lại màu từng màn sau này. Anthropic tự ghi rằng hệ thống thiết kế chuyển sang «chưa hoàn hảo» và có nút dọn lại; tôi luôn mở bảng màu, kiểu chữ ra soát bằng mắt trước khi dùng.
Bước 3: sửa bằng góp ý ngắn, mỗi lần một ý
Góp ý dồn năm ý một lúc thường làm hỏng chỗ đang đúng. Tôi bấm vào đúng phần tử cần sửa và nói một việc: «bảng này cần cột ngày hẹn gọi lại», «nút chính đưa xuống cuối trên điện thoại». Mỗi vòng xem lại cả hai khổ máy tính và điện thoại.
Bước 4: kiểm bằng dữ liệu xấu
Trước khi chốt, tôi thay dữ liệu mẫu bằng trường hợp khó: tên rất dài, danh sách rỗng, số tiền chín chữ số, ảnh đại diện bị thiếu. Bản đẹp với dữ liệu đẹp chưa nói được gì.
Bước 5: bàn giao cho Claude Code và giữ người duyệt
Gói bàn giao giúp Claude Code biết bố cục và thành phần cần dựng. Nhưng gói này không biết quyền truy cập, luật nghiệp vụ hay API thật của hệ thống. Tôi vẫn viết rõ trong yêu cầu lập trình: màn nào gọi API nào, ai được thấy gì, và kiểm lại giao diện đã dựng bằng ảnh chụp ở nhiều khổ màn hình.
Giới hạn của Claude Design mà tôi gặp và Anthropic cũng ghi
Đây là phần nhiều bài giới thiệu bỏ qua. Công cụ hữu ích, nhưng có những chỗ anh chị nên biết trước khi đưa vào quy trình của đội:
- Hạn mức đi nhanh. Mỗi vòng sửa cả màn hình là một lần tốn hạn mức. Làm 20 màn cho một ứng dụng thật trên gói Free gần như không đủ; trên Pro cũng cần chia việc ra nhiều ngày.
- Hệ thống thiết kế rút ra có chỗ lệch. Màu và khoảng cách rút từ mã nguồn có lúc lệch, nhất là khi mã dùng biến CSS lồng nhau. Phải soát tay.
- Không hiểu nghiệp vụ. Claude dựng màn hình hợp lý về mặt hình ảnh nhưng có thể bỏ sót trạng thái quan trọng (đang tải, lỗi mạng, không có quyền). Người hiểu nghiệp vụ phải liệt kê các trạng thái này.
- Đang thay đổi. Chỉ trong bảy tháng, công cụ đã chuyển từ trang riêng sang nằm trong cuộc trò chuyện, từ chỉ gói trả phí sang có cả gói Free. Quy trình của đội nên ghi rõ ngày kiểm và xem lại định kỳ.
- Chữ tiếng Việt cần soát. Với tiêu đề dài, chữ có dấu đôi khi bị cắt dòng không đẹp hoặc tràn nút. Lỗi nhỏ nhưng khách nhìn thấy đầu tiên.
Khi nào tôi vẫn mở Figma thay vì Claude Design
Bài Claude Design và Figma AI so sánh hai công cụ theo tính năng. Ở góc dùng thực tế, tôi chọn theo câu hỏi «sản phẩm này sống bao lâu và bao nhiêu người cùng sửa»:
| Tình huống | Tôi chọn | Lý do |
|---|---|---|
| Phác ý tưởng, trình khách trong tuần | Claude Design | Có bản bấm được nhanh, sửa bằng lời |
| Slide giới thiệu tính năng, one-pager bán hàng | Claude Design | Xuất PPTX, PDF ngay |
| Màn hình mới cho sản phẩm đã có mã nguồn | Claude Design, rồi Claude Code | Hệ thống thiết kế lấy từ mã, bàn giao thẳng |
| Hệ thống thiết kế dùng chung cho nhiều sản phẩm, nhiều người thiết kế | Figma | Cần quản lý thành phần, phiên bản, phân quyền chặt |
| Thiết kế cần duyệt pháp lý hoặc in ấn chính xác từng điểm ảnh | Figma | Kiểm soát chi tiết tốt hơn |
Hai công cụ không loại trừ nhau. Anthropic cũng giới thiệu Claude Design như thứ bổ sung cho Figma và Canva, và có sẵn đường xuất sang Canva.
Câu hỏi thường gặp về Claude Design
Claude Design có miễn phí không?
Có trong gói Free theo trang giá ngày 09/11/2026, nhưng tính vào hạn mức sử dụng. Muốn làm nhiều màn hình liên tục thì cần gói trả phí.
Claude Design khác Artifacts thế nào?
Artifacts là nơi hiển thị nội dung Claude tạo ra trong cuộc trò chuyện. Claude Design là cách làm việc chuyên cho thiết kế: có hệ thống thiết kế, góp ý trên từng phần tử, thanh chỉnh khoảng cách và màu, xuất PPTX, PDF, HTML và gói bàn giao cho Claude Code.
Trang claude.ai/design còn dùng được không?
Theo trang sản phẩm của Anthropic, trang riêng này còn tới 14/12/2026. Sau đó dùng Claude Design trong cuộc trò chuyện bình thường.
Người không biết thiết kế có dùng được không?
Dùng được để có bản đầu tiên. Nhưng để ra giao diện dùng lâu dài, vẫn cần người hiểu người dùng và nghiệp vụ duyệt từng trạng thái màn hình. Bài Claude Design là gì có phần nền tảng cho người mới bắt đầu.
Thiết kế làm bằng Claude Design có dùng cho sản phẩm thật được không?
Được, khi đi qua bước bàn giao cho lập trình và kiểm thử. Bản xuất HTML là bản trình bày, không phải mã sản phẩm đã có kiểm tra quyền, dữ liệu và lỗi.
Nguồn: Anthropic, «Introducing Claude Design by Anthropic Labs» (17/04/2026); claude.com/pricing và claude.com/product/design, kiểm ngày 09/11/2026.
