Design TasteRedesignUI PolishAI Agent Skill
redesign-existing-projects
Nâng cấp giao diện website hiện có lên chất lượng cao cấp, rà soát và loại bỏ các lỗi thiết kế AI mà không làm hỏng tính năng.
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 leonxlnx/taste-skill@redesign-existing-projects
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# Redesign Existing Projects Skill Audit typography, surfaces, spacing, and micro-interactions to transform generic prototypes into production-grade interfaces.