Tạo biểu tượng SVG động và tĩnh nhất quán với Kubai Icons cho Claude

Kubai Icons là một skill Claude để tạo các biểu tượng dùng chung một ngôn ngữ trực quan. Hãy cung cấp cho Claude danh sách tính năng hoặc kho sản phẩm hiện có, và công cụ có thể thiết kế các biểu tượng phù hợp với 66 ví dụ trong dự án. Kết quả có thể là SVG động được điều khiển bằng JavaScript hoặc tệp SVG tĩnh độc lập.

Hệ thống dựa trên các hình dạng nhiều lớp, đường viền bên ngoài, màu sắc bắt nguồn từ màu nhấn, chuyển màu, bóng đổ và chuyển động khi di chuột đặc thù cho từng đối tượng. Một thư mục mở ra, phong bì mở niêm phong, còn lịch lật trang thay vì sử dụng hoạt ảnh chung chung.

Mở thư viện trực tiếp để xem trước toàn bộ bộ sưu tập, chuyển đổi bảng màu và di chuột qua các biểu tượng.

Cách dự án hoạt động

Kubai Icons đóng gói các quy tắc thiết kế và công cụ triển khai mà Claude cần để mở rộng bộ sưu tập một cách nhất quán:

• PROMPT.md định nghĩa các yêu cầu bắt buộc về kích thước canvas, đường chuẩn, lớp, góc, đường viền, ánh sáng, màu sắc, dấu hiệu và chuyển động.
• src/engine.js cung cấp tính năng biến đổi màu, đường viền bên ngoài, chuyển màu, bóng đổ, nội suy và bảng màu.
• src/icons.js chứa 66 ví dụ hoàn chỉnh làm tài liệu tham chiếu cấu trúc cho các biểu tượng mới.
• scripts/check.mjs thực hiện kiểm tra trực quan không cần giao diện trên các trạng thái nghỉ và di chuột, các khung hình hoạt ảnh trung gian, nhiều kích thước và mọi bảng màu.

Mỗi biểu tượng được ghép từ phần sau, phần nội dung màu trắng tùy chọn và phần trước. Cấu trúc giống thư mục này giúp duy trì chiều sâu và làm cho chuyển động dễ nhận biết. Mỗi phần có hai khung hình chính: trạng thái nghỉ và trạng thái di chuột.

Cài đặt skill Claude

Cài đặt qua Claude Code

Cách đơn giản nhất là yêu cầu Claude Code cài đặt kho vào thư mục skill của nó. Gửi yêu cầu sau:

Cài đặt skill Kubai Icons cho tôi:
clone https://github.com/kubai087/kubai-icons vào ~/.claude/skills/kubai-icons
(nếu thư mục đã tồn tại, hãy pull phiên bản mới nhất),
hãy đảm bảo ~/.claude/skills/kubai-icons/SKILL.md tồn tại và cho tôi biết khi đã sẵn sàng.

Khởi động lại Claude Code sau khi cài đặt. Skill sẽ khả dụng vào lần khởi động tiếp theo.

Cài đặt thủ công

Bạn có thể tải xuống tệp lưu trữ bản phát hành mới nhất và giải nén vào thư mục skill:

unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/

Ngoài ra, bạn có thể sao chép trực tiếp kho:

git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

Đối với marketplace skill yêu cầu các trường phiên bản và tên hiển thị trong SKILL.md, hãy sử dụng tệp lưu trữ kubai-icons-v*-platform.zip từ cùng bản phát hành. Tệp này chứa các trường đó trong phần frontmatter.

Chọn model phù hợp

Skill dựa vào hình học chính xác, hoạt ảnh nhiều lớp và việc xem xét ảnh chụp màn hình lặp lại. Dự án được phát triển và kiểm thử mù bằng Claude Opus 5.5. Trong Claude Code, bạn có thể chọn model này bằng:

claude --model claude-opus-5-5

Tạo các biểu tượng đầu tiên

Sau khi cài đặt skill, hãy mô tả các biểu tượng bạn cần bằng ngôn ngữ thông thường. Bạn không cần nêu rõ tên skill vì skill sẽ phản hồi các yêu cầu liên quan đến biểu tượng.

