Phan Đông GiangPhan Đông Giang
Tất cả bài học
Cấp Độ 2Trung cấp9 phút

Làm Chủ Giao Diện Claude Mới

Cách tận dụng giao diện mới của Claude hiệu quả hơn.

Claude lại tiếp tục khiến mọi người bất ngờ. Anthropic vừa ra mắt một phiên bản Claude mới, và lần này nó không phải để viết code hay trò chuyện - nó dùng để thiết kế. Sản phẩm này đạt 55 triệu lượt xem chỉ trong 2 ngày, và ngay sau tin tức đó, Figma - công cụ thiết kế hàng đầu hiện nay - mất tới 730 triệu đô la giá trị vốn hóa.

Sản phẩm mới này có tên Claude Design, sống trên một website riêng là claude.ai/design, chạy trên Opus 4.7 - mô hình thị giác (vision model) tốt nhất mà Anthropic từng phát hành. Nó còn có sẵn nút Send to Canva để đẩy thẳng thiết kế sang Canva, công cụ thiết kế miễn phí mà ai cũng dùng được.

Giao diện Claude Design với nút Send to Canva để xuất thiết kế sang Canva

Mình đã lạm dụng Claude Design từ ngày nó ra mắt, và giờ thì mình hiểu vì sao Figma lại mất giá trị nhanh đến vậy - đây thực sự là một cuộc cách mạng nhỏ.

Bài viết này mình viết với 3 mục tiêu:

  • những bước đơn giản nhất để bạn thử ngay
  • các prompt chính xác khiến bạn phải thốt lên khoan, mình thực sự thiết kế được cái này sao
  • một quy trình nâng cao mà mình tự dùng cho công việc của mình, và bạn cũng nên áp dụng theo

Nếu có thời gian, hãy dành 30 phút cuối tuần này để tự tay thử Claude Design - bạn sẽ thấy khác biệt ngay.

Cách truy cập Claude Design

Claude Design là một sản phẩm hoàn toàn tách biệt với phần còn lại của hệ sinh thái Claude - nó không nằm trong trình duyệt hay ứng dụng desktop của Claude, mà có URL riêng: claude.ai/design.

Claude Cowork vẫn đóng vai trò trong quy trình làm việc của mình, nhưng đó là chuyện ở phần sau.

  • Nếu bạn dùng gói Pro hoặc Max: chỉ cần vào claude.ai/design và đăng nhập - bạn bắt buộc phải có một trong hai gói trả phí này.
  • Nếu bạn dùng gói Team hoặc Enterprise: Claude Design mặc định đang tắt, quản trị viên của tổ chức phải vào Organization settings, chọn Capabilities, rồi vào Anthropic Labs để bật tính năng này lên.
Bật tính năng Claude Design trong mục Anthropic Labs của phần cài đặt tổ chức

Đây vẫn là bản research preview nên được triển khai dần dần - nếu vào claude.ai/design mà bị chuyển hướng về trang chủ, cứ thử lại sau vài ngày. Tính năng này dùng chung hạn mức với gói bạn đang trả phí, và nếu dùng hết thì vẫn có thể mua thêm dung lượng sử dụng. Nhưng cần lưu ý: nó ngốn token cực nhanh.

Claude Design tiêu tốn token nhanh hơn hẳn so với việc chat thông thường, nên hãy theo dõi sát hạn mức sử dụng của bạn để tránh bị tính thêm phí ngoài ý muốn.

Ba bài test nhanh đầu tiên (mỗi bài dưới 2 phút)

Bài test đầu tiên: tạo một website ấn tượng. Mình vẫn chưa hết bất ngờ với website mà mình tạo ra chỉ bằng một prompt vỏn vẹn 2 dòng - không viết thêm bất kỳ nội dung nào khác.

