Agentic Canvas: AI এজেন্টের সঙ্গে ডিজাইন করুন2 min read

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

সে কারণেই আমরা তৈরি করেছি AgentGrid.io-এর Agentic Canvas। এটি একটি বিনামূল্যের AI ডিজাইন ক্যানভাস, যেখানে আপনি এবং MCP-সক্ষম কোনো এজেন্ট একই বাস্তব HTML ও CSS পৃষ্ঠায় কাজ করেন। HTML আমদানি করুন, কোনো ডিজাইন বা ছবি দিয়ে শুরু করুন, অথবা এজেন্টকে একটি পৃষ্ঠা তৈরি করতে বলুন। তারপর তার তৈরি উপাদান নির্বাচন, সরানো, আকার পরিবর্তন ও সম্পাদনা করুন। অ্যাকাউন্ট তৈরি না করেই আপনি Agentic Canvas খুলতে পারেন।

এটি ব্যবহার করার একটি সহজ উপায় এখানে রয়েছে: একটি HTML পৃষ্ঠা বা চিত্র আনুন, এটি দৃশ্যমানভাবে সাজান এবং সম্পাদনা করুন, Claude বা ChatGPT কোনও অ্যানিমেশন বা ইন্টারঅ্যাকশন পরিমার্জন করতে বলুন, তারপরে HTMLরফতানি করুন। আপনি স্ক্র্যাচ থেকে অন্য প্রম্পট শুরু করার পরিবর্তে যে কোনও সময়ে হাতে পদক্ষেপ নিতে পারেন।

Agentic Canvasকি?

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

এটিকে এমন একটি জায়গা হিসাবে ভাবুন যেখানে যে ব্যক্তি যা ঠিক করা দরকার তা দেখে এবং কোডটি লিখতে পারে এমন এজেন্ট একই জিনিসে কাজ করে।

কেন আমাদের এআই এজেন্টদের জন্য একটি ক্যানভাসের প্রয়োজন ছিল

1. অন্য প্রম্পট লুপ ছাড়াই ভিজ্যুয়াল সহযোগিতা

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

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

2. ভিজ্যুয়াল প্রসঙ্গ সংগ্রহ করার জন্য একটি জায়গা

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

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

3. কেন ক্যানভাস বাস্তব HTML এবং CSS ব্যবহার করে

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

Agentic Canvas-এ একটি ফ্রেম হলো বাস্তব পৃষ্ঠা, অটো লেআউট CSS flexbox-এর সঙ্গে এবং গ্রিড CSS grid-এর সঙ্গে মিলে যায়। আপনি দৃশ্যমানভাবে কোনো বোতাম সম্পাদনা করতে পারেন, এজেন্টকে অ্যানিমেশন বা ইন্টারঅ্যাকশন যোগ করতে বলতে পারেন এবং প্রস্তুত হলে কোড রপ্তানি করতে পারেন। ক্যানভাসে লাইভ পৃষ্ঠায় স্ক্রিপ্ট, হোভার স্টেট ও রেসপন্সিভ আচরণ চালানো যায়। এটি এমন কোনো ছবি নয় যা পরে আবার তৈরি করতে হবে।

প্রচলিত নকশা ক্যানভাস থেকে এটি কীভাবে আলাদা?

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

কিভাবে Agentic Canvas Claude বা ChatGPT দিয়ে একটি ওয়েবসাইট ডিজাইন করবেন

1. আপনার যা আছে তা দিয়ে শুরু করুন। ক্যানভাস খুলে HTML পেস্ট করুন, Figma থেকে কপি-পেস্ট করুন, ছবি বা ডিজাইন আনুন, অথবা এজেন্টের তৈরি পৃষ্ঠা দিয়ে শুরু করুন। আমদানি গাইড-এ শুরু করার সমর্থিত উপায়গুলো দেওয়া আছে।
2. আপনার এজেন্টকে সংযুক্ত করুন। চয়ন করুন এআই এজেন্ট, তারপর একটি এজেন্ট যোগ করুন ক্যানভাসে। অনুসরণ করুন সংযোগ গাইড-এ Claude, ChatGPT বা অন্য MCP-সক্ষম ক্লায়েন্টের সংযোগের নির্দেশনা আছে। এজেন্ট কাজ করার সময় ক্যানভাসের ট্যাব খোলা রাখুন।
3. একসাথে প্রথম পাস করুন। একটি বিন্যাস বা মিথস্ক্রিয়ার জন্য জিজ্ঞাসা করুন, তারপরে ক্যানভাসে লাইভ ফলাফলটি পরিদর্শন করুন।
4. চাক্ষুষভাবে নিয়ন্ত্রণ নিন। উপাদানগুলি সরান, রঙ পরিবর্তন করুন, একটি ফ্রেমের আকার পরিবর্তন করুন এবং হাতে লেআউটটি টিউন করুন। এজেন্টকে সর্বশেষ সংস্করণ থেকে চালিয়ে যেতে বলুন।
5. প্রস্তুত হলে রপ্তানী করুন বা শেয়ার করুন। প্রকাশ না করে HTML বা অন্য কোনও সমর্থিত ফর্ম্যাট রফতানি করুন। আপনি যদি একটি হোস্ট লিঙ্ক চান, AgentGrid.io এর মাধ্যমে শেয়ার করুন বা প্রকাশ করুন. এই ক্লাউড পদক্ষেপটি ঐচ্ছিক এবং একটি অ্যাকাউন্ট প্রয়োজন।

