Bài viết này giúp bạn hiểu Claude Design là gì và tự tay làm ra một sản phẩm đầu tiên, kể cả khi bạn chưa từng dùng công cụ thiết kế nào và không biết một dòng code. Bạn chỉ cần biết diễn đạt ý mình muốn bằng lời bình thường.
1. Claude Design là gì và làm được gì?
Claude Design là một sản phẩm của Anthropic Labs, cho phép bạn "nói chuyện" với Claude để tạo ra các sản phẩm trực quan như prototype, slide, one-pager, landing page và nhiều thứ khác [1].
Anthropic hướng Claude Design tới đúng những người như trong phòng mình: người có ý tưởng nhưng không có nền tảng thiết kế, cần biến ý tưởng thành thứ nhìn được để chia sẻ và lấy ý kiến [2]. Một vài việc quen thuộc bạn có thể nhờ nó:
- Dựng nhanh bộ slide hoặc pitch deck nội bộ từ một dàn ý thô, rồi xuất ra PPTX.
- Làm một one-pager giới thiệu quy trình, một framework, hay một checklist cho đẹp mắt thay vì bảng chữ khô khan.
- Tạo prototype bấm được cho một luồng tính năng, để trình bày ý tưởng với các bên liên quan trước khi đụng tới code.
- Làm landing page cho một sự kiện, một chương trình đào tạo nội bộ.
Lưu ý quan trọng: Claude Design hiện vẫn ở dạng research preview (bản thử nghiệm) và chỉ có trên các gói trả phí Claude Pro, Max, Team và Enterprise, không có ở bản miễn phí [1]. Với tổ chức dùng gói Enterprise, tính năng này mặc định tắt và cần admin bật trong phần cài đặt [1].
2. Bắt đầu: chọn trước bạn muốn làm gì
Trước khi gõ bất cứ thứ gì, hãy quyết định rõ thứ bạn muốn làm ra là gì: một bộ slide? một prototype bấm được? một one-pager? một landing page? Quyết định này định hình toàn bộ phần còn lại, nên nói càng rõ với Claude ngay từ đầu thì bản đầu tiên càng sát ý.
Cách tiếp cận thì có nhiều, nhưng về cơ bản Claude Design chỉ xoay quanh ba việc đơn giản: bạn trò chuyện với Claude, đưa cho nó tài liệu liên quan, và cho ví dụ để nó dựng thiết kế cho bạn. Nguyên tắc quan trọng nhất: bạn mô tả càng chi tiết thì sản phẩm đầu ra càng đúng ý. Nói rõ bạn muốn gì, cho ai xem, phong cách ra sao, tránh điều gì, thì bản đầu tiên sẽ sát hơn nhiều so với một câu mô tả chung chung.
Ngay tại màn hình chính, bạn gõ mô tả (hoặc đính kèm file) vào ô lớn, chọn có dùng Design system hay không, chọn model, và có thể bấm vào một template dựng sẵn (Slides, Document, Wireframe, UI mockups, Mobile app design, Animation) để bắt đầu nhanh thay vì làm từ con số không.
Màn hình chính: ① ô mô tả hoặc đính kèm file ② bật/chọn Design system ③ chọn Template dựng sẵn ④ chọn Model (đang là Opus 4.8) ⑤ dải template dựng sẵn, chọn để xác định bạn thiết kế cho định dạng nào
Từ nguyên tắc chung đó, có hai cách phổ biến để bắt tay vào. Chọn cách phù hợp với việc bạn đang làm.
Cách 1: Dựng nền tảng trước rồi mới làm (design system)
Cách này hợp khi bạn muốn sản phẩm bám đúng nhận diện thương hiệu và làm đi làm lại nhiều lần vẫn nhất quán. Bạn nạp trước cho Claude bộ "vật liệu" của mình, rồi Claude tự dựng ra một design system (bảng màu, phông chữ, các thành phần giao diện) và áp dụng tự động cho mọi sản phẩm sau đó [1].
Bạn có thể nạp nguyên liệu từ nhiều nguồn [1]:
- Upload tài liệu có sẵn: file Word (DOCX), PowerPoint (PPTX), Excel (XLSX), hình ảnh, bộ nhận diện thương hiệu, nội dung copywriting.
- Trỏ Claude vào codebase (mã nguồn) của sản phẩm: dán link kho GitHub, hoặc kéo cả folder từ máy bạn (nó không upload toàn bộ codebase mà chỉ chép các file cần thiết).
- Upload file Figma (.fig) để Claude học đúng thiết kế của bạn. Điểm hay về bảo mật: file .fig được xử lý ngay trên trình duyệt của bạn, không tải lên server.
- Thêm riêng phông chữ, logo và các asset.
- Dùng web capture tool để "chụp" các thành phần trực tiếp từ website của bạn, để prototype trông giống hệt sản phẩm thật.
Các bước cơ bản:
- Điền tên và mô tả ngắn về công ty (hoặc tên design system), rồi nạp các "vật liệu" ở trên (tất cả đều tùy chọn, có gì nạp nấy).
- Bấm Continue to generation để Claude dựng design system.
- Mô tả sản phẩm cần làm. Claude sẽ tạo bản đầu tiên đã theo đúng màu, phông và phong cách của bạn.
Màn "Set up your design system": ① tên và mô tả công ty ② nạp mã nguồn từ GitHub hoặc từ máy ③ upload file Figma (.fig) ④ thêm phông chữ, logo, asset ⑤ ghi chú thêm (Any other notes). Xong thì bấm "Continue to generation" ở góc trên.
Bản cập nhật tháng 6/2026 còn cho phép nạp một hoặc nhiều design system từ kho GitHub, file thiết kế hoặc file upload thô, và Claude sẽ tự kiểm tra sản phẩm của mình có khớp design system không rồi sửa lại trước khi đưa cho bạn xem [3].
Cách 2: Lao thẳng vào prompt và dùng reference
Nếu bạn chưa có sẵn bộ nhận diện, hoặc chỉ cần làm nhanh một thứ, cứ mô tả thẳng thứ mình muốn là được. Mẹo ở đây là đưa kèm reference, tức là phong cách thiết kế và phông chữ bạn thích, lấy từ một website, một bản thiết kế, một file PPT nào đó. Reference giúp Claude bám đúng "gu" bạn muốn thay vì đoán mò.
Ví dụ cách mô tả (Anthropic đưa ví dụ tương tự): "Làm prototype cho một app thiền định nhẹ nhàng, phông chữ dịu, màu lấy cảm hứng từ thiên nhiên, bố cục gọn gàng" [2]. Bạn cứ diễn đạt tự nhiên như đang nhờ một đồng nghiệp làm hộ.
Các bước cơ bản:
- Gõ mô tả rõ đầu ra (loại sản phẩm) và phong cách mong muốn.
- Đính kèm reference: ảnh chụp một website/thiết kế bạn thích, hoặc nói tên phông chữ, tông màu.
- Claude dựng bản đầu tiên. Xong bước này thì chuyển sang tinh chỉnh.
Mẹo cho người mới: đừng cố viết một câu lệnh hoàn hảo ngay từ đầu. Cứ mô tả đại khái, xem Claude làm ra gì, rồi chỉnh dần ở bước sau.
3. Tinh chỉnh cho tới khi ưng
Có bản đầu tiên rồi, gần như chắc chắn bạn sẽ muốn sửa đôi chỗ. Claude Design cho ba cách chỉnh, dùng xen kẽ thoải mái [1].
- Gõ chat bảo Claude đổi. Cách đơn giản nhất: cứ nói bằng lời như "làm chữ to hơn", "đổi tông màu ấm hơn", "thêm nút chuyển chế độ tối". Claude sửa lại rồi hiện bản mới. Đây là cách hợp nhất khi bạn muốn thay đổi lớn về bố cục hay nội dung.
- Kéo thanh, chỉnh núm (Tweaks). Với những chỉnh nhỏ về khoảng cách, màu sắc, bố cục, Claude tự tạo ra các núm và thanh điều chỉnh (mục Tweaks) để bạn kéo và thấy kết quả thay đổi ngay lập tức [1]. Bạn cũng có thể để lại bình luận (Comment) trực tiếp lên đúng thành phần muốn sửa.
- Tự sửa tay. Mở mục Edit, bạn có các cấp độ chỉnh từ dễ tới sâu: Simple (chỉnh nhanh), Pro (chỉnh chi tiết phông chữ, cỡ chữ, màu, độ đậm, canh lề, khoảng cách, kích thước, padding, margin), và Code (sửa thẳng mã cho ai biết code). Bản cập nhật tháng 6/2026 còn cho kéo, thả, đổi kích thước ngay trên canvas [3]. Hợp khi bạn biết chính xác mình muốn gì và chỉ cần chỉnh một chi tiết nhỏ.
① Toàn bộ panel Edit ở bên trái: chọn một thành phần trên canvas rồi chỉnh phông chữ, cỡ, màu, độ đậm, kích thước, padding, margin... Trên cùng là các cấp độ Simple / Pro / Code / Tweaks, từ chỉnh nhanh tới sửa thẳng mã.
Một điểm hay: sau khi chỉnh một chỗ, bạn có thể nhờ Claude áp dụng thay đổi đó cho toàn bộ thiết kế thay vì phải sửa từng trang một [1].
4. Khi đã hài lòng: nhiều cách xuất file
Ưng rồi thì tới lúc lấy sản phẩm ra dùng. Mở menu Share ở góc trên phải, bạn sẽ thấy nhiều lựa chọn [1]:
- PowerPoint (PPTX) để mở và trình bày, chữ và hình vẫn chỉnh được.
- PDF để gửi hoặc in (lấy ngay, hoặc để Claude sắp xếp lại cho gọn).
- Project HTML dạng .zip hoặc file HTML độc lập. Đây chính là cách lấy giao diện website/app: tải file .zip về là có sẵn bộ giao diện để đem đi dùng hoặc dựng tiếp.
- Gửi sang Canva để cả team cùng chỉnh tiếp.
- Chia sẻ bằng đường link nội bộ trong tổ chức, hoặc Publish as artifact để biến thành một artifact công khai xem được qua link.
Nếu bạn muốn biến thiết kế thành sản phẩm chạy thật, chọn Claude Code: Claude gói toàn bộ thành một gói bàn giao rồi chuyển thẳng sang Claude Code để dựng thành sản phẩm hoàn chỉnh [1]. Bản cập nhật tháng 6/2026 còn mở thêm nhiều điểm đến khác như Vercel, Wix, Lovable, Miro, Gamma, Replit [3], nên đường từ ý tưởng tới sản phẩm thật ngày càng ngắn.
Menu Share: ① khu chia sẻ (Who can access, Copy link, Publish as artifact) ② toàn bộ khu Export gồm Claude Code (dựng thành code), PDF, Project HTML dạng .zip hoặc standalone, PowerPoint, và "More formats and apps".
5. Ba điều cần nhớ
- Cần gói trả phí và vẫn là bản preview. Claude Design chỉ có trên gói Pro, Max, Team, Enterprise và đang trong giai đoạn thử nghiệm, nên tính năng có thể còn thay đổi [1]. Xác nhận lại gói tài khoản của team trước khi trông cậy vào nó cho việc gấp.
- Không dán dữ liệu nhạy cảm. Đừng đưa thông tin nội bộ mật, tên dự án, hay dữ liệu khách hàng của VNPAY vào khi chưa xác nhận công cụ phù hợp cho loại dữ liệu đó.
- Cứ bắt đầu nhỏ. Mở lên và giao một việc thật vừa sức: dựng một one-pager giới thiệu quy trình, hoặc biến một dàn ý thô thành vài slide. Làm một lần là quen ngay.
Tài liệu tham khảo
[1] Anthropic — "Introducing Claude Design by Anthropic Labs" (17/4/2026). https://www.anthropic.com/news/claude-design-anthropic-labs
[2] TechCrunch — "Anthropic launches Claude Design, a new product for creating quick visuals" (17/4/2026). https://techcrunch.com/2026/04/17/anthropic-launches-claude-design-a-new-product-for-creating-quick-visuals/
[3] VentureBeat — "Anthropic ships major Claude Design overhaul with design system imports, code round-trips..." (17/6/2026). https://venturebeat.com/technology/anthropic-ships-major-claude-design-overhaul-with-design-system-imports-code-round-trips-and-a-fix-for-its-token-burning-problem
[4] TechRepublic — "Anthropic Adds Brand Controls, Code Sync to Claude Design" (18/6/2026). https://www.techrepublic.com/article/news-anthropic-claude-design-overhaul-enterprise-teams/
Số liệu và tính năng được tổng hợp, kiểm chứng vào tháng 7/2026. Vì Claude Design đang ở bản research preview và cập nhật nhanh, vui lòng đối chiếu với trang chính thức khi cần thông tin mới nhất.