Anthropic Thêm Lệnh /design vào Claude Code để Tạo Bản Phác Thảo UI Ngay trên Terminal

Anthropic đã mở rộng Claude Code với lệnh /design mới, cho phép các nhà phát triển tạo, chỉnh sửa và xem các bản phác thảo (mockup) UI mà không cần rời khỏi terminal.

Tạo Nguyên mẫu UI Trực tiếp trong Terminal

Thay vì phải chuyển đổi qua lại giữa Figma và shell, giờ đây bạn có thể nhập những câu lệnh như /design a few options for a login screen. Claude sẽ phản hồi bằng một vài "artboard" tương tác hiển thị các bản phác thảo độ trung thực cao (high-fidelity). Bạn có thể so sánh các bố cục, chọn mẫu ưng ý và tinh chỉnh giao diện bằng cách đặt các câu hỏi tiếp theo—tất cả đều thực hiện được trước khi viết bất kỳ dòng mã sản phẩm nào.

Bản Phác Thảo Hiểu Ngữ Cảnh từ Mã Nguồn của Bạn

Nhà phát triển Nate Parrott lưu ý rằng Claude thực sự đọc kho lưu trữ (repository) hiện tại. Nó trích xuất các bảng màu, thư viện thành phần và các quy ước bố cục, sau đó tùy chỉnh từng thiết kế để phù hợp với phong cách hiện có của dự án. Kết quả sẽ xuất hiện dưới dạng "Artifacts", một chế độ xem chuyên dụng bên trong Claude giúp hiển thị hình ảnh mà không cần mở trình chỉnh sửa đồ họa riêng biệt. Ở giai đoạn này, các bản phác thảo chỉ tồn tại trong không gian làm việc của Claude; bạn phải lưu chúng vào hệ thống tệp một cách rõ ràng trước khi chuyển chúng thành mã nguồn.

Tại sao Điều này Quan trọng đối với Phát triển Hỗ trợ bởi AI

Lệnh này hợp nhất hai giai đoạn của vòng đời phát triển phần mềm—thiết kế và lập trình—thành một. Các đội ngũ ưu tiên tốc độ có thể tạo ra nhiều tùy chọn bố cục chỉ với một câu lệnh (prompt), giúp đẩy nhanh quá trình khám phá ở giai đoạn đầu. Vì Claude sử dụng mã nguồn thực tế, các bản phác thảo sẽ luôn đúng với thương hiệu và tương thích với hệ thống thành phần, giúp giảm bớt việc chỉnh sửa thủ công thường thấy sau khi tạo hình ảnh chung chung.

Anthropic coi đây là một bước tiến tới một "kỹ sư phần mềm AI" có khả năng xử lý cả logic lẫn thẩm mỹ. Nếu terminal có thể đóng vai trò như một không gian làm việc đa phương thức (multi-modal), ranh giới giữa việc viết mã và định hình trải nghiệm người dùng sẽ được thu hẹp đáng kể.

Các Hạn chế Hiện tại

Tính năng này vẫn đang trong giai đoạn xem trước (preview). Các bản phác thảo được tạo ra không tự động trở thành các tệp nguồn; bạn phải tự xuất và tích hợp chúng. Bước bổ sung đó có thể làm giảm bớt thời gian tiết kiệm được, đặc biệt là trong các dự án lớn với hàng chục thành phần.

Cách Thử Tính Năng Này

Chạy claude update để tải bản build xem trước mới nhất và kích hoạt lệnh /design.

Các Điểm Chính Cần Lưu Ý

  • Tạo Nguyên mẫu Tích hợp: /design tạo ra nhiều artboard UI trực tiếp từ các câu lệnh trong terminal.
  • Sự Nhất quán về Ngữ cảnh: Claude quét mã nguồn hiện tại để giữ cho các bản phác thảo luôn đồng nhất với hệ thống thiết kế hiện có.
  • Quy trình Làm việc Tinh gọn: Bằng cách kết hợp sức mạnh câu lệnh của Claude Design với khả năng thực thi của Claude Code, các nhà phát triển có thể đi từ ý tưởng đến nguyên mẫu trực quan mà không cần chuyển đổi công cụ.

