Hướng dẫn để Claude biến đổi các giao diện "nhìn là biết do AI tạo" thành những thiết kế có cá tính riêng: trước tiên, hãy liệt kê các dấu hiệu đặc trưng như gradient tím, hiệu ứng phát sáng, nhãn dán emoji, văn bản kiểu hô hào và khoảng cách không đồng đều; sau đó, xác định hướng đi dựa trên sản phẩm của bạn và thực hiện chỉnh sửa theo từng vòng lặp cho khoảng cách, màu sắc, biểu tượng, văn bản, phông chữ, bố cục, chi tiết, hình ảnh và hiệu ứng chuyển động.
Số sao 1100 (+58 / 24h)
Lý do
- Cung cấp kết quả kiểm toán và định hướng thiết kế trước khi chỉnh sửa giúp phát hiện và sửa lỗi sớm; nếu giao diện vốn đã tốt, công cụ sẽ nói thẳng và chỉ đề xuất một vài thay đổi nhỏ
- Khi cần hình ảnh minh họa, có thể tạo ra thông qua fal, Replicate, OpenAI Images hoặc Higgsfield; nếu chưa tích hợp, hệ thống sẽ đề xuất kết nối dưới dạng máy chủ MCP; ngoài ra, có thể sử dụng Playwright và ffmpeg để tạo một video vuông "biến hình giao diện" dài dưới 10 giây
- Thư mục examples bao gồm hai giao diện mẫu cần chỉnh sửa
Cách sử dụng
- Sau khi git clone, sao chép skills/unslop vào ~/.claude/skills/ (đối với một dự án cụ thể, đặt vào .claude/skills/)
- Trong Claude Code, nhập /unslop this dashboard, /unslop the hero of <URL>, hoặc đưa ra yêu cầu bằng ngôn ngữ tự nhiên
Rủi ro
- README rất ngắn gọn, chỉ hướng dẫn cài đặt cho Claude Code, không có đánh giá hiệu quả; việc tạo hình ảnh minh họa yêu cầu kết nối với các dịch vụ hình ảnh trả phí
- Giấy phép CC BY 4.0, khi phân phối lại cần ghi công tác giả và liên kết đến kho lưu trữ; kho lưu trữ được tạo vào ngày 29 tháng 10