Cách làm: vào tab đầu tiên Wireframe, chọn High fidelity, rồi dán prompt theo mẫu gồm: số tiền gọi vốn, nhà đầu tư mục tiêu, tên sản phẩm và mô tả ngắn, đối tượng mục tiêu, và tông giọng mong muốn (ví dụ kết hợp phong cách của vài website hoặc hệ sinh thái khác nhau).

Ví dụ prompt mình dùng: một landing page để gọi 100 triệu đô từ các quỹ đầu tư mạo hiểm Israel cho dự án Trung tâm dữ liệu ngầm dưới biển của chính phủ - hạ tầng trung tâm dữ liệu chủ quyền, chỉ dành riêng cho quốc gia, phục vụ khối lượng công việc AI và robot; đối tượng là các quỹ đầu tư mạo hiểm Israel nghiêm túc và nhà đầu tư công nghệ chính phủ; tông giọng cao cấp, chiến lược, hơi tương lai nhưng vẫn đáng tin và an toàn - như kết hợp giữa sự tinh tế của Stripe, sự nghiêm túc về quốc phòng của Anduril, và tinh thần thực dụng của startup Israel.

Kết quả ra một website hoàn chỉnh chỉ sau một lần chạy - mình bấm Present để xem toàn bộ, và còn phát hiện ra nút Comment cho phép chọn đúng phần muốn chỉnh sửa thay vì phải viết lại cả prompt.

Kết quả landing page được Claude Design tạo ra chỉ từ một prompt duy nhất

Bài test thứ hai: làm một bộ slide thuyết trình. Vẫn với ý tưởng trung tâm dữ liệu ngầm dưới biển, lần này mình chọn Slide deck ngay từ trang chủ, rồi dán prompt yêu cầu làm một pitch deck cho đội sales, giới thiệu các trung tâm dữ liệu GPU ngầm dưới biển chỉ dành cho các công ty Israel để đảm bảo chủ quyền hoàn toàn.

Claude sẽ hỏi lại vài câu hỏi làm rõ, mình trả lời rồi bấm Continue ở góc dưới bên phải. Kết quả là một file PDF khá ấn tượng cho một lần chạy duy nhất - nó vừa tự tìm kiếm thông tin vừa dàn trang đúng phong cách.

Dù vậy, mình vẫn thích Gamma hơn vì sự đa dạng và đơn giản của nó - giá mà hai công cụ này có thể kết hợp với nhau trong tương lai.

Bản pitch deck dạng PDF được Claude Design tạo ra từ một prompt duy nhất

Bài test thứ ba: tạo một video hoạt hình. Bấm vào From template, viết một prompt kể một câu chuyện có hình ảnh, hoặc thậm chí bắt đầu từ một bản phác thảo tay (dù mình vẽ rất tệ).

Ví dụ prompt mình dùng, nhờ chính Claude viết giúp: tạo video hoạt hình 45 giây, tỉ lệ 16:9, giải thích việc Israel xây dựng trung tâm dữ liệu ngầm dưới biển Địa Trung Hải để làm mát cho làn sóng điện toán AI tiếp theo.

Cấu trúc chi tiết:

  1. 1.0-5 giây mở đầu với tiêu đề Cuộc đua điện toán AI đang tiến xuống đáy biển cùng hiệu ứng sóng nước
  2. 2.5-15 giây nêu vấn đề với số liệu các trung tâm dữ liệu AI sẽ tiêu thụ 945 TWh vào năm 2030 và hình ảnh các trung tâm dữ liệu trên đất liền nóng dần lên qua lớp phủ nhiệt
  3. 3.15-30 giây trình bày giải pháp bằng mặt cắt hoạt hình của một khoang máy chủ kín đang chìm xuống ngoài khơi Tel Aviv, nước biển chảy quanh làm mát thụ động, cá bơi qua, bong bóng nổi lên
  4. 4.30-40 giây lần lượt hiện 3 thẻ số liệu: giảm 40% chi phí làm mát, không dùng nước ngọt, gần người dùng châu Âu hơn 8 lần
  5. 5.40-45 giây là khung kết với dòng chữ Cuộc đua trung tâm dữ liệu ngầm dưới biển của Israel bắt đầu từ 2026 và khoảng trống cho logo.

