Hướng Dẫn Claude Design

Xin lỗi, nhưng Claude lại làm điều đó rồi.

Họ vừa ra mắt thêm một Claude nữa:

55 triệu lượt xem trong 2 ngày. Figma mất 730 triệu đô la định giá ngay sau tin này.

Cái này thiết kế được.

Nó nằm trên một trang web khác: claude.ai/design. Chạy trên Opus 4.7 (model vision tốt nhất họ từng ra mắt). Và đi kèm nút "Gửi sang Canva":

Canva là công cụ thiết kế miễn phí, dành cho mọi người.

Tôi đã dùng nó ngày đêm kể từ khi ra mắt. Và tôi hiểu tại sao Figma (công cụ thiết kế hàng đầu) mất 730 triệu đô la định giá ngay sau tin này.

Claude Design là một cuộc cách mạng (nhỏ) khác.

Hướng dẫn này có 3 mục tiêu: (1) các bước đơn giản nhất để thử, (2) các prompt chính xác sẽ khiến bạn nói "chờ đã, tôi thực sự có thể thiết kế cái này?", (3) một quy trình nâng cao tôi đã làm cho mình, mà bạn nên sao chép.

Hai điều trước khi bắt đầu:

Lưu hướng dẫn này và dành 30 phút cuối tuần để thử Claude Design.

Gửi nó cho bất kỳ designer, founder, hoặc marketer nào vẫn nghĩ AI không thể thiết kế.

1Cách truy cập Claude Design.

Claude Design là một sản phẩm riêng biệt với mọi thứ khác.

Nó không nằm trong ứng dụng trình duyệt hay desktop của Claude.

→ Nó có URL riêng: claude.ai/design.

Tuy nhiên, Cowork vẫn đóng vai trò trong quy trình của tôi. Thêm về điều đó ở phần 4.

✦ Nếu bạn dùng gói Pro hoặc Max:

Vào claude.ai/design. Đăng nhập.

Bạn cần một trong các gói trả phí.

✦ Nếu bạn dùng gói Team hoặc Enterprise:

Claude Design mặc định bị tắt. Admin của bạn phải bật nó lên:

→ Cài đặt tổ chức → Tính năng → Anthropic Labs → bật lên.

Ảnh chụp màn hình phần cài đặt tổ chức để bật Anthropic Labs cho Claude Design.

Đây là bản xem trước nghiên cứu = triển khai dần dần. Nếu claude.ai/design chuyển hướng bạn về trang chủ, hãy thử lại sau vài ngày.

Nó dùng giới hạn gói hiện tại của bạn. Có thể mua thêm nếu hết hạn mức. Nó tiêu thụ token rất nhanh. Hãy thận trọng.

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

Các prompt đầu tiên của tôi để test nhanh.

Test 1. Tạo một website ấn tượng.

Tôi vẫn còn kinh ngạc với trang web tôi tạo ra chỉ với… một prompt 2 dòng.

Đây là kết quả một lần tạo. Tôi không viết một chữ nào trên trang web này.

Đây là cách tôi làm:

Vào tab đầu tiên, "Wireframe." Chọn "High fidelity".

Dán prompt này:

Tạo trang landing page high-fidelity được thiết kế để gọi vốn $[SỐ TIỀN] từ [ĐỐI TƯỢNG NHÀ ĐẦU TƯ] cho "[TÊN SẢN PHẨM]" - [mô tả ngắn về sản phẩm].
Đối tượng mục tiêu: [Mô tả đối tượng của bạn]. Tone cần cảm thấy [người truy cập web nên cảm thấy gì] - hãy nghĩ đến sự kết hợp của [website] + [website] + [hệ sinh thái].

Đây là prompt của tôi làm ví dụ:

Tạo trang landing page high-fidelity được thiết kế để gọi vốn 100 triệu đô từ các quỹ đầu tư mạo hiểm Israel cho "Trung tâm Dữ liệu Dưới nước Quốc gia" — hạ tầng trung tâm dữ liệu dưới nước có chủ quyền, chỉ dành cho các quốc gia, được xây dựng riêng cho khối lượng công việc AI và robot.
Đối tượng mục tiêu: Các quỹ đầu tư mạo hiểm Israel nghiêm túc và nhà đầu tư công nghệ chính phủ. Tone cần cảm thấy cao cấp, chiến lược, hơi tương lai nhưng rất đáng tin cậy và an toàn — hãy nghĩ đến sự kết hợp của sự tinh tế của Stripe + sự nghiêm túc công nghệ quốc phòng của Anduril + tính thực dụng startup Israel.

