Vibe Coding Examples: 10 ধরনের আসল অ্যাপ, প্রম্পট ও যা ভুল হয়েছিল

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

এগুলো সেই প্রজেক্টের সংমিশ্রণ যেগুলো মানুষ সবচেয়ে বেশি AI অ্যাপ বিল্ডারে আনে, কোনো একক ব্যক্তির কেস স্টাডি নয়। প্রম্পটগুলো কপি করার মতো। ব্যর্থতাগুলো বারবার একই রকম আসে, তাই সেগুলোই কাজের অংশ। vibe coding যদি আপনার কাছে নতুন হয়, vibe coding কী দিয়ে শুরু করুন।

1. একটি ব্যক্তিগত বাজেট ট্র্যাকার

কে বানায়: যারা স্প্রেডশিট চেষ্টা করে ছেড়ে দিয়েছেন এমন ব্যক্তিরা।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: চার্টে সব সময়ের প্রতিটি খরচ গোনা হচ্ছিল, শুধু এই মাসের নয়, তাই দ্বিতীয় মাসে প্রতিটি ক্যাটেগরি অতিরিক্ত খরচ দেখাচ্ছিল। এ ছাড়া কমা দিয়ে লেখা পরিমাণ (“1,200”) 1 হিসেবে সেভ হচ্ছিল।

ঠিক করার প্রম্পট:

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

শিক্ষা: “এই মাস” একটি নিয়ম। নিয়মগুলো মুখে বলে স্পষ্ট করুন।

2. একটি ছোট সেলুনের বুকিং পেজ

কে বানায়: ফোন ও DM-এ বুকিং নিয়ে ক্লান্ত ছোট ব্যবসার মালিকরা।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: দুজন গ্রাহক এক মিনিটের ব্যবধানে একই 10:00 স্লট বুক করে ফেলেছিল, কারণ পেজটি শুরুতে একবারই প্রাপ্যতা যাচাই করত। 90 মিনিটের একটি রঙের বুকিং পরের স্লটগুলোও আটকায়নি।

ঠিক করার প্রম্পট:

গ্রাহক বুকিং জমা দিলে সার্ভারে যাচাই করুন যে তা যেসব স্লট ছুঁয়ে যায় সেগুলো এখনও খালি আছে কিনা, না থাকলে “সময়টি এইমাত্র নেওয়া হয়েছে” বার্তাসহ প্রত্যাখ্যান করুন। একটি সেবা তার পূর্ণ দৈর্ঘ্য আটকায়, তাই 10:00-এ 90 মিনিটের বুকিং 10:00, 10:30 ও 11:00 আটকাবে।

শিক্ষা: যা দুজন মানুষ একই সময়ে করতে পারে, তার জন্য সার্ভার-সাইড যাচাই দরকার। পূর্ণ সংস্করণের জন্য দেখুন কীভাবে বুকিং অ্যাপ বানাবেন।

3. QR কোডসহ একটি রেস্টুরেন্ট মেনু

কে বানায়: ক্যাফে ও রেস্টুরেন্টের মালিক, যারা খুব ঘন ঘন মেনু ছাপান।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: কিছু ভাঙেনি, তবে ক্যাফের Wi-Fi-তে মেনু ধীর ছিল কারণ প্রতিটি আইটেমের জন্য পূর্ণ আকারের ফোনের ছবি লোড হচ্ছিল।

ঠিক করার প্রম্পট:

মেনুর ছবি অনেক ভারী। আপলোড করা ছবি সর্বোচ্চ 800px প্রস্থে কমান, কম্প্রেস করুন এবং দর্শক স্ক্রল করার সঙ্গে সঙ্গে ধীরে ধীরে লোড করুন।

শিক্ষা: ধীর সংযোগে পরীক্ষা করুন, শুধু আপনার অফিসের নেটওয়ার্কে নয়।

4. একটি দলের জন্য সরঞ্জাম বা স্টক ট্র্যাকার

কে বানায়: অপারেশন টিম, যারা একটি শেয়ার করা স্প্রেডশিট বদলাচ্ছে।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: ইতিহাসে নামের বদলে “user 3” দেখাচ্ছিল, আর উপলব্ধ স্টকের চেয়ে বেশি বাদ দিলে পরিমাণ ঋণাত্মক হয়ে যাচ্ছিল।