Phong cách hình ảnh: công nghệ tối giản, minh họa nét mảnh, bảng màu xanh Địa Trung Hải, be cát và trắng tinh, chữ chuyển động cho mỗi số liệu, camera lia mượt không cắt cảnh đột ngột, không dùng stock footage, không emoji, tiêu đề dùng font serif còn nội dung dùng font sans-serif.

Kết quả: một video hoạt hình 45 giây hoàn chỉnh ra ngay lập tức.

Video hoạt hình 45 giây được Claude Design tạo ra tự động từ một prompt

Mẹo hay: biến bài viết thành video để có slide đẹp hơn

Cách này hơi kỳ lạ nhưng thực sự hiệu quả. Bước 1: copy toàn bộ một bài blog nào đó, không phải của mình. Ở đây mình dùng một tính năng gần như không ai để ý tới: Claude Research - chỉ cần bấm dấu cộng trong khung chat để tìm Research. Sau khoảng 13 phút, khá lâu, mình có một bản báo cáo chi tiết có thể tải về dưới dạng file markdown.

Kích hoạt tính năng Claude Research bằng cách bấm dấu cộng trong khung chat

Bước 2: đưa file markdown đó vào Claude Design kèm yêu cầu làm một video hoạt hình 30 giây tóm tắt lại bài blog cho người xem lần đầu. Kết quả là một video hoạt hình thực sự - có chuyển động, hiệu ứng chuyển cảnh, nhịp điệu rõ ràng, dài khoảng 55 giây.

Sau đó, vẫn trong cùng cuộc trò chuyện, mình yêu cầu tiếp: chuyển video đó thành một bộ slide pitch deck - và nó biến ngay thành một bộ slide thuyết trình. Điều thú vị là bộ slide ra đời theo cách này lại đẹp hơn hẳn so với khi yêu cầu làm slide ngay từ đầu, vì bước làm video buộc Claude phải tư duy hình ảnh trước khi chốt vào các khung hình tĩnh.

Slide thuyết trình được Claude Design chuyển đổi từ một video hoạt hình có sẵn

Quy trình nâng cao: từ 0 đến 1 với Cowork và Claude Design

