AI প্রোটোটাইপে টীকা যোগ করে চাহিদাগুলোকে লিখিত টীকায় রূপ দিন

HTML Demo এবং ফ্রন্টএন্ড প্রকল্পের জন্য বিশেষভাবে তৈরি Prototype Notes Skill।

এই সময়ে আমি ক্রমশ AI-কে সরাসরি প্রোটোটাইপ পেজ এবং ফ্রন্টএন্ড কোড তৈরি করতে দিতে অভ্যস্ত হয়ে উঠছি।

পেজ দ্রুত তৈরি হয়, কিন্তু এর সঙ্গে নতুন সমস্যাও দেখা দেয়:

“এই বোতামে ক্লিক করার পর দ্বিতীয়বার নিশ্চিত করতে হবে।”

“এখানকার ছবিটি ভালো লাগছে না, অন্যভাবে উপস্থাপন করো।”

“টেবিলে শ্রেণি বদলানোর সময় নিচের ডেটাও একই সঙ্গে ফিল্টার করতে হবে।”

এই কথাগুলো আসলে কোথায় লেখা হবে?

স্ক্রিনশট পাঠানো, লাল বাক্স আঁকা, ডকুমেন্ট লেখা, গ্রুপে আরও একটি মন্তব্য যোগ করা, তারপর ডেভেলপারদের পেজ দেখে দীর্ঘ সময় ধরে অবস্থান খুঁজে বের করা। পেজ বদলে গেলে পুরোনো স্ক্রিনশট অকার্যকর হয়ে যায়; মতামত বেশি হলে গ্রুপ চ্যাটের প্রেক্ষাপটও সহজেই হারিয়ে যায়।

তাই আমি একটি Skill তৈরি করেছি: Prototype Notes (প্রোটোটাইপ টীকা)। এটি HTML প্রোটোটাইপ বা ফ্রন্টএন্ড ডেভেলপমেন্ট পরিবেশে একটি স্বাধীন টীকা-টুল যোগ করে, যাতে চাহিদা ও পরিবর্তনের মতামত সরাসরি পেজের সংশ্লিষ্ট জায়গায় রাখা যায়।

এটি আসলে কী করে?

সহজভাবে বললে, এটি ওয়েবপেজে একটি “ঘটনাস্থলের নোট” স্তর যোগ করে।

টীকা মোড চালু করার পর পেজের যেকোনো জায়গায় ডান ক্লিক করে দুই ধরনের বিষয় যোগ করা যায়:

চাহিদার বিবরণ: প্রোডাক্ট ম্যানেজারদের জন্য। নতুন চাহিদা বা চাহিদার পরিবর্তন বর্ণনা করতে ব্যবহার করা হয়; অগ্রাধিকার ও অবস্থা নির্ধারণ করা যায় এবং একাধিক বিবরণ যোগ করা যায়।

পরিবর্তনের মতামত: পর্যালোচকদের জন্য। রিভিউয়ের পরামর্শ দেওয়ার কাজে ব্যবহার করা হয়; নাম দিতে হয়, তবে অগ্রাধিকার বা অবস্থা নির্ধারণ করতে হয় না।

>টীকা মোড চালু করার পর ডান ক্লিক করে প্রয়োজনীয় টীকার ধরন নির্বাচন করুন

জমা দেওয়ার পর বিবরণটি পেজে একটি ছোট আইকনে সংকুচিত হয়। ডেভেলপার আইকনে ক্লিক করলেই প্রেক্ষাপট দেখতে পারেন; “স্ক্রিনশটে কোন জায়গার কথা বলা হয়েছে” তা আর অনুমান করতে হয় না।

প্রধান ফিচার

01 চাহিদার বিবরণ ও পর্যালোচনার মতামত আলাদা

প্রোডাক্ট চাহিদা ও পর্যালোচনার পরামর্শ মূলত দুই ধরনের তথ্য। Skill এগুলোকে জোর করে একই ফর্মে ঢোকায়নি; ডান-ক্লিকের প্রবেশপথ থেকেই স্পষ্টভাবে আলাদা করেছে।

>চাহিদার বিবরণ: একাধিক বিষয়, অগ্রাধিকার, নতুন বা পরিবর্তিত অবস্থা, সংরক্ষণের সময়

>পরিবর্তনের মতামত: পর্যালোচকের নাম লিখে সরাসরি রিভিউয়ের পরামর্শ রেকর্ড করুন

