💡 [Vibe Coding & No-Code for Designers Series]
এটি ডিজাইনারদের জন্য একটি স্পেশাল ৪ পর্বের প্র্যাক্টিক্যাল সিরিজ। এখানে আমরা দেখব কীভাবে কোডিং ব্যাকগ্রাউন্ড ছাড়াই LLMs (Cursor/Claude) এবং প্রম্পট ইঞ্জিনিয়ারিংয়ের মাধ্যমে ফিগমার স্ট্যাটিক ডিজাইনকে লাইভ ও ফাংশনাল ওয়েব অ্যাপ্লিকেশন বা এক্সটেনশনে রূপান্তর করা যায়।
প্রথম পর্বে আমরা জেনেছি ভাইব কোডিংয়ের বেসিক কনসেপ্ট এবং ফিগমা ফাইল থেকে কীভাবে এআই-এর জন্য প্রিপারেশন নিতে হয়। আজকে আমরা সরাসরি মাঠে নামব।
আমরা প্র্যাক্টিক্যালি এআই ব্যবহার করে একটি সম্পূর্ণ সচল ক্রোম এক্সটেনশন (Chrome Extension) বানাব। ধরুন, আমরা এমন একটি এক্সটেনশন বানাতে চাই যা আমাদের স্ক্রিনের যেকোনো এলিমেন্টের কালার পিক করতে পারবে অথবা আমাদের ডেইলি টাস্কগুলো ট্র্যাক করতে সাহায্য করবে।
সবচেয়ে মজার ব্যাপার হলো—এই কাজটি করতে আপনার একটি লাইনের কোডও নিজে লিখতে হবে না। আপনি শুধু ডিরেকশন দেবেন, আর এআই সেটা এক্সিকিউট করবে।
১. প্রজেক্ট সেটআপ ও Manifest ফাইল
একটি ক্রোম এক্সটেনশন তৈরির জন্য মূল চাবিকাঠি হলো manifest.json ফাইল। এটি ক্রোম ব্রাউজারকে বলে দেয় যে আপনার এক্সটেনশনটি কীভাবে কাজ করবে, কী কী পারমিশন লাগবে এবং তার ফাইল স্ট্রাকচার কী।
আপনার ফোল্ডারে ৩টি ফাইল তৈরি করুন:
manifest.json(কনফিগারেশন)popup.html(ডিজাইন/ইন্টারফেস)popup.js(লজিক)
এবার Cursor-এর চ্যাটে গিয়ে জাস্ট এই প্রম্পটটি দিন:
"I want to create a Chrome extension. Create a simple manifest.json (manifest version 3) with a popup action using popup.html and popup.js."
এআই আপনাকে কয়েক সেকেন্ডের মধ্যে একটি ক্লিন manifest.json ফাইল কোড করে দেবে। সেটি কপি করে ফাইলে পেস্ট করে দিন।
২. popup.html এবং popup.css ডিজাইন করা
আপনার ক্রোম এক্সটেনশনের ভিজ্যুয়াল লুক কেমন হবে তা ঠিক হবে popup.html ফাইলে। ডিজাইনার হিসেবে আপনার মাথায় যে ইন্টারফেসের আইডিয়া আছে, তা এআই-কে বিস্তারিত জানান।
আপনার প্রম্পট স্টাইল:
"Create a premium dark-themed interface for popup.html. It should have a clean UI: an Outfit font, a title 'Color Palette Saver', a primary button with violet gradient (#907CFF to #6852E6), a clean list wrapper to show saved colors, and smooth 12px border radius. Give me both HTML and inline CSS or a linked style.css."
এআই আপনার রিকোয়ারমেন্ট অনুযায়ী অবিকল একটি প্রিমিয়াম লুকের ইন্টারফেস তৈরি করে দেবে।
৩. popup.js দিয়ে লজিক ও ফাংশনালিটি যোগ করা
আমাদের ডিজাইনে একটি বাটন আছে: "Pick Color" এবং একটি লিস্ট আছে যেখানে সেভ করা কালারগুলো দেখাবে। এখন আমাদের এই বাটনে ক্লিক করলে যেন স্ক্রিন থেকে কালার পিক করা যায় সেই লজিক ডেভেলপ করতে হবে।
Cursor-এর চ্যাটে গিয়ে লিখুন:
"Write the popup.js code. When the 'Pick Color' button is clicked, trigger Chrome's EyeDropper API to pick a color from the screen. Once picked, display the HEX code in the list and save it to Chrome's local storage so it persists when the popup is closed. Add a copy button next to each saved color."
এআই স্বয়ংক্রিয়ভাবে ক্রোম ব্রাউজারের নিজস্ব এপিআই (EyeDropper) ব্যবহার করে কালার পিক করার সম্পূর্ণ লজিক লিখে দেবে। কোনো জটিল সিনট্যাক্স বা মেমরি ম্যানেজমেন্ট নিয়ে আপনার চিন্তা করার প্রয়োজন নেই!
৪. ব্রাউজারে এক্সটেনশন টেস্ট করা (Developer Mode)
আপনার এক্সটেনশন তো তৈরি, এবার এটি রান করার পালা:
- আপনার গুগল ক্রোম ব্রাউজারটি ওপেন করুন।
- ইউআরএল বারে টাইপ করুন:
chrome://extensions - ডানদিকের উপরে থাকা Developer Mode টগলটি অন করুন।
- বামদিকের উপরে থাকা Load unpacked বাটনে ক্লিক করুন।
- আপনার প্রজেক্টের ফোল্ডারটি সিলেক্ট করে দিন।
ব্যাস! আপনার তৈরি করা কালার পিকার ক্রোম এক্সটেনশনটি এখন আপনার ব্রাউজারের এক্সটেনশন বারে লাইভ। এবার যেকোনো ওয়েবসাইটে গিয়ে এটি টেস্ট করে দেখুন।
এআই-কে দিয়ে লজিক লেখানোর আসল ট্রিক হলো—আপনার প্রম্পটে ধাপে ধাপে ক্লিয়ারলি বলে দেওয়া যে ইউজার এক্সপেরিয়েন্সটা কেমন হবে।
পরবর্তী পর্বে আমরা দেখব কীভাবে এআই-কে দিয়ে ডিজাইনের ইন্টারঅ্যাকশন বা ট্রানজিশনগুলোকে আরও আকর্ষণীয় ও মসৃণ করার জন্য ফ্রন্টএন্ড কোডিং ও অ্যানিমেশন ডেভেলপ করে নেওয়া যায়।
ধন্যবাদ সবাইকে।
এই সিরিজের অন্যান্য পর্বগুলো:
- 🔗 পর্ব ১: ফিগমা ফাইল থেকে ফুল-ফাংশনাল কোড: ভাইব কোডিংয়ের সূচনা
- 📌 পর্ব ২ (আপনি এখানে আছেন): Cursor ও Claude ব্যবহার করে ২ ঘণ্টায় ক্রোম এক্সটেনশন বানানোর প্র্যাক্টিক্যাল গাইড
- 🔗 পর্ব ৩: এআই কে দিয়ে ফ্রন্টএন্ড কোডিং ও অ্যানিমেশন ডেব ক্র্যাশ কোর্স
- 🔗 পর্ব ৪: ভিজিটর থেকে পেইড মেম্বার: ভারсел ও সুপারবেস দিয়ে ওয়েব অ্যাপ ডিপ্লয়মেন্ট