iso-figure Claude Skill দিয়ে ইন্টার‌্যাক্টিভ আইসোমেট্রিক ফিগার তৈরি করুন

iso-figure কী করে

iso-figure হলো Claude-এর জন্য একটি স্কিল, যা স্বাভাবিক ভাষায় দেওয়া বর্ণনা থেকে ইন্টার‌্যাক্টিভ আইসোমেট্রিক চিত্র তৈরি করে। আপনি একটি বস্তুর নাম বললে, এই স্কিল একটি নম্বরযুক্ত প্লেটের ওপর সূক্ষ্ম রেখায় আঁকা আইসোমেট্রিক চিত্রসহ একটি HTML ফাইল তৈরি করে।

চিত্রিত বস্তুর অংশগুলো চাপলে প্রতিক্রিয়া জানাতে পারে। বস্তুর ওপর নির্ভর করে, কোনো ইন্টার‌্যাকশনে লেখা, সংখ্যা বা সুরের নোট তৈরি হতে পারে। কোনো বস্তুর চাপার মতো অর্থবহ অংশ না থাকলে, স্কিলটি অন্য বিষয় বেছে নেয়।

উদাহরণের জন্য ডেস্ক সিন্থ বা পকেট ক্যালকুলেটর ব্যবহার করে দেখুন। আপনি রিপোজিটরির examples ডিরেক্টরির ফাইলগুলোও খুলতে পারেন।

তৈরি করা চিত্রগুলো কীভাবে কাজ করে

আউটপুটে সাধারণ SVG ব্যবহার করা হয় এবং কোনো বাহ্যিক লাইব্রেরির প্রয়োজন হয় না। প্রায় ১৫ লাইনের প্রজেকশন কোড একটি বাক্সের প্রতিটি তলকে SVG matrix()-এ রূপান্তর করে। এর ফলে সমতলে আঁকা সাধারণ আয়তক্ষেত্র, লেখা এবং পথ সঠিক আইসোমেট্রিক সমতলে দেখা যায়।

প্রজেকশনটি লেখা এবং গোলাকার কোণও সমর্থন করে। পেইন্টের ক্রম গভীরতা নিয়ন্ত্রণ করে, তাই উপাদানগুলো প্রত্যাশিতভাবে একে অপরের সামনে বা পেছনে দেখা যায়।

একটি মাত্র স্টেট অবজেক্ট এবং render() ফাংশন ইন্টার‌্যাকশন পরিচালনা করে। CSS অ্যানিমেশন সামলায়, ফলে তৈরি ফাইলটি স্বয়ংসম্পূর্ণ থাকে এবং অংশগুলো অ্যানিমেট বা ইনপুটে প্রতিক্রিয়া জানাতে পারে।

স্কিল ইনস্টল করুন

Claude Code দিয়ে ইনস্টল

Claude Code সেটআপের সবচেয়ে সহজ উপায় হলো রিপোজিটরিটিকে মার্কেটপ্লেস হিসেবে যোগ করে প্লাগইন ইনস্টল করা:

/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill

ম্যানুয়ালি ইনস্টল

আপনি যদি স্কিল ডিরেক্টরিটি আপনার স্থানীয় Claude skills ফোল্ডারে কপি করতে চান, তাহলে রিপোজিটরি ক্লোন করে iso-figure ফোল্ডারটি কপি করুন:

git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/

Claude.ai-তে ব্যবহার

Claude.ai-এর জন্য সর্বশেষ রিলিজ থেকে iso-figure.skill ডাউনলোড করে আপনার স্কিল সেটিংসে আপলোড করুন।

আপনার প্রথম চিত্র তৈরি করুন

ইনস্টল করার পর Claude-কে এমন একটি বস্তুর কথা বলুন যার অংশ চাপা যায়। বিষয়টি উল্লেখ করুন এবং আপনি যে ইন্টার‌্যাকশন দেখতে চান তা বর্ণনা করুন।

iso figure of a kitchen timer with minute buttons and a display that counts down

এই প্রম্পটটি একটি বাস্তব বস্তু নির্দিষ্ট করে, এতে ইন্টার‌্যাক্টিভ বোতাম যোগ করে এবং ডিসপ্লের আচরণ জানায়। চিত্রটির স্টেট ও রেন্ডারিং লজিক নির্ধারণের সময় Claude এই তথ্য ব্যবহার করতে পারে।

আপনি সুইচের মতো ইন্টার‌্যাকশনও চাইতে পারেন:

fig 6, a wall light switch that turns a lamp on and off

fig 6 বাক্যাংশটি নম্বরযুক্ত প্লেটের উপস্থাপনা নির্দিষ্ট করতে সাহায্য করে, আর সুইচের বর্ণনা একটি স্পষ্ট চাপযোগ্য অংশ এবং তার ফলাফল জানায়।