02 একটি মার্কারে একাধিক বিবরণ রাখা যায়

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

03 মার্কার ও ফ্লোটিং উইন্ডো দুটিই সরানো যায়

মার্কারের অবস্থান ঠিক না হলে সরাসরি টেনে নতুন জায়গায় নেওয়া যায়; ফ্লোটিং উইন্ডোটিও সরিয়ে নেওয়া যায়, ফলে দেখা পেজের বিষয়বস্তু ঢাকা পড়ে না। মার্কার আপেক্ষিক অবস্থান রেকর্ড করে, তাই পেজ স্ক্রল বা আকার পরিবর্তন হলেও লক্ষ্য উপাদানের সঙ্গে যতটা সম্ভব যুক্ত থাকে।

04 বিবরণে সরাসরি ছবি পেস্ট করা যায়

শুধু কথায় বোঝানো কঠিন হলে স্ক্রিনশট কপি করে বর্তমান বিবরণে সরাসরি পেস্ট করুন। ছবি স্বয়ংক্রিয়ভাবে সংকুচিত হয়ে টীকার ডেটার সঙ্গে সংরক্ষিত হয় এবং আলাদাভাবেও মুছে ফেলা যায়।

05 টীকা মোড বন্ধ থাকলে সম্পূর্ণ রিড-অনলি

দৈনন্দিন দেখার সময় ভুল করে বিষয়বস্তু পরিবর্তন করা যায় না এবং স্বাভাবিক ডান-ক্লিকেও বাধা দেওয়া হয় না। সক্রিয়ভাবে টীকা মোড চালু করার পরই কেবল মার্কার যোগ, সম্পাদনা, সরানো, ইমপোর্ট বা মুছে ফেলা যায়।

>সাধারণ দেখার মোড: বিবরণ দেখা যায়, তবে সম্পাদনা ও মুছে ফেলার অপশন নেই

06 Git রিপোজিটরির JSON-এ স্বয়ংক্রিয় সংরক্ষণ

টীকার ডেটা প্রকল্পের রুট ডিরেক্টরির এই ফাইলে সংরক্ষিত হয়:

.prototype-notes/annotations.json

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

07 প্রোডাকশন বিল্ডে টীকার কোড যুক্ত হয় না

এটি “ক্লিক করে লুকিয়ে রাখা” ধরনের ভুয়া নিরাপত্তা-নির্ভর টুল নয়। Vite প্রকল্পে রানটাইম কেবল ডেভেলপমেন্ট মোডে লোড হয়, সংরক্ষণ API-ও কেবল ডেভেলপমেন্ট সার্ভারে যুক্ত থাকে; স্ট্যাটিক HTML প্রকল্প অনলাইনে দেওয়ার আগে অপসারণ করা যায়। প্রকাশনার যাচাইয়ের লক্ষ্য হলো: প্রোডাকশন আউটপুটে টীকার রানটাইম ও টীকার বিষয়বস্তু একেবারেই থাকবে না।

আমার পছন্দের কয়েকটি ছোট ভাবনা

নীল ডকুমেন্ট আইকন ও কমলা মতামত আইকন। ফ্লোটিং উইন্ডো না খুলেও বোঝা যায় এটি প্রোডাক্ট চাহিদা নাকি পর্যালোচনার মতামত।

শুধু টীকা মোডে ডান-ক্লিক নিয়ন্ত্রণ করা। সাধারণ সময়ে ওয়েবপেজের নিজস্ব操作ে বাধা দেয় না; রেকর্ড করার সময়ই কেবল চালু করতে হয়।

প্রতিটি বিবরণে সর্বশেষ সংরক্ষণের সময় থাকে। ডেভেলপার বুঝতে পারেন তিনি যে সংস্করণটি দেখছেন সেটি সর্বশেষ আপডেট করা কি না।

ব্যাকআপ হিসেবে লোকাল ক্যাশ। স্বয়ংক্রিয় লেখা ব্যর্থ হলেও ব্রাউজারের খসড়া সঙ্গে সঙ্গে হারিয়ে যায় না; টুলবারে “সিঙ্ক ব্যর্থ” দেখানো হয়।

অন্তর্নির্মিত উৎস-পরিচয়। বর্তমান সংস্করণে “泥嚎的AI实验室” দেখানো হয় এবং রানটাইম, ডেভেলপমেন্ট টুল ও এক্সপোর্ট করা JSON-এ একই যাচাইযোগ্য চিহ্ন রাখা হয়।

