Claude Design là sản phẩm của Anthropic Labs cho phép bạn mô tả bằng lời rồi nhận về giao diện, prototype tương tác, slide hay landing page dưới dạng HTML chạy được thật, sau đó chỉnh trực tiếp trên canvas và xuất ra PPTX, PDF, HTML hoặc chuyển thẳng sang Claude Code để làm thành phần mềm. Ra mắt ngày 17/04/2026, hiện ở trạng thái beta và đi kèm miễn phí trong gói Pro, Max, Team, Enterprise.
TL;DR
- Claude Design ra mắt 17/04/2026 dưới dạng research preview, hiện là beta; theo Anthropic, hơn 1 triệu người đã dùng trong tuần đầu.
- Không cần mua thêm: đã có Claude Pro (20 USD/tháng, 17 USD nếu trả năm), Max, Team hoặc Enterprise là dùng được tại claude.ai/design hoặc thanh bên của app desktop. Gói Free không có.
- Sản phẩm sinh ra HTML/CSS/JS thật chứ không phải ảnh tĩnh, nên prototype bấm được, slide có hoạt ảnh, landing page chạy được trên trình duyệt.
- Bản cập nhật 17/06/2026 thêm ba thứ quan trọng: nhập design system từ GitHub/file thiết kế, chỉnh trực tiếp trên canvas, và lệnh /design-sync để đồng bộ với Claude Code.
- Xuất được PPTX, PDF, HTML, file ZIP; kết nối Canva, Gamma, Figma-like flow qua Lovable, Replit, Vercel, Wix, Miro, Adobe, Base44.
- Không tạo ảnh (không dùng để vẽ logo), chưa cộng tác thời gian thực, và tốn usage chung với chat, Cowork, Claude Code.
Claude Design là gì?
Claude Design là công cụ thiết kế trực quan chạy trong claude.ai, nơi bạn trò chuyện với Claude để làm ra bản thiết kế, prototype tương tác, bộ slide, one-pager hay landing page. Điểm khác biệt cốt lõi so với việc yêu cầu Claude vẽ ảnh: mọi thứ Claude Design tạo ra là trang web thật viết bằng HTML, CSS và JavaScript. Nate Parrott, product designer tại Anthropic và cũng là người khởi xướng dự án này từ mùa thu 2025, lập luận rằng HTML là phương tiện trực quan giàu nhất hiện có: bất cứ thứ gì bạn làm được trong slide, video hay PDF đều làm được trên một trang web.
Anthropic đưa Claude Design ra công chúng ngày 17/04/2026 dưới nhãn Anthropic Labs, nhóm chuyên ra sản phẩm thử nghiệm (Claude Cowork hồi tháng 1/2026 cũng đi ra từ đây). Phiên bản đầu chạy trên Claude Opus 4.7. Đến 17/06/2026, Anthropic công bố bản đại tu: design system nhập từ GitHub repo, file thiết kế hoặc upload thô; chỉnh sửa trực tiếp trên canvas; đồng bộ hai chiều với Claude Code; mỗi lượt tốn ít token hơn và lỗi giảm đáng kể. Theo bài blog cùng ngày, hơn 1 triệu người đã dùng sản phẩm trong tuần đầu ra mắt.
Đối tượng Anthropic nhắm tới rất rõ: founder, product manager, marketer, người không có nền tảng thiết kế nhưng cần biến ý tưởng thành thứ nhìn thấy được, nhanh, để đi thuyết phục người khác. Với người làm sản phẩm ở Việt Nam, đây là công cụ để ra mockup trước khi thuê designer, chứ không phải thay designer.
Claude Design làm được gì: UI, slide, landing page?
Theo trang sản phẩm và tài liệu hướng dẫn của Anthropic, Claude Design phủ sáu nhóm đầu ra chính, và điều đáng chú ý là chúng đều xuất phát từ cùng một nền HTML nên bạn có thể chuyển từ dạng này sang dạng kia trong cùng dự án.
| Nhóm đầu ra | Ví dụ cụ thể | Khác gì công cụ cũ |
|---|---|---|
| Prototype tương tác | Luồng màn hình app di động, dashboard có bộ lọc, form nội bộ | Bấm được, chuyển màn hình được, không phải ảnh ghép |
| Wireframe và mockup | Khung trang web, bố cục màn hình quản trị | Sinh nhiều hướng bố cục để so sánh trong một lượt |
| Slide và pitch deck | Deck gọi vốn, báo cáo quý, tài liệu đào tạo | Xuất PPTX/PDF, có hoạt ảnh và chart sống |
| Landing page và tài liệu marketing | Trang giới thiệu sản phẩm, one-pager, tài sản social | Xuất HTML đứng độc lập, đẩy lên Vercel hoặc Wix |
| Tài liệu | CV, one-pager, proposal | Áp đúng màu chữ theo design system của công ty |
| Prototype có mã | Demo có giọng nói, video, shader, 3D | Vì là code thật nên nhúng được thư viện JS |
Cách bạn đưa đầu vào cũng đa dạng hơn nhiều người nghĩ. Ngoài prompt chữ, Claude Design nhận ảnh chụp màn hình, wireframe vẽ tay, file DOCX/PPTX/XLSX, bản chụp trang web (web capture) và cả codebase. Với người đang có sẵn website và muốn làm thêm trang mới cùng phong cách, cách nhanh nhất là đưa link trang cũ để Claude bóc màu, font, khoảng cách rồi dựng trang mới theo đúng hệ đó.
Cách bắt đầu với Claude Design từ con số 0?
Bạn không phải cài gì cả. Điều kiện duy nhất là tài khoản Claude trả phí từ Pro trở lên; với Enterprise, tính năng tắt mặc định và admin phải bật trong Organization settings. Quy trình dưới đây mình tổng hợp từ tài liệu Get started của Anthropic và bài chia sẻ của Nate Parrott.
- Mở claude.ai/design trên trình duyệt, hoặc bấm mục Design ở thanh bên app Claude desktop. Claude Design chỉ có bản web và desktop, chưa có trên di động.
- Nếu bạn làm cho một thương hiệu, thiết lập design system trước: đưa GitHub repo chứa component, file slide PowerPoint đẹp nhất của công ty, logo và bảng màu. Chỉ cần một nguồn là đủ để bắt đầu, nhưng càng nhiều nguồn Claude càng bám sát. Nếu chỉ thử cho vui, bỏ qua bước này.
- Viết prompt có đủ bốn yếu tố: mục tiêu, bố cục, nội dung và đối tượng xem. Ví dụ tài liệu chính thức dùng: một dashboard hiển thị doanh thu theo tháng, có bộ lọc theo khu vực và dòng sản phẩm. Parrott khuyên thêm: hãy nghĩ kỹ trước khi gõ, nêu rõ font, màu, cảm xúc mong muốn, thậm chí dán mood board.
- Xem bản đầu tiên trên canvas. Đừng sửa từng chi tiết ngay; hãy yêu cầu Claude tạo hai đến ba biến thể bố cục để chọn hướng, rồi trộn phần hay của từng bản.
- Tinh chỉnh bằng ba cách tùy mức thay đổi: comment ngay trên vùng cần sửa cho các chỉnh sửa nhỏ như tăng padding nút; chat cho thay đổi cấu trúc như thêm section; kéo thả, thay đổi kích thước và căn lề trực tiếp trên canvas cho các chỉnh sửa cuối cùng.
- Xuất kết quả: PPTX hoặc PDF cho deck, HTML hoặc ZIP cho landing page, link chia sẻ trong tổ chức với ba mức quyền xem, comment, sửa. Nếu muốn biến prototype thành phần mềm thật, bấm chuyển sang Claude Code; ở phía terminal, lệnh /design-sync kéo design system vào dự án code và lệnh /design mở dự án thiết kế ngay từ terminal.
Một lưu ý về hạn mức: Claude Design tính vào cùng bể usage với chat, Claude Cowork và Claude Code. Dự án nặng, nhập nguyên repo lớn sẽ ngốn nhiều hơn. Người dùng Pro nên làm việc theo phiên ngắn, xuất file ngay khi ưng, thay vì để một dự án mở cả ngày.
Ví dụ thực tế: dựng prototype app đặt lịch cho spa trong một buổi
Để thấy rõ chỗ mạnh của công cụ, hãy lấy một bài toán quen thuộc với SME Việt Nam: chủ chuỗi spa muốn thuyết phục nhà đầu tư về app đặt lịch nhưng chưa có đội kỹ thuật. Với Claude Design, quy trình có thể diễn ra như sau.
Đầu vào là ba thứ: logo và bảng màu của spa (để Claude tạo design system), ảnh chụp app của hai đối thủ (để Claude hiểu ngữ cảnh thị trường), và một prompt mô tả bốn màn hình: chọn dịch vụ, chọn kỹ thuật viên và giờ, xác nhận thanh toán, lịch sử đặt. Claude Design trả về một luồng bốn màn hình bấm chuyển được, đúng màu thương hiệu.
Vòng chỉnh sửa thứ nhất thường là về nội dung tiếng Việt: giá dịch vụ, tên gói, cách gọi khách hàng. Đây là chỗ nên dùng comment trực tiếp lên phần tử thay vì viết lại prompt dài. Vòng thứ hai là bố cục: yêu cầu ba biến thể màn hình chọn giờ rồi chọn một. Sau đó, thay vì dừng ở prototype, bạn yêu cầu Claude Design tạo luôn bộ slide 8 trang trình bày ý tưởng, tái sử dụng chính các màn hình vừa dựng làm hình minh họa, rồi xuất PPTX để gửi nhà đầu tư.
Khi có vốn, bộ prototype đó không bị vứt đi: bạn bàn giao sang Claude Code và đội kỹ thuật tiếp tục từ mã HTML cùng design system đã có, thay vì nhìn ảnh chụp mà dựng lại từ đầu. Đây chính là lý do Anthropic chọn HTML làm nền: mọi công đoạn từ ý tưởng đến phần mềm dùng chung một chất liệu.
Từ 16/09/2026, Claude Design gọi được từ bất kỳ hội thoại nào và kết quả hiện dưới dạng artifact; nếu bạn chưa rõ artifact là gì và khác Design ở đâu, xem bài Claude Artifacts là gì.
Ưu và nhược điểm của Claude Design là gì?
Ưu điểm lớn nhất là tốc độ đi từ ý tưởng đến thứ nhìn thấy và bấm được, cộng với việc đầu ra là code chuẩn web nên mang đi đâu cũng được. Nhược điểm lớn nhất là nó không thay được công cụ thiết kế chuyên nghiệp ở khâu cộng tác và không tạo ảnh.
| Tiêu chí | Điểm mạnh | Điểm yếu |
|---|---|---|
| Chi phí | Không phải mua thêm nếu đã có Pro/Max/Team | Ăn chung hạn mức với chat và Claude Code; gói Pro dễ hết khi nhập repo lớn |
| Đầu ra | HTML/CSS/JS thật, xuất PPTX/PDF/HTML/ZIP | Không sinh ảnh, không vẽ logo, không xuất file thiết kế gốc dạng vector |
| Nhất quán thương hiệu | Design system từ repo/file, tự kiểm và tự sửa trước khi hiện kết quả; admin Team/Enterprise khóa được hệ chuẩn | Chất lượng phụ thuộc chất lượng nguồn đưa vào; nguồn xấu thì hệ màu xấu |
| Cộng tác | Link chia sẻ trong tổ chức, ba mức quyền | Chưa cộng tác thời gian thực; hai người cùng sửa một lúc chưa ổn định theo chính tài liệu Anthropic |
| Chuyển sang sản phẩm | Bàn giao thẳng sang Claude Code, có /design-sync | Mã sinh ra vẫn cần rà bảo mật, khả năng truy cập và hiệu năng trước khi lên production |
| Độ ổn định | Bản 06/2026 giảm lỗi mạnh, tốn ít token hơn | Vẫn là beta: comment inline đôi khi mất, repo lớn gây lag, lỗi upstream lẻ tẻ |
Góc nhìn riêng của mình cho thị trường Việt Nam: giá trị của Claude Design không nằm ở việc làm ra landing page cuối cùng, vì khâu đó nhiều agency làm rẻ và tốt. Giá trị nằm ở giai đoạn trước đó, khi bạn cần thứ gì đó nhìn được để chốt yêu cầu với đối tác hoặc sếp. Một prototype bấm được chốt yêu cầu nhanh hơn nhiều so với tài liệu Word năm trang, và giảm hẳn cảnh làm xong web mới biết khách muốn khác.
Claude Design so với công cụ thiết kế AI khác thì sao?
Claude Design không cạnh tranh trực diện với Figma hay Canva; Anthropic nói rõ sản phẩm bổ sung cho Canva và tích hợp xuất sang Canva ngay từ ngày đầu. Đối thủ gần nhất là nhóm công cụ prompt-to-prototype như v0 của Vercel hay Lovable, và nhóm làm slide bằng AI như Gamma.
| Công cụ | Thế mạnh | Khi nào chọn thay vì Claude Design |
|---|---|---|
| Figma | Cộng tác nhiều người thời gian thực, thư viện component chuẩn ngành | Đội thiết kế chuyên nghiệp, cần file nguồn vector và handoff chuẩn |
| Canva | Kho template, chỉnh ảnh, in ấn, người không chuyên dùng dễ | Ấn phẩm in, social post cần chỉnh ảnh; có thể xuất từ Claude Design sang Canva để hoàn thiện |
| v0 (Vercel) | Sinh React + Tailwind + shadcn/ui, hợp dev frontend | Bạn là dev đã chốt stack React và muốn code sản xuất ngay |
| Lovable | Dựng app full-stack có database | Muốn ra sản phẩm chạy được có backend, không chỉ giao diện |
| Gamma | Chuyên slide và tài liệu, đẹp nhanh | Chỉ cần deck, không cần prototype hay design system từ code |
Điểm chỉ Claude Design có, theo tài liệu chính thức: nhập design system từ chính codebase của bạn và kiểm tra đầu ra theo hệ đó, cùng đường bàn giao liền mạch sang Claude Code. Nếu bạn đã dùng Claude Code để làm sản phẩm, Claude Design gần như là mảnh ghép mặc định. Ngược lại, nếu bạn không viết code và chỉ cần slide đẹp mỗi tuần, Gamma hoặc Canva có thể đủ và nhẹ hơn.
Câu hỏi thường gặp về Claude Design
Claude Design có miễn phí không?
Không có bản miễn phí riêng. Tính năng đi kèm gói Claude Pro (20 USD/tháng, 17 USD/tháng nếu trả năm), Max (từ 100 USD/tháng), Team và Enterprise. Gói Free của Claude không có Claude Design.
Claude Design có tạo được ảnh hay logo không?
Không. Theo Nate Parrott, Claude Design không có khả năng sinh ảnh nên không hợp để thiết kế logo. Bạn cần tạo ảnh ở công cụ khác rồi đưa vào; xem thêm bài về công cụ tạo ảnh AI trên VIGO Media.
Có dùng được trên điện thoại không?
Chưa. Tài liệu Anthropic ghi rõ Claude Design chỉ có trên web và app desktop. Bạn có thể xem link chia sẻ trên điện thoại nhưng không chỉnh sửa.
Xuất ra được những định dạng nào?
PPTX, PDF, HTML đứng độc lập, file ZIP, link chia sẻ trong tổ chức, và gửi thẳng sang Canva, Gamma, Lovable, Replit, Vercel, Wix, Miro, Adobe, Base44 hoặc bàn giao sang Claude Code.
Mã HTML sinh ra có dùng lên production được không?
Dùng làm prototype và landing page đơn giản thì được. Với sản phẩm thật, chính Parrott khuyên chuyển sang Claude Code, và bạn vẫn cần rà bảo mật, khả năng truy cập, hiệu năng như mọi mã do AI viết.
Claude Design khác gì Artifacts trong chat Claude?
Artifacts tạo một khối HTML/ứng dụng nhỏ ngay trong hội thoại. Claude Design là môi trường riêng với canvas nhiều artboard, design system dùng chung cho cả tổ chức, chỉnh sửa trực tiếp, xuất PPTX/PDF và đồng bộ với Claude Code.
Có hỗ trợ tiếng Việt không?
Bạn prompt bằng tiếng Việt bình thường và nội dung trên thiết kế hiển thị tiếng Việt có dấu vì đầu ra là HTML. Nên chỉ định font hỗ trợ tiếng Việt tốt như Inter hoặc Be Vietnam Pro trong prompt để tránh lỗi hiển thị dấu.
Kết luận
Claude Design là mảnh ghép cuối trong hệ công cụ Claude dành cho người làm sản phẩm: Claude Code viết phần mềm, Claude Cowork làm việc trên file và ứng dụng, Claude Skills gói quy trình, còn Claude Design lo phần nhìn thấy được trước khi mọi thứ thành code. Nếu bạn đã trả tiền gói Pro, hãy thử nó cho lần chốt yêu cầu tiếp theo với khách hàng: một prototype bấm được thường nói nhiều hơn năm trang tài liệu.
Đọc tiếp trong cụm Claude của VIGO Media: Claude Code là gì và hướng dẫn A–Z để biến prototype thành phần mềm, Claude Cowork để giao việc trên file và ứng dụng, Claude Skills để đóng gói quy trình thiết kế lặp lại, các gói giá Claude Code để chọn gói phù hợp, và Claude Code cho người không biết code nếu bạn không phải dev. Nếu cần ảnh minh họa cho thiết kế, xem các công cụ tạo ảnh AI.
Nguồn tham khảo
- Anthropic — Introducing Claude Design by Anthropic Labs — thông báo ra mắt 17/04/2026, model Opus 4.7, danh sách đầu ra và cách xuất file.
- Claude Blog — Claude Design now stays on brand for daily work — bản cập nhật 17/06/2026: design system, canvas, /design-sync, số liệu 1 triệu người dùng tuần đầu.
- Claude.com — trang sản phẩm Claude Design — trạng thái beta, gói được dùng, đầu vào và kết nối xuất.
- Claude Help Center — Get started with Claude Design — cách truy cập, ba cách tinh chỉnh, định dạng xuất, hạn mức và giới hạn đã biết.
- Claude Help Center — Set up your design system in Claude Design — nguồn nhập design system và cách kiểm tra.
- Claude Blog — How the product designer who built Claude Design uses it — Nate Parrott chia sẻ quy trình, mẹo prompt và giới hạn (không tạo ảnh).
- Claude.com — Pricing — giá gói Pro, Max, Team, Enterprise và xác nhận Claude Design nằm trong gói.
- TechCrunch — Anthropic launches Claude Design — bối cảnh ra mắt và định vị bổ sung cho Canva.