ঠিক করার প্রম্পট:

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

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

5. একজন ফ্রিল্যান্সার বা স্টুডিওর জন্য একটি ক্লায়েন্ট পোর্টাল

কে বানায়: ডিজাইনার, হিসাবরক্ষক, পরামর্শক ও এজেন্সি।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: এটি তালিকার সবচেয়ে গুরুতর ব্যর্থতা। পেজগুলো প্রতিটি ক্লায়েন্টকে শুধু তার নিজের প্রজেক্ট দেখাচ্ছিল, কিন্তু ঠিকানা বারে সংখ্যা বদলালে সার্ভার যেকোনো প্রজেক্ট ফেরত দিচ্ছিল। একজন ক্লায়েন্ট হিসেবে ক্লিক করে ঘুরলে তা কখনো ধরা পড়েনি।

ঠিক করার প্রম্পট:

যেসব সার্ভার রুট প্রজেক্ট, ফাইল, মন্তব্য বা ইনভয়েস ফেরত দেয়, তার প্রতিটি যাচাই করুন। প্রতিটিকে নিশ্চিত করতে হবে যে লগইন করা ক্লায়েন্টই রেকর্ডটির মালিক, নাহলে “পাওয়া যায়নি” ফেরত দেবে। তারপর পরীক্ষা করুন: ক্লায়েন্ট A হিসেবে লগইন করে আইডি দিয়ে ক্লায়েন্ট B-র প্রজেক্ট খোলার চেষ্টা করুন।

শিক্ষা: পর্দায় কিছু লুকিয়ে রাখা আর সেটি সুরক্ষিত করা এক জিনিস নয়। এ বিষয়ে আরও জানতে দেখুন vibe coding কি নিরাপদ?।

6. ওয়েটলিস্টসহ একটি লঞ্চ পেজ

কে বানায়: প্রতিষ্ঠাতারা, যারা বানানোর আগে একটি ধারণা পরীক্ষা করেন।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: কয়েক দিনের মধ্যে তালিকা বটের আবর্জনা সাইন-আপে ভরে গেল, আর পেজে কোনো শিরোনাম বা বর্ণনা ছিল না, তাই শেয়ার করা লিংক খালি প্রিভিউ দেখাত।

ঠিক করার প্রম্পট:

সাইন-আপ ফর্মে মৌলিক বট সুরক্ষা যোগ করুন (একটি লুকানো হানিপট ফিল্ড ও প্রতি IP-তে প্রতি ঘণ্টায় 5টি সাইন-আপের সীমা)। একটি পেজ শিরোনাম, মেটা বর্ণনা ও সামাজিক শেয়ারের একটি ছবি যোগ করুন।

শিক্ষা: একটি পাবলিক ফর্ম খুঁজে পাওয়া যায়। দেখুন কীভাবে ওয়েটলিস্ট পেজ বানাবেন।

7. শিক্ষকের জন্য একটি কুইজ অ্যাপ

কে বানায়: শিক্ষক ও প্রশিক্ষকরা, যারা একটি LMS-এর চেয়ে হালকা কিছু চান।

প্রথম প্রম্পট:

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

যা ভুল হয়েছিল: সঠিক উত্তরগুলো প্রশ্নের সঙ্গে ব্রাউজারে পাঠানো হচ্ছিল, তাই একজন কৌতূহলী শিক্ষার্থী পেজ সোর্সে সেগুলো পড়তে পারত। শিক্ষার্থীরা 100% না পাওয়া পর্যন্ত বারবার জমাও দিতে পারত।

ঠিক করার প্রম্পট:

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

শিক্ষা: ব্রাউজার ব্যবহারকারীর। সেখানে যা থাকে তা পড়া যায়।

8. একটি ছোট AI টুল

কে বানায়: মার্কেটার, লেখক ও প্রতিষ্ঠাতারা, যারা একটি নির্দিষ্ট AI সহায়ক চান।

প্রথম প্রম্পট:

একটি পণ্যের বিবরণকে ভিন্ন সুরে (বন্ধুত্বপূর্ণ, বিশেষজ্ঞসুলভ, কৌতুকপূর্ণ, সংক্ষিপ্ত, দীর্ঘ) পাঁচটি সোশ্যাল মিডিয়া পোস্টে রূপান্তর করে এমন একটি টুল বানান। একটি AI API ব্যবহার করুন। আমি বিবরণটি পেস্ট করি, একটি প্ল্যাটফর্ম বাছাই করি এবং কপি বোতামসহ পোস্টগুলো পাই।

যা ভুল হয়েছিল: প্রথম সংস্করণ সরাসরি ব্রাউজার থেকে AI সার্ভিসকে ডাকত, এবং API কী পেজের ভেতরে ছিল, যেখানে যে কেউ সেটি কপি করে বিল বাড়াতে পারত।

ঠিক করার প্রম্পট:

AI কল সার্ভারে সরিয়ে নিন। API কী একটি সিক্রেট হিসেবে সংরক্ষণ করুন, কখনো ফ্রন্টএন্ড কোডে নয়। প্রতি দর্শককে দিনে 20টি জেনারেশনে সীমাবদ্ধ করুন।

শিক্ষা: কী সার্ভারে সিক্রেট হিসেবে থাকতে হয়। দেখুন কীভাবে API কী নিরাপদ রাখবেন এবং কীভাবে আপনার অ্যাপে AI ফিচার যোগ করবেন।

9. একটি আরবি ও ইংরেজি ব্যবসায়িক ওয়েবসাইট

কে বানায়: উপসাগরীয় অঞ্চল ও বৃহত্তর আরব বিশ্বের ব্যবসা, যারা দুটি ভাষায় সেবা দেয়।

প্রথম প্রম্পট:

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

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

ঠিক করার প্রম্পট:

আরবিতে পুরো লেআউট উল্টে দিন: পেজের দিক ডান-থেকে-বামে সেট করুন, মেনু ডানে রাখুন, দিকনির্দেশক আইকন উল্টান, এবং আরবি লেখার ভেতরে ফোন নম্বর ও ইমেইল বাম-থেকে-ডানে রাখুন।

শিক্ষা: ডান-থেকে-বামে একটি লেআউট, শুধু সারিবদ্ধকরণ নয়। Mythex আরবি ও অন্যান্য ডান-থেকে-বামে লেআউট সামলায়, এবং আপনি সরাসরি আরবিতেও প্রম্পট দিতে পারেন।

10. একটি ট্র্যাকার যা ফোন অ্যাপ হয়ে ওঠে

কে বানায়: কোচ, জিম ও কমিউনিটি গ্রুপ, যাদের ব্যবহারকারীরা ফোনে থাকে।

প্রথম প্রম্পট:

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

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

ঠিক করার প্রম্পট:

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

শিক্ষা: মানুষ ফোনে ব্যবহার করবে এমন হলে আগে ফোনের জন্য ডিজাইন করুন। Mythex Pro-তে তারপর প্রকাশিত অ্যাপ Google Play-র জন্য একটি Android অ্যাপ এবং TestFlight-এ পাঠানো একটি iPhone অ্যাপ হতে পারে; ফোন অ্যাপটি আপনার প্রকাশিত অ্যাপ খোলে, তাই প্রতিটি Publish তাকে আপডেট করে। দেখুন মোবাইল অ্যাপ বিল্ডার পেজ।

এই উদাহরণগুলোর পেছনের প্যাটার্ন

দশটির সবগুলোতে ব্যর্থতাগুলো কয়েকটি গ্রুপে পড়ে:

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

নিজে একটি চেষ্টা করুন

আপনার ধারণার সবচেয়ে কাছের উদাহরণটি বাছাই করুন, তার প্রথম প্রম্পট কপি করুন এবং বিবরণ বদলান। শেয়ার করার আগে ঠিক করার প্রম্পটটিকে একটি চেকলিস্ট হিসেবে ব্যবহার করুন। আরও 30টির জন্য আমাদের vibe coding প্রম্পট চিট শিট দেখুন, এবং vibe coding দিয়ে অ্যাপ বানানোর উপায় একটি প্রজেক্টকে ধারণা থেকে প্রকাশিত অ্যাপ পর্যন্ত নিয়ে যায়। প্রস্তুত হলে AI অ্যাপ বিল্ডার-এ শুরু করুন অথবা শুরুর জন্য টেমপ্লেট ব্রাউজ করুন।

প্রশ্নোত্তর