Kubai Icons হলো Claude-এর একটি স্কিল, যা একই ভিজ্যুয়াল ভাষা অনুসরণকারী আইকন তৈরি করে। Claude-কে ফিচারের তালিকা বা বিদ্যমান কোনো প্রোডাক্ট রিপোজিটরি দিলে, এটি প্রকল্পে অন্তর্ভুক্ত 66টি উদাহরণের সঙ্গে সামঞ্জস্যপূর্ণ আইকন ডিজাইন করতে পারে। ফলাফল JavaScript-চালিত একটি ডায়নামিক SVG অথবা স্বয়ংসম্পূর্ণ স্ট্যাটিক SVG ফাইল হতে পারে।
সিস্টেমটি স্তরযুক্ত আকৃতি, বাইরের আউটলাইন, অ্যাকসেন্ট থেকে তৈরি রং, গ্রেডিয়েন্ট, ছায়া এবং অবজেক্ট-নির্দিষ্ট হোভার মুভমেন্টের ওপর ভিত্তি করে তৈরি। এতে সাধারণ অ্যানিমেশনের পরিবর্তে ফোল্ডার খোলে, খাম সিলমুক্ত হয় এবং ক্যালেন্ডারের পাতা উল্টে যায়।
সম্পূর্ণ সংগ্রহের প্রিভিউ দেখতে, প্যালেট পরিবর্তন করতে এবং আইকনগুলোর ওপর হোভার করতে লাইভ গ্যালারি খুলুন।
প্রকল্পটি যেভাবে কাজ করে
Kubai Icons সেই ডিজাইন নিয়ম ও বাস্তবায়ন সরঞ্জামগুলো একত্র করে, যেগুলো Claude-এর সংগ্রহটি ধারাবাহিকভাবে সম্প্রসারণের জন্য প্রয়োজন:
PROMPT.mdক্যানভাসের আকার, কীলাইন, স্তর, কোণ, আউটলাইন, আলো, রং, চিহ্ন এবং মুভমেন্টের কঠোর প্রয়োজনীয়তাগুলো নির্ধারণ করে।src/engine.jsরং তৈরি, বাইরের আউটলাইন, গ্রেডিয়েন্ট, ছায়া, ইন্টারপোলেশন এবং প্যালেট সরবরাহ করে।src/icons.js-এ 66টি সম্পূর্ণ উদাহরণ রয়েছে, যা নতুন আইকনের কাঠামোগত রেফারেন্স হিসেবে কাজ করে।scripts/check.mjsস্থির ও হোভার অবস্থার পাশাপাশি অ্যানিমেশনের মধ্যবর্তী ফ্রেম, একাধিক আকার এবং প্রতিটি প্যালেট জুড়ে হেডলেস ভিজ্যুয়াল পরীক্ষা চালায়।
প্রতিটি আইকন একটি পেছনের অংশ, ঐচ্ছিক সাদা কনটেন্ট এবং একটি সামনের অংশ দিয়ে তৈরি। ফোল্ডারের মতো এই নির্মাণ গভীরতা বজায় রাখতে এবং মুভমেন্টকে স্পষ্ট করতে সাহায্য করে। প্রতিটি অংশে দুটি কীফ্রেম থাকে: স্থির অবস্থা এবং হোভার অবস্থা।
Claude স্কিল ইনস্টল করুন
Claude Code-এর মাধ্যমে ইনস্টল
সবচেয়ে সহজ পদ্ধতি হলো Claude Code-কে রিপোজিটরিটি তার skills ডিরেক্টরিতে ইনস্টল করতে বলা। নিচের অনুরোধটি পাঠান:
Install the Kubai Icons skill for me:
clone https://github.com/kubai087/kubai-icons into ~/.claude/skills/kubai-icons
(if it's already there, pull the latest version instead),
make sure ~/.claude/skills/kubai-icons/SKILL.md exists, and tell me when it's ready.ইনস্টলেশনের পর Claude Code পুনরায় চালু করুন। পরবর্তীবার চালু হলে স্কিলটি পাওয়া যাবে।
ম্যানুয়ালি ইনস্টল
সর্বশেষ রিলিজ আর্কাইভ ডাউনলোড করে আপনার skills ডিরেক্টরিতে এক্সট্র্যাক্ট করতে পারেন:
unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/বিকল্পভাবে, সরাসরি রিপোজিটরি ক্লোন করুন:
git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-iconsযে স্কিল মার্কেটপ্লেসে SKILL.md-এ version এবং display-name ফিল্ড প্রয়োজন, সেখানে একই রিলিজের kubai-icons-v*-platform.zip আর্কাইভ ব্যবহার করুন। এর frontmatter-এ ওই ফিল্ডগুলো অন্তর্ভুক্ত রয়েছে।
উপযুক্ত মডেল বেছে নিন
এই স্কিলের জন্য নিখুঁত জ্যামিতি, স্তরযুক্ত অ্যানিমেশন এবং বারবার স্ক্রিনশট পর্যালোচনা প্রয়োজন। প্রকল্পটি Claude Opus 5.5 দিয়ে তৈরি ও blind-tested হয়েছে। Claude Code-এ এটি নির্বাচন করতে ব্যবহার করুন:
claude --model claude-opus-5-5আপনার প্রথম আইকন তৈরি করুন
স্কিল ইনস্টল হয়ে গেলে, সাধারণ ভাষায় আপনার প্রয়োজনীয় আইকনগুলোর বর্ণনা দিন। স্কিলটির নাম আলাদাভাবে উল্লেখ করার প্রয়োজন নেই, কারণ এটি আইকন-সম্পর্কিত অনুরোধে সাড়া দেয়।
Read this repository and draw dynamic icons for its main features.Add a scissors icon and a map icon to this set.We need an icon for Export that matches the others.
Claude একটি পুনরাবৃত্তিযোগ্য প্রক্রিয়া অনুসরণ করে:
- এটি
PROMPT.mdপড়ে এবং প্রতিটি ফিচারকে একটি দৈনন্দিন বস্তু ও স্বাভাবিক হোভার অ্যাকশন হিসেবে বর্ণনা করে, যেমন “একটি ফোল্ডার খোলে।” - এটি কাঠামোর দিক থেকে সবচেয়ে কাছের বিদ্যমান আইকন নির্বাচন করে এবং প্রকল্পের ইঞ্জিন পুনরায় ব্যবহার করে।
- নতুন কাজের পাশে তুলনামূলক আইকন রেখে self-check চালায়।
- মাত্রা, আউটলাইন, স্তর, রং এবং অ্যানিমেশনের অবস্থা যাচাই করতে স্ক্রিনশট পর্যালোচনা করে।
- চেকলিস্ট পাস না হওয়া পর্যন্ত পুনরাবৃত্তি করে, তারপর গ্যালারিতে আইকনগুলো যোগ করে এবং গণনা আপডেট করে।
আপনার নিজস্ব প্রোডাক্টের জন্য আলাদা আইকন সেট শুরু করতে, স্কিলটি ইঞ্জিন, গ্যালারি এবং self-check আপনার প্রকল্পে কপি করে দিতে পারে, যাতে নতুন আইকনগুলো সেখানেই তৈরি করা যায়।
ডায়নামিক বা স্ট্যাটিক আউটপুট বেছে নিন
ডায়নামিক আউটপুট ডিফল্ট। এতে SVG ও JavaScript থাকে, যা হোভারের সময় আইকনের আকৃতি পরিবর্তন করে এবং JavaScript-চালিত ওয়েব পেজ বা ইন্টারফেসের জন্য উপযোগী। স্ট্যাটিক আউটপুট প্রতিটি আইকনের জন্য স্ক্রিপ্ট বা স্টাইলশিটবিহীন একটি স্বয়ংসম্পূর্ণ SVG তৈরি করে, যা ডিজাইন টুল, নেটিভ অ্যাপ, ডকুমেন্ট এবং <img> এলিমেন্টের জন্য উপযোগী।
এক্সপোর্ট করা অ্যাসেটের প্রয়োজন হলে Claude-কে static SVG files বা icons I can drop into Figma চাইতে পারেন। রিপোজিটরি থেকেও বিদ্যমান আইকন সরাসরি এক্সপোর্ট করা যায়।
node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/এক্সপোর্টের অপশন
--paletteএকটি প্যালেট নির্বাচন করে। উপলভ্য মানের মধ্যে রয়েছে 彩色, 蓝灰, 青瓷, 薄荷, 薰衣草, 杏色 এবং 黑色।--accent #hexপ্রতিটি আইকনে একটি অ্যাকসেন্ট রং প্রয়োগ করে।--state hoverস্থির অবস্থার পরিবর্তে হোভার অ্যানিমেশনের শেষ অবস্থা এক্সপোর্ট করে।--size 96পিক্সেলে আউটপুটের প্রস্থ ও উচ্চতা নির্ধারণ করে।--pad 2.5ক্যানভাসের চারপাশে অতিরিক্ত জায়গা যোগ করে, যাতে ছায়া কেটে না যায়।--out dirআউটপুট ডিরেক্টরি নির্বাচন করে। ডিফল্ট হলোexport/।
স্থানীয়ভাবে আইকন সেটের প্রিভিউ দেখুন
সম্পূর্ণ সেট পরিদর্শনের জন্য রিপোজিটরিতে একটি গ্যালারি রয়েছে। আইকনগুলো স্থানীয়ভাবে দেখতে ব্রাউজারে index.html খুলুন। কোনো আইকনের ওপর হোভার করলে তার গতি দেখুন, প্যালেট পরিবর্তন করুন, অথবা ডেমো মোড চালু করে সংগ্রহটির অ্যানিমেশন দেখুন।
সাতটি প্যালেট অন্তর্ভুক্ত রয়েছে: প্রতি আইকনে একটি রং, নীল-ধূসর, সেলাডন, মিন্ট, ল্যাভেন্ডার, এপ্রিকট এবং কালো। প্যালেট সিস্টেম একটি বেস অ্যাকসেন্ট থেকে আইকনের রং নির্ধারণ করে, আর প্যালেট পরিবর্তন করলে রঙের রূপান্তরও অ্যানিমেট হয়।
ভিজ্যুয়াল স্ব-পরীক্ষা চালান
স্ব-পরীক্ষার জন্য Node.js 18 বা পরবর্তী সংস্করণ এবং Chrome প্রয়োজন। এটি হেডলেসভাবে চলে, তাই কোনো ব্রাউজার উইন্ডো খোলে না। নির্দিষ্ট আইকন পরীক্ষা করতে এবং তুলনার জন্য বিদ্যমান আইকনগুলো তাদের পাশে রাখতে চালান:
node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载--onlyশুধু উল্লেখ করা আইকনগুলো পরীক্ষা করে। এটি না দিলে সম্পূর্ণ সেট পরীক্ষা করা হয়।--withভিজ্যুয়াল তুলনার জন্য নির্বাচিত আইকনগুলোর পাশে বিদ্যমান আইকন যোগ করে।--accent #F59E0Bহালকা ব্যাকগ্রাউন্ডে পরীক্ষার চিহ্নে একটি অ্যাকসেন্ট রং প্রয়োগ করে।--scale 3স্বাভাবিক আকারের তিন গুণ স্কেলে শিট রেন্ডার করে, যাতে জোড়ের ত্রুটি প্রকাশ পায়।--out dirস্ক্রিনশটগুলোcheck-out/-এর বদলে অন্য একটি ডিরেক্টরিতে লেখে।
Chrome অস্বাভাবিক কোনো পাথে ইনস্টল করা থাকলে CHROME পরিবেশ ভেরিয়েবল সেট করুন। রিপোজিটরির অ্যানিমেশন তৈরির স্ক্রিপ্ট scripts/media.mjs-এর জন্য অতিরিক্তভাবে ffmpeg এবং img2webp প্রয়োজন।
উন্নত ওয়ার্কফ্লো টিপস
শুধু অর্থ নয়, কাঠামো দিয়ে শুরু করুন
নতুন আইকনের অনুরোধ করার সময় বৈশিষ্ট্যটি এবং এর কাঙ্ক্ষিত শারীরিক ক্রিয়া ব্যাখ্যা করুন। Claude কাঠামোগত সূচনা হিসেবে সবচেয়ে কাছের বিদ্যমান উদাহরণ ব্যবহার করে, তাই নিরাপত্তা প্রতীকের একটি সাধারণ অনুরোধের চেয়ে “স্প্রিংয়ের মতো খুলে যায় এমন একটি তালা” অনুরোধটি বেশি কার্যকর নির্দেশনা দেয়।
বিভিন্ন অবস্থায় আইকন তুলনা করুন
তুলনামূলক আইকন, বিকল্প প্যালেট এবং বড় স্কেল ব্যবহার করে পরীক্ষা চালান। এতে আউটলাইন, জোড়, স্তরবিন্যাস, চিহ্ন এবং রঙের কনট্রাস্টের অসামঞ্জস্য প্রকাশ পেতে পারে, যা একটি সাধারণ ডিফল্ট প্রিভিউতে দেখা নাও যেতে পারে।
ওয়েব-বহির্ভূত গন্তব্যের জন্য স্ট্যাটিক এক্সপোর্ট ব্যবহার করুন
যে গন্তব্যে ইঞ্জিনের JavaScript চালানো যায় না, যেমন কোনো ডিজাইন টুল, নেটিভ অ্যাপ্লিকেশন, ডকুমেন্ট বা সাধারণ ইমেজ এলিমেন্ট, সেখানে স্ট্যাটিক SVG বেছে নিন। ইন্টারফেসের অংশ হিসেবে হোভার ইন্টারঅ্যাকশন প্রয়োজন হলে ডায়নামিক আউটপুট ব্যবহার করুন।
সতর্কতার সঙ্গে উন্নতিতে অবদান রাখুন
অস্পষ্ট নিয়মের প্রতিবেদন করে, নতুন Claude সেশন দিয়ে একটি ব্লাইন্ড টেস্ট চালিয়ে অথবা কোনো স্ক্রিপ্ট ঠিক করে আপনি স্কিলটি উন্নত করতে পারেন। স্কিলটি ব্যবহার করে একটি আইকন ডিজাইন করে পুল রিকোয়েস্টও জমা দিতে পারেন। অবদান রাখার আগে CONTRIBUTING.md এবং আচরণবিধি পড়ুন। নিরাপত্তা-সংক্রান্ত সমস্যার ক্ষেত্রে SECURITY.md অনুসরণ করুন।
লাইসেন্স-সংক্রান্ত বিবেচনা
Kubai Icons Kubai Icons License ব্যবহার করে এবং এটি ওপেন সোর্সের বদলে সোর্স-অ্যাভেইলেবল। স্কিল দিয়ে তৈরি আইকন তাদের নির্মাতাদের মালিকানাধীন এবং ক্রেডিট ছাড়াই বাণিজ্যিকভাবে ব্যবহার করা যেতে পারে। প্রতিটি ফাইলের শীর্ষে থাকা কপিরাইট নোটিশ অক্ষত থাকলে রিপোজিটরির ইঞ্জিন, গ্যালারি, উদাহরণ আইকন এবং স্ব-পরীক্ষা একটি আইকন-সেট প্রকল্পে কপি করা যেতে পারে।
৬৬টি উদাহরণ আইকন পণ্যে ব্যবহার করা যেতে পারে, অ্যানিমেটেড বা এক্সপোর্ট করা SVG অ্যাসেট হিসেবেও, তবে আলাদা আইকন প্যাক হিসেবে নয়। স্কিলটি ব্যবহার করা, ব্যক্তিগত কাজের জন্য পরিবর্তন করা এবং অপরিবর্তিত সম্পূর্ণ কপি হিসেবে বিনামূল্যে শেয়ার করা যেতে পারে। PROMPT.md এবং SKILL.md-এর পরিবর্তিত বা অনূদিত সংস্করণ অন্য পণ্য হিসেবে পুনঃপ্রকাশ, বিক্রি বা ভিন্ন নামে উপস্থাপন করা যাবে না।
উপসংহার
Kubai Icons Claude-কে একবারের ছবি-জেনারেটরের বদলে পুনর্ব্যবহারযোগ্য আইকন-ডিজাইন ওয়ার্কফ্লোতে রূপান্তর করে। স্কিলটি ইনস্টল করুন, আপনার পণ্যের বৈশিষ্ট্য বর্ণনা করুন, ডায়নামিক বা স্ট্যাটিক আউটপুট বেছে নিন, স্থানীয় গ্যালারি পরিদর্শন করুন এবং সামঞ্জস্য পরিমার্জনের জন্য হেডলেস স্ব-পরীক্ষা ব্যবহার করুন। অন্তর্ভুক্ত ইঞ্জিন, উদাহরণ, প্যালেট এবং নিয়মগুলো প্রতিবার ভিজ্যুয়াল সিস্টেম নতুন করে তৈরি না করেই সেটটি সম্প্রসারণকে বাস্তবসম্মত করে তোলে।