Đây là quy trình mình áp dụng cho các dự án của khách hàng. Nó bắt đầu từ Cowork, vì Claude Design chỉ tốt bằng đúng hệ thống thiết kế mà bạn cung cấp cho nó - nên việc đầu tiên là phải chuẩn bị tốt phần đầu vào.

  1. 1.Bước 1, trích xuất hệ thống thương hiệu bằng Cowork: gom toàn bộ tài sản thương hiệu bạn có vào một thư mục, gồm logo, các slide cũ, ảnh sản phẩm, landing page, file PDF hướng dẫn thương hiệu nếu có. Mở Cowork, chọn thư mục đó, rồi yêu cầu Cowork phân tích toàn bộ thư mục và viết ra một bản mô tả đầy đủ về hệ thống thiết kế: font chữ, màu sắc, phong cách hình ảnh, cách dùng các thành phần giao diện, tông giọng, quy tắc bố cục, đồng thời chỉ ra những gì còn thiếu, rồi lưu lại thành file DESIGN.md. Cowork sẽ đọc toàn bộ file và xuất ra một file DESIGN.md sạch sẽ - nói đơn giản, đó chính là bộ hướng dẫn thương hiệu.
  2. 2.Bước 2, tải DESIGN.md lên Claude Design: vào claude.ai/design, đưa file DESIGN.md vào làm ngữ cảnh. Từ đó, mọi prompt sau này sẽ tự động áp dụng đúng màu sắc và font chữ, bạn không cần lặp lại nữa. Nếu bạn đã có sẵn design system trong code, có thể link thẳng codebase vào, hiệu quả tương tự.
  3. 3.Bước 3, Generate - tạo thiết kế: quay lại claude.ai/design, tải DESIGN.md lên rồi thêm prompt cùng định dạng mong muốn. Một prompt tốt luôn có 4 yếu tố cố định: mục tiêu, bố cục, nội dung, và ràng buộc. Ví dụ: xây một trang bảng giá cho sản phẩm với 3 gói, có nút chuyển đổi giữa trả theo năm và theo tháng, nút gọi hành động dính cố định trên di động, thiết kế ưu tiên di động, dùng đúng component nút chính của thương hiệu, và giữ đúng tông giọng của trang chủ hiện tại. Theo kinh nghiệm của mình, khi đã có design system và prompt đủ cụ thể, Claude Design tỏa sáng thực sự; ngược lại nó sẽ cho ra cùng một kiểu thiết kế ở mọi nơi. Kết quả không chỉ là những slide đẹp, mà mỗi slide còn kèm sẵn ghi chú thuyết trình.
  4. 4.Bước 4, Iterate - chỉnh sửa: với thay đổi về cấu trúc, cứ yêu cầu ngay trong khung chat, ví dụ cho xem 3 phương án bố cục khác nhau, rồi bấm Tweaks để có ngay nhiều phiên bản chỉ trong vài giây. Với thay đổi chi tiết ở mức pixel, làm trực tiếp trên canvas: bấm nút edit rồi chọn đúng phần muốn đổi, phần đó sẽ được tô sáng màu xanh lá. Trước khi thử một hướng đi mạo hiểm, hãy lưu lại một nhánh riêng để giữ nguyên bản gốc rồi mới thử cách tiếp cận hoàn toàn khác.
  5. 5.Bước 5, Validate - kiểm chứng: trước khi xuất file, chạy 3 prompt kiểm tra sau: rà soát độ tương phản và khả năng tiếp cận, liệt kê các vi phạm chuẩn WCAG 2.1 AA kèm cách sửa cụ thể; tạo các phiên bản cho desktop, tablet và di động; và đề xuất 2 phương án A/B test khác nhau cho phần đầu trang, mỗi phương án theo một góc tiếp cận riêng.
  6. 6.Bước 6, Export - xuất file: bấm Export ở góc trên bên phải. Các lựa chọn gồm Send to Canva, PPTX, PDF, HTML độc lập, hoặc một gói dành cho Claude Code. Lựa chọn yêu thích của mình đáng lẽ là Send to Canva, nhưng đáng tiếc là tính năng này hiện chưa hoạt động.
Thư mục chứa toàn bộ tài sản thương hiệu được đưa vào Cowork để phân tích
Slide thiết kế kèm ghi chú thuyết trình do Claude Design tạo cho từng trang
Thông báo lỗi khi thử dùng tính năng Send to Canva trong Claude Design

Nhìn chung, từ một thư mục trống đến một thiết kế có thể ship được, mình mất khoảng 1 tiếng cho một trang đơn, và 2-3 tiếng cho cả một website nhiều tab, tùy vào việc bạn khó tính đến mức nào với chi tiết. Trước khi có Claude Design, cùng khối lượng công việc đó từng tốn của mình ít nhất trọn một ngày.

Sao chép bất kỳ phong cách thiết kế nào

Phần này khiến mình bất ngờ nhất. Có một website miễn phí tên là getdesign.md, mình không có liên kết gì với họ, không phải trả tiền, chỉ dùng miễn phí, cho phép bạn tải về file DESIGN.md, tức bộ hướng dẫn thương hiệu dành cho Claude, của hầu hết các thương hiệu lớn mà bạn biết.

Trang web getdesign.md dùng để tải file DESIGN.md của các thương hiệu nổi tiếng