• Đọc kho này và vẽ các biểu tượng động cho những tính năng chính.
• Thêm biểu tượng kéo và biểu tượng bản đồ vào bộ này.
• Chúng tôi cần một biểu tượng cho tính năng Xuất, phù hợp với các biểu tượng khác.

Claude tuân theo một quy trình có thể lặp lại:

1. Đọc PROMPT.md và mô tả mỗi tính năng bằng một vật thể quen thuộc cùng hành động di chuột tự nhiên, chẳng hạn như “một thư mục mở ra”.
2. Chọn biểu tượng hiện có gần nhất về cấu trúc và tái sử dụng engine của dự án.
3. Chạy tính năng tự kiểm tra với các biểu tượng so sánh bên cạnh sản phẩm mới.
4. Kiểm tra ảnh chụp màn hình về kích thước, đường viền, lớp, màu sắc và các trạng thái hoạt ảnh.
5. Lặp lại cho đến khi danh sách kiểm tra đạt yêu cầu, sau đó thêm các biểu tượng vào thư viện và cập nhật số lượng.

Để bắt đầu một bộ biểu tượng riêng cho sản phẩm của mình, skill có thể sao chép engine, thư viện và tính năng tự kiểm tra vào dự án của bạn để phát triển các biểu tượng mới tại đó.

Chọn đầu ra động hoặc tĩnh

Đầu ra động là mặc định. Đầu ra này chứa SVG và JavaScript thay đổi hình dạng biểu tượng khi di chuột, phù hợp với các trang web hoặc giao diện chạy JavaScript. Đầu ra tĩnh tạo một SVG độc lập cho mỗi biểu tượng, không có script hoặc stylesheet, phù hợp với công cụ thiết kế, ứng dụng gốc, tài liệu và các phần tử <img>.

Hãy yêu cầu Claude tạo tệp SVG tĩnh hoặc các biểu tượng tôi có thể đưa vào Figma khi cần tài sản đã xuất. Bạn cũng có thể xuất trực tiếp các biểu tượng hiện có từ kho.

node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/

Tùy chọn xuất

• --palette chọn một bảng màu. Các giá trị khả dụng gồm 彩色, 蓝灰, 青瓷, 薄荷, 薰衣草, 杏色 và 黑色.
• --accent #hex áp dụng một màu nhấn cho mọi biểu tượng.
• --state hover xuất phần cuối của hoạt ảnh di chuột thay vì tư thế nghỉ.
• --size 96 đặt chiều rộng và chiều cao đầu ra theo pixel.
• --pad 2.5 thêm khoảng trống quanh canvas để bóng đổ không bị cắt.
• --out dir chọn thư mục đầu ra. Mặc định là export/.

Xem trước bộ biểu tượng cục bộ

Kho lưu trữ bao gồm một thư viện để kiểm tra toàn bộ bộ sưu tập. Mở index.html trong trình duyệt để xem các biểu tượng cục bộ. Di chuột qua một biểu tượng để xem chuyển động, thay đổi bảng màu hoặc bật chế độ demo để theo dõi toàn bộ bộ sưu tập chuyển động.

Có bảy bảng màu: mỗi biểu tượng một màu, xanh xám, xanh celadon, xanh bạc hà, tím oải hương, màu mơ và đen. Hệ thống bảng màu lấy màu biểu tượng từ một màu nhấn cơ sở; khi thay đổi bảng màu, quá trình chuyển màu cũng được tạo hiệu ứng.

Chạy tính năng tự kiểm tra trực quan

Tính năng tự kiểm tra yêu cầu Node.js 18 trở lên và Chrome. Tính năng này chạy ở chế độ không giao diện, nên không mở cửa sổ trình duyệt. Để kiểm tra các biểu tượng đã chọn và đặt các biểu tượng hiện có bên cạnh chúng để so sánh, hãy chạy:

node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载

• --only chỉ kiểm tra các biểu tượng được chỉ định. Nếu không dùng tùy chọn này, toàn bộ bộ sưu tập sẽ được kiểm tra.
• --with thêm các biểu tượng hiện có bên cạnh những biểu tượng đã chọn để so sánh trực quan.
• --accent #F59E0B áp dụng một màu nhấn cho các dấu kiểm tra trên nền sáng.
• --scale 3 hiển thị các trang ở tỷ lệ gấp ba lần bình thường để làm lộ các đường nối.
• --out dir ghi ảnh chụp màn hình vào thư mục khác với check-out/.

