পার্ট ১: ফিগমা ফাইল থেকে ফুল-ফাংশনাল কোড: ভাইব কোডিংয়ের সূচনা

ডিজাইনার হিসেবে আমাদের সবচেয়ে বড় হতাশা কোথায় জানেন? যখন আমরা ফিগমাতে চমৎকার কোনো ইউজার ইন্টারফেস (UI) ডিজাইন করি, কিন্তু ডেভেলপার না থাকার কারণে অথবা নিজের কোডিং স্কিল না থাকার কারণে সেই ডিজাইনটা কেবল একটা স্ট্যাটিক পিকচার হয়েই ফিগমা ক্যানভাসে পড়ে থাকে।

কিন্তু ২০২৬ সালে এসে এই সীমাবদ্ধতার দিন শেষ। এখন আমাদের সামনে আছে Vibe Coding—যেখানে আপনি কোড লিখবেন না, বরং এআই (AI) কে দিয়ে কোড লিখিয়ে নেবেন। আর ডিজাইনার হিসেবে আপনার সবচেয়ে বড় সুপারপাওয়ার হলো—আপনার ভিজ্যুয়াল সেন্স এবং ফিগমা ব্লুপ্রিন্ট।

আজকে আমরা দেখব কীভাবে ফিগমা ফাইল থেকে এআই-কে গাইড করে আমাদের ডিজাইনের অবিকল লাইভ কোড স্ট্রাকচার তৈরি করব।

১. ডিজাইনারদের সুপারপাওয়ার: ভিজ্যুয়াল ক্লিয়ারিটি

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

এআই দিয়ে ভাইব কোডিং করার সময় আপনার এই ডিজাইন ফাইলটিই হবে এআই-এর জন্য ব্লুপ্রিন্ট (Blueprint)।

ডিজাইন ফাইলটি এআই-এর কাছে হ্যান্ডওভার করার আগে ফিগমাতে ৩টি জিনিস ঠিক করে নিন:

• ক্লিন লেয়ার নেমিং (Clean Layers): অগোছালো লেয়ারের নাম (যেমন: Frame 48123, Group 22) এআই রিড করতে প্রবলেম হয়। কার্ডের নাম দিন card-container, বাটনের নাম দিন primary-btn ইত্যাদি।
• অটো-লেআউট ব্যবহার (Auto-Layout): ফিগমাতে অটো-লেআউট ব্যবহার করলে কোডে ফ্লেক্সবক্স (Flexbox) জেনারেট করা এআই-এর জন্য অনেক সহজ হয়।
• অ্যাসেট এক্সপোর্ট (SVG/PNG): লোগো, আইকন বা কোনো ইলস্ট্রেশন থাকলে সেগুলো ফিগমা থেকে আগেই এক্সপোর্ট করে একটি images/ ফোল্ডারে গুছিয়ে রাখুন।

২. স্ট্যাক সিলেকশন: ডিজাইনারদের জন্য সহজ টেক স্ট্যাক

শুরুতেই জটিল কোনো ফ্রেমওয়ার্ক (যেমন Next.js বা React) এ যাওয়ার প্রয়োজন নেই। আপনি যদি ডিজাইনার হন এবং প্রথম কোনো ওয়েব অ্যাপ বা ক্রোম এক্সটেনশন বানাতে চান, তবে আপনার স্ট্যাক হওয়া উচিত খুবই সিম্পল:

• HTML5: স্ট্রাকচার তৈরির জন্য।
• CSS3: ফিগমার ডিজাইন অবিকল স্টাইল করার জন্য।
• Vanilla JavaScript: বাটনে ক্লিক করলে কী ঘটবে বা ডাটা কীভাবে আসবে সেই লজিক সেট করার জন্য।

এই তিনটি জিনিস দিয়ে শুরু করলে এআই-এর জেনারেট করা কোড আপনি খুব সহজেই রিড করতে ও কাস্টমাইজ করতে পারবেন।

৩. এআই-এর জন্য প্রম্পট গাইডলাইন তৈরি করুন

সরাসরি চ্যাটে গিয়ে "আমার এই ফিগমা স্ক্রিনটা কোড করো" বললে এআই পারফেক্ট আউটপুট দিতে পারবে না। ডিজাইন কোড করার আগে আপনার প্রজেক্ট ফোল্ডারে একটি instructions.md ফাইল তৈরি করুন। সেখানে নিচের তথ্যগুলো গুছিয়ে লিখুন:

• প্রজেক্টের থিম কালার (CSS Variables): ফিগমা থেকে হেক্স কোডগুলো কপি করে দিন (যেমন: --primary: #907CFF; --bg-dark: #060C1C;).
• ফন্ট ও টাইপোগ্রাফি: আপনি ডিজাইনে কোন ফন্ট ব্যবহার করেছেন এবং তার সাইজ কত (যেমন: Inter, Outfit).
• লেআউটের ধরন: এটা কি ডেক্সটপ ফার্স্ট নাকি রেসপনসিভ মোবাইল লেআউট হবে।

এই ডকুমেন্টটি Cursor বা Claude-এর প্রজেক্টে আপলোড করে দিলে এআই আপনার ব্র্যন্ডিং গাইডলাইন অনুযায়ী নিখুঁত স্টাইলিং জেনারেট করবে।

৪. Cursor-এ প্রথম প্রম্পট: দ্য ভাইব

এবার আপনার কোড এডিটর (Cursor) ওপেন করুন। আপনার প্রজেক্টের ফোল্ডারটি এডিটরে ড্র্যাগ করুন।

Cursor-এর চ্যাটে (Ctrl + L বা Cmd + L) গিয়ে আপনার প্রম্পট লিখুন। মনে রাখবেন, প্রম্পটের শুরুতে @instructions.md (আপনার তৈরি করা গাইডলাইন ফাইল) মেনশন করে দেবেন.

একটি ডেমো প্রম্পট:
"I want to build the landing page header and hero section as described in @instructions.md. Use semantic HTML and vanilla CSS. Make sure to structure the CSS variables using the color scheme provided. Keep it modern, responsive, and close to a premium design."

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

৫. চ্যাটবট থেকে অটোনমাস এজেন্ট: গুগল ডিপমাইন্ডের Antigravity

কপি-পেস্ট করে কোড রান করার দিনও কিন্তু আস্তে আস্তে চলে যাচ্ছে। চ্যাটবটের যুগ ছাড়িয়ে আমরা এখন প্রবেশ করছি এজেন্টিক কোডিং (Agentic Coding)-এর যুগে। আর এর সবচেয়ে বড় উদাহরণ হলো গুগল ডিপমাইন্ডের তৈরি Antigravity-র মতো শক্তিশালী এআই এজেন্ট।

সাধারণ এআই টুলস আপনাকে কেবল কোডের সাজেশন দেয়, যা আপনাকে নিজে ফাইল তৈরি করে কপি-পেস্ট করতে হয়। কিন্তু Antigravity এর মতো এজেন্টগুলোর বিশেষত্ব হলো:

• ডিরেক্ট ফাইল অ্যাক্সেস: এরা সরাসরি আপনার প্রজেক্টের ফাইল রিড করতে পারে এবং সরাসরি কোড এডিট করতে পারে।
• অটোনমাস এক্সিকিউশন: এরা আপনার লোকাল পিসিতে কমান্ড রান করতে পারে (যেমন টেস্ট সার্ভার অন করা, ডিপ্লয় করা)।
• রিয়েল-টাইম বাগ ফিক্সিং: কোড লেখার সময় কোনো এরর আসলে সেটি নিজে থেকেই রিড করে অটোমেটিক ফিক্স করে দেয়।
• হিউম্যান-ইন-দ্য-লুপ: আপনি কেবল চ্যাটে কাজের গোল (Goal) বুঝিয়ে দেবেন, আর এজেন্ট নিজে থেকেই কাজ করতে থাকবে। প্রতিটি ফাইল এডিট বা কমান্ড রান করার আগে আপনার স্ক্রিনে পারমিশন চাইবে, আপনি শুধু "Approve" বাটনে ক্লিক করে কাজ দেখতে থাকবেন।

ভাইব কোডিংকে আরও কয়েক গুণ ফাস্ট এবং হ্যাসেল-ফ্রি করার জন্য এই অটোনমাস কোডিং এজেন্টগুলো ডিজাইনারদের জন্য গেম চেঞ্জার।

পরবর্তী পর্বে আমরা দেখব কীভাবে এই বেসিক কোড স্ট্রাকচারকে কাজে লাগিয়ে এবং এআই-এর প্রম্পট ইঞ্জিনিয়ারিংয়ের মাধ্যমে মাত্র ২ ঘণ্টায় একটি সম্পূর্ণ কার্যকরী ক্রোম এক্সটেনশন ডিজাইন ও ডেভেলপ করে ফেলা যায়।

ধন্যবাদ সবাইকে।