Ví dụ, bạn thích phong cách thương hiệu của Mastercard? Chỉ cần tải file đó về, đưa cho Claude Design kèm yêu cầu thiết kế giống Mastercard - kết quả ra ngay 3 khung thiết kế như một website hoàn chỉnh. Mình thử lại với đúng prompt đó nhưng đổi sang file của Airbnb, rồi của Ferrari - mỗi lần kết quả đều bắt trúng tinh thần thị giác của từng thương hiệu gần như ngay lập tức.

Ba khung thiết kế theo phong cách thương hiệu Mastercard do Claude Design tạo ra
Thiết kế theo phong cách thương hiệu Ferrari do Claude Design tạo ra từ cùng một prompt

Gu thẩm mỹ - thứ mà AI vẫn chưa thể thay thế

Tương lai đang tới rất nhanh. Claude Design có thể dựng 10 bản dashboard trong 10 phút, tự động áp dụng design system, đề xuất 3 phương án bố cục, xuất ra 5 định dạng khác nhau. Bạn tải lên bất kỳ phong cách nào, nó sao chép lại gần như tức thì.

Nhưng có một thứ nó không thể làm: nói cho bạn biết trong 10 bản dashboard đó, bản nào nên được dùng cho đúng người dùng của bạn, vào đúng thời điểm này. Đó chính là gu thẩm mỹ.

Gu thẩm mỹ là khả năng nói không với 9 phiên bản và nói có với 1 phiên bản duy nhất. Đó là công tắc ghi đè - là lúc bạn nhìn vào một lời nhận xét và nói Claude sai ở chỗ này, vì người dùng của mình cần sự tối giản, hoặc ngược lại. Phần đó vẫn luôn là bạn.

Đúng là Claude Design rất đẹp, và Claude Cowork viết nhanh, chính xác đến mức đáng nể - cho đến khi ai cũng thiết kế và viết theo đúng một kiểu giống nhau. Nghĩ mà xem: giờ đây bạn được trả tiền để làm tốt hơn, để đi trước mức mặc định của AI.

Đó là lý do mình luôn nói: hãy làm chủ AI trước khi nó làm chủ bạn. Bạn phải giỏi hơn mức trung bình, mức mặc định của AI. Phải luôn đi trước.

Nếu bạn là designer và đang cảm thấy lo lắng vì sợ bị thay thế, thì bạn đang hiểu sai thời điểm này. Những designer có gu thẩm mỹ tốt sắp bước vào thập kỷ rực rỡ nhất trong sự nghiệp của họ. Công cụ vừa mới trở nên rẻ, còn gu thẩm mỹ thì vừa trở nên đắt giá hơn bao giờ hết.

Lời kết

Claude không trả tiền cho mình để viết bài này, và mình cũng sẽ không nhận bất kỳ khoản tài trợ nào từ các phòng lab AI trong tương lai. Mình đơn giản là không thể làm vậy - mình cần giữ sự trung lập nhất có thể, nói đúng những gì mình nghĩ dựa trên trải nghiệm thực tế khi tự mình thử nghiệm công cụ.

Và sự thật là, Claude Design còn lâu mới hoàn hảo: nó tiêu tốn quá nhiều token, tức là tiền, vẫn còn khá nhiều lỗi lặt vặt ở đủ mọi chỗ, và bạn thiếu quyền kiểm soát chi tiết. Nhưng mình có thể thấy rõ cách mọi thứ đang tiến triển: Claude Code từng thay đổi cách chúng ta viết code, vài tháng sau Claude Cowork nhắm tới dân văn phòng, và giờ đây Claude Design đang nhắm tới các designer.

Vậy nên không, mình không được trả tiền để viết bài này hay bài tiếp theo. Nhưng mình muốn chia sẻ cách công việc của mình đang thay đổi rất nhanh nhờ AI. Trong lúc mình cố gắng bắt kịp, mình cũng muốn bạn bắt kịp cùng - để cả hai cùng tiến nhanh như nhau.

Phan Đông Giang biên soạn và tổng hợp.