1. Prototype + đặt tên 2. High fidelity 3. Tạo.

Prompt ở bên trái. Kết quả ở bên phải. Nhấp vào Present.

Tôi không thể tin tôi vừa tạo ra một website hoàn toàn tuyệt vời. Một lần tạo.

Bạn có thể nhấp vào Comment và chọn những gì bạn muốn chỉnh sửa…

Test 2: Hãy tạo bộ slide thuyết trình.

Tôi rất thích ý tưởng trung tâm dữ liệu dưới nước trước đó.

Vậy hãy tạo bộ slide thuyết trình, dùng làm pitch deck cho sales:

Lần này, chọn "Slide deck".

Dán prompt này (nếu bạn muốn ví dụ của tôi):

Tạo pitch deck cho đội sales của tôi. Công ty chúng tôi có trung tâm GPU dưới nước, chỉ dành cho các công ty Israel, để đảm bảo chủ quyền hoàn toàn.

Trả lời các câu hỏi từ Claude:

Tôi đã trả lời các câu hỏi và nhấn Continue (góc dưới bên phải).

Đây là kết quả (dạng PDF). Ấn tượng cho một lần tạo.

Một lần nữa, nó thực hiện cả tìm kiếm và slide (với phong cách đúng).

Tôi vẫn thích Gamma hơn vì sự đa dạng và đơn giản của nó. Nhưng tôi muốn có sự kết hợp của cả hai. Có thể đây nằm trong lộ trình tương lai của hai sản phẩm?

Test 3: Tạo video hoạt hình.

Lần này nhấp vào "From template".

Xin lỗi nếu đây là cùng một ví dụ… Tôi thấy nó thú vị :)

Viết một prompt nhanh có câu chuyện hình ảnh để chia sẻ. Bạn cũng có thể bắt đầu với một phác thảo (nhưng tôi thực sự là người tệ nhất khi vẽ bất cứ thứ gì).

prompt ở bên trái hoặc phác thảo ở bên phải, bạn quyết định

Đây là prompt của tôi (tôi đã dùng Claude để viết, đúng vậy):

Tạo video hoạt hình 45 giây giải thích cách Israel đang xây dựng các trung tâm dữ liệu dưới nước ngoài khơi bờ biển Địa Trung Hải để làm mát làn sóng điện toán AI tiếp theo. Tỷ lệ 16:9.
Cấu trúc:
- 0-5 giây: Mở đầu lạnh. Thẻ tiêu đề "Cuộc đua điện toán AI đang đi xuống dưới nước." Hình nền sóng chuyển động.
- 5-15 giây: Vấn đề. Hiển thị số liệu hoạt hình: "Trung tâm dữ liệu AI sẽ tiêu thụ 945 TWh vào năm 2030." Hiển thị hàng trung tâm dữ liệu trên đất liền sáng lên với lớp phủ nhiệt khi nhiệt độ tăng.
- 15-30 giây: Giải pháp. Mặt cắt hoạt hình của viên nang máy chủ kín hạ xuống ngoài khơi Tel Aviv. Nước biển chảy xung quanh để làm mát tự nhiên. Cá nhỏ bơi qua. Bong bóng nổi lên.
- 30-40 giây: Ba thẻ thống kê xuất hiện lần lượt: "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."
- 40-45 giây: Thẻ kết thúc. "Cuộc đua trung tâm dữ liệu dưới nước của Israel. Bắt đầu 2026." Để chỗ cho logo góc dưới bên phải.
Phong cách hình ảnh: công nghệ sạch, hình minh họa nét mảnh, bảng màu xanh Địa Trung Hải + be cát + trắng thuần. Kiểu chữ động học cho mỗi số liệu. Lia camera mượt mà, không cắt cứng. Không có footage kho. Không có emoji. Chữ serif cho tiêu đề, sans-serif cho nội dung.

Nhận được một video hoạt hình đầy đủ:

Bạn nhận được video hoạt hình 45 giây ngay lập tức.

3Mẹo video (để có slide tốt hơn).

Cái này lạ. Và nó hiệu quả.

1 - Sao chép toàn bộ blog của ai đó (không phải của tôi, cảm ơn).

Ví dụ, ở đây, tôi dùng một tính năng không ai khác đang dùng: Claude Research.

Sau 13 phút (!!!), tôi có một báo cáo tuyệt vời có thể tải xuống dạng markdown.

2 - Dán vào Claude Design.

Tải lên file markdown của bạn với prompt này:

Tạo video hoạt hình 30 giây tóm tắt blog này cho người xem lần đầu.

Bạn nhận được một video hoạt hình thực sự. Chuyển động, transitions, nhịp điệu.