Đặt biến môi trường CHROME nếu Chrome được cài đặt tại một đường dẫn không chuẩn. Tập lệnh tạo hiệu ứng của kho lưu trữ, scripts/media.mjs, cũng yêu cầu ffmpeg và img2webp.

Mẹo quy trình nâng cao

Bắt đầu từ cấu trúc, không chỉ từ ý nghĩa

Khi yêu cầu một biểu tượng mới, hãy giải thích tính năng và hành động vật lý mà biểu tượng đó thể hiện. Claude sử dụng ví dụ hiện có gần nhất làm điểm khởi đầu về cấu trúc, vì vậy yêu cầu như “một ổ khóa bật mở” sẽ cung cấp định hướng hữu ích hơn so với yêu cầu chung chung về một biểu tượng bảo mật.

So sánh biểu tượng trong nhiều điều kiện

Chạy kiểm tra với các biểu tượng so sánh, bảng màu thay thế và tỷ lệ lớn hơn. Điều này giúp phát hiện những điểm không nhất quán trong đường viền, đường nối, lớp, dấu hiệu và độ tương phản màu mà có thể không thấy trong một bản xem trước mặc định duy nhất.

Dùng bản xuất tĩnh cho các đích đến không phải web

Chọn SVG tĩnh khi đích đến không thể chạy JavaScript của bộ máy, chẳng hạn như công cụ thiết kế, ứng dụng gốc, tài liệu hoặc phần tử hình ảnh tiêu chuẩn. Dùng đầu ra động khi tương tác di chuột là một phần của giao diện.

Đóng góp cải tiến một cách cẩn trọng

Bạn có thể cải thiện skill bằng cách báo cáo các quy tắc chưa rõ ràng, chạy thử nghiệm mù với một phiên Claude mới hoặc sửa một tập lệnh. Bạn cũng có thể thiết kế một biểu tượng bằng skill và gửi pull request. Hãy đọc CONTRIBUTING.md và quy tắc ứng xử trước khi đóng góp. Các vấn đề bảo mật nên được xử lý theo SECURITY.md.

Lưu ý về cấp phép

Kubai Icons sử dụng Giấy phép Kubai Icons và là phần mềm có mã nguồn được cung cấp để xem, thay vì phần mềm nguồn mở. Các biểu tượng được tạo bằng skill thuộc về người tạo ra chúng và có thể được sử dụng cho mục đích thương mại mà không cần ghi công. Bộ máy, thư viện, các biểu tượng mẫu và tính năng tự kiểm tra của kho lưu trữ có thể được sao chép vào một dự án bộ biểu tượng nếu thông báo bản quyền ở đầu mỗi tệp vẫn được giữ nguyên.

66 biểu tượng mẫu có thể được sử dụng trong sản phẩm, bao gồm dưới dạng tài sản SVG động hoặc đã xuất, nhưng không được sử dụng như một bộ biểu tượng riêng biệt. Skill có thể được sử dụng, chỉnh sửa cho công việc cá nhân và chia sẻ miễn phí dưới dạng bản sao chính xác, không sửa đổi. Các phiên bản đã chỉnh sửa hoặc dịch của PROMPT.md và SKILL.md không được tái xuất bản dưới dạng sản phẩm khác, bán hoặc giới thiệu dưới tên khác.

Kết luận

Kubai Icons biến Claude thành một quy trình thiết kế biểu tượng có thể lặp lại thay vì một công cụ tạo hình ảnh dùng một lần. Cài đặt skill, mô tả các tính năng sản phẩm, chọn đầu ra động hoặc tĩnh, kiểm tra thư viện cục bộ và dùng tính năng tự kiểm tra không giao diện để cải thiện tính nhất quán. Bộ máy, các ví dụ, bảng màu và quy tắc đi kèm giúp việc mở rộng bộ sưu tập trở nên thiết thực mà không phải xây dựng lại hệ thống hình ảnh mỗi lần.