সীমিত সময়ের অফারPro ও Max প্ল্যানে ২০% ছাড়মাসিক ও বাৎসরিক বিলিং-এ ২০% সাশ্রয় করুন।
মাসিক ও বাৎসরিক বিলিং-এ ২০% সাশ্রয় করুন।
AI অ্যাপ বিল্ডার প্রম্পট
Bolt, Lovable, v0 ও Cursor-এর মতো AI অ্যাপ বিল্ডার একটি প্রম্পটকে কাজ করা HTML পেজে পরিণত করে। নিচের প্রম্পটগুলো স্ট্যাটিক HTML, CSS ও JavaScript আউটপুটের জন্য লেখা — প্রতিটি ফল সঙ্গে সঙ্গে প্রিভিউ ও শেয়ার করা যায়।
একটি কমান্ড Codex, Claude ও Cursor-এ লোকাল Skill ইনস্টল করে। ইনস্টলের পর যেকোনো টুলে /htmlshare ব্যবহার করে বর্তমান HTML প্রজেক্ট প্রকাশ করুন।
কপি-প্রস্তুত প্রম্পট
Hero সেকশন, ফিচার গ্রিড ও প্রাইসিং টেবিলসহ পূর্ণ পেজ লেআউট।
একটি SaaS ল্যান্ডিং পেজ বানান: সাহসী hero হেডলাইন ও CTA বাটন, আইকনসহ তিন কলামের ফিচার গ্রিড, দুই স্তরের প্রাইসিং টেবিল (free ও pro), এবং FAQ অ্যাকর্ডিয়ন। HTML, CDN-এর Tailwind CSS ও অ্যাকর্ডিয়নের জন্য ভ্যানিলা JavaScript ব্যবহার করুন। সবকিছু এক ফাইলে রাখুন।
পূর্ণ-ভিউপোর্ট hero, ইমেইল ক্যাপচার ফর্ম ও ৫টি ফিচার তালিকাসহ একটি মিনিমাল প্রোডাক্ট লঞ্চ পেজ তৈরি করুন। কোনো এক্সটার্নাল ডিপেন্ডেন্সি নেই — সব CSS ইনলাইন করুন।
Navbar, কার্ড, মোডাল ও ট্যাবের মতো পুনর্ব্যবহারযোগ্য অংশ।
একটি রেসপন্সিভ navbar বানান: বামে লোগো, মাঝে ৪টি নেভিগেশন লিংক, ডানে 'Get started' বাটন। মোবাইল ভিউপোর্টের জন্য হ্যামবার্গার মেনু যোগ করুন। শুধু HTML ও CSS, কোনো JavaScript লাইব্রেরি নয়।
৩টি ভ্যারিয়েন্টের কার্ড সেট তৈরি করুন: আইকন ও বর্ণনাসহ ফিচার কার্ড, ফিচার তালিকা ও CTA সহ প্রাইসিং কার্ড, এবং অবতার ও উদ্ধৃতিসহ টেস্টিমোনিয়াল কার্ড। HTML ও CSS custom properties ব্যবহার করুন।
অ্যাডমিন প্যানেল, স্ট্যাট কার্ড ও ডেটা ডিসপ্লে লেআউট।
একটি অ্যাডমিন ড্যাশবোর্ড তৈরি করুন: ফিক্সড বাম সাইডবার আইকন নেভ, সার্চ ইনপুট ও ইউজার অবতার ড্রপডাউনসহ টপ হেডার, আর মেইন এরিয়ায় ৪টি স্ট্যাট কার্ড ও প্লেসহোল্ডার ডেটা টেবিল। HTML ও CSS Grid ব্যবহার করুন।
তারিখ রেঞ্জ পিকার, উপরে ৩টি KPI সামারি কার্ড এবং শুধু CSS ও HTML দিয়ে বার চার্ট (কোনো canvas বা SVG লাইব্রেরি নয়) সহ একটি রেসপন্সিভ অ্যানালিটিক্স পেজ বানান। নিচে একটি ডেটা টেবিল যোগ করুন।
মাল্টি-স্টেপ ফর্ম, অ্যাকর্ডিয়ন, ট্যাব ও মোডাল ডায়ালগ।
৩ ধাপের ফর্ম বানান: ব্যক্তিগত তথ্য, অ্যাকাউন্ট পছন্দ এবং কনফার্মেশন সামারি। উপরে স্টেপ প্রগ্রেস বার দেখান। HTML, CSS ও ভ্যানিলা JavaScript ব্যবহার করুন — কোনো লাইব্রেরি বা ফ্রেমওয়ার্ক নয়।
৪টি ট্যাব ও মসৃণ কনটেন্ট ট্রানজিশনসহ একটি ট্যাবড ইন্টারফেস তৈরি করুন। প্রতিটি ট্যাব প্যানেলে একটি হেডিং ও প্যারাগ্রাফ থাকবে। HTML, CSS ট্রানজিশন ও ভ্যানিলা JavaScript ব্যবহার করুন।
আরও প্রম্পট সূত্র
উপরের টেমপ্লেট ছাড়াও, AI-চালিত HTML ও CSS বিল্ডারের পরীক্ষিত প্রম্পট খুঁজতে এগুলোই সেরা জায়গা।
কমিউনিটি-রক্ষিত প্রম্পট লাইব্রেরি ও স্টার্টার কালেকশন খুঁজতে GitHub-এ "bolt prompts", "v0 prompts" বা "ai html prompts" সার্চ করুন।
r/ChatGPT, r/ClaudeAI ও r/webdev নিয়মিত প্রম্পট টেমপ্লেট শেয়ার করে এবং পরিষ্কার HTML ও CSS আউটপুটের জন্য কী কাজ করে তা আলোচনা করে।
Bolt.new, Lovable, v0 by Vercel ও Cursor তাদের অফিসিয়াল ডক্স ও কমিউনিটি Discord-এ উদাহরণ প্রম্পট ও বেস্ট প্র্যাকটিস প্রকাশ করে।
আপনি যে ফল নকল করতে চান, সেখান থেকে কার্যকর প্রম্পট বের করতে Bolt Gallery ও v0 Community-র প্রকাশিত উদাহরণ দেখুন।
GitHub-এ 'ai-prompts' বা 'bolt-prompts' ট্যাগ করা রিপোজিটরি, আপনার AI বিল্ডারের অফিসিয়াল ডক্স (Bolt, v0, Lovable, Cursor) এবং Reddit কমিউনিটি (r/ChatGPT, r/ClaudeAI) দিয়ে শুরু করুন। এই পেজের প্রম্পটগুলো সরাসরি কপি-পেস্ট করা যায়।
লেআউট স্পষ্ট করুন (CSS Grid, Flexbox), প্রয়োজনীয় প্রতিটি সেকশন তালিকা করুন (hero, features, pricing, FAQ), স্টাইলিং পদ্ধতি বলুন (Tailwind CDN, ইনলাইন CSS, বা আলাদা style ব্লক), আর শেষে লিখুন 'Keep everything in one HTML file.' বিস্তারিত প্রম্পট আরও স্থিতিশীল ফল দেয়।
জেনারেট করা HTML ফাইল HTMLShare-এ পেস্ট বা আপলোড করুন। এটি সঙ্গে সঙ্গে শেয়ারযোগ্য ব্রাউজার প্রিভিউ লিংক তৈরি করে — Git রিপোজিটরি, হোস্টিং সেটআপ বা লোকাল সার্ভার লাগে না। ফল যাচাই করে টিম বা ক্লায়েন্টদের সাথে শেয়ার করতে এটি ব্যবহার করুন।