কী স্থানীয় থাকে এবং কী অ্যাকাউন্ট প্রয়োজন?

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

আমি বিশ্বাস করি পরবর্তী নকশা সরঞ্জামটি আমাদের ভিজ্যুয়াল কন্ট্রোল এবং তৈরি করতে পারে এমন একটি এজেন্টের মধ্যে বেছে নিতে বাধ্য করা উচিত নয়। এজেন্টের কাজের মাতৃভাষায় কথা বলা উচিত এবং আমাদের এখনও পর্দায় জিনিসটি ধরতে এবং এটি পরিবর্তন করতে সক্ষম হওয়া উচিত।

Agentic Canvas খুলুন এবং আপনার এজেন্টের সাথে ডিজাইন করার চেষ্টা করুন। ওয়ার্কফ্লোর দ্রুত দেখার জন্য, লঞ্চ ডেমো দেখুন এবং বৈশিষ্ট্যগুলি অন্বেষণ করুন.

Agentic Canvas সম্পর্কে প্রশ্ন

Agentic Canvas কি বিনামূল্যে, এবং আমার কি একটি অ্যাকাউন্ট দরকার?

হ্যাঁ, ডিজাইন ক্যানভাস বিনামূল্যে। এটি আপনার ব্রাউজারে খুলুন এবং কোনও অ্যাকাউন্ট ছাড়াই ডিজাইন শুরু করুন। আপনি যদি AgentGrid.ioএর মাধ্যমে ভাগ করে নিতে বা প্রকাশ করতে চান তবেই একটি AgentGrid.io অ্যাকাউন্ট প্রয়োজন।

কোন এআই এজেন্ট Agentic Canvasসাথে কাজ করে?

Claude, ChatGPT, Claude Code, Codex, Cursor এবং অন্যান্য MCPসক্ষম এজেন্টরা খোলা ক্যানভাসটি পড়তে এবং পরিবর্তন করতে পারে। চয়ন করুন এআই এজেন্ট এবং তারপর একটি এজেন্ট যোগ করুন সংযোগের পদক্ষেপগুলি অনুসরণ করতে। আপনার এজেন্ট কাজ করার সময় ক্যানভাস ট্যাবটি খোলা রাখুন।

আমি কি এআই-উত্পন্ন ওয়েবসাইট চাক্ষুষভাবে সম্পাদনা করতে পারি?

হ্যাঁ। HTML পৃষ্ঠা বা একটি সাইট ফোল্ডারটি আনুন, তারপরে ক্যানভাসে উপাদানগুলি সরান, পুনরায় আকার দিন এবং পরিমার্জন করুন। ফ্রেমগুলি বাস্তব HTML এবং CSS, তাই কোনও এজেন্ট স্ট্যাটিক মকআপ পুনর্নির্মাণের পরিবর্তে আপনার ভিজ্যুয়াল সম্পাদনা থেকে চালিয়ে যেতে পারে।

আমি কি বিদ্যমান HTML পৃষ্ঠা বা ওয়েবসাইট আমদানি করতে পারি?

হ্যাঁ। ক্যানভাসে HTML পেস্ট করুন, বা কোনও সাইট ফোল্ডার বা এর ZIP হোমে ফেলে দিন। আপনি একটি Figma নির্বাচন বা একটি চিত্র দিয়েও শুরু করতে পারেন।

আমার ক্যানভাস ফাইলগুলি কোথায় সংরক্ষণ করা হয়? সেগুলি কি ব্যাক আপ করা হয়েছে?

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

আমি ট্যাবটি বন্ধ করার পরে আমার এআই এজেন্ট কি ক্যানভাসে কাজ করতে পারে?

না। সংযুক্ত এজেন্ট ডিজাইনটি পড়া বা পরিবর্তন করার সময় ক্যানভাস ট্যাবটি খোলা থাকতে হবে। আপনি পরে একই ব্রাউজারে আপনার স্থানীয়ভাবে সঞ্চিত ফাইলগুলিতে ফিরে যেতে পারেন।

কোনও এজেন্টকে সংযুক্ত করা কি এটি আমার AgentGrid.io কর্মক্ষেত্রে অ্যাক্সেস দেয়?

না। ক্যানভাসের সাথে কোনও এজেন্টকে সংযুক্ত করা এটি খোলা ক্যানভাস ফাইলগুলিতে কাজ করতে দেয়। সেই এজেন্টকে AgentGrid.io নিদর্শনগুলির সাথে সংযুক্ত করা একটি পৃথক পদক্ষেপ।

আমি কি প্রকাশ না করে রফতানি করতে পারি?

হ্যাঁ। ভাগ করে বা প্রকাশ না করে HTML, PNG, SVG বা PDF রফতানি করুন। আপনি অন্য কোথাও বিল্ডিং চালিয়ে যাওয়ার জন্য HTML কোডিং এজেন্টের কাছে হস্তান্তর করতে পারেন।

শেয়ার করা কি প্রকাশনার মতোই?

না। AgentGrid.io এর মাধ্যমে ভাগ করে নেওয়া আপনার পছন্দসই ব্যক্তি এবং এজেন্টদের অ্যাক্সেস দেয়; প্রকাশনা নকশাটি একটি পাবলিক ওয়েব ঠিকানায় রাখে। উভয়ই ঐচ্ছিক এবং একটি AgentGrid.io অ্যাকাউন্ট প্রয়োজন।