M3E Canvas Vibe-Coding
Canvas-এ ভিজ্যুয়াল ডিজাইন → Copy Prompt → লোকাল AI-তে production কোড। Figma-মানের মকআপ ১০ গুণ দ্রুত, মাসিক সাবস্ক্রিপশন নেই — লোকাল মডেলে ০ টাকায়।
lnkiai.github.io/m3e-canvas খোলো — কোনো সার্ভার নেই, localStorage-এ সেভ হয়। মোবাইলে বাটন-ট্যাপ, ডেস্কটপে ড্র্যাগ-ড্রপ। M3E (Material 3 Expressive) কম্পোনেন্ট — ম্যাগনেটিক কানেকশন, রাউন্ডেড কর্নার মার্জ, লিস্ট/কার্ড/সুইচ/ডায়ালগ রেডি।
প্রতিটি অংশের behavior নোট সহ Canvas নিজেই প্রম্পট বানায়: "Target: Web, Language: English, Next.js + Tailwind expert, Build this design exactly, mobile-first, Taka pricing, bKash/Nagad buttons, output only clean code"।
প্রম্পট পেস্ট করো Hermes agent / Qwen 3.6-তে — ক্লাউড ছাড়া, লোকাল মডেলে, ০ টাকায়। আউটপুট: production-ready Next.js App Router + Tailwind কোড, ডিজাইন ১০০% ম্যাচ।
৩টা সবচেয়ে দরকারি ব্যবহার
৪ স্ক্রিন: Template Gallery (Eid, Pohela Boishakh, 11.11) → Editor (টেক্সট+লোগো আপলোড) → Preview → Download। bKash/Nagad পেমেন্ট বাটন, বাটন-ট্যাপে পরের স্ক্রিন।
৬ প্রোডাক্টের কনফিউশন সমাধান: Desktop 1280×800 + Phone 412×892 — একই স্ক্রিন, দুই width, 90% ইউজার মোবাইল।
লিস্ট, কার্ড, সুইচ, ডায়ালগ — Material 3 প্যালেট, Roboto Flex, বাংলাদেশি ট্রাস্ট-কালার সিড (#0E7C3A / #E4312B)।
You are a Next.js + Tailwind expert. Build this design exactly: Target: Web. Language: English UI. Screens: AI Video product — (1) Template Gallery: Eid, Pohela Boishakh, 11.11 offer cards, (2) Editor: text + logo upload, (3) Preview, (4) Download with bKash + Nagad payment buttons. Tech: Next.js App Router + Tailwind CSS, mobile-first. Device frames: Desktop 1280x800 and Phone 412x892 side by side — phone primary (90% users mobile). Theme: Material 3 palette, seed green #0E7C3A / red #E4312B, rounded shapes, font Roboto Flex. Pricing in Bangladeshi Taka: 0 / 599 / 1,299. Payment: bKash + Nagad buttons. Button tap → next screen (click flow). Output only clean code, no explanation. Design must match 100%.
এই প্রম্পটটা Qwen 3.6 / Hermes agent-এ পেস্ট করলেই সম্পূর্ণ AI Video ফ্লো-এর কোড পেয়ে যাবে।