Sau đó, trong cùng cuộc trò chuyện, tiếp tục với:

Bây giờ hãy chuyển đổi video đó thành slide pitch deck.

Các slide ra đẹp hơn so với khi bạn yêu cầu trực tiếp.

Vì bước video buộc bạn phải suy nghĩ trực quan trước khi chốt các frame tĩnh.

4Quy trình nâng cao: Từ 0 đến 1

(Cowork + Claude Design)

Đây là quy trình tôi dùng cho các dự án khách hàng.

Bắt đầu trong Cowork. Và vì Claude Design chỉ tốt bằng design system bạn cung cấp cho nó, bạn cần làm việc với đầu vào của nó trước.

Bước 1: Trích xuất hệ thống thương hiệu với Cowork.

Bỏ mọi tài sản thương hiệu bạn có vào một thư mục. Logo. Slide cũ. Ảnh. Landing page. PDF thương hiệu nếu có. Ảnh chụp màn hình sản phẩm.

Mở Cowork. Chọn thư mục.

trong Cowork, tôi đã liên kết thương hiệu + tài sản PepsiCo mới với prompt này

Rồi dán:

Phân tích thư mục này và tạo tài liệu design system đầy đủ. Phông chữ, màu sắc, phong cách đồ họa, mẫu thành phần, tone giọng, quy ước bố cục. Đánh dấu những gì còn thiếu. Lưu thành DESIGN.md trong thư mục của tôi.

Cowork đọc từng file. Xuất ra DESIGN.md sạch sẽ.

DESIGN.md chỉ là cách nói sang trọng của "hướng dẫn & chỉ dẫn thương hiệu".

Bước 2: Tải DESIGN.md vào Claude Design.

Vào claude.ai/design.

Thả DESIGN.md của bạn vào làm context.

Mọi prompt tiếp theo sẽ tự động áp dụng nó.

Bạn không cần chỉ định lại màu sắc hay phông chữ nữa.

(Nếu bạn đã có design system trong code, link trực tiếp codebase. Hiệu quả tương tự.)

không cần tải về, nó đã có trong thư mục của bạn

Bước 3: Tạo.

Quay lại claude.ai/design và tải lên file DESIGN.md của bạn.

Sau đó thêm prompt + format của bạn.

Mọi prompt tốt đều có 4 yếu tố cố định: mục tiêu, bố cục, nội dung, ràng buộc.

Xây dựng trang pricing cho [sản phẩm]. 3 tầng giá, toggle năm/tháng, CTA cố định trên mobile. Mobile-first responsive. Dùng thành phần Primary Button của chúng tôi. Khớp với tone của trang chủ hiện tại.

Trong các bài test của tôi, khi design system được tải lên và prompt cụ thể, Claude Design tỏa sáng. Ngược lại, bạn sẽ thấy cùng một thiết kế ở khắp nơi.

Tôi đã thêm cả DESIGN.md cho PepsiCo và bản tóm tắt sản phẩm, cùng với tiêu chí thành công. Đó là những gì một prompt tốt trông như thế nào.

Một lần nữa, Claude hỏi tôi các câu hỏi, và tôi đã trả lời.

Không chỉ các slide tốt, mà tôi còn có ghi chú diễn giả… trên mỗi slide!

Bước 4: Cách lặp lại.

Thay đổi cấu trúc → vào chat:

Cho tôi xem 3 bố cục thay thế.

Sau đó bạn cần nhấp vào "Tweaks".

Và nó tạo ra nhiều phiên bản… trong vài giây:

Thay đổi cấp độ pixel → vào canvas:

→ Nhấp nút chỉnh sửa. Chọn chính xác những gì bạn muốn thay đổi.

Nó tô sáng màu xanh chính xác những gì bạn muốn thay đổi.

Trước thử nghiệm rủi ro → lưu một nhánh:

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.

Bước 5: Kiểm tra.

Trước khi xuất, chạy 3 prompt này:

Kiểm tra contrast và khả năng tiếp cận. Liệt kê mọi vi phạm WCAG 2.1 AA với các cách sửa chính xác.

Tạo phiên bản desktop, tablet và mobile.

Đề xuất 2 biến thể A/B test của phần hero, mỗi biến thể với một góc độ khác nhau.

Bước 6: Xuất file.

Nhấp Export (góc trên bên phải). Các tùy chọn: Gửi sang Canva, PPTX, PDF, HTML độc lập, hoặc gói cho Claude Code.

Tùy chọn yêu thích của tôi nên là "Gửi sang Canva"… nhưng nó không hoạt động:

Gửi sang Canva không hoạt động… thật đáng tiếc.

Vậy tôi có thể đi từ một thư mục trống đến một thiết kế có thể giao trong… khoảng 1 giờ cho một trang đơn. 2-3 giờ cho một website đầy đủ với nhiều tab. Tùy thuộc vào mức độ khắt khe của bạn với chi tiết.

Trước Claude Design? Công việc tương tự có thể mất ít nhất một ngày đầy đủ.

Và đó là không dùng mẹo yêu thích của tôi ở phần tiếp theo:

5Sao chép bất kỳ thiết kế nào.

Phần này khiến tôi ấn tượng nhất.

Có một website miễn phí gọi là getdesign.md:

(Tôi không liên kết với họ, đừng trả tiền cho họ, tôi dùng miễn phí).

Và như bạn có thể đoán… bạn có thể sao chép file DESIGN.md (hướng dẫn thương hiệu cho Claude) từ hầu hết các thương hiệu bạn biết.

Ví dụ, bạn thích thương hiệu Mastercard?

Bạn có thể tải về → Đưa cho Claude Design → Thiết kế như Mastercard

Nhấp vào đây để tải DESIGN.md cho Claude.

Quay lại Claude Design và thêm DESIGN.md (từ Mastercard ở đây) + prompt của bạn (từ sản phẩm của bạn, ví dụ).

Bây giờ hãy thử, nhưng theo phong cách Airbnb:

Cùng một prompt, nhưng với file md. của Airbnb.

Hay như Ferrari:

Cùng một prompt, nhưng với file md. của Ferrari.

6Gu thẩm mỹ là tất cả những gì bạn cần.

Tương lai đang đến với chúng ta, rất rất nhanh.

Claude Design xây dựng 10 dashboard trong 10 phút.

Nó tự động áp dụng design system, đề xuất 3 biến thể bố cục, xuất sang 5 định dạng.

Bạn có thể tải lên bất kỳ phong cách nào → nó sao chép ngay lập tức.

Điều nó không thể làm là nói cho bạn biết dashboard nào trong 10 cái để giao cho người dùng cụ thể của bạn vào thời điểm cụ thể này.

Đó 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à đồng ý với 1.

Gu thẩm mỹ là công tắc ghi đè. Gu thẩm mỹ là nhìn vào một nhận xét và nói, "Claude sai về cái này, vì khán giả của tôi mong đợi sự tối giản." Hay ngược lại.

Phần đó vẫn là bạn.

Đúng, Claude Design đẹp.

Đúng, Claude Cowork viết nhanh và chính xác.

Cho đến khi mọi người thiết kế và viết theo cùng một cách.

Hãy suy nghĩ về nó: bạn được trả tiền để làm tốt hơn. Để đi trước "mặc định từ AI". Đó là lý do tôi luôn nói "Làm chủ AI trước khi nó làm chủ bạn".

Bạn phải tốt hơn mức trung bình của AI, mặc định của AI. Hãy đi trước.

Nếu bạn là một designer đang đọc điều này và cảm thấy lo lắng về việc bị thay thế, bạn đang đọc sai khoảnh khắc này. Các designer có gu thẩm mỹ sắp bước vào thập kỷ tốt nhất trong sự nghiệp của họ. Công cụ vừa trở nên rẻ. Gu thẩm mỹ vừa trở nên đắt hơn nhiều.

Claude không trả tiền cho tôi.

Và tôi sẽ không chấp nhận bất kỳ tài trợ nào trong tương lai từ các phòng thí nghiệm AI.

Tôi đơn giản là không thể.

Tôi phải giữ trung lập nhất có thể, nói chính xác những gì tôi muốn dựa trên kinh nghiệm thực tế của mình với công cụ. Và bạn biết gì không? Claude Design còn lâu mới hoàn hảo:

Nó tiêu thụ quá nhiều token (= tiền).

Nó vẫn còn rất nhiều lỗi, khắp nơi.

Bạn thiếu kiểm soát.

Nhưng tôi có thể thấy mọi thứ đang phát triển như thế nào…

Claude Code đã thay đổi cách chúng ta code.

Claude Cowork, vài tháng sau, đến với người lao động tri thức.

Và bây giờ Claude Design đang đến với các designer.

Vậy không, tôi không được trả tiền để làm bản tin này (hay bản tiếp theo).

Nhưng tôi đang chia sẻ, hai lần một tuần, cách công việc của tôi đang biến đổi (rất nhanh) với AI. Khi tôi đang cố gắng bắt kịp, tôi muốn bạn bắt kịp. Để chúng ta cùng di chuyển nhanh như vậy.