21st.dev Magic

Thiết kế

Tạo các thành phần giao diện người dùng hoàn chỉnh ngay lập tức thông qua Neotask trên OpenClaw

Những gì bạn có thể làm

Neotask kết nối với 21st.dev Magic thông qua OpenClaw, mang đến cho bạn quyền truy cập ngay lập tức vào thư viện khổng lồ các thành phần giao diện sẵn sàng cho production và khả năng tạo thành phần bằng AI — tất cả thông qua hội thoại.

Tạo thành phần

  • Tạo từ mô tả — Mô tả giao diện bạn cần bằng tiếng Anh đơn giản và nhận các thành phần React hoàn chỉnh, đã được tạo kiểu với Tailwind CSS, shadcn/ui hoặc thư viện ưa thích của bạn
  • Lặp lại với phản hồi — Nói "làm cho nó nhỏ gọn hơn" hoặc "thêm trạng thái tải" và Neotask áp dụng phản hồi của bạn ngay lập tức với đầu ra mã mới
  • Tạo nhiều biến thể — Yêu cầu nhiều biến thể thiết kế cùng lúc để bạn có thể chọn phương án phù hợp nhất cho dự án của mình
  • Tích hợp khả năng truy cập — Các thành phần được tạo tuân theo các phương pháp tốt nhất về ARIA và mẫu điều hướng bàn phím ngay từ đầu

    • Tìm kiếm thư viện thành phần

  • Tìm kiếm theo mẫu — Tìm các thành phần phù hợp với trường hợp sử dụng của bạn: "bảng giá với nút chuyển đổi thanh toán hàng tháng/hàng năm" hoặc "ngăn kéo thông báo với số chưa đọc"
  • Duyệt theo danh mục — Khám phá các thành phần theo loại: thanh điều hướng, hộp thoại, biểu mẫu, thẻ, bảng dữ liệu, bảng điều khiển và nhiều hơn nữa
  • Lọc theo công nghệ — Tìm kiếm các thành phần dành riêng cho ngăn xếp công nghệ của bạn (React, Vue, Tailwind, shadcn, Radix UI)
  • Đoạn mã sẵn sàng sao chép — Mỗi thành phần từ thư viện đều được định dạng để sử dụng ngay trong mã nguồn của bạn

    • Tích hợp hệ thống thiết kế

  • Phù hợp với phong cách hiện có của bạn — Cung cấp mã thông báo màu hoặc cấu hình Tailwind của bạn và Neotask tạo các thành phần phù hợp với hệ thống thiết kế của bạn
  • Kết hợp thành phần — Yêu cầu bố cục trang đầy đủ bằng cách kết hợp nhiều đoạn mã thành phần lại với nhau
  • Biến thể chế độ tối — Yêu cầu phiên bản chế độ tối của bất kỳ thành phần nào với việc sử dụng mã thông báo nhất quán

    • Thử hỏi

  • "Tạo thành phần thẻ giá với huy hiệu phổ biến, danh sách tính năng và nút kêu gọi hành động sử dụng Tailwind"
  • "Tôi cần một thanh điều hướng responsive với logo bên trái, liên kết điều hướng ở giữa và nút Đăng nhập bên phải"
  • "Tìm kiếm 21st.dev cho thành phần bảng dữ liệu với sắp xếp, lọc và phân trang"
  • "Tạo phần hero với tiêu đề lớn, phụ đề, hai nút kêu gọi hành động và hình ảnh mô phỏng bên phải"
  • "Làm cho thành phần nhỏ gọn hơn và thêm trạng thái tải skeleton"
  • "Tìm thành phần hộp thoại modal trượt vào từ bên phải dưới dạng ngăn kéo"
  • "Tạo bước hướng dẫn onboarding với 4 bước và chỉ báo tiến trình"
  • "Tôi cần hệ thống thông báo toast xếp chồng các thông báo ở góc dưới bên phải"

    • Mẹo chuyên nghiệp

  • Hãy cụ thể về ý định thiết kế của bạn — "phong cách SaaS doanh nghiệp với viền tinh tế" hoặc "ứng dụng tiêu dùng với góc bo tròn và bóng đổ nhẹ" tạo ra kết quả hoàn toàn khác nhau
  • Yêu cầu Neotask điều chỉnh thành phần 21st.dev đã tìm thấy cho phù hợp với bảng màu hiện có của bạn bằng cách cung cấp giá trị màu chính/phụ của bạn
  • Sử dụng tạo thành phần sớm trong quy trình thiết kế để nhanh chóng tạo mẫu bố cục trước khi cam kết với một hệ thống thiết kế đầy đủ
  • Kết hợp với quy trình làm việc trình soạn thảo mã của bạn thông qua OpenClaw — tạo thành phần, tinh chỉnh bằng hội thoại và xuất tệp cuối cùng trực tiếp vào dự án của bạn

    • Works Well With