Anti-slopUI QualityDesignAI Agent Skill
install-anti-slop
Bộ quy tắc cài đặt nhanh để chặn các mẫu hình "AI slop" phổ biến (gradient tím mặc định, icon chung chung, padding đều tăm tắp) ngay từ đầu.
Tuỳ chọn cài đặt
Cài đặt vào Claude Code, Cursor, Codex hoặc Antigravity bằng lệnh sau:
$ npx skills add dmmulroy/anti-slop@install-anti-slop
Tình huống thực tế ứng dụng Skill này
AI làm UI kiểu "AI slop" - cần nâng lên chất lượng cao cấp
“AI dựng xong giao diện nhưng nhìn là biết ngay "kiểu AI làm" - cần sửa gì trước khi ra mắt?”
Khung hành động 5 bước
- 1Kiểm tra khoảng trắng và căn lề - AI hay dùng padding/margin mặc định đều tăm tắp, thiếu phân cấp thị giác. Tăng khoảng cách giữa các nhóm, giảm trong 1 nhóm.
- 2Kiểm tra bảng màu - AI hay dùng gradient tím-xanh mặc định hoặc quá nhiều màu nhấn cùng lúc. Giới hạn còn 1 màu nhấn chính, còn lại là trung tính.
- 3Kiểm tra font và kiểu chữ - AI hay dùng 1 cỡ chữ cho mọi cấp nội dung. Tạo phân cấp rõ: tiêu đề, phụ đề, nội dung phải khác cỡ/độ đậm rõ rệt.
- 4Kiểm tra icon và minh hoạ - AI hay chèn icon chung chung (bóng đèn, tên lửa, biểu tượng check) không gắn với nội dung thật. Thay bằng icon/hình ảnh cụ thể cho đúng ngữ cảnh sản phẩm.
- 5So sánh với 1 sản phẩm bạn thấy đẹp thật (không phải AI làm) - liệt kê 3 điểm khác biệt cụ thể, rồi sửa từng điểm đó.
Trước khi dùng Skill
"Giao diện có đủ nút, đủ chữ, chạy được - để vậy ra mắt cho nhanh."
Sau khi áp dụng Skill
"Rà lại: bỏ gradient tím mặc định, đổi icon bóng đèn generic thành icon riêng cho tính năng, tăng khoảng cách giữa các card từ 8px lên 24px, giảm còn 1 màu nhấn (xanh) thay vì 4 màu."
Nội dung chỉ dẫn SKILL.md
SKILL.md • Read-only preview# Install Anti-Slop Skill Drop in a checklist that runs automatically before any UI is presented as finished, catching default-gradient, generic-icon, and uniform-spacing tells before they ship.