Claude Design là gì? Hướng dẫn toàn tập về giá cả, 7 phương pháp tạo và ví dụ về câu lệnh [Cập nhật mới nhất 2026]

Ngày 18 tháng 6 năm 2026, Claude Design đã nhận được một bản cập nhật lớn.

Các tính năng đã được tăng cường và giao diện đã thay đổi.

Tôi đã tự mình kiểm tra trong khi sử dụng, vì vậy tôi sẽ ghi lại thứ tự các bước cần nhấp vào trên màn hình.

Bài viết này dành cho những ai "muốn vừa học vừa làm theo."

Hãy đọc bài viết này trong khi thực sự mở [claude.ai/design](//claude.ai/design).

Tôi có thể sử dụng miễn phí không?

Không, bạn không thể.

Claude Design là tính năng dành riêng cho các gói trả phí.

Bạn có thể sử dụng nếu có gói Pro ($20/tháng). Không yêu cầu thêm phí nào.

Claude Design là gì?

Đây là một công cụ AI cho phép bạn tạo các slide, trang đích (LP), nguyên mẫu ứng dụng, đề xuất, v.v. chỉ bằng cách đưa ra hướng dẫn sơ lược.

Anthropic đã phát hành nó vào ngày 17 tháng 4 năm 2026. Bản cập nhật này đã tăng cường đáng kể chức năng của nó.

Đầu ra là "Live HTML." Nó không phải là hình ảnh tĩnh; nó tạo ra một thiết kế có thể nhấp chuột và chuyển động.

Cách đọc Màn hình

Khi bạn mở [claude.ai/design](//claude.ai/design), màn hình này sẽ được hiển thị.

Các Tab trên cùng

Khu vực "Tạo thứ gì đó mới"

Chọn loại thứ bạn muốn tạo ở đây. Có bảy thẻ được xếp thành hàng.

Bên dưới "Thiết kế," các thiết kế trước đây của bạn được liệt kê.

Khi Claude Hỏi các Câu hỏi Tiếp theo (Phổ biến cho tất cả các thẻ)

Sau khi chọn một thẻ và gửi prompt, nếu Claude xác định rằng thông tin còn thiếu, nó có thể hiển thị các câu hỏi bổ sung ở bên phải màn hình.

Nội dung của các câu hỏi thay đổi tùy theo prompt.

Có các mục bắt buộc và tùy chọn.

Trả lời các mục và nhấn "Tiếp tục" để bắt đầu tạo.

Cách Tạo Slides (Tài liệu Thuyết trình)

Tạo tài liệu hội thảo, slide briefing và pitch deck từ đây.

Bước 1. Nhấp vào "Slides" trên Màn hình chính

Nhấp vào thẻ có nội dung "Presentations & pitch decks."

Bước 2. Nhập Nội dung của Slide Bạn Muốn Tạo

Nhấp vào nó sẽ đưa bạn đến màn hình này.

"Bài thuyết trình về điều gì?" được hiển thị ở thanh bên trái.

Bạn có thể chọn từ ba phương pháp nhập:

• Tải lên tài liệu: Tạo slide từ các tài liệu hiện có như Word hoặc PDF.
• Dán ghi chú của bạn: Dán ghi chú hoặc văn bản và để chúng được cấu trúc.
• Bộ slide hiện có: Xây dựng lại dựa trên bộ slide hiện có.

Nếu bạn không đính kèm gì, chỉ cần nhập nội dung vào trường văn bản bên dưới và nhấn Gửi.

Ví dụ về Prompt

1Vui lòng tạo một slide giới thiệu cho dịch vụ tư vấn AI.
2Đối tượng mục tiêu: Chủ doanh nghiệp cá thể và freelancer không giỏi máy tính
3Thời lượng: Dành cho hội thảo 20 phút
4Cấu trúc: Vấn đề hiện tại → Có thể giải quyết bằng AI → Chi tiết dịch vụ → Phí → Cách đăng ký
5Bầu không khí: Thân thiện, không dùng thuật ngữ kỹ thuật
6Hình thức: Đơn giản và dễ đọc, nền trắng

1Vui lòng tạo một slide tự giới thiệu.
2Cựu kỹ sư phần mềm, hiện đang dạy cách sử dụng AI
3Thành tích: Tự động hóa hoạt động với Claude Code, xây dựng hệ thống với giá 300.000 yên/tháng
4Đối tượng mục tiêu: Chủ doanh nghiệp cá thể là người mới bắt đầu với AI
5Số lượng slide: 5-7, dễ nhìn với nhiều khoảng trắng

1Vui lòng tạo một slide giới thiệu về cách sử dụng Claude Code.
2Đối tượng: Người mới bắt đầu chưa từng viết code
3Thời lượng: 10 phút
4Nội dung: Claude Code là gì → Các bước cài đặt → Lệnh đầu tiên → Các lỗi thường gặp và cách khắc phục
5Giọng điệu: Lịch sự, nhẹ nhàng và không đáng sợ

Tùy chọn bộ slide (Không bắt buộc)

• Tối ưu hóa cho Google Slides: Chỉ sử dụng Google Fonts (tiện lợi khi mở trong Google Slides).
• Thêm ghi chú diễn giả: Tự động thêm ghi chú nói vào mỗi slide.

Bước 3. Chờ Tạo

Quá trình này mất vài phút. Bạn có thể kiểm tra tiến trình trong bảng điều khiển bên trái.

Khi hoàn tất, nó trông như thế này.

Bước 4. Điều chỉnh bằng các Nút ở Góc trên bên phải

Sau khi tạo xong, các nút sẽ xuất hiện ở góc trên bên phải.

"Tinh chỉnh" được sử dụng nhiều nhất. Chỉ cần nhập nội dung như "Làm tiêu đề trên slide đầu tiên lớn hơn" như một cuộc trò chuyện, nó sẽ sửa cho bạn.

Các Lưu ý

Hãy quyết định phong cách trực quan của slide trước.

Nếu bạn nói "đổi tất cả màu sắc" giữa chừng, tính nhất quán có xu hướng bị phá vỡ.

Sẽ nhanh hơn nếu quyết định khung tổng thể trước rồi sửa các chi tiết sau.

Cách Tạo Nguyên mẫu Sản phẩm (Nguyên mẫu Chuyển động)

Bạn có thể tạo màn hình ứng dụng, luồng đặt dịch vụ và mô hình thử nghiệm dịch vụ web.

Khi hoàn tất, nó sẽ ở trạng thái bạn có thể thực sự nhấp và vận hành.

Bước 1. Nhấp vào "Nguyên mẫu sản phẩm" trên Màn hình chính

Nhấp vào thẻ có nội dung "Interactive app mockups."

Bước 2. Nhập Nội dung của Màn hình Ứng dụng Bạn Muốn Tạo

Nhấp vào nó sẽ đưa bạn đến màn hình này.

Giống như với Slides, hãy nhập nội dung vào trường văn bản và nhấn Gửi.

Nguyên mẫu càng chính xác khi bạn viết càng chi tiết. Bao gồm những điều sau sẽ cải thiện chất lượng:

• Loại ứng dụng: Hệ thống đặt chỗ, quản lý tác vụ, màn hình thanh toán, v.v.
• Số lượng màn hình: Bao nhiêu màn hình.
• Nội dung của mỗi màn hình: Những gì được hiển thị.
• Luồng thao tác: Nhấn vào đâu để chuyển sang bước tiếp theo.
• Kích thước thiết bị: Cho điện thoại thông minh (390×844px) hoặc PC.
• Màu sắc/Phong cách: Chủ đề tối, phối màu sáng, v.v.

Ví dụ về Prompt

1Vui lòng tạo nguyên mẫu cho ứng dụng đặt lịch tiệm làm đẹp.
2Trên màn hình điện thoại thông minh (390×844px).
34 màn hình:
41. Trang chủ: Tên tiệm, danh sách dịch vụ (Cắt/Uốn/Dưỡng)
52. Chọn dịch vụ: Chọn để tiếp tục
63. Chọn ngày/giờ: Lịch và khung giờ
74. Xác nhận/Hoàn tất: Chi tiết đặt lịch và nút "Đặt lịch"
8Phong cách: Nền trắng, điểm nhấn màu hồng, thiết kế bo tròn
9Khi nút "Đặt lịch" được chạm, chuyển sang màn hình "Đặt lịch thành công!"

Bước 3. Chờ Tạo

Quá trình này mất vài phút. Khi hoàn tất, nó trông như thế này.

Nó ở trạng thái bạn có thể thực sự vận hành bằng cách nhấp chuột. Nhấn nút "Đặt lịch" sẽ chuyển sang màn hình tiếp theo.

Bước 4. Điều chỉnh bằng các Nút ở Góc trên bên phải

Sau khi tạo xong, các nút sẽ xuất hiện ở góc trên bên phải.

"Tinh chỉnh" được sử dụng nhiều nhất. Chỉ cần nhập nội dung như "Làm màu nền trắng" hoặc "Làm phông chữ lớn hơn" như một cuộc trò chuyện, nó sẽ sửa cho bạn.

Nếu Bạn Muốn Thêm Hoạt ảnh

Claude Design không thêm hoạt ảnh theo mặc định.

Nếu bạn muốn thêm chuyển động, hãy chỉ định rõ ràng.

1Phóng to nút lên 1.05 lần khi di chuột qua, với hiệu ứng chuyển tiếp 200ms.
2Làm mờ dần + trượt lên các thẻ khi tải trang, hiển thị chúng theo thứ tự với khoảng cách 150ms.

Cách Tạo Wireframe Sản phẩm (Thiết kế Khung xương)

Sử dụng tính năng này khi bạn muốn quyết định "cấu hình màn hình" trước.

Nó chỉ tạo khung xương của bố cục, không phải thiết kế chi tiết.

Nó phù hợp để xác nhận luồng "người dùng tiến hành theo thứ tự này."

Bước 1. Nhấp vào "Wireframe sản phẩm" trên Màn hình chính

Nhấp vào thẻ có nội dung "Lo-fi screens & flows."

Bước 2. Nhập Cấu hình của Màn hình Bạn Muốn Tạo

Nhấp vào nó sẽ đưa bạn đến màn hình này.

Chỉ cần nhập nội dung vào trường văn bản và nhấn Gửi. Nếu bạn có màn hình muốn dùng làm tài liệu tham khảo, hãy đính kèm nó bằng "Thêm ảnh chụp màn hình" để cải thiện độ chính xác.

Ví dụ về Prompt

1Vui lòng tạo wireframe cho luồng đăng ký dịch vụ tư vấn.
2Các bước: Trang chủ → Mô tả dịch vụ → Phí → Biểu mẫu đăng ký → Hoàn tất
3Chỉ cần thấy được những gì cần đặt trên mỗi màn hình là đủ. Không cần thiết kế chi tiết.

1Vui lòng tạo wireframe cho LP đăng ký hội thảo.
2Các phần: Phần Hero → Giới thiệu diễn giả → Nội dung → Phí tham gia → Biểu mẫu đăng ký
3Ở chế độ xem điện thoại thông minh.

Bước 3. Chờ Tạo

Khi hoàn tất, nó trông như thế này.

Khung xương màn hình được hiển thị với các hộp màu xám. Sử dụng nó để xác nhận vị trí như "nút ở đây" và "hình ảnh ở đây." Các thiết kế chi tiết được thực hiện với Nguyên mẫu sản phẩm hoặc Tài liệu.

Bước 4. Điều chỉnh bằng các Nút ở Góc trên bên phải

Sau khi tạo xong, các nút sẽ xuất hiện ở góc trên bên phải.

Hướng dẫn kiểu như "Thêm hiển thị phí vào màn hình thứ 3" trong "Tinh chỉnh" sẽ thực hiện các chỉnh sửa bổ sung.

Cách Tạo Tài liệu (LP, Đề xuất, Tài liệu)

Tạo trang đích, đề xuất, báo cáo và sơ yếu lý lịch từ đây.

Trong số 7 loại thẻ, đây là thẻ linh hoạt nhất.

Bước 1. Nhấp vào "Tài liệu" trên Màn hình chính

Nhấp vào thẻ có nội dung "Resumes, PDFs, etc."

Bước 2. Nhập Nội dung Bạn Muốn Tạo

Nhấp vào nó sẽ đưa bạn đến màn hình này.

Một tính năng độc đáo của thẻ Tài liệu là "Nói ra suy nghĩ."

Nếu bạn nhập suy nghĩ của mình như thể đang nói chuyện để sắp xếp chúng, nó sẽ đọc cấu trúc nguyên trạng.

Nếu bạn có PDF hoặc tài liệu, bạn có thể tải chúng lên bằng "Tải lên PDF hoặc ghi chú."

Ví dụ về Prompt

1Vui lòng tạo LP cho dịch vụ tư vấn AI dành cho cá nhân.
2Mục đích: Tăng lượt đăng ký LINE
3Cấu trúc:
4- Phần Hero: Câu khẩu hiệu + Nút đăng ký
5- Bạn có những vấn đề này không? (3 mục)
6- Những gì có thể giải quyết bằng dịch vụ (3 mục)
7- Phí
8- Câu hỏi thường gặp (3 mục)
9- CTA cuối cùng: Nút đăng ký LINE
10Đối tượng mục tiêu: Chủ doanh nghiệp cá thể không giỏi máy tính, phụ nữ ở độ tuổi 50
11Phong cách: Đơn giản và ấm áp, trắng + điểm nhấn màu san hô

1Vui lòng tạo đề xuất cho dịch vụ tư vấn dành cho doanh nghiệp.
2Cấu trúc: Vấn đề hiện tại → Nội dung đề xuất → Hiệu quả dự kiến → Phí → Các bước thực hiện → Về cuộc họp tiếp theo
3Phong cách: Đơn giản và đáng tin cậy, xanh nước biển x trắng

1Vui lòng tạo tài liệu tự giới thiệu (portfolio) với tư cách là freelancer.
2Nội dung cần bao gồm: Hồ sơ, kỹ năng, thành tích, phí, thông tin liên hệ
3Phong cách: Đơn sắc + 1 màu nhấn, hiện đại và sạch sẽ

Bước 3. Chờ Tạo

Quá trình này mất vài phút. Khi hoàn tất, nó trông như thế này.

Bạn có thể kiểm tra phần còn lại bằng cách cuộn. Đối với LP, mọi thứ từ phí, câu hỏi thường gặp đến chân trang sẽ được tạo ra.

Bước 4. Điều chỉnh bằng các Nút ở Góc trên bên phải

Sau khi tạo xong, các nút sẽ xuất hiện ở góc trên bên phải.

Chỉ cần hướng dẫn từ ngữ hoặc màu sắc của LP trong "Tinh chỉnh," nó sẽ sửa tại chỗ.

Cách Tạo Hoạt ảnh

Bạn có thể tạo banner hoạt ảnh và đồ họa chuyển động.

Bước 1. Nhấp vào "Hoạt ảnh" trên Màn hình chính

Nhấp vào thẻ có nội dung "Motion graphics & loops."

Bước 2. Nhập Nội dung của Hoạt ảnh Bạn Muốn Tạo

Nhấp vào nó sẽ đưa bạn đến màn hình này.

Nếu bạn có storyboard hoặc hình ảnh, bạn có thể tải chúng lên bằng "Thả storyboard hoặc hình ảnh."

Nếu bạn có kịch bản (văn bản), bạn cũng có thể dán nó bằng "Dán kịch bản."

Ví dụ về Prompt

1Vui lòng tạo banner hoạt ảnh cho giới thiệu dịch vụ.
2Nội dung: Văn bản "AI x Hệ thống hóa" mờ dần → Tên dịch vụ xuất hiện từ bên dưới → Nút CTA nhấp nháy
3Nền: Tối, các đường nhấn màu san hô
4Kích thước: 1200×630px
5Phát lại vòng lặp

1Vui lòng tạo số đếm hoạt ảnh.
2Với văn bản "3.000 người đã đăng ký," đếm từ 0 lên 3.000 trong 2 giây.
3Bắt đầu khi trang được hiển thị.

Khi hoàn tất, nó trông như thế này.

Bước 3. Điều chỉnh bằng các Nút ở Góc trên bên phải

Sau khi tạo xong, các nút sẽ xuất hiện ở góc trên bên phải.

Không giống như các thẻ khác, không có nút "Chỉnh sửa". Vì hoạt ảnh chạy bằng code (CSS/JavaScript), bạn không thể chỉnh sửa trực tiếp các thành phần bằng cách nhấp vào chúng. Chỉ có thể sửa bằng cách hướng dẫn AI trong "Tinh chỉnh."

Nếu bạn xuất hoạt ảnh sang PDF, chuyển động sẽ bị mất. Nếu bạn muốn giữ chuyển động, hãy chọn định dạng HTML.

Cách Sử dụng Canvas trống (Tạo từ đầu)

Không có mẫu, không có câu hỏi. Sử dụng khi bạn muốn bắt đầu từ một canvas hoàn toàn trống.

Chọn cái này cho "những thứ không phù hợp với bất kỳ thẻ nào" hoặc "khi bạn muốn tự quyết định mọi thứ."

Chỉ cần nhập những gì bạn muốn tạo vào trường nhập văn bản và nhấn Gửi.

Cách Sử dụng Bắt đầu với Tệp (Tạo từ Tệp)

Thẻ này chuyển đổi các tệp hiện có thành thiết kế. Chỉ cần đưa cho Claude một tệp Word, PDF hoặc PPTX, nó sẽ tạo một thiết kế cho bạn.

Bước 1. Nhấp vào "Bắt đầu với tệp"

Nhấp vào thẻ có nội dung "Turn it into a design." Một hộp thoại chọn tệp sẽ mở ra.

Các định dạng tệp được hỗ trợ là DOCX, PPTX, XLSX, PDF, JPG và PNG.

Bước 2. Tải lên Tệp và Nhập Hướng dẫn

Khi bạn chọn một tệp, nó sẽ được tải lên và một trường nhập văn bản lớn sẽ xuất hiện. Nhập những gì bạn muốn tạo và nhấn nút "Bắt đầu dự án".

Các thẻ khác có nút "Gửi," nhưng thẻ này có "Bắt đầu dự án."

Ví dụ về Prompt

1Vui lòng chuyển đổi đề xuất Word đính kèm thành các slide đề xuất trực quan.
2Tạo cấu hình 5-7 slide với thiết kế đơn giản và dễ đọc.

1Vui lòng chuyển đổi các ý tưởng trong ghi chú viết tay này thành một đề xuất LP.
2Đối tượng mục tiêu: Chủ doanh nghiệp cá thể là người mới bắt đầu với AI
3Mục tiêu: Đăng ký tư vấn

Khi hoàn tất, nó trông như thế này.

Bước 3. Điều chỉnh bằng các Nút ở Góc trên bên phải

Sau khi tạo, bạn có thể điều chỉnh bằng thanh công cụ ở góc trên bên phải. Nhấn nút "+ Tinh chỉnh" sẽ mở một trường nhập trò chuyện, nơi bạn có thể đưa ra hướng dẫn bổ sung cho các thay đổi tinh tế.

Cách Sử dụng Hệ thống Thiết kế [Mới trong Bản cập nhật này]

Có một nút "Thiết lập hệ thống thiết kế" bên dưới danh sách thẻ trên màn hình chính.

Bằng cách đăng ký màu thương hiệu, phông chữ và logo một lần, chúng sẽ tự động được áp dụng cho các thiết kế tiếp theo.

Điều này giải quyết vấn đề "màu sắc không nhất quán mỗi lần."

Nhấn nút sẽ hiển thị modal "Thêm hệ thống thiết kế".

Có hai phương pháp đăng ký.

① Tạo ở đây (Dành cho người mới bắt đầu)

Bạn có thể thiết lập chỉ bằng cách nhập thông tin cần thiết vào biểu mẫu.

Những gì bạn có thể đăng ký:

• Tên công ty/Mô tả thương hiệu (nhập văn bản)
• URL kho lưu trữ GitHub
• Tệp Figma (tải lên tệp .fig)
• Tệp phông chữ, logo và tài sản

Bạn có thể sử dụng nó mà không cần code. Nếu bạn đang dùng thử lần đầu, cái này được khuyên dùng.

② Tạo bằng Claude Code (ĐỘ CHÍNH XÁC CAO NHẤT)

Đây là tính năng để Claude Code học thông tin thương hiệu.

Khi đã đăng ký, bạn sẽ không phải chỉ định "với màu này và phông chữ này" mỗi lần tạo LP, trang chủ hoặc slide. Các thiết kế thống nhất như một thương hiệu sẽ tự động ra đời.

Chủ yếu dành cho các nhóm phát triển doanh nghiệp. Đây là tính năng tự động đọc thông tin thương hiệu từ code dịch vụ được tạo bằng các quy tắc React. Hầu như không có trường hợp sử dụng cho cá nhân.

Cách Sử dụng

Bạn có thể tạo từ đầu với các bước sau.

Bước 1. Kiểm tra Node.js

Bước 2. Tạo Thư mục và Tệp

1Bất kỳ thư mục nào/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Viết lại màu sắc và phông chữ theo thương hiệu của bạn)

1export const colors = {
2  primary: "#DA7756",      // Main color
3  background: "#F5F4F0",   // Background color
4  text: "#1C1917",         // Body text
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Bước 3. Thực thi /design-sync

Chạy lệnh sau trong Claude Code:

1/design-sync

Khi hoàn tất, thương hiệu sẽ được đăng ký trong tab "Hệ thống thiết kế." Màu sắc và phông chữ này sẽ tự động được sử dụng trong các lần tạo thiết kế tiếp theo.

Các Phương pháp Xuất

Các thiết kế đã hoàn thành có thể được xuất ở một số định dạng.

Nếu có hoạt ảnh, chuyển động sẽ bị mất nếu xuất sang PDF.

Nếu bạn muốn giữ chuyển động, hãy chọn định dạng HTML.

Mẹo để Điều chỉnh (Bảng Tinh chỉnh)

Sau khi tạo, nhấn nút "Tinh chỉnh" cho phép bạn đưa ra hướng dẫn điều chỉnh tinh tế cho AI.

Ví dụ về các hướng dẫn hiệu quả:

• "Làm văn bản tiêu đề lớn hơn"
• "Làm nút nổi bật hơn"
• "Làm cho nó đơn giản hơn tổng thể"
• "Kiểm tra bố cục khi xem trên điện thoại thông minh"

Thay vì cố gắng thay đổi mọi thứ cùng một lúc, hãy đưa ra hướng dẫn từng cái một để dễ dàng đạt được kết quả mong muốn.

Những gì Đã Thay đổi trong Bản cập nhật này

Tổng kết — Chọn Thẻ Dựa trên Những gì Bạn Muốn Tạo

Claude Design khả dụng cho các gói Pro ($20/tháng) trở lên. Không thể sử dụng miễn phí.

Chọn thẻ dựa trên những gì bạn muốn tạo

Độ chính xác tăng lên khi prompt bao gồm bốn điểm: "Mục đích, Cấu trúc, Đối tượng mục tiêu và Phong cách."

Đừng cố gắng đạt được sự hoàn hảo ngay từ đầu; sẽ nhanh hơn nếu tạo một khung tổng thể rồi sửa từng thứ một.

Nếu bạn thích bài viết này, tôi sẽ rất vui nếu bạn nhấn "Thích."

▼ Bạn có thể nhận hướng dẫn sử dụng Claude mà ngay cả những người không giỏi máy tính cũng có thể bắt đầu qua LINE.

Đăng ký sẽ tặng bạn hướng dẫn cài đặt Claude Code làm quà tặng.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso