Claude Design — Nó là gì và cách sử dụng
Anthropic đã ra mắt Claude Design: những gì đã được triển khai, tại sao nó khác với Figma và Canva, và cách gói chuyển giao Claude Code giúp thu gọn quá trình thiết kế thành mã chỉ trong một cuộc trò chuyện.
Claude Design đã ra mắt ngày hôm qua.
Sản phẩm mới nhất của Anthropic Labs: cộng tác với Claude để tạo ra các thiết kế, nguyên mẫu, slide, trang một mặt và trang đích. Được hỗ trợ bởi Opus 4.7. Có sẵn tại claude.ai/design cho người đăng ký Pro, Max, Team và Enterprise.
Con số định hình mọi thứ, từ Olivia Xu, Nhà thiết kế sản phẩm cấp cao tại Brilliant: "Các trang phức tạp nhất của chúng tôi, mất hơn 20 lời nhắc để tạo lại trong các công cụ khác, chỉ cần 2 lời nhắc trong Claude Design." Các trang của Brilliant nổi tiếng về tính tương tác dày đặc. Khi một nhà thiết kế tại một công ty chú trọng thiết kế nói như vậy, công cụ này đang làm điều gì đó thực sự khác biệt bên trong.
Tính năng quan trọng nhất: chuyển giao cho Claude Code.
Khi một thiết kế sẵn sàng để xây dựng, Claude Design đóng gói mọi thứ (ý định, thành phần, tương tác, ngữ cảnh hệ thống thiết kế) vào một gói mà bạn chuyển cho Claude Code bằng một hướng dẫn. Claude Code sẽ triển khai nó.
Đây là phần mà Figma và Canva không có. Chúng tạo ra một artifact tĩnh. Claude Design tạo ra ý định có cấu trúc mà một AI khác có thể thực hiện. Vòng lặp thiết kế thành mã từng mất một tuần qua lại giờ đây trở thành một cuộc trò chuyện.
Thương hiệu của bạn được xây dựng trong quá trình giới thiệu. Claude đọc cơ sở mã và các tệp thiết kế hiện có của bạn để tìm hiểu màu sắc, kiểu chữ và thành phần của bạn. Mọi dự án đều tự động sử dụng hệ thống đó và bạn có thể duy trì nhiều hơn một (trang web tiếp thị, sản phẩm, bộ tài liệu nhà đầu tư). Thương hiệu của bạn được học, không phải được cấu hình.
Bạn có thể bắt đầu từ bất cứ nơi nào suy nghĩ của bạn tồn tại: một lời nhắc văn bản, hình ảnh, tệp DOCX / PPTX / XLSX, hoặc trực tiếp từ cơ sở mã của bạn. Điều cần biết là công cụ chụp web. Chỉ nó vào bất kỳ URL nào và nó sẽ lấy các yếu tố từ trang trực tiếp, để các nguyên mẫu của bạn trông giống như sản phẩm thực tế, chứ không phải một bản gần đúng của Figma đã bị lệch ba sprint trước.
Các điều khiển tinh chỉnh được tạo ra cho thiết kế cụ thể của bạn: nhận xét nội tuyến trên bất kỳ yếu tố nào, chỉnh sửa văn bản trực tiếp và các nút điều chỉnh khoảng cách, màu sắc và bố cục mà Claude xây dựng tùy chỉnh cho dự án. Thực hiện một chỉnh sửa đúng trên một yếu tố, sau đó yêu cầu Claude áp dụng nó cho toàn bộ thiết kế.
Đường dẫn xuất: chia sẻ dưới dạng URL nội bộ, lưu dưới dạng thư mục, hoặc xuất sang PDF, PPTX, hoặc HTML độc lập. Điều đáng nói là: xuất sang Canva (CEO Canva Melanie Perkins có một câu nói trong bài đăng ra mắt). Các thiết kế được đẩy sang Canva trở nên hoàn toàn có thể chỉnh sửa cho các đồng đội không chuyên về kỹ thuật. Sử dụng nó khi bước tiếp theo là "tiếp thị cần chỉnh sửa cái này" thay vì "kỹ thuật cần xây dựng cái này."
Các nhóm sử dụng nó để làm gì, trực tiếp từ bài đăng ra mắt: nguyên mẫu từ các bản mô phỏng tĩnh để thử nghiệm người dùng, khung sườn sản phẩm chuyển giao cho Claude Code, bộ tài liệu thuyết trình từ một dàn ý thô, và trang đích từ một mô tả. Aneesh Kethini, PM tại Datadog: "Những gì từng mất một tuần qua lại giữa các bản tóm tắt, bản mô phỏng và các vòng đánh giá giờ đây diễn ra trong một cuộc trò chuyện duy nhất."
Cuối tuần này: chỉ công cụ chụp web vào một trang web trực tiếp, tạo 3 hướng thay thế, chọn một và tinh chỉnh, sau đó xuất gói chuyển giao sang Claude Code bằng một hướng dẫn. Trường hợp sử dụng tiềm năng là thiết kế tiên phong: các nguyên mẫu được hỗ trợ bởi mã với giọng nói, video, bộ đổ bóng, 3D và AI tích hợp.
Những gì đã được triển khai: Claude Design, một bản xem trước nghiên cứu của Anthropic Labs được hỗ trợ bởi Opus 4.7, tại claude.ai/design cho Pro, Max, Team và Enterprise.
Tại sao nó khác biệt: một hệ thống thiết kế được học từ cơ sở mã của bạn, một công cụ chụp web lấy từ trang web trực tiếp của bạn, các nút tinh chỉnh tùy chỉnh và một gói chuyển giao gửi ý định có cấu trúc đến Claude Code thay vì một artifact tĩnh. Vòng lặp thiết kế thành mã thu gọn từ một sprint thành một cuộc trò chuyện. Sách hướng dẫn chuyên sâu hơn nằm trong Tracks 2 đến 5.