oil-icon · Trình tạo bộ icon đồng nhất phong cách

Sinh 16 icon cùng lúc trên một tấm lưới 4×4, rồi cắt từng ô và xoá nền để cho ra bộ icon PNG trong suốt.

Thiết kế · UITrung cấp★ 323⑂ 30Điểm AI 8/10Cập nhật lần cuối: 10 thg 9, 2026

Làm được gì

Tạo cả một bộ icon cùng phong cách: sinh ảnh trên nền xám phẳng (#808080) dạng lưới 4×4 (16 ô) hoặc 3×3 (9 ô) để giảm lệch phong cách giữa các icon.
Dùng scripts/slice_icons.py cắt từng ô, rồi xoá nền bằng floodfill (nét phẳng, viền cứng) hoặc rembg (3D, bóng, ảnh thật) để xuất PNG nền trong suốt.
Có sẵn 9 phong cách: linear, filled, colorblock, cartoon, isometric, render3d, sticker, realistic, animal-badge — mỗi file JSON chứa preamble, bảng màu khoá cứng, chế độ cắt nền và hệ dựng hình (lưới, độ dày nét, bo góc, mức chi tiết, motif).
Có thể đọc tài sản thương hiệu của bạn (logo, linh vật, design token, ảnh chụp màn hình) để suy ra một style-spec riêng.
Bước QA bắt buộc: ghép icon lên nền màu tương phản (ví dụ hồng cánh sen) để soi mảnh thừa từ ô bên cạnh, vệt xám còn sót và tính nhất quán của hệ dựng hình.

Phù hợp với ai

Designer/developer cần xuất trọn bộ icon cho tab bar, danh mục hoặc tính năng của app/web.
Startup, lập trình viên solo cần icon tuỳ biến bám theo màu và motif thương hiệu.
Nhóm đang làm prototype, cần icon raster nhanh để chốt hướng thiết kế.

Ví dụ sử dụng

"16 icon phong cách linear cho app fintech" → viết metaphor kiểu settlement — ví có đồng xu, sinh lưới 4×4, cắt bằng floodfill, giao 16 file PNG trong suốt.
"Icon dashboard theo màu logo công ty" → đọc design token của dự án, khoá bảng màu dạng hex thành style-spec riêng rồi áp lớp hoàn thiện isometric.
"9 icon 3D bóng cho màn hình phần thưởng" → prompt 3×3, chạy cắt với --grid 3 và chế độ rembg.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/oil-oil/oil-icon/HEAD/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)

Tải tệp ZIP bằng nút bên dưới.
Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.

↓ Tải ZIP

Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên AI Skill Mart.
Copy thư mục SKILL.m từ repo GitHub oil-oil/oil-icon vào ~/.claude/skills/oil-icon/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/oil-oil/oil-icon.git ~/.claude/skills/oil-icon && bash ~/.claude/skills/oil-icon/scripts/setup.sh

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

Mở Terminal.
Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
Tải repo về: git clone https://github.com/oil-oil/oil-icon.git ~/.claude/skills/oil-icon
Chuẩn bị môi trường Python cho script cắt ảnh: bash ~/.claude/skills/oil-icon/scripts/setup.sh (sẽ tạo .venv).
Chuẩn bị một nguồn sinh ảnh: ① công cụ image-gen tích hợp sẵn, ② codex CLI, hoặc ③ khoá API OpenAI Images.
Nếu dùng API ngoài, cấu hình khoá theo hướng dẫn trong repo (references/api-key-setup.md). Đừng dán khoá trực tiếp vào khung chat.
Khởi động lại Claude Code và thử: "tạo 16 icon phong cách linear cho màn hình cài đặt".
Lưu ý: tài liệu dùng lẫn reference/ và references/, nên chạy ls ~/.claude/skills/oil-icon để xác nhận tên thư mục thật.

Xem mã nguồn trên GitHub ↗Giấy phép: MIT