مرکزی مواد پر جائیں
اے آئی ٹیوٹوریلز

iso-figure کلاڈ اسکل کے ساتھ انٹرایکٹو آئسومیٹرک اشکال بنائیں

iso-figure کو انسٹال کرنے اور استعمال کرنے کا طریقہ سیکھیں، یہ کلاڈ اسکل HTML میں خود کفیل انٹرایکٹو آئسومیٹرک ڈرائنگز بناتی ہے۔ اس ٹیوٹوریل میں سیٹ اپ، پرامپٹ پیٹرنز، SVG پر مبنی رینڈرنگ، انٹرایکشن ڈیزائن اور بہتر نتائج حاصل کرنے کے طریقے شامل ہیں۔

iso-figure کلاڈ اسکل کے ساتھ انٹرایکٹو آئسومیٹرک اشکال بنائیں

iso-figure کیا کرتا ہے

iso-figure Claude کے لیے ایک اسکل ہے جو قدرتی زبان میں دی گئی وضاحت سے متعامل آئسو میٹرک اشکال تیار کرتا ہے۔ آپ کسی شے کا نام بتاتے ہیں، اور یہ اسکل ایک HTML فائل تیار کرتا ہے جس میں نمبر شدہ پلیٹ پر باریک لکیروں والی آئسو میٹرک ڈرائنگ ہوتی ہے۔

مصور شے کے حصے دبانے پر ردِعمل دے سکتے ہیں۔ شے کے لحاظ سے، کسی حصے کو دبانے سے ٹائپ شدہ متن، کوئی عدد، یا موسیقی کا سُر ظاہر ہو سکتا ہے۔ اگر کسی شے میں دبانے کے لیے کوئی بامعنی حصہ نہ ہو تو یہ اسکل کوئی مختلف موضوع منتخب کرتا ہے۔

مثالوں کے لیے ڈیسک سنتھیسائزر یا جیب کیلکولیٹر آزمائیں۔ آپ ریپوزٹری کی examples ڈائریکٹری میں موجود فائلیں بھی کھول سکتے ہیں۔

متعامل آئسو میٹرک شکل کی مثال

تیار کردہ اشکال کیسے کام کرتی ہیں

آؤٹ پٹ سادہ SVG استعمال کرتا ہے اور اسے کسی بیرونی لائبریری کی ضرورت نہیں ہوتی۔ تقریباً 15 سطروں پر مشتمل پروجیکشن کوڈ باکس کے ہر رخ کو SVG matrix() میں تبدیل کرتا ہے۔ اس سے عام مستطیل، متن، اور ہموار سطح پر بنائے گئے راستے درست آئسو میٹرک سطح پر دکھائی دے سکتے ہیں۔

پروجیکشن متن اور گول کونوں کو بھی سپورٹ کرتا ہے۔ پینٹ آرڈر گہرائی کو کنٹرول کرتا ہے، اس لیے عناصر توقع کے مطابق ایک دوسرے کے آگے یا پیچھے دکھائی دیتے ہیں۔

تعامل ایک واحد اسٹیٹ آبجیکٹ اور render() فنکشن کے ذریعے چلتا ہے۔ CSS حرکت کو سنبھالتا ہے، جس سے تیار کردہ فائل خود کفیل رہتی ہے اور حصوں کو متحرک ہونے یا ان پٹ پر ردِعمل دینے کی اجازت بھی ملتی ہے۔

اسکل انسٹال کریں

Claude Code کے ذریعے انسٹال کریں

Claude Code کا آسان ترین سیٹ اپ یہ ہے کہ ریپوزٹری کو مارکیٹ پلیس کے طور پر شامل کریں اور پلگ اِن انسٹال کریں:

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

دستی طور پر انسٹال کریں

اگر آپ اسکل ڈائریکٹری کو اپنے مقامی Claude اسکلز فولڈر میں کاپی کرنا چاہتے ہیں تو ریپوزٹری کلون کریں اور 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 لائسنس کے تحت جاری کیا گیا ہے۔