ডিজাইনই কোড

The Design is the Code

 

সেলুলার অটোমেটার যুক্তি কীভাবে এজেন্টিক ডিজাইন সিস্টেমের রূপ বদলে দেবে, আর কেন ওয়েব ডেভেলপমেন্টের ভবিষ্যৎ হয়তো এখনই কিছু সরল নিয়মের মধ্যে লেখা হয়ে আছে

ডিজাইন সিস্টেম, কৃত্রিম বুদ্ধিমত্তা আর কম্পিউটেশনাল তত্ত্বের সংযোগস্থলে এক গভীর রূপান্তর ঘটে চলেছে। পরিবর্তনটা এতটাই মৌলিক যে স্বয়ংক্রিয় এজেন্টের যুগে "ডিজাইন" বলতে আসলে কী বোঝায়, সেই ধারণাকেই নতুন করে ভাবতে বাধ্য করে।

 

 

 

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

 

সেই ধারণাটি কী? ডিজাইনই কোড।

 

এটা শুধু মুখরোচক একটি বাক্য নয়। এটা এই উপলব্ধি যে আমরা হয়তো এমন এক পৃথিবীর দিকে এগোচ্ছি, যেখানে ডিজাইন সিস্টেম সেলুলার অটোমেটার মতো কাজ করবে, অর্থাৎ সরল নিয়ম থেকে জন্ম নেবে জটিল, স্বতঃস্ফূর্ত আচরণ। যেখানে কিছু "ডিজাইন করা" আর সেটা "প্রোগ্রাম করা"র মধ্যকার পার্থক্য পুরোপুরি মুছে যাবে। যেখানে স্বয়ংক্রিয় এজেন্টরা ডিজাইন সিস্টেম শুধু ব্যবহার করবে না, বরং ডিজাইন সিস্টেমের কার্যরূপই হয়ে উঠবে।

মিলনের মুহূর্ত

২০২৫ সালের ১১ ডিসেম্বর ব্র্যাড ফ্রস্ট (অ্যাটমিক ডিজাইনের স্রষ্টা) ও ডমিনিক নগুয়েন (ক্রোমাটিকের সহ-প্রতিষ্ঠাতা) একটি লাইভ সেশনে যোগ দেন, যার বিষয় ছিল "২০২৬ সালে এজেন্টিক ডিজাইন সিস্টেম"। তাঁদের বক্তব্য ছিল স্পষ্ট: এআই এজেন্টরা মানুষের টিমের ব্যবহৃত একই কম্পোনেন্ট দিয়ে ইতিমধ্যেই UI সাজাচ্ছে। ডিজাইন সিস্টেমকে মেশিন-পাঠযোগ্য অবকাঠামো হয়ে উঠতে হবে, নইলে সে অতীত যুগের নিদর্শন হয়ে থাকার ঝুঁকিতে পড়বে।

 

 

স্টোরিবুক টিম যেমন ঘোষণা করেছে: "এআই এখন ডিজাইন সিস্টেমকে ঠিক নথিতে যেভাবে লেখা আছে সেভাবেই ব্যবহার করতে শুরু করেছে। উদাহরণ, স্টেট & সীমাবদ্ধতার ফাঁক সরাসরি অনির্দেশ্য UI আউটপুটের জন্ম দেয়।"

এই ব্লগ পোস্টে আমরা সেলুলার অটোমেটা, স্বতঃস্ফূর্ত আচরণ আর এজেন্টিক ডিজাইন সিস্টেমের ভবিষ্যতের মধ্যকার গভীর সম্পর্কগুলো খুঁজে দেখব। ভন নিউম্যানের স্বয়ংপ্রতিলিপিকারী যন্ত্র থেকে আজকের এআই এজেন্ট ঝাঁক পর্যন্ত তাত্ত্বিক ভিত্তির পথটা অনুসরণ করব।

 

আমরা দেখব Drupal এবং আধুনিক CMS প্ল্যাটফর্মগুলো Schema.org Blueprints আর Drupal AI-এর মতো মডিউলের মাধ্যমে কীভাবে এআইকে নিজেদের সঙ্গে যুক্ত করছে। আর ভেবে দেখব, ডিজাইনার, ডেভেলপার এবং ডিজিটাল পণ্য তৈরির ভবিষ্যতের জন্য এ সবকিছুর অর্থ কী দাঁড়ায়।


সেলুলার অটোমেটা ও স্বতঃস্ফূর্ত উদ্ভবের যুক্তি

সরল নিয়মের সৌন্দর্য

১৯৭০ সালে গণিতবিদ জন কনওয়ে প্রবর্তন করেন গেম অফ লাইফ, একটি "শূন্য-খেলোয়াড়ের খেলা", যা পরবর্তীতে কম্পিউটেশনাল তত্ত্বের সবচেয়ে বেশি অধ্যয়ন করা ব্যবস্থাগুলোর একটি হয়ে ওঠে। এর নিয়মগুলো শ্বাসরুদ্ধকর রকমের সরল:

  1. দুইয়ের কম জীবিত প্রতিবেশী থাকলে যেকোনো জীবিত কোষ মারা যায় (জনবিরলতা)
  2. দুই বা তিনটি জীবিত প্রতিবেশী থাকলে যেকোনো জীবিত কোষ বেঁচে থাকে
  3. তিনের বেশি জীবিত প্রতিবেশী থাকলে যেকোনো জীবিত কোষ মারা যায় (অতিজনসংখ্যা)
  4. ঠিক তিনটি জীবিত প্রতিবেশী থাকলে যেকোনো মৃত কোষ জীবিত হয়ে ওঠে (প্রজনন)

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

 

 

চিত্র ১: কনওয়ের গেম অব লাইফে গসপারের গ্লাইডার গান। এই প্যাটার্নটি অবিরাম গ্লাইডারের স্রোত তৈরি করে—দেখায় কীভাবে সহজ নিয়ম থেকেই অসীম, নিজেকে টিকিয়ে রাখা জটিলতার জন্ম হতে পারে।

 

 

সেলুলার অটোমাটার থেকে এটাই আমাদের প্রথম শিক্ষা: জটিল আচরণের জন্য জটিলতা কোনো পূর্বশর্ত নয়। একটি ভিত্তিতলের ওপর সহজ নিয়ম ধারাবাহিকভাবে প্রয়োগ করলে এমন সব প্যাটার্ন ও আচরণের জন্ম হতে পারে, যা কেউ কখনো স্পষ্টভাবে প্রোগ্রাম করেনি।