Lệnh /design mới của Anthropic cho phép các nhà phát triển tạo và chỉnh sửa các bản phác thảo UI ngay từ terminal, giúp cắt giảm việc chuyển đổi qua lại giữa các công cụ thiết kế và trình soạn thảo mã—một nút thắt cổ chai mà nhiều đội ngũ đang phát triển nhanh vẫn phải vật lộn.

Tạo Bản Phác thảo Trực quan từ Câu lệnh CLI

Bạn nhập một câu lệnh như /design a few options for a login screen và Claude sẽ trả về một bộ các artboard tương tác. Mỗi artboard hiển thị một bản phác thảo độ trung thực cao mà bạn có thể kiểm tra, so sánh và tinh chỉnh bằng cách đặt các câu hỏi tiếp theo.

Claude đọc các tệp trong dự án hiện tại, trích xuất bảng màu, thư viện thành phần và các quy ước bố cục, sau đó tùy chỉnh các thiết kế để phù hợp. Kết quả xuất hiện dưới dạng "Artifacts", một chế độ xem hiển thị hình ảnh mà không cần mở trình chỉnh sửa đồ họa riêng biệt. Tại thời điểm này, các bản phác thảo chỉ tồn tại trong không gian làm việc của Claude; bạn phải lưu chúng vào hệ thống tệp một cách rõ ràng trước khi chuyển chúng thành mã nguồn.

Tại sao Các Nhà Phát triển Quan tâm đến Công cụ Thiết kế trong Terminal

Hầu hết các nhà phát triển dành phần lớn thời gian trong ngày để chuyển đổi giữa terminal lập trình và ứng dụng thiết kế UI. Việc đưa việc tạo nguyên mẫu trực quan vào cùng một cửa sổ nơi viết mã giúp hợp nhất hai giai đoạn của vòng đời phát triển phần mềm thành một.

Đối với các đội ngũ tập trung vào tốc độ, việc tạo ra nhiều tùy chọn bố cục chỉ với một câu lệnh có thể đẩy nhanh giai đoạn khám phá ở giai đoạn đầu. Việc Claude đọc mã nguồn hiện có giúp các bản phác thảo luôn đúng với thương hiệu và tương thích với hệ thống thành phần của dự án, giảm bớt việc chỉnh sửa thủ công thường diễn ra sau bước tạo hình ảnh chung chung.

Anthropic coi sự bổ sung này là một bước tiến tới một "kỹ sư phần mềm AI" có thể xử lý cả logic lẫn thẩm mỹ. Nếu terminal giờ đây có thể đóng vai trò như một không gian làm việc đa phương thức, ranh giới giữa việc viết mã và định hình trải nghiệm người dùng sẽ trở nên mong manh hơn.

Hạn chế và Lý do cần đến các Công cụ Thiết kế Truyền thống

Tính năng này vẫn đang trong giai đoạn xem trước và vẫn còn một số hạn chế thực tế. Thứ nhất, các bản mockup được tạo ra không tự động trở thành các tệp nguồn; các nhà phát triển phải xuất và tích hợp chúng một cách thủ công. Bước bổ sung đó có thể làm giảm hiệu quả tiết kiệm thời gian đối với các dự án lớn hơn, nơi hàng chục thành phần cần được đồng bộ hóa.

Những điều cần theo dõi khi tính năng này hoàn thiện hơn

Bản cập nhật của Anthropic lưu ý rằng lệnh này có thể được kích hoạt chỉ với một lệnh claude update đơn giản.

Điểm mấu chốt: Việc nhúng một câu lệnh thiết kế vào terminal của Claude Code giúp các nhà phát triển rút ngắn khoảng cách từ ý tưởng đến nguyên mẫu trực quan, nhưng quy trình làm việc vẫn phụ thuộc vào việc bàn giao thủ công và thiếu đi chiều sâu của các công cụ UI chuyên dụng. Sự phát triển của nó sẽ quyết định liệu lệnh này sẽ chỉ là một tiện ích nhỏ lẻ hay sẽ trở thành một phần cốt lõi của bộ công cụ phát triển dựa trên AI.