یہ HTML Demo اور فرنٹ اینڈ پروجیکٹس کے لیے خصوصی Prototype Notes Skill ہے۔
کچھ عرصے سے میں اے آئی سے براہِ راست پروٹوٹائپ صفحات اور فرنٹ اینڈ کوڈ تیار کروانے کا عادی ہوتا جا رہا ہوں۔
صفحہ بہت تیزی سے تیار ہو جاتا ہے، لیکن اس کے ساتھ نئے مسائل بھی سامنے آتے ہیں:
“اس بٹن پر کلک کرنے کے بعد دوسری بار تصدیق درکار ہے۔”
“یہاں کی تصویر اچھی نہیں لگ رہی، اسے کسی اور انداز میں پیش کریں۔”
“ٹیبل میں زمرہ تبدیل کرتے وقت نیچے کا ڈیٹا بھی اسی کے ساتھ فلٹر ہونا چاہیے۔”
یہ باتیں آخر لکھی کہاں جائیں؟
اسکرین شاٹ بھیجنا، سرخ دائرہ بنانا، دستاویز لکھنا یا گروپ میں ایک جملہ شامل کرنا، پھر ڈویلپر کا صفحے پر متعلقہ جگہ تلاش کرنے میں کافی وقت لگانا۔ صفحہ تبدیل ہو جائے تو پرانا اسکرین شاٹ بے کار ہو جاتا ہے؛ اور جب رائے بہت زیادہ ہو، تو گروپ چیٹ کا سیاق بھی آسانی سے ضائع ہو جاتا ہے۔
اسی لیے میں نے ایک Skill بنایا: Prototype Notes (پروٹوٹائپ تشریحات)۔ یہ HTML پروٹوٹائپ یا فرنٹ اینڈ ڈویلپمنٹ ماحول میں ایک الگ تشریحی ٹول شامل کرتا ہے، تاکہ ضروریات اور تبدیلی کی تجاویز براہِ راست صفحے پر محفوظ رہیں۔
یہ اصل میں کیا کرتا ہے؟
سادہ الفاظ میں، یہ ویب صفحے پر ایک “موقع پر لگائی جانے والی یادداشت” کی تہہ کی طرح ہے۔
تشریحی موڈ فعال کرنے کے بعد، صفحے پر کسی بھی مقام پر دایاں کلک کریں اور دو قسم کے مواد میں سے ایک شامل کریں:
ضرورت کی وضاحت：پروڈکٹ مینیجرز کے لیے، نئی ضرورت یا ضرورت میں تبدیلی بیان کرنے کے لیے استعمال ہوتی ہے۔ اس میں ترجیح اور حیثیت مقرر کی جا سکتی ہے اور متعدد وضاحتیں شامل کی جا سکتی ہیں۔
ترمیمی رائے：جائزہ لینے والوں کے لیے، ریویو کی تجاویز درج کرنے کے لیے استعمال ہوتی ہے۔ دستخط لکھنا ضروری ہے، لیکن ترجیح اور حیثیت مقرر کرنے کی ضرورت نہیں۔
>تشریحی موڈ فعال کرنے کے بعد، دایاں کلک کر کے مطلوبہ تشریح کی قسم منتخب کریں
جمع کرانے کے بعد، وضاحت صفحے پر ایک چھوٹے آئیکن کی شکل اختیار کر لیتی ہے۔ ڈویلپر آئیکن پر کلک کر کے سیاق دیکھ سکتے ہیں اور انہیں دوبارہ یہ اندازہ نہیں لگانا پڑتا کہ “اسکرین شاٹ میں کس جگہ کی بات ہو رہی ہے”۔
اہم خصوصیات
01 ضرورت کی وضاحت اور جائزے کی رائے الگ الگ
پروڈکٹ کی ضرورت اور جائزے کی تجویز بنیادی طور پر دو مختلف قسم کی معلومات ہیں۔ Skill نے انہیں زبردستی ایک ہی فارم میں شامل نہیں کیا، بلکہ دایاں کلک کرنے کے مقام سے ہی واضح فرق رکھا ہے۔
>ضرورت کی وضاحت: متعدد مواد، ترجیح، نئی یا تبدیل شدہ حیثیت، محفوظ کرنے کا وقت
>ترمیمی رائے: جائزہ لینے والے کا نام درج کریں اور ریویو کی تجویز براہِ راست محفوظ کریں
02 ایک نشان متعدد وضاحتیں رکھ سکتا ہے
ایک ہی مقام سے متعلق ضروریات کے لیے آئیکنز کی پوری قطار بنانے کی ضرورت نہیں۔ ایک ضرورت کا نشان متعدد وضاحتیں رکھ سکتا ہے، اسی طرح ایک ترمیمی رائے کا نشان بھی متعدد تجاویز رکھ سکتا ہے، جبکہ بیج تعداد ظاہر کرتا ہے۔
03 نشان اور تیرتی ونڈو دونوں منتقل کی جا سکتی ہیں
اگر نشان کی جگہ درست نہ ہو تو اسے براہِ راست کھینچ کر نئی جگہ رکھا جا سکتا ہے؛ تیرتی ونڈو کو بھی منتقل کیا جا سکتا ہے تاکہ زیرِ مطالعہ صفحے کا مواد چھپے نہیں۔ نشان نسبتاً مقام محفوظ رکھتا ہے، اس لیے صفحہ اسکرول ہونے یا اس کا سائز بدلنے پر بھی ہدف عنصر کے ساتھ رہنے کی کوشش کرتا ہے۔
04 وضاحت میں تصاویر براہِ راست پیسٹ کی جا سکتی ہیں
جب صرف الفاظ سے بات واضح نہ ہو، تو اسکرین شاٹ کاپی کر کے موجودہ وضاحت میں براہِ راست پیسٹ کریں۔ تصویر خودکار طور پر کمپریس ہو کر تشریحی ڈیٹا کے ساتھ محفوظ ہو جائے گی، اور اسے الگ سے حذف بھی کیا جا سکتا ہے۔
05 تشریحی موڈ کے علاوہ سخت صرف مطالعہ
روزمرہ مطالعے کے دوران مواد میں غلطی سے تبدیلی نہیں کی جا سکتی اور عام دائیں کلک میں بھی مداخلت نہیں ہوتی۔ صرف تشریحی موڈ فعال کرنے کے بعد ہی نشانات شامل، ترمیم، منتقل، درآمد یا حذف کیے جا سکتے ہیں۔
>عام مطالعہ موڈ: وضاحت دیکھی جا سکتی ہے، لیکن ترمیم اور حذف کرنے کے اختیارات موجود نہیں
06 Git ریپوزٹری میں JSON کی صورت میں خودکار محفوظ کاری
تشریحی ڈیٹا پروجیکٹ کی جڑ میں موجود اس فائل میں محفوظ ہوتا ہے:
.prototype-notes/annotations.json
محفوظ کرنے، منتقل کرنے، درآمد کرنے یا حذف کرنے کے بعد ڈویلپمنٹ ماحول اس فائل کو خودکار طور پر دوبارہ لکھتا ہے۔ ٹیم کے ارکان Git میں تبدیلی جمع کر دیں تو تشریحات بھی پروجیکٹ کے ساتھ منتقل، جانچی اور تاریخ سمیت محفوظ کی جا سکتی ہیں۔ خرابی سے بحالی کے لیے دستی درآمد اور برآمد بھی برقرار رہتی ہے۔
07 پروڈکشن بلڈ میں تشریحی کوڈ شامل نہیں ہوتا
یہ ایسا ٹول نہیں جو صرف “کلک کر کے چھپا دینے” کو تحفظ سمجھتا ہو۔ Vite پروجیکٹ میں رن ٹائم صرف ڈویلپمنٹ موڈ میں لوڈ ہوتا ہے، اور محفوظ کرنے کا انٹرفیس بھی صرف ڈویلپمنٹ سرور پر موجود ہوتا ہے؛ جامد HTML پروجیکٹ کو آن لائن جاری کرنے سے پہلے رن ٹائم ہٹایا جا سکتا ہے۔ ریلیز چیک کا مقصد یہ ہے کہ پروڈکشن آؤٹ پٹ میں تشریحی رن ٹائم اور تشریحی مواد سرے سے موجود ہی نہ ہو۔
مجھے پسند آنے والی چند چھوٹی مگر مفید باتیں
نیلا دستاویزی آئیکن اور نارنجی رائے کا آئیکن۔ تیرتی ونڈو کھولے بغیر بھی معلوم ہو جاتا ہے کہ یہ پروڈکٹ کی ضرورت ہے یا جائزے کی رائے۔
دایاں کلک صرف تشریحی موڈ میں کنٹرول کیا جاتا ہے۔ عام وقت میں ویب صفحے کے اپنے آپریشنز میں مداخلت نہیں ہوتی، اور ریکارڈ کرنے کی ضرورت پر ہی موڈ فعال کیا جاتا ہے۔
ہر وضاحت کے ساتھ تازہ ترین محفوظ کاری کا وقت موجود ہوتا ہے۔ ڈویلپر یہ جان سکتے ہیں کہ ان کے سامنے موجود ورژن ابھی اپ ڈیٹ ہوا ہے یا نہیں۔
مقامی کیش بطور متبادل تحفظ۔ خودکار تحریر ناکام ہونے پر براؤزر کا مسودہ فوراً ضائع نہیں ہوتا، اور ٹول بار “ہم وقت سازی ناکام” کا پیغام بھی دکھاتی ہے۔
ذریعے کا شناختی نشان شامل ہے۔ موجودہ ورژن “泥嚎的AI实验室” دکھاتا ہے اور رن ٹائم، ڈویلپمنٹ ٹولز اور برآمد شدہ JSON میں یکساں قابلِ تصدیق شناختی نشان محفوظ رکھتا ہے۔
یہ کون سا مسئلہ حل کرتا ہے؟
اول، ضروریات کے سیاق کے ضائع ہونے میں کمی۔ ضرورتیں اب صفحے سے الگ ہو کر چیٹ ریکارڈ یا دستاویز میں معلق نہیں رہتیں۔
دوم، پروڈکٹ اور ڈویلپمنٹ کی تلاش کی لاگت میں کمی۔ نشان مخصوص کنٹرول کے ساتھ منسلک ہوتا ہے، اس لیے صفحہ کھولتے ہی معلوم ہو جاتا ہے کہ کہاں تبدیلی کرنی ہے۔
سوم، پروڈکٹ کی ضرورت اور ریویو فیڈبیک کو الگ کرنا۔ کس نے پیش کیا اور اس کی نوعیت کیا ہے، ایک نظر میں واضح ہو جاتا ہے۔
چہارم، اے آئی پروٹوٹائپ کو حقیقی تکراری عمل میں شامل کرنا۔ اے آئی تیزی سے ابتدائی ورژن تیار کرتا ہے، جبکہ تشریحی تہہ بعد کی رائے دوبارہ اے آئی یا ڈویلپر تک پہنچاتی ہے۔
پنجم، آن لائن اجرا کی حفاظت برقرار رکھنا۔ تشریحات صرف ڈویلپمنٹ اور ریویو کے ماحول تک محدود رہتی ہیں اور باقاعدہ پروڈکٹ کی خصوصیت نہیں بنتیں۔
مختلف حالات میں اسے کیسے استعمال کریں؟
صورتِ حال ایک: اے آئی سے تیار کردہ سنگل پیج HTML Demo
اے آئی سے Prototype Notes Skill استعمال کر کے تشریحی تہہ نصب کروائیں اور متعلقہ مقامی ڈویلپمنٹ سروس شروع کریں۔ پروڈکٹ مینیجر صفحے پر دایاں کلک کر کے ضرورت لکھے، محفوظ کرنے کے بعد وہ خودکار طور پر پروجیکٹ کے JSON میں شامل ہو جائے گی۔ تصدیق مکمل ہونے پر رن ٹائم ہٹا کر جامد صفحہ جاری کریں۔
صورتِ حال دو: Vue / React + Vite فرنٹ اینڈ پروجیکٹ
Skill رن ٹائم کو ڈویلپمنٹ ٹولز کی ڈائریکٹری میں رکھتا ہے اور صرف ڈویلپمنٹ سرور پر چلنے والا محفوظ کاری پلگ اِن نصب کرتا ہے۔ پروجیکٹ کی معمول کی ڈویلپمنٹ کمانڈ چلانا کافی ہے؛ باقاعدہ بلڈ کے دوران تشریحی رن ٹائم لوڈ نہیں ہوگا۔
صورتِ حال تین: پروڈکٹ مینیجر اور ڈویلپر ایک ہی Git ریپوزٹری میں کام کریں
پروڈکٹ مینیجر نشان محفوظ کرنے کے بعد annotations.json جمع کر دے، اور ڈویلپر کوڈ حاصل کر کے اسی صفحے پر دیکھ سکے؛ تبدیلی مکمل ہونے پر دوبارہ جمع کر دے۔ Git ورژن، انضمام اور تاریخ سنبھالتا ہے، جبکہ تشریحی ٹول صفحے پر موجودہ مقام کی وضاحت کرتا ہے۔
صورتِ حال چار: ڈیزائن یا کاروباری جائزہ
جائزہ لینے والا “ترمیمی رائے شامل کریں” منتخب کر کے اپنا نام درج کرے اور تجویز محفوظ کرے۔ پروڈکٹ کی ضرورت جائزے کی رائے سے خلط ملط نہیں ہوگی، اور ڈویلپر کو معلوم رہے گا کہ رائے کس کی ہے۔
صورتِ حال پانچ: صرف دکھانے کی اجازت والی ریویو میٹنگ
تشریحی موڈ بند ہونے کے بعد بھی شرکا آئیکن پر کلک کر کے مواد دیکھ سکتے ہیں، لیکن ترمیم نہیں کر سکتے؛ تمام نشانات ایک کلک سے چھپا کر صفحے کو صاف حالت میں بھی دکھایا جا سکتا ہے۔
Skill کو کیسے نصب اور چلائیں؟
یہ Skill فی الحال اوپن سورس نہیں ہے۔ اگر آپ اسے آزمانا چاہتے ہیں:
“泥嚎的AI实验室” کو فالو کریں
نجی پیغام میں مطلوبہ لفظ بھیجیں: 原型批注
میں آپ کو Skill کا کمپریسڈ پیکیج اور استعمال کی ہدایات بھیج دوں گا۔
کمپریسڈ پیکیج حاصل ہونے کے بعد اسے ذاتی Codex Skill ڈائریکٹری میں Extract کریں:
C:\Users\آپ کا صارف نام\.codex\skills\prototype-notes
Codex ٹاسک دوبارہ کھولنے کے بعد اسے اس طرح چلایا جا سکتا ہے:
موجودہ HTML پروٹوٹائپ میں تشریحی خصوصیت شامل کرنے کے لیے $prototype-notes استعمال کریں۔
آپ قدرتی زبان میں بھی براہِ راست کہہ سکتے ہیں، مثلاً:
“اس Vue/Vite پروجیکٹ میں پروٹوٹائپ تشریحات نصب کریں، ڈیٹا خودکار طور پر Git JSON میں محفوظ ہو، اور پروڈکشن بلڈ میں تشریحی کوڈ شامل نہ ہو۔”
“اس سنگل پیج HTML Demo میں ضرورت کی وضاحت اور دستخط شدہ ترمیمی رائے شامل کریں، اور مقامی پیش نظارہ شروع کرنے میں میری مدد کریں۔”
استعمال کے دوران عام مسائل
1. صفحہ کھل جاتا ہے، لیکن محفوظ کرنے کے بعد JSON میں تبدیلی نہیں آتی
زیادہ تر صورتوں میں وجہ عام جامد سرور کا استعمال ہوتی ہے۔ براؤزر براہِ راست Git فائل نہیں لکھ سکتا، اس لیے Skill کے ذریعے نصب کردہ HTML ڈویلپمنٹ سروس استعمال کریں، یا Vite میں متعلقہ ڈویلپمنٹ پلگ اِن فعال کریں۔ ٹول بار میں “ہم وقت سازی ناکام” دکھائی دے تو مقامی کیش مسودہ محفوظ رکھتی ہے۔
2. دوسرے کمپیوٹر پر تشریحات نظر نہیں آتیں
یقینی بنائیں کہ .prototype-notes/annotations.json Git میں جمع ہو چکی ہے اور دوسرے فریق نے تازہ ترین کوڈ حاصل کر لیا ہے۔ localStorage صرف مقامی متبادل ہے، ٹیم کے اشتراک کا ذریعہ نہیں۔
3. دائیں کلک کرنے پر تشریحی مینو ظاہر نہیں ہوتا
پہلے نیچے دائیں جانب موجود “تشریحات” بٹن پر کلک کر کے تشریحی موڈ میں داخل ہوں۔ عام موڈ براؤزر کا اصل دایاں کلک برقرار رکھتا ہے تاکہ روزمرہ استعمال میں خلل نہ پڑے۔
4. صفحے کی نئی ترتیب کے بعد نشان اپنی جگہ سے ہٹ گیا
تشریحی موڈ میں آئیکن کو کھینچ کر نئی جگہ پر رکھیں۔ جو اہم حصے بار بار تبدیل ہوتے ہیں، ان کے لیے اے آئی سے مستحکم data-prototype-anchor شامل کروایا جا سکتا ہے، تاکہ DOM کی آسانی سے بدلنے والی سطحوں پر انحصار نہ رہے۔
5. Git میں annotations.json ضم کرتے وقت تنازع پیدا ہو گیا
یہ غیر ہم وقت تعاون کے لیے موزوں ہے، حقیقی وقت میں متعدد افراد کی ترمیم کے لیے نہیں۔ تشریح شروع کرنے سے پہلے تازہ ترین برانچ حاصل کریں؛ متعدد افراد بیک وقت ترمیم کریں تو نشان کی ID اور تازہ کاری کے وقت کے مطابق تنازع کی جانچ کریں۔ حقیقی وقت میں متعدد افراد کی ہم وقت سازی درکار ہو تو ڈیٹابیس سروس استعمال کرنے پر غور کریں۔
6. اندرونی ضروریات یا اسکرین شاٹس کے باہر منتقل ہونے کا خدشہ
تشریحی مواد، جائزہ لینے والے کا نام، صفحے کے روٹس اور پیسٹ کی گئی تصاویر میں حساس معلومات شامل ہو سکتی ہیں۔ پروجیکٹ کے لیے نجی ریپوزٹری استعمال کریں؛ مقامی ڈویلپمنٹ سروس کو غیر معتبر نیٹ ورک پر ظاہر نہ کریں، اور .prototype-notes ڈائریکٹری کو آن لائن جاری نہ کریں۔
7. تصاویر بہت زیادہ ہیں اور براؤزر میں جگہ نہیں بچتی
رن ٹائم تصاویر کو کمپریس کرتا ہے اور ہر وضاحت میں تصاویر کی تعداد محدود کرتا ہے، لیکن اسکرین شاٹس پھر بھی JSON کا حجم بڑھا سکتے ہیں۔ صرف مسئلے سے براہِ راست متعلقہ تصاویر رکھیں، اور بڑی تصویر کو پیسٹ کرنے سے پہلے کاٹ لیں۔
آخر میں
اے آئی نے “صفحہ تیار کرنا” پہلے سے کہیں زیادہ تیز کر دیا ہے، لیکن صفحے سے قابلِ ترسیل پروڈکٹ تک پہنچنے کے لیے اب بھی واضح ضروریات، جائزے اور تعاون درکار ہیں۔
میں نے یہ Skill کسی بڑے پروجیکٹ مینجمنٹ سسٹم کی نقل بنانے کے لیے نہیں بنایا، بلکہ ایک چھوٹی اور مخصوص کمی پوری کرنے کے لیے بنایا ہے:
رائے کو وہیں رہنے دیں جہاں وہ حقیقتاً پیدا ہوئی ہے۔