অবশ্যদ্রষ্টব্য ভিডিও: সেলুলার অটোমাটার পরিচিতি

সেলুলার অটোমাটারের একটি পরিচিতি, যেখানে আছে কনওয়ের গেম অব লাইফ এবং নিজে নিজে প্রতিলিপি তৈরি করা ল্যাংটনের লুপ

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

 

 

 

 

ভিডিওর অতিরিক্ত উৎস:


ল্যাংটনের লুপ ও স্বপ্রতিলিপন

১৯৮৪ সালে ক্রিস্টোফার ল্যাংটন এই ধারণাকে আরও এক ধাপ এগিয়ে নিয়ে যান তাঁর স্বপ্রতিলিপনকারী লুপের মাধ্যমে—এটি এমন একটি সেলুলার অটোমাটন, যা প্রকৃত কৃত্রিম জীবনের নীতিগুলো দেখিয়েছিল। কনওয়ের গেম অব লাইফ দেখায় উদ্ভূত জটিলতা, আর ল্যাংটনের লুপ দেখায় উদ্ভূত প্রজনন.

। প্রতিটি লুপ একটি চক্রাকার সীমানা নিয়ে গঠিত, যার ভেতরে কোষের অবস্থার মধ্যে সংকেতবদ্ধ একটি "জিনোম" থাকে। এই জিনোম লুপ ঘিরে অবিরাম প্রবাহিত হয় এবং একটি নির্মাণ-বাহু বেয়ে বাইরে চলে যায়, যা ১৫১টি সময়-ধাপে একটি কন্যা লুপ তৈরি করে। কাজ শেষ হলে কন্যা লুপ মূল লুপ থেকে আলাদা হয়ে যায়, আর দুটিই প্রতিলিপি তৈরি করে চলে।

 

Grid art of a red path with blue, yellow, and cyan tiles, on a dark background.

চিত্র ২: ল্যাংটনের লুপ তার প্রারম্ভিক বিন্যাসে। জেনেটিক তথ্য লুপের ভেতর দিয়ে ঘুরতে থাকে এবং প্রসারিত বাহুর মাধ্যমে কন্যা লুপ নির্মাণের নির্দেশ দেয়।

 

"কোনো সেলুলার অটোমাটনের ভেতরে যদি স্বপ্রজননক্ষম যন্ত্র সম্ভব হয়, তাহলে যন্ত্রের পক্ষেও জীবন সৃষ্টি করা সম্ভব হতে পারে।"

- ক্রিস্টোফার ল্যাংটন, "Studying Artificial Life with Cellular Automata" (১৯৮৬)

এর তাৎপর্য গভীর। ল্যাংটনের লুপ দেখায়, স্বপ্রতিলিপনের জন্য জৈব কোষের জটিলতা কিংবা von Neumann-এর মূল নকশার সর্বজনীন নির্মাণক্ষমতা লাগে না। দরকার শুধু:

  • একগুচ্ছ সরল, স্থানীয় নিয়ম
  • নির্দেশনা সংকেতবদ্ধ করার একটি ব্যবস্থা
  • সেই নির্দেশনা কার্যকর করার একটি প্রক্রিয়া

নিয়মগুলোই হলো জীবসত্তা। নকশাই হলো কোড।

১৯৯৯ সালে হিরোকি সায়ামা পরিচয় করান ইভোলুপ—এই রূপভেদগুলোতে কাঠামোগত বিলয়ক্ষমতা ও ফেনোটাইপিক মিথস্ক্রিয়া যুক্ত করা হয়েছে, ফলে স্বতঃস্ফূর্ত পরিব্যক্তি ও বিবর্তনীয় গতিশীলতা সম্ভব হয়। প্রতিলিপি তৈরির সময় সরাসরি ভৌত সংঘর্ষের মধ্য দিয়ে এই লুপগুলো বিবর্তিত হয়, যার ফলে জিনোটাইপে বৈচিত্র্য আসে, গঠনগত বৈচিত্র্য বাড়ে এবং প্রজন্মের পর প্রজন্ম জটিলতা বৃদ্ধি পায়। ল্যাংটনের স্থির প্রতিলিপনের বিপরীতে ইভোলুপ বাইরের হস্তক্ষেপ ছাড়াই উত্তরাধিকারযোগ্য পরিব্যক্তি দেখায়।

 

 

রুল ১১০ ও সর্বজনীন গণনা

স্টিফেন উলফ্রাম প্রাথমিক সেলুলার অটোমাটা নিয়ে অনুসন্ধান করতে করতে এক চমকপ্রদ আবিষ্কারে পৌঁছান: রুল ১১০—একমাত্রিক সেলুলার অটোমাটনের সবচেয়ে সরল ধরনের মাত্র ২৫৬টি সম্ভাব্য নিয়মের একটি—সর্বজনীন গণনা করতে সক্ষম।

বিধি ১১০-কে পূর্ণাঙ্গভাবে বর্ণনা করা যায় একটি কোষ ও তার দুই প্রতিবেশীর আটটি সম্ভাব্য সমন্বয়ের প্রতিটির ফলাফল দিয়ে। অথচ এই অতি সরল বিধি-আটটি বাইনারি সিদ্ধান্ত-একটি সর্বজনীন টিউরিং মেশিনকে সিমুলেট করতে পারে।

 

Rull 110 cellular automaton - Triangle pattern with black and white abstract geometric design.

চিত্র ৩: বিধি ১১০ সেলুলার অটোমেটন। সংজ্ঞা সরল হলেও বিধি ১১০ শ্রেণি ৪-এর আচরণ দেখায়-এমন জটিল নকশা, যা সম্পূর্ণ স্থিতিশীলও নয়, সম্পূর্ণ বিশৃঙ্খলও নয়-এবং এটি টিউরিং-সম্পূর্ণ বলে প্রমাণিত হয়েছে।

 

"সর্বজনীন গণনার জন্য পুরো একটি কম্পিউটার সিপিইউ-র মতো কিছুর দরকার নেই। দরকার শুধু এই ছোট্ট বিধিটুকু।"

- স্টিফেন উলফ্রাম, "A New Kind of Science"

২০০৪ সালে ম্যাথিউ কুক একটি প্রমাণ প্রকাশ করেন, যেখানে দেখানো হয় যে একটি নির্দিষ্ট পুনরাবৃত্ত পটভূমি নকশাসহ বিধি ১১০ টিউরিং-সম্পূর্ণ। প্রমাণটি দেখায়, বিধি ১১০ চক্রাকার ট্যাগ সিস্টেম অনুকরণ করতে পারে, আর সেগুলো আবার যেকোনো টিউরিং মেশিনকে অনুকরণ করতে সক্ষম। ৮৮টি সম্ভাব্য অনন্য প্রাথমিক সেলুলার অটোমেটনের মধ্যে বিধি ১১০-ই একমাত্র, যার টিউরিং-সম্পূর্ণতা সরাসরি প্রমাণিত হয়েছে।

উলফ্রামের প্রস্তাবিত গণনামূলক সমতুল্যতার নীতি আরও মৌলিক একটি কথা বলে: জটিলতার ন্যূনতম একটি সীমা ছাড়িয়ে গেলে সব সিস্টেমই গণনা-সক্ষমতার দিক থেকে মূলত সমতুল্য। মানুষের মস্তিষ্ক, একটি আবহাওয়া ব্যবস্থা আর বিধি ১১০ কোনো গভীর অর্থে গণনার দিক থেকে সমতুল্য।

উলফ্রামের সেলুলার অটোমেটনের চারটি শ্রেণি

  • শ্রেণি ১: বিবর্তন একটি সমসত্ত্ব অবস্থায় গিয়ে পৌঁছায়
  • শ্রেণি ২: বিবর্তন আলাদা আলাদা পর্যায়বৃত্ত কাঠামো তৈরি করে
  • শ্রেণি ৩: বিবর্তন বিশৃঙ্খল, এলোমেলো নকশা তৈরি করে
  • শ্রেণি ৪: বিবর্তন স্থানীয় কাঠামোসহ জটিল নকশা তৈরি করে-যা সর্বজনীন গণনার সামর্থ্য রাখে

বিধি ১১০ শ্রেণি ৪-এর আচরণ দেখায়, যাকে উলফ্রাম বর্ণনা করেন "বিশৃঙ্খলার কিনারা" হিসেবে-এমন এক সংকটময় সীমানা, যেখানে সরল বিধি থেকেই সর্বোচ্চ গণনাশক্তির জন্ম হয়।

০ই০পি মেটাসেল: প্রকৃত স্বপ্রতিলিপন

২০১৮ সালের অক্টোবরে অ্যাডাম পি. গউচার সম্পূর্ণ করেন ০ই০পি মেটাসেল-কনওয়ের গেম অব লাইফের এমন একটি নকশা, যা প্রকৃত স্বপ্রতিলিপনে সক্ষম। আগের মেটাসেলগুলোর মতো নয়, যেগুলোর আশপাশে আগে থেকেই অনুলিপি থাকা দরকার হতো; ০ই০পি মেটাসেল শূন্য থেকে নিজের অনুলিপি তৈরি করতে পারে, এমনকি নিজের নির্দেশনা-ফিতাসহ।

কৃত্রিম জীবনের ক্ষেত্রে এটি একটি মাইলফলক: এমন একটি সিস্টেম, যা শুধু স্থানীয় বিধি ব্যবহার করে গণনামূলক ভিত্তির ওপর দিয়ে নিজেকে ছড়িয়ে দিতে পারে। ২০১৩ সালের ২৩ নভেম্বর ডেভ গ্রিন গেম অব লাইফে প্রথম এমন একটি রেপ্লিকেটর বানান, যা নির্দেশনা-ফিতাসহ নিজের পূর্ণাঙ্গ অনুলিপি তৈরি করে-প্রমাণ করে যে কনওয়ের সরল দুই-অবস্থার অটোমেটনও সীমাহীন স্বপ্রজননকে ধারণ করতে পারে।

 

আরও জানুন: সেলুলার অটোমেটনের ভিডিও

 

সেলুলার অটোমেটন নিয়ে আরও আকর্ষণীয় কনটেন্ট খুঁজুন:

▶️ YouTube Search: "cellular automata the design is the code"


গণনামূলক ভিত্তি হিসেবে ডিজাইন সিস্টেম

অ্যাটমিক ডিজাইন থেকে এজেন্টিক ডিজাইনে

ব্র্যাড ফ্রস্টের অ্যাটমিক ডিজাইন পদ্ধতি ২০১৩ সালে এসে ডিজাইন সিস্টেম নিয়ে আমাদের ভাবনা আমূল বদলে দেয়। ইন্টারফেসকে ভেঙে তিনি সাজান অ্যাটম (বোতাম বা ইনপুটের মতো মৌলিক উপাদান), মলিকিউল (সরল সমন্বয়), অর্গানিজম (জটিল ইউআই অংশ), টেমপ্লেট (পেজের বিন্যাস) এবং পেজ (চূড়ান্ত রূপ) হিসেবে। এভাবে অ্যাটমিক ডিজাইন জটিলতা সামলানোর জন্য একটি স্তরবিন্যস্ত কাঠামো দিয়েছে।

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

সেলুলার অটোমেটনের নীতিঅ্যাটমিক ডিজাইনের সমতুল্য
স্থানীয় বিধিপ্রতিটি কম্পোনেন্ট স্তরের নিজস্ব নিয়ম আছে, কীভাবে সেটি অন্যদের সঙ্গে মিলিত হতে পারবে
উদ্ভব (Emergence)সরল উপাদানের সমন্বয় থেকেই জটিল পেজ গড়ে ওঠে
পুনরাবৃত্তিযোগ্যতাএকই অ্যাটম একই নিয়মে জোড়া লাগলে প্রতিবারই একই ফল পাওয়া যায়
মাপযোগ্যতাকেন্দ্রীয় নিয়ন্ত্রণ ছাড়াই সিস্টেম বড় হতে পারে-প্রতিটি কম্পোনেন্ট নিজের আচরণ "জানে"
স্বসংগঠনডিজাইন টোকেন সিস্টেম জুড়ে পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে ছড়িয়ে দেয়

"ডিজাইন সিস্টেম যখন একঘেয়ে, তখন ডিজাইনার ও ডেভেলপাররা মুক্ত হয়ে নতুন কিছু করতে পারেন, নতুন সমস্যার সমাধান খুঁজতে পারেন। একঘেয়ে কাজের বোঝাটা বয়ে বেড়ায় ডিজাইন সিস্টেম, যাতে ডিজাইনার ও ডেভেলপারদের তা বইতে না হয়।"

- জশ ক্লার্ক, "The Most Exciting Design Systems Are Boring"

২০২৩ সালের ফেব্রুয়ারিতে ব্র্যাড ফ্রস্ট "Design Systems in the Time of AI" নিয়ে লিখেছিলেন:

"এআই স্বাভাবিকভাবেই ডিজাইন সিস্টেমের একজন ব্যবহারকারী... আসল কথা হলো, ডিজাইন সিস্টেমের কম্পোনেন্টের অনেক কাজই আসলে যান্ত্রিক ও আগে থেকে অনুমান করা যায়। লাইব্রেরির বাকি অংশের কাঠামোর সঙ্গে মিলিয়ে কম্পোনেন্টের বয়লারপ্লেট বানাতে আমরা ইতিমধ্যেই PlopJS-এর মতো টুল ব্যবহার করি। বহুল প্রচলিত বয়লারপ্লেটের কাজগুলো তৈরি করতে এআই আমাকে সাহায্য করলে আমি খুশিই হব।"

- ব্র্যাড ফ্রস্ট

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

মেশিন-পাঠযোগ্যতার অপরিহার্যতা

Storybook MCP (Model Context Protocol) উদ্যোগ এই পথে একটি গুরুত্বপূর্ণ বিবর্তনের প্রতিনিধিত্ব করে। ২০২৫ সালের শেষ দিকে ঘোষিত Storybook MCP বিদ্যমান Storybook সেটআপ থেকে মেশিন-পাঠযোগ্য কম্পোনেন্ট মেটাডেটা এআই কোডিং এজেন্টদের হাতে তুলে দেয়।

মূল অন্তর্দৃষ্টি হলো, এজেন্টদের কাঁচা কোড বা ভিজ্যুয়াল ডকুমেন্টেশন লাগে না। তাদের দরকার:

  • কম্পোনেন্ট ম্যানিফেস্ট: প্রতিটি কম্পোনেন্টের কাঠামোবদ্ধ মেটাডেটা-প্রপস, ভ্যারিয়েন্ট, ডিজাইন টোকেন বাইন্ডিং এবং ব্যবহারের উদাহরণ
  • অর্থবহ নামকরণ: action.primary.confirm-এর মতো উদ্দেশ্যসমৃদ্ধ টোকেন, যা শুধু মান নয়, এজেন্টদের কাছে অর্থও পৌঁছে দেয়
  • ভ্যালিডেশন লুপ: টেস্ট চালানো, ব্যর্থতা দেখা এবং নিজে নিজেই ভুল শুধরে নেওয়ার সক্ষমতা

"Storybook MCP এজেন্টদের আপনার প্যাটার্ন অনুসরণ করতে ও আপনার টেস্টে পাস করতে সাহায্য করে। এটি এজেন্টদের এমন দুটি জিনিস দেয় যা আগে কখনো তাদের ছিল না: মেশিন-পাঠযোগ্য কম্পোনেন্ট মেটাডেটা এবং নিজেদের ভুল নিজেই সারিয়ে নেওয়ার একটি পুনরাবৃত্তিমূলক লুপ।"

- Storybook টিম

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

ডিজাইনে প্রয়োগ করা সেলুলার অটোমেটনের স্থাপত্য ঠিক এটিই: স্থানীয় নিয়ম (কম্পোনেন্টের স্পেসিফিকেশন), প্রতিবেশীদের মধ্যে মিথস্ক্রিয়া (কম্পোজিশন প্যাটার্ন) এবং পুনরাবৃত্তিমূলক হালনাগাদ (ভ্যালিডেশন ও স্ব-সংশোধন)।

 

জিনোম হিসেবে আমার কম্পোনেন্ট ম্যানিফেস্ট

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

একটি কম্পোনেন্ট ম্যানিফেস্টে নির্দিষ্ট করা থাকতে পারে:

{
  "name": "Button",
  "variants": ["primary", "secondary", "destructive"],
  "sizes": ["sm", "md", "lg"],
  "props": {
    "label": "string",
    "disabled": "boolean",
    "onClick": "function"
  },
  "tokens": {
    "background": "color.action.primary",
    "borderRadius": "radius.md",
    "padding": "space.3"
  },
  "constraints": [
    "Must have accessible contrast ratio",
    "Label required for non-icon buttons",
    "Minimum touch target 44x44px"
  ],
  "examples": [
    { "variant": "primary", "label": "Submit", "size": "md" },
    { "variant": "destructive", "label": "Delete", "size": "sm" }
  ]
}

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

 

ইয়ামল (yaml) ফরম্যাট ব্যবহারের ব্যাপারে আমি ব্র্যাড ফ্রস্টের সঙ্গে একমত।

 

Drupal-এর কম্পোনেন্টগুলো ইতিমধ্যেই yaml ফরম্যাট ব্যবহার করছে। দেখতে অনেকটা এমন

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Button
status: experimental
description: Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
props:
  type: object
  properties:
    html_tag:
      type: string
      title: The HTML tag to use for the button (button | a). Defaults to `button`.
      default: button
      enum:
        - button
        - a
    url:
      type: string
      title: URL Link
      description: URL link for the button when the HTML tag is an anchor link.
      $ref: "ui-patterns://url"
    color:
      type: string
      title: Color
      description: Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
      default: ''
      enum:
        - ''
        - primary
        - secondary
        - success
        - danger
        - warning
        - info
        - dark
        - light
        - link
    outline:
      type: boolean
      title: Outline
      description: In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
      default: false
    size:
      type: string
      title: Size
      description: Bootstrap button size
      default: ''
      enum:
        - ''
        - btn-sm
        - btn-lg
    disabled:
      type: boolean
      title: Disabled
      description: Disabled button
      default: false
    button_utility_classes:
      type: array
      title: Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.
    attributes:
      type: object
      title: Attributes
      description: HTML attributes for the containing element.
      $ref: 'ui-patterns://attributes'
slots:
  content:
    type: string
    title: Content
    description: The content for the button
    minLength: 1
    examples:
      - Press
      - Submit now
      - Save
      - Login
      - Read more

 

ডিজাইন হলো কোডই।

  • ভ্যারিয়েন্ট
  • টোকেন
  • প্রপস
  • কনস্ট্রেইন্ট (কম্পোনেন্টে আমরা এটি যোগ করতে পারি)

  • স্লটের নিয়ম (অন্য স্লটে কী বসানো যাবে, অথবা আমার স্লটে কী বসানোর অনুমতি আছে)

  • নিয়মাবলি

  • উদাহরণ 

  • অ্যানিমেশন  ( ব্যবহারের অনুমতি বা নির্দেশনা আছে এমন )

তারপর আচরণটি দেখুন এবং নিজে পরীক্ষা করে দেখুন।

যেমন এখানে: https://storybook.demo.varbase.vardot.com/?path=/story/atoms-button--primary 

 

পরিবেশগত চলক হিসেবে ডিজাইন টোকেন

ডিজাইন টোকেন ধাঁধার আরেকটি গুরুত্বপূর্ণ টুকরো। সেলুলার অটোমাটায় প্রতিটি সেল তার ঠিক পাশের পরিবেশে সাড়া দেয়, অর্থাৎ প্রতিবেশী সেলগুলোর অবস্থায়। ডিজাইন সিস্টেমে কম্পোনেন্টগুলো সাড়া দেয় ডিজাইন টোকেনে, অর্থাৎ সেইসব প্রাসঙ্গিক মানে, যা কম্পোনেন্টের চেহারা ও আচরণ ঠিক করে দেয়।

আধুনিক টোকেন আর্কিটেকচারে একাধিক স্তর ব্যবহার করা হয়:

  • কোর টোকেন: কাঁচা মান, যেমন color.blue.500: #3B82F6
  • সিমান্টিক টোকেন: উদ্দেশ্যনির্ভর রেফারেন্স, যেমন color.action.primary: color.blue.500
  • কম্পোনেন্ট টোকেন: নির্দিষ্ট পরিসরে প্রয়োগ, যেমন button.background.primary: color.action.primary

কোনো এজেন্ট যখন Button কম্পোনেন্ট তৈরি করে, তখন তার জানার দরকার নেই যে "primary" মানে নীল। তাকে শুধু রেফারেন্স দিতে হবে button.background.primary আর ভরসা রাখতে হবে যে টোকেন সিস্টেম সেটিকে সঠিক মানে রূপান্তর করে নেবে। তথ্য থাকে পরিবেশে (টোকেন স্তরে); কম্পোনেন্ট (সেল) কেবল তাতে সাড়া দেয়।

এ ধরনের টুল, যেমন Tokens Studio এখন ডিজাইন টোকেনকে রিজলভারসহ কম্পিউটেশনাল গ্রাফ হিসেবে দেখে, যেখানে প্রতিটি নোড প্রসঙ্গ বুঝে সিদ্ধান্ত নেয় কোন বেস টোকেন ব্যবহার হবে। এভাবে ডিজাইন টোকেন স্থির মান থেকে বদলে গিয়ে হয়ে ওঠে গতিশীল, নিয়মভিত্তিক ব্যবস্থা।


Drupal ইকোসিস্টেম ও এআই ইন্টিগ্রেশন

কনটেন্ট ম্যানেজমেন্ট সিস্টেমে এআই যুক্ত করা "ডিজাইনই কোড" নীতিগুলো যাচাই করার এক আদর্শ গবেষণাগার। Drupal-এর মতো CMS-এ মূল ধারণাগুলো আগে থেকেই আছে: কাঠামোবদ্ধ কনটেন্ট টাইপ, ফিল্ডের সংজ্ঞা, সম্পর্ক এবং গঠনের নিয়ম।

আমি কখনো ভাবিনি আমরা এমন কিছু বলতে পারব। আমার কাছে এটা ছিল শিল্পের চূড়ান্ত পর্যায়।

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

 

 

এজেন্ট এক্সপেরিয়েন্স (AX) ও নতুন ব্যবহারকারী

যন্ত্রের জন্য ডিজাইন

২০২৫ সালের শুরুর দিকে Netlify-এর সিইও ম্যাথিয়াস বিলম্যান পরিচয় করিয়ে দেন "এজেন্ট এক্সপেরিয়েন্স" (AX) ধারণাটি। এটি একটি নতুন শাখা, যার কেন্দ্রে আছে এআই এজেন্টরা পণ্য ও প্ল্যাটফর্মের সঙ্গে কীভাবে মিথস্ক্রিয়া করে।

পরিবর্তনটা মৌলিক। কয়েক দশক ধরে UX (ইউজার এক্সপেরিয়েন্স) গড়ে উঠেছে মানুষের বোধ, উপলব্ধি ও আচরণকে ঘিরে। DX (ডেভেলপার এক্সপেরিয়েন্স) গড়ে উঠেছে সফটওয়্যার বানানো মানুষ ডেভেলপারদের কথা ভেবে। AX স্বীকার করে যে এজেন্টরা ডিজিটাল সিস্টেমের প্রধান ব্যবহারকারী হয়ে উঠছে, আর তাদের চাহিদা সম্পূর্ণ আলাদা:

  • তারা দৃশ্যসৌন্দর্যের পরোয়া করে না-তাদের চাই কেবল কাঠামোবদ্ধ, পার্স করা যায় এমন ডেটা
  • তারা ইন্টারফেসে ঘুরে বেড়ায় না-তারা API কল করে আর ম্যানিফেস্ট পড়ে
  • তারা মানুষের মতো ডকুমেন্টেশন পড়ে না-তাদের দরকার যন্ত্রপাঠযোগ্য প্রসঙ্গ
  • তারা ব্যক্তিগত মতামতের ভিত্তিতে বিচার করে না-তারা নিয়ম ও শর্ত মেনে চলে

"এআই এজেন্ট মানুষ নয়: বোতামের আকার, লেখার পাঠযোগ্যতা, আপনার ওয়েবসাইটের সুন্দর রঙের প্যালেট কিংবা অ্যাপের ঝকমকে অ্যানিমেশন নিয়ে তাদের কোনো মাথাব্যথা নেই। তাহলে এআই এজেন্ট আসলে কীসের 'পরোয়া' করে? এই প্রশ্নের নির্দিষ্ট কোনো উত্তর আজ নেই, কিন্তু আগামী বছরগুলোতে এটি ক্রমেই আরও গুরুত্বপূর্ণ হয়ে উঠবে।"

- এএক্স গবেষণা

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

দ্বৈত ইন্টারফেসের চ্যালেঞ্জ

এএক্সের জন্য ডিজাইন করার অর্থ একসঙ্গে দুটি ইন্টারফেস তৈরি করা:

  1. মানুষ থেকে এজেন্ট ইন্টারফেস: যেখানে মানুষ এজেন্টের আচরণ তদারকি করে, অনুমোদন দেয়, সম্পাদনা করে এবং দিকনির্দেশনা দেয়—এটি হলো "মিশন কন্ট্রোল" স্তর। ভাবুন ড্যাশবোর্ড আর অনুমোদনের সারির কথা, ফর্ম আর বোতামের কথা নয়।
  2. এজেন্ট থেকে সিস্টেম ইন্টারফেস: যেখানে এজেন্ট এপিআই, ডেটাবেস ও টুলের সঙ্গে কাজ করে—এটি হলো "অপারেশনাল" স্তর। এটি হতে হবে মজবুত, ভালোভাবে নথিভুক্ত এবং যন্ত্রের দক্ষতার জন্য অপটিমাইজ করা।

এটি সেলুলার অটোমাটার-এর স্থাপত্যেরই প্রতিচ্ছবি, যেখানে দুটি আলাদা দৃষ্টিভঙ্গি পাশাপাশি থাকে:

  • স্থানীয় দৃষ্টিভঙ্গি: প্রতিটি কোষ (এজেন্ট) তার ঠিক পাশের প্রতিবেশীদের ওপর ভিত্তি করে সহজ নিয়ম মেনে চলে
  • বৈশ্বিক দৃষ্টিভঙ্গি: জটিল নকশা ফুটে ওঠে, যা কেবল বড় পরিসরেই চোখে পড়ে

"এজেন্ট এক্সপেরিয়েন্স ডিজাইন (এএক্স)-এর ফলে এজেন্টের জন্য এবং এজেন্টের নিজের কাছে চমৎকার ব্যবহারযোগ্যতা তৈরি হওয়া উচিত। তাই দারুণ এএক্স শেষ পর্যন্ত দারুণ ইউজার এক্সপেরিয়েন্স (ইউএক্স)-এর দিকে নিয়ে যায়। এআই এজেন্ট যদি কোনো ভাঙা প্রক্রিয়া, প্রটোকল, এমনকি বিভিন্ন সিস্টেমে অসামঞ্জস্যপূর্ণ শব্দচয়নের মুখোমুখি হয়, তাহলে সে কাজটি করতেই পারে না। এজেন্টের জন্য সেটি একটি খারাপ অভিজ্ঞতা, যা ফলে গ্রাহক বা কর্মীর জন্যও খারাপ অভিজ্ঞতা তৈরি করে।"

- ক্যাট হোমস, চিফ এক্সপেরিয়েন্স অফিসার, সেলসফোর্স

ইউএক্স থেকে এএক্স: ডিজিটাল ডিজাইনের বিবর্তন

ইউএক্স (মানুষ ব্যবহারকারী)ডিএক্স (ডেভেলপার)এএক্স (এআই এজেন্ট)
দৃশ্যমান ইন্টারফেসএপিআই ও এসডিকেযন্ত্রপাঠযোগ্য ম্যানিফেস্ট
আবেগের সংযোগডকুমেন্টেশনকাঠামোবদ্ধ প্রসঙ্গ
নেভিগেশন প্রবাহকোডের উদাহরণটুলের সংজ্ঞা
অ্যাক্সেসিবিলিটিটাইপ নিরাপত্তাসীমাবদ্ধতার স্পেসিফিকেশন
ত্রুটির বার্তাস্ট্যাক ট্রেসনিজে নিজে সংশোধনের জন্য ফিডব্যাক লুপ


স্টিগমার্জি ও পরোক্ষ যোগাযোগ

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

এজেন্টিক ডিজাইন সিস্টেমে স্টিগমার্জি যেসব রূপে দেখা দেয়:

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

কোনো এজেন্ট যখন একটি কম্পোনেন্ট ব্যবহার করে ইউআই তৈরি করে, সে চিহ্ন রেখে যায়—কোডবেসে, ডকুমেন্টেশনে, আর যে প্যাটার্ন সে গড়ে তোলে তাতে। একই ধরনের কাজের মুখোমুখি হওয়া ভবিষ্যৎ এজেন্টরা এই চিহ্ন দ্বারা প্রভাবিত হবে, আর এভাবেই গড়ে উঠবে এক ধরনের সম্মিলিত বুদ্ধিমত্তা, যা কোনো একক এজেন্টের নেই।

এজেন্টিক ডিজাইন প্যাটার্ন

অ্যান্ড্রু এনজি ও অন্যরা এজেন্টিক এআই সিস্টেমের চারটি মূল প্যাটার্ন চিহ্নিত করেছেন:

  1. প্রতিফলন: এআই নিজের আউটপুট মূল্যায়ন করে এবং ধাপে ধাপে তা আরও ভালো করে
  2. টুল ব্যবহার: এআই বাইরের টুল, এপিআই ও সিস্টেমের সঙ্গে কাজ করে
  3. পরিকল্পনা:এআই জটিল কাজগুলোকে ছোট ছোট উপকাজে ভেঙে নেয় এবং একটির পর একটি সম্পন্ন করে
  4. মাল্টি-এজেন্ট: জটিল কাজে একাধিক বিশেষায়িত এজেন্ট একসঙ্গে কাজ করে

এই প্যাটার্নগুলো সরাসরি সেলুলার অটোমেটার ধারণার সঙ্গে মিলে যায়:

এজেন্টিক প্যাটার্নসেলুলার অটোমেটার-এ সমতুল্য
রিফ্লেকশনবর্তমান অবস্থার মূল্যায়নের ভিত্তিতে সেলগুলো নিজেদের হালনাগাদ করে
টুল ব্যবহারসেলগুলো পরিবেশগত চলকের সঙ্গে মিথস্ক্রিয়া করে
পরিকল্পনাস্থিতিশীল বিন্যাসের দিকে বহু প্রজন্মব্যাপী বিবর্তন
মাল্টি-এজেন্টবিশেষায়িত নিয়মসহ ভিন্ন ভিন্ন ধরনের সেল (বহুকোষী অটোমেটা)

ডিজাইনই কোড: আরও গভীর পাঠ

"ডিজাইনই কোড" কথাটির আসল অর্থ কী

যখন আমরা বলি "ডিজাইনই কোড", তখন আমরা একসঙ্গে কয়েকটি দাবি করছি:

১. অর্থগত সমতুল্যতা

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

২. সৃজনক্ষমতা

রুল ১১০ যেমন গণনাযোগ্য যেকোনো কিছু গণনা করতে পারে, তেমনি যথেষ্ট পূর্ণাঙ্গ একটি ডিজাইন সিস্টেম যেকোনো বৈধ ইন্টারফেস তৈরি করতে পারে। সিস্টেমের মধ্যেই তার সব বৈধ প্রকাশের সম্ভাবনা নিহিত থাকে। কী গড়ে উঠবে, তা নির্ভর করে শুধু প্রারম্ভিক শর্ত (প্রয়োজনীয়তা) আর নিয়মের (সীমাবদ্ধতা) ওপর।

৩. উদ্ভূত জটিলতা

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

৪. গণনাগত অসংকোচনযোগ্যতা

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

৫. আত্ম-পরিবর্তন

প্রতিলিপি তৈরির সময় পরিবর্তিত হওয়া ইভোলুপের মতো, এজেন্ট-প্রস্তুত ডিজাইন সিস্টেমও ব্যবহারের মধ্য দিয়ে বিবর্তিত হতে পারে। এজেন্টদের তৈরি কম্পোনেন্ট লাইব্রেরির অংশ হয়ে যায়, আর ভবিষ্যতের এজেন্টরা তা ব্যবহার করে। সিস্টেম শেখে, মানিয়ে নেয় এবং বেড়ে ওঠে।

সেলুলার অটোমেটার রূপকের সম্প্রসারণ

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

রূপকের ওপারে: প্রকৃত মিলন

কিন্তু এটি নিছক রূপক নয়। এই মিলন বাস্তব এবং এখনই ঘটছে:

  • Storybook MCP কম্পোনেন্ট লাইব্রেরিকে যন্ত্রপাঠযোগ্য নির্দেশে রূপান্তর করে, যা এজেন্টরা কার্যকর করে
  • Model Context Protocol এজেন্টরা কীভাবে টুল ও প্রেক্ষাপটে প্রবেশ করবে তা প্রমিত করে, আর এজেন্টিক কাজের জন্য গড়ে তোলে একটি সর্বজনীন ভিত্তি
  • মাল্টি-এজেন্ট আর্কিটেকচার কাজ ভাগ করে দেয় বিশেষায়িত এজেন্টদের মধ্যে (স্থপতি, কোডার, রিভিউয়ার), যারা প্রোটোকল মেনে পরস্পরের সঙ্গে মিথস্ক্রিয়া করে, ঠিক ভিন্ন ভিন্ন কাজে বিশেষায়িত সেলের মতো
  • সেলফ-হিলিং লুপএজেন্টদের পরীক্ষা চালাতে, ত্রুটি শনাক্ত করতে এবং বারবার উন্নত করতে দেয়, ঠিক সেই একই ফিডব্যাক-কৌশলে, যা সেলুলার অটোমাটা স্থিতিশীল বিন্যাস গড়ে তুলতে ব্যবহার করে
  • Schema.org Blueprints কনটেন্টের কাঠামোকে মেশিন-পাঠযোগ্য ও অর্থবহ করে তোলে
  • Drupal AI এআই এজেন্টদের স্বয়ংক্রিয়ভাবে কনটেন্ট তৈরি, পরিবর্তন ও ব্যবস্থাপনার অবকাঠামো জোগায়

"ডিজাইনই কোড" কথাটিকে আমরা কোনো দার্শনিক অবস্থান হিসেবে দেখছি না। আমরা একে গড়ে তুলছি প্রযুক্তিগত অবকাঠামো হিসেবে।


তাৎপর্য এবং সামনের পথ

ডিজাইনারদের জন্য

ডিজাইনারের ভূমিকা এখন "আয়তক্ষেত্র-আঁকিয়ে" থেকে "নিয়ম-নির্ধারক"-এ বদলে যাচ্ছে। ব্র্যাড ফ্রস্ট যেমন লক্ষ করেছেন:

"যেসব ডিজাইনার ও ডেভেলপার নিজেদের কাজকে কেবল আয়তক্ষেত্র আঁকা বলে ভাবেন, তাঁদের দুশ্চিন্তার কারণ আছে। কিন্তু যাঁরা নিজেদের কাজকে সমস্যা সমাধান বলে ভাবেন, আর সেই সমস্যা মেটাতে গিয়ে প্রসঙ্গক্রমে কিছু আয়তক্ষেত্র বানাতে বা ব্যবহার করতে হয়, তাঁদের ভয় পাওয়ার কারণ অনেক কম।"

- ব্র্যাড ফ্রস্ট

এজেন্টনির্ভর ভবিষ্যতে ডিজাইনাররা যা করবেন:

  • সেমান্টিক টোকেন ও সেগুলোর পারস্পরিক সম্পর্ক নির্ধারণ করবেন
  • কম্পোজিশনের সীমারেখা ও প্যাটার্ন ঠিক করবেন
  • এমন ভ্যালিডেশন নিয়ম তৈরি করবেন, যা এজেন্টদের মানতেই হবে
  • যে নিয়মগুলো থেকে নতুন কিছু উদ্ভূত হয়, সেগুলো বাছাই ও বিকশিত করবেন
  • স্ব-সংশোধনের সুযোগ তৈরি করে এমন ফিডব্যাক-কৌশল ডিজাইন করবেন
  • কোন আউটপুট গ্রহণযোগ্য, তা ঠিক করে দেয় যে "ফিটনেস ফাংশন", তার রূপ দেবেন

 

Man in blue shirt examines colorful flowchart.

 

 

এটি ডিজাইনের আরও উঁচু স্তরের বিমূর্তায়ন, যেখানে ডিজাইন নিজে আঁকার বদলে ডিজাইন তৈরির নিয়মগুলোই ডিজাইন করা হয়। যেন প্রতিটি কোষ আলাদা করে আঁকার বদলে সেলুলার অটোমাটনের নিয়মগুলো ঠিক করে দেওয়া।

 

ডেভেলপারদের জন্য

ডেভেলপাররা হয়ে উঠছেন এজেন্ট সিস্টেমের স্থপতি। Anthropic যেমন বর্ণনা করে:

"সফটওয়্যার ডেভেলপমেন্টের ক্ষেত্রে LLM-এর সম্ভাবনা চোখে পড়ার মতো, কোড কমপ্লিশন থেকে শুরু করে স্বয়ংক্রিয় সমস্যা সমাধান পর্যন্ত এর সক্ষমতা বিকশিত হয়েছে।"

ডেভেলপারদের যা করতে হবে:

  • এজেন্ট ও সিস্টেমের মধ্যে মেশিন-পাঠযোগ্য ইন্টারফেস তৈরি করা
  • ফিডব্যাক লুপ ও ভ্যালিডেশন ব্যবস্থা ডিজাইন করা
  • যে কাঠামোর ভেতরে উদ্ভূত আচরণ ঘটে, সেই স্ক্যাফোল্ডিং গড়ে তোলা
  • চূড়ান্ত বিচারক হিসেবে মানুষের তত্ত্বাবধান বজায় রাখা
  • এজেন্টরা যে প্রোটোকলে একে অপরের সঙ্গে যোগাযোগ করবে, তা নির্ধারণ করা
  • বিভিন্ন এজেন্ট সিস্টেমকে জুড়ে দেয় এমন "গ্লু কোড" লেখা
Man with laptop amidst web development icons and chatbot graphic.

 

ওয়েব ডেভেলপমেন্ট ও CMS প্ল্যাটফর্মের জন্য

Drupal-এর মতো প্ল্যাটফর্মে এআই-এর সংযুক্তি এমন একটি ভবিষ্যতের দিকে ইঙ্গিত করছে, যেখানে:

  • কনটেন্ট মডেল হয়ে উঠবে এজেন্টের ব্যবহারযোগ্য Schema.org-এর মতো মানদণ্ডের মাধ্যমে
  • সম্পাদকীয় ওয়ার্কফ্লো হবে এজেন্ট-সহায়তাপুষ্ট এআই-চালিত খসড়া তৈরি, মডারেশন ও অপটিমাইজেশনসহ
  • সার্চ বিকশিত হবে কিওয়ার্ড মেলানো থেকে এমবেডিং ও ভেক্টর ডেটাবেসের মাধ্যমে অর্থগত বোঝাপড়ার দিকে
  • পার্সোনালাইজেশন হবে স্বয়ংক্রিয় যেখানে এজেন্টরা ব্যবহারকারীর পছন্দ শিখবে এবং রিয়েল-টাইমে কনটেন্ট মানিয়ে নেবে
  • ডেভেলপমেন্ট হবে আরও দ্রুত কারণ এজেন্টরা কম্পোনেন্ট, টেস্ট ও ডকুমেন্টেশন তৈরি করবে

Drupal AI, Drupal Canvas, Schema.org Blueprints এবং এআই প্রোভাইডার ইন্টিগ্রেশনের মতো মডিউলের মাধ্যমে Drupal ইকোসিস্টেমের এআই-কে আপন করে নেওয়া প্রমাণ করে, এই ভবিষ্যৎ ইতিমধ্যেই গড়ে উঠছে।

 

 

 

প্রতিষ্ঠানগুলোর জন্য

প্রতিযোগিতায় এগিয়ে থাকবে সেই প্রতিষ্ঠানগুলো, যাদের ডিজাইন সিস্টেম সবচেয়ে বেশি "এজেন্ট-প্রস্তুত"। এজেন্ট-প্রস্তুত সিস্টেমের বৈশিষ্ট্য:

  • কম্পোনেন্টের সব অবস্থা ও ভ্যারিয়েন্টের পূর্ণাঙ্গ কভারেজ
  • উদ্দেশ্য স্পষ্ট করে এমন সেমান্টিক নামকরণ
  • মেশিন-পাঠযোগ্য ডকুমেন্টেশন ও প্রাসঙ্গিক তথ্য
  • ভ্যালিডেশন ও টেস্টিংয়ের অবকাঠামো
  • বৈধ আউটপুটের পরিসর সীমিত করে এমন সুস্পষ্ট সীমাবদ্ধতা
  • এজেন্টের ব্যবহারের জন্য ডিজাইন করা API (AX-first)
  • Schema.org-ভিত্তিক কনটেন্ট আর্কিটেকচার

 

 

 

ভবিষ্যৎ ডিজিটাল পণ্যের জন্য

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

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

 

উপসংহার: কোড এখন জীবন্ত

জন ফন নয়মান ছিলেন বহুবিদ্যায় পারদর্শী মানুষ, সেলুলার অটোমাটার উদ্ভাবক। তাঁকে চালিত করেছিল একটি মৌলিক প্রশ্ন: নিজেকে পুনরুৎপাদন করতে হলে ন্যূনতম কতটা জটিলতা দরকার? তাঁর উত্তর—ফন নয়মানের ইউনিভার্সাল কনস্ট্রাক্টর—দেখিয়ে দিল, আত্ম-প্রতিলিপির জন্য জৈব যন্ত্রব্যবস্থা লাগে না। লাগে শুধু এমন নিয়ম, যা নিজের প্রয়োগের পদ্ধতিকেও সংকেতবদ্ধ করে রাখে।

সত্তর বছর পরে আমরা আবিষ্কার করছি, একই নীতি ডিজাইন সিস্টেমের ক্ষেত্রেও খাটে। স্বয়ংক্রিয়ভাবে UI তৈরির ন্যূনতম শর্ত কৃত্রিম সাধারণ বুদ্ধিমত্তা বা মানুষের মতো সৃজনশীলতা নয়। শর্ত হলো একটি সম্পূর্ণ, সামঞ্জস্যপূর্ণ ও যন্ত্রপাঠযোগ্য নিয়মের সমাহার, যা এজেন্টরা কার্যকর করতে পারে।

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

AI এজেন্টরা যখন সেমান্টিক টোকেন ও কম্পোজিশনের সীমারেখা মেনে ডিজাইন সিস্টেমের কম্পোনেন্ট থেকে ইন্টারফেস গড়ে তোলে, তারা প্রায় একই কাজ করছে। এখানে “সৃজনশীলতা” এজেন্টদের মধ্যে নেই, আছে তাদের কার্যকর করা নিয়মগুলোর মধ্যে—যে নিয়ম মানুষই বানিয়েছে, কিন্তু এখন তা নিজে নিজেই চলে।

গভীরতম অর্থ

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

ডিজিটাল সৃষ্টির এক নতুন যুগের দোরগোড়ায় আমরা দাঁড়িয়ে। এজেন্টরা এসে গেছে। প্রোটোকলগুলো আকার নিচ্ছে। ডিজাইন সিস্টেম হয়ে উঠছে কৃত্রিম জীবনের ভিত্তিভূমি।

ডিজাইনই কোড।
আর কোড জেগে উঠছে।

 

মূল নিবন্ধ ও প্রকল্প

Drupal AI রিসোর্স

সেলুলার অটোমাটার রিসোর্স


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

 এখানে প্রকাশিত মতামত উদীয়মান প্রবণতা নিয়ে অনুমাননির্ভর অনুসন্ধান মাত্র, নিশ্চিত ভবিষ্যতের কোনো ভবিষ্যদ্বাণী নয়।

 

আমি দেখছি, আমরা এমন AI এজেন্ট তৈরি করছি যেগুলো একটি লুপে কাজ করে এবং আরও নানা লুপে অন্য AI এজেন্টদের সঙ্গে মিথস্ক্রিয়া করে।

ডিজাইন হলো কোড, যখন সিস্টেম একটি নির্বাচিত ক্যানভাস ও নিয়মের সেটের মধ্যে জীবনচক্রের মতো লুপে চলে।

The Design is the Code