seek-oss/playroom

🎨 Playroom – Thiết kế bằng code, ngay trong trình duyệt

Môi trường thiết kế zero-install: import trực tiếp component library của bạn và lướt qua mọi kích thước màn hình và theme chỉ bằng JSX.

Playroom là một bộ công cụ cho phép bạn xây dựng một không gian thiết kế độc lập, dựa trên JSX và thư viện component hiện có của dự án. Đóng gói thành một bundle đứng độc lập, Playroom triển khai cùng với tài liệu design system mà không cần cài đặt thêm.

✨ Điểm nổi bật

• Thiết kế đa theme & kích thước: Duyệt đồng thời nhiều theme và breakpoint chỉ trong một giao diện.
• Zero-install: Người dùng không cần cài bất kỳ phần mềm nàm — mở trình duyệt là thiết kế được ngay.
• Prototype nhanh bằng code thật: Viết JSX để tạo mock-up và prototype tương tác ngay lập tức.
• Chia sẻ qua URL: Lưu và chia sẻ thiết kế chỉ bằng một đường link.
• Cấu hình linh hoạt: Hỗ trợ webpack tùy chỉnh, theme, độ rộng màn hình, snippet và nhiều tùy chọn khác.
• Tích hợp dễ dàng: Chỉ cần thêm script và file cấu hình playroom.config.js vào dự án.

💡 Vì sao đáng chú ý

Không chỉ là công cụ preview, Playroom biến design system thành một môi trường thử nghiệm trực tiếp. Nhà thiết kế và developer có thể nhanh chóng kiểm chứng tính linh hoạt của hệ thống component, đồng thời khám phá cách chúng hoạt động trên mọi thiết bị và theme chỉ bằng vài dòng JSX.

#DesignSystem #React #JSX #Playroom #TiniX