প্রম্পট লেখার পরামর্শ

• একটি নির্দিষ্ট বস্তুর নাম বলুন। টাইমার, ক্যালকুলেটর, সিন্থ এবং লাইট সুইচের মতো বস্তুতে সহজে চেনা যায় এমন অংশ থাকে, যেগুলো আঁকা ও চাপা যায়।
• কন্ট্রোলগুলো বর্ণনা করুন। ইনপুটে প্রতিক্রিয়া জানাবে এমন বোতাম, কী, সুইচ বা অন্য অংশের কথা উল্লেখ করুন।
• ফলাফল বর্ণনা করুন। কোনো অংশ চাপলে লেখা, সংখ্যা, নোট বা ধারণাটির সমর্থিত অন্য কোনো আচরণ তৈরি হবে কি না, তা বলুন।
• প্রয়োজন হলে ডিসপ্লে বা আউটপুট যোগ করুন। কাউন্টডাউন, হিসাব বা পরিবর্তনশীল তরঙ্গরূপ ইন্টার‌্যাকশনের দৃশ্যমান ফলাফল তৈরি করে।
• চাপার মতো কিছু না থাকলে অন্য বস্তু ব্যবহার করুন। স্কিলটি ইন্টার‌্যাক্টিভ চিত্রের জন্য তৈরি, তাই সম্পূর্ণ স্থির বিষয় এর জন্য উপযুক্ত নয়।

উন্নত নির্দেশনা

স্কিলের নির্দেশনা দেখুন

রিপোজিটরিতে সম্পূর্ণ প্রক্রিয়াটি SKILL.md-এ রয়েছে। রেন্ডারিং কার্নেল, তৈরির প্রক্রিয়া বা ভিজ্যুয়াল স্টাইলের নিয়ম বুঝতে হলে এটি পড়ুন।

সমতল ও পেইন্টের ক্রম অনুযায়ী ভাবুন

চিত্রটি SVG সমতল দিয়ে তৈরি হওয়ায় প্রতিটি দৃশ্যমান পৃষ্ঠকে উপযুক্ত আইসোমেট্রিক তলে বসাতে হয়। প্রজেকশন কোড প্রয়োজনীয় SVG matrix() প্রয়োগ করে, আর পেইন্টের ক্রম নির্ধারণ করে কোন পৃষ্ঠ অন্যটিকে ঢেকে দেবে। স্তরযুক্ত কন্ট্রোল ও ভিত্তির ওপর থাকা অংশের ক্ষেত্রে এটি বিশেষভাবে গুরুত্বপূর্ণ।

ইন্টার‌্যাকশন স্টেট স্পষ্ট রাখুন

তৈরি নকশায় একটি স্টেট অবজেক্ট এবং একটি render() ফাংশন ব্যবহার করা হয়। ফলাফল পরিমার্জন করার সময় আপনি যে স্টেট পরিবর্তন চান তা স্পষ্টভাবে বর্ণনা করুন, যেমন বোতাম চাপার পর কোনো মান পরিবর্তন হওয়া বা সুইচ অন ও অফ অবস্থার মধ্যে সরে যাওয়া।

ফলাফল স্বতন্ত্র ফাইল হিসেবে খুলুন

আউটপুট একটি HTML ফাইল, তাই এটি ব্রাউজারে স্থানীয়ভাবে খোলা বা স্বয়ংসম্পূর্ণ উদাহরণ হিসেবে শেয়ার করা সহজ। আঁকার কাজে লাইব্রেরির বদলে সাধারণ SVG ও CSS ব্যবহার করা হয়েছে, তাই প্রকল্পে অতিরিক্ত কোনো নির্ভরতা ইনস্টলের কথা বলা নেই।

উপসংহার

iso-figure একটি সংক্ষিপ্ত Claude প্রম্পটকে কমপ্যাক্ট, ইন্টার‌্যাক্টিভ আইসোমেট্রিক ইলাস্ট্রেশনে রূপান্তর করে। এটি Claude Code-এর মাধ্যমে ইনস্টল করুন, স্কিলটি ম্যানুয়ালি কপি করুন, অথবা রিলিজ ফাইলটি Claude.ai-তে আপলোড করুন। সেরা ফলাফলের জন্য, স্পষ্টভাবে চাপ দেওয়া যায় এমন অংশযুক্ত একটি অবজেক্ট বেছে নিন এবং প্রতিটি ইন্টার‌্যাকশনে কী ফলাফল পাওয়া উচিত তা ব্যাখ্যা করুন।

প্রকল্পটি MIT লাইসেন্সের অধীনে প্রকাশিত।