এটি কোন সমস্যাগুলো সমাধান করে?

প্রথমত, চাহিদার প্রেক্ষাপট হারানো কমায়। চাহিদা আর পেজ থেকে বিচ্ছিন্ন হয়ে আলাদাভাবে চ্যাট ইতিহাস বা ডকুমেন্টে ভাসতে থাকে না।

দ্বিতীয়ত, প্রোডাক্ট ও ডেভেলপমেন্টের অবস্থান নির্ধারণের খরচ কমায়। নির্দিষ্ট কন্ট্রোলের সঙ্গে মার্কার যুক্ত থাকায় পেজ খুললেই বোঝা যায় কোথায় পরিবর্তন করতে হবে।

তৃতীয়ত, প্রোডাক্ট চাহিদা ও পর্যালোচনার মতামত আলাদা করে। কে প্রস্তাব করেছেন এবং বিষয়টির ধরন কী, তা এক নজরেই বোঝা যায়।

চতুর্থত, AI প্রোটোটাইপকে সত্যিকারের পুনরাবৃত্তি প্রক্রিয়ায় নিয়ে আসে। AI দ্রুত তৈরি করার দায়িত্ব পালন করে, আর টীকা স্তর পরবর্তী মতামতকে আবার AI বা ডেভেলপমেন্টের কাছে পৌঁছে দেয়।

পঞ্চমত, অনলাইনে দেওয়ার নিরাপত্তা নষ্ট করে না। টীকা কেবল ডেভেলপমেন্ট ও রিভিউ পরিবেশের জন্য; এটি আনুষ্ঠানিক পণ্যের ফিচার হয়ে ওঠে না।

বিভিন্ন পরিস্থিতিতে কীভাবে ব্যবহার করবেন?

পরিস্থিতি এক: AI-তৈরি এক-পেজ HTML Demo

AI-কে Prototype Notes Skill ব্যবহার করে টীকা স্তর ইনস্টল করতে এবং সংশ্লিষ্ট স্থানীয় ডেভেলপমেন্ট সার্ভিস চালু করতে বলুন। প্রোডাক্ট পেজে ডান-ক্লিক করে চাহিদা লিখবেন, আর সংরক্ষণ করার পর তা স্বয়ংক্রিয়ভাবে প্রকল্পের JSON-এ যুক্ত হবে। কাজ নিশ্চিত হলে রানটাইম সরিয়ে স্ট্যাটিক পেজ প্রকাশ করুন।

পরিস্থিতি দুই: Vue / React + Vite ফ্রন্টএন্ড প্রকল্প

Skill রানটাইমকে ডেভেলপমেন্ট টুলের ডিরেক্টরিতে রাখবে এবং কেবল ডেভেলপমেন্ট সার্ভারে চলা সংরক্ষণ প্লাগইন ইনস্টল করবে। প্রকল্পের স্বাভাবিক ডেভেলপমেন্ট কমান্ড চালালেই ব্যবহার করা যাবে; প্রোডাকশন বিল্ডে টীকার রানটাইম লোড হবে না।

পরিস্থিতি তিন: একই Git রিপোজিটরিতে প্রোডাক্ট ও ডেভেলপমেন্ট দলের সহযোগিতা

প্রোডাক্ট টীকা সংরক্ষণ করে annotations.json জমা দেবেন, ডেভেলপার কোড টেনে নিলেই মূল পেজে তা দেখতে পারবেন; পরিবর্তন সম্পন্ন হলে আবার জমা দিতে পারবেন। Git সংস্করণ, মার্জ ও ইতিহাস পরিচালনা করবে, আর টীকা টুল পেজের নির্দিষ্ট স্থানের বক্তব্য প্রকাশ করবে।

পরিস্থিতি চার: ডিজাইন বা ব্যবসায়িক পর্যালোচনা

পর্যালোচক “পরিবর্তনের মতামত যোগ করুন” নির্বাচন করে নিজের নামসহ পরামর্শ রেকর্ড করবেন। প্রোডাক্ট চাহিদা পর্যালোচনার মতামতের সঙ্গে মিশে যাবে না, আর ডেভেলপারও বুঝতে পারবেন মতামতটি কার কাছ থেকে এসেছে।

পরিস্থিতি পাঁচ: শুধু প্রদর্শনের অনুমতি থাকা রিভিউ মিটিং

টীকা মোড বন্ধ করার পরও অংশগ্রহণকারীরা আইকনে ক্লিক করে বিবরণ দেখতে পারবেন, কিন্তু সম্পাদনা করতে পারবেন না; এক ক্লিকেই সব মার্কার লুকিয়ে পেজকে পরিষ্কার প্রদর্শনেও ফিরিয়ে নেওয়া যায়।

কীভাবে Skill ইনস্টল ও কল করবেন?

এই Skill বর্তমানে ওপেন সোর্স নয়। আপনি ব্যবহার করে দেখতে চাইলে:

“泥嚎的AI实验室” অনুসরণ করুন

ব্যক্তিগত বার্তায় কীওয়ার্ড পাঠান: 原型批注
আমি আপনাকে Skill-এর কমপ্রেসড ফাইল ও ব্যবহারের নির্দেশনা পাঠাব।

কমপ্রেসড ফাইল পাওয়ার পর ব্যক্তিগত Codex Skill ডিরেক্টরিতে আনজিপ করুন:

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. পেজের নকশা বদলানোর পর মার্কারের অবস্থান সরে গেছে

টীকা মোডে আইকনটি টেনে নতুন অবস্থানে নিয়ে যান। ঘন ঘন কাঠামো পরিবর্তন হওয়া গুরুত্বপূর্ণ অঞ্চলের জন্য AI-কে স্থিতিশীল data-prototype-anchor যোগ করতে বলতে পারেন, যাতে পরিবর্তনশীল DOM স্তরের ওপর নির্ভর করতে না হয়।

5. Git-এ annotations.json মার্জ করার সময় দ্বন্দ্ব হয়েছে

এটি অসমকালীন সহযোগিতার জন্য উপযুক্ত, রিয়েল-টাইমে একাধিক ব্যক্তির সম্পাদনার জন্য নয়। টীকা শুরু করার আগে সর্বশেষ ব্রাঞ্চ টেনে নিন; একাধিক ব্যক্তি একই সময়ে পরিবর্তন করলে মার্কার ID ও আপডেটের সময় দেখে দ্বন্দ্ব যাচাই করুন। সত্যিকারের রিয়েল-টাইম বহুজনের সিঙ্ক্রোনাইজেশন প্রয়োজন হলে ডেটাবেস সার্ভিস ব্যবহারের কথা বিবেচনা করুন।

6. অভ্যন্তরীণ চাহিদা বা স্ক্রিনশট বাইরে চলে যাওয়ার আশঙ্কা

টীকার বিষয়বস্তু, পর্যালোচকের নাম, পেজের রুট এবং পেস্ট করা ছবিতে সংবেদনশীল তথ্য থাকতে পারে। প্রকল্পের জন্য ব্যক্তিগত রিপোজিটরি ব্যবহার করুন; স্থানীয় ডেভেলপমেন্ট সার্ভিসকে অবিশ্বস্ত নেটওয়ার্কে প্রকাশ করবেন না এবং .prototype-notes ডিরেক্টরি অনলাইনে প্রকাশ করবেন না।

7. ছবি বেশি হওয়ায় ব্রাউজারে সংরক্ষণ করা যাচ্ছে না

রানটাইম ছবি সংকুচিত করে এবং প্রতিটি বিবরণে ছবির সংখ্যা সীমিত করে, তবে স্ক্রিনশট JSON-এর আকার বাড়াতেই পারে। সমস্যার সঙ্গে সরাসরি সম্পর্কিত দৃশ্যগুলোই রাখার পরামর্শ দেওয়া হয়; বড় ছবি আগে ক্রপ করে তারপর পেস্ট করুন।

শেষ কথা

AI “পেজ তৈরি করা” ক্রমশ দ্রুত করে দিয়েছে, কিন্তু পেজ থেকে প্রকাশযোগ্য পণ্য পর্যন্ত এখনও স্পষ্ট চাহিদা, পর্যালোচনা ও সহযোগিতা প্রয়োজন।

আমি এই Skill তৈরি করেছি বিশাল কোনো প্রকল্প ব্যবস্থাপনা সিস্টেম বানানোর জন্য নয়, বরং একটি ছোট ও নির্দিষ্ট ঘাটতি পূরণ করার জন্য:

মতামতকে তার প্রকৃত ঘটনাস্থলেই রেখে দেওয়া।