Khi giao UI cho AI làm, từng component thì vẫn ổn nhưng khi ghép lại lại lộ rõ “mùi đồ được tạo ra”.
Nguyên nhân không phải vì từng phần xấu, mà vì các phần không ăn khớp với nhau — thiếu tính nhất quán.
Cách giải quyết lại đơn giản đến bất ngờ — với mỗi trục (góc bo, màu nhấn, khoảng cách, bóng đổ), chỉ chọn một giá trị rồi đồng bộ tất cả theo đó.
Bài viết được tổng hợp dựa trên Refactoring UI·Material 3·Apple HIG·WCAG kèm CSS có thể sao chép dùng ngay.
Demo trực tiếp: https://styleseed-demo.vercel.app/how-it-thinks
Mã nguồn mở (MIT): https://github.com/bitjaru/styleseed
7 bình luận
Sẽ rất tốt nếu phần viết UX của toss cũng được tài liệu hóa.
Tôi sẽ chuẩn bị.
Nghe có vẻ khá hiển nhiên, nhưng lại là một điểm mình chưa từng nghĩ tới, nên nếu áp dụng được thì có vẻ sẽ cải thiện rất nhiều, khá đáng mong đợi.
Hãy dùng thử và cứ tự do đăng phản hồi lên GitHub nhé!
Trong trạng thái đã có sẵn design system, không thể chỉ áp dụng các quy tắc của agent thôi sao?
Vâng, bạn có thể tách riêng và chỉ dùng bộ quy tắc.
Bộ quy tắc StyleSeed không ép buộc màu sắc hay component cụ thể, mà chỉ chứa các
tiêu chí ra quyết định kiểu "trong trường hợp này thì làm như vậy", nên có thể đặt nguyên vẹn lên trên hệ thống hiện có.
Không cần cài đặt, chỉ cần một câu là đủ:
"đọc https://styleseed-demo.vercel.app/llms.txt và áp dụng các quy tắc thiết kế này giúp tôi"
Nếu bạn muốn hệ thống hóa thiết kế hiện có, hãy ghi các quyết định đã chốt sẵn (khoảng cách, bo góc, màu nhấn, v.v.)
vào file đó, mỗi dòng một mục. Agent sẽ tái sử dụng chúng trên từng màn hình mới,
để dần cố định thành một hệ thống nhất quán. Các quy tắc mặc định là điểm khởi đầu, còn chỗ nào không phù hợp thì cứ sửa lại để dùng.
Đã giúp ích cho tôi rất nhiều. Cảm ơn bạn.