Solid Glass: design system phong cách kính cho giao diện ứng dụng AI
Solid Glass là một design system mã nguồn mở dành cho ứng dụng AI, mang đến giao diện lấy cảm hứng từ kính nhưng không trong suốt đến mức gây khó đọc. Ngôn ngữ hình ảnh của dự án dùng các điểm sáng tinh tế, đường viền mảnh, bóng mềm, chiều sâu theo lớp và chuyển động tiết chế để hỗ trợ phản hồi đang được tạo, hoạt động của agent và những quyết định cần con người xác nhận. Bộ dự án có các component dựng sẵn như chỉ báo trạng thái, panel, bộ tải, ô nhập lệnh, danh sách bước dùng công cụ, màn hình hiển thị diff, vòng context và thông báo tác vụ. Solid Glass được triển khai dưới dạng một stylesheet CSS nhẹ, hoạt động với các component shadcn/ui hiện có ở cả chế độ sáng lẫn tối mà không cần sửa chúng. Lập trình viên có thể cài đặt trong dự án React 19 dùng Tailwind CSS 4 và Base UI thông qua registry dòng lệnh của shadcn, sau đó tùy chỉnh độ dày, màu sắc, độ mờ, bo góc và màu nhấn trên trang Create. Về thực tế, Solid Glass cung cấp một điểm khởi đầu có thể tái sử dụng để xây dựng dashboard AI và giao diện agent có chiều sâu, phản hồi rõ ràng nhưng vẫn dễ đọc.
Nhà phát triển xây dựng chatbot, dashboard hoặc giao diện agent có thể dùng Solid Glass làm lớp giao diện trên shadcn/ui, với các thành phần như trạng thái tác vụ, luồng công cụ và vùng hiển thị diff. Bạn có thể thử cài vào dự án React 19 hiện có và điều chỉnh độ dày, màu, độ mờ hoặc bo góc theo nhu cầu.
Đọc bài gốc