DesignUI/UXAnti-slopAI Agent Skill
frontend-design
Hướng dẫn thiết kế giao diện trực quan có cá tính, thẩm mỹ cao, thoát khỏi các khuôn mẫu mặc định sáo rỗng của AI.
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 anthropics/skills@frontend-design
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# Frontend Design Skill Eliminate AI slop, purge purple gradients, and create intentional, responsive layouts with distinctive typographic hierarchy.