ফ্ল্যাঙ্কে ডিজাইন কী?
Design on the Flank হলো Framer Code Components তৈরির একটি AI স্কিল, যা Three.js, WebGL এবং GSAP ব্যবহার করে। Codex, Claude, Claude Code অথবা ChatGPT-এর সঙ্গে ব্যবহার করলে এটি লিখিত বিবরণ বা ভিজ্যুয়াল রেফারেন্স থেকে 3D দৃশ্য, শেডার ইফেক্ট, স্ক্রল-ভিত্তিক অ্যানিমেশন এবং কাস্টম ইন্টার্যাকশন তৈরি করতে সাহায্য করে।
প্রতিটি জেনারেট করা কম্পোনেন্ট একটি সম্পূর্ণ TSX ফাইল হিসেবে দেওয়া হয়, যা আপনি Framer-এ কপি করতে পারেন। কম্পোনেন্টের সেটিংস Framer-এর Properties প্যানেলে প্রকাশ করা হয়, ফলে কোড সম্পাদনা না করেই কনটেন্ট, রং, ছবি এবং মোশন প্যারামিটার পরিবর্তন করা যায়।
প্রধান বৈশিষ্ট্য
- 3D গ্রাফিক্স: প্রোডাক্ট দৃশ্য, পার্টিকল সিস্টেম, ম্যাটেরিয়াল, আলো এবং মাউস বা টাচ ইন্টার্যাকশন তৈরি করুন।
- WebGL ইফেক্ট: ছবির বিকৃতি, রিপল, ট্রানজিশন এবং কাস্টম শেডার ইফেক্ট তৈরি করুন।
- GSAP মোশন: টাইমলাইন, টেক্সট ইফেক্ট, ট্রানজিশন সিকোয়েন্স এবং স্ক্রল অবস্থানের সঙ্গে যুক্ত অ্যানিমেশন ব্যবহার করুন।
- Framer ইন্টিগ্রেশন: রেসপনসিভ লেআউট, Property Controls এবং Framer-এ সরাসরি ব্যবহারযোগ্য কম্পোনেন্ট তৈরি করুন।
- কম্পোনেন্ট সম্পাদনা: অনুরোধের পরিধির বাইরের সেটিংস অক্ষুণ্ণ রেখে বিদ্যমান কম্পোনেন্ট বাড়ান বা সমস্যা সমাধান করুন।
একটি AI প্ল্যাটফর্ম বেছে নিন
প্রকল্পটি বিভিন্ন AI ওয়ার্কফ্লো সমর্থন করে। আপনি যে টুলটি ইতিমধ্যে ব্যবহার করেন, তার সঙ্গে মানানসইটি বেছে নিন।
- Codex: AI-কে স্কিলটি ইনস্টল করতে বলুন। Codex ইনস্টলেশন গাইড পড়ুন।
- Claude: স্কিল প্যাকেজ ডাউনলোড করে Claude-এর Skills বিভাগে যোগ করুন। Claude ইনস্টলেশন গাইড দেখুন।
- Claude Code: আপনার কাজের পরিবেশে স্কিলটি ইনস্টল করতে AI-কে বলুন। Claude Code গাইড অনুসরণ করুন।
- ChatGPT: স্টার্টার নলেজ ফাইল ডাউনলোড করে আপনার কথোপকথনে সংযুক্ত করুন। ChatGPT গাইড দেখুন।
Codex দিয়ে স্কিলটি ইনস্টল করুন
রিপোজিটরি থেকে সরাসরি স্কিলটি ইনস্টল করতে Codex-কে বলা সবচেয়ে দ্রুত সেটআপ পদ্ধতি।
Cài skill Design on the Flank từ https://github.com/Chien1618/design-on-the-flank/tree/main/skills/design-on-the-flankইনস্টলেশনের পর একটি নতুন কথোপকথন শুরু করে আপনি যে Framer কম্পোনেন্ট তৈরি করতে চান, তা বর্ণনা করুন। উপরের অনুরোধটি ভিয়েতনামি ভাষায় লেখা, কারণ প্রকল্পের README-তেও একই ভাষা ব্যবহার করা হয়েছে; তবে একই ওয়ার্কফ্লো আপনার পছন্দের ভাষায় মানিয়ে নেওয়া যায়।
ChatGPT-এর সঙ্গে নলেজ ফাইল ব্যবহার করুন
ChatGPT-এর জন্য একটি কথোপকথনে স্টার্টার নলেজ ফাইল সংযুক্ত করুন, তারপর আপনার কাঙ্ক্ষিত কম্পোনেন্টটি বর্ণনা করুন। ভিজ্যুয়াল আচরণ, ইন্টার্যাকশন মডেল এবং Framer-এ প্রকাশ করতে চান এমন সেটিংস উল্লেখ করুন।
ChatGPT অতিরিক্ত ডকুমেন্টেশন চাইলে বা কোনো লিংক করা রিসোর্স খুলতে না পারলে, অনুরোধ করা ফাইলটি ডাউনলোড করে একই কথোপকথনে সংযুক্ত করুন। প্রকল্পটিতে একটি বিস্তারিত ChatGPT গাইড রয়েছে।
ধাপে ধাপে একটি Framer কম্পোনেন্ট তৈরি করুন
- কাঙ্ক্ষিত ফলাফল বর্ণনা করুন। ভিজ্যুয়াল ইফেক্ট, ব্যবহারকারীর ইন্টার্যাকশন এবং Framer-এ সমন্বয়যোগ্য প্যারামিটার ব্যাখ্যা করুন। আপনি একটি রেফারেন্স ছবি, ভিডিও অথবা বিদ্যমান কোডও দিতে পারেন।
- সম্পূর্ণ কোডের অনুরোধ করুন। AI-কে একটি সম্পূর্ণ TSX ফাইল দিতে বলুন, অথবা কম্পোনেন্টের জন্য অতিরিক্ত রিসোর্স প্রয়োজন হলে সম্পূর্ণ কোড স্ক্যাফোল্ড দিতে বলুন।
- কোডটি Framer-এ স্থানান্তর করুন। একটি Framer Code Component তৈরি করুন, নমুনা কনটেন্টের বদলে জেনারেট করা কোড বসান এবং কম্পোনেন্টটি আপনার পেজে যোগ করুন। বিস্তারিত প্রক্রিয়ার জন্য Framer ইন্টিগ্রেশন গাইড ব্যবহার করুন।
- কাস্টমাইজ ও পরীক্ষা করুন। Properties প্যানেলে প্রকাশিত সেটিংস সমন্বয় করুন, তারপর অ্যানিমেশন, স্ক্রলিং, মাউস ইনপুট, টাচ ইনপুট এবং রেসপনসিভ আচরণ পরীক্ষা করতে Preview খুলুন।
কার্যকর প্রম্পট লিখুন
একটি শক্তিশালী প্রম্পটে আপনার প্রয়োজনীয় চেহারা এবং নিয়ন্ত্রণ দুটিই বর্ণনা থাকে। কম্পোনেন্টের ভূমিকা, অ্যানিমেশন আচরণ, ইন্টার্যাকশন মডেল এবং Properties-এর মাধ্যমে সম্পাদনযোগ্য মানগুলো নির্দিষ্ট করুন।
উদাহরণস্বরূপ, আপনি এভাবে একটি 3D হিরো সেকশনের অনুরোধ করতে পারেন:
Dùng Design on the Flank tạo hero sản phẩm 3D cho Framer, chuyển góc nhìn theo cuộn và cho phép chỉnh model, ánh sáng, nội dung trong Properties.ইংরেজিতে একই অনুরোধে Framer-এর জন্য একটি 3D প্রোডাক্ট হিরো, স্ক্রলের সঙ্গে পরিবর্তিত ক্যামেরা অ্যাঙ্গেল এবং Properties-এ সম্পাদনযোগ্য মডেল, আলো ও কনটেন্ট সেটিংস চাওয়া হবে। প্রকল্পের নমুনা প্রম্পট গাইডে আরও উদাহরণ রয়েছে।
বাহ্যিক অ্যাসেট নিয়ে কাজ করা
কিছু কম্পোনেন্টের জন্য একটি 3D মডেল, ছবি অথবা অন্যান্য ব্যক্তিগত ডেটা প্রয়োজন হয়। এমন হলে প্রাসঙ্গিক অ্যাসেটটি AI-কে দিন এবং জেনারেট করা কোডের সঙ্গে থাকা সেটআপ নির্দেশনা অনুসরণ করুন। প্রয়োজনীয় রিসোর্স কনফিগার না করা পর্যন্ত অ্যাসেট-নির্ভর কম্পোনেন্ট কাজ করবে বলে ধরে নেবেন না।
কম্পোনেন্টটি Framer-এ আসার পর জেনারেট করা কোডে প্রকাশিত সেটিংসের জন্য Properties ব্যবহার করুন। কম্পোনেন্টের ওপর নির্ভর করে এতে কনটেন্ট, রং, ছবি এবং মোশন প্যারামিটার থাকতে পারে।
উন্নত পরামর্শ
ইন্টার্যাকশন নির্ভুলভাবে বর্ণনা করুন
Three.js এবং WebGL কম্পোনেন্টের ক্ষেত্রে অভিজ্ঞতাটি মাউস, টাচ, স্ক্রল অবস্থান অথবা ইনপুটগুলোর সমন্বয়ে প্রতিক্রিয়া জানাবে কি না, তা স্পষ্ট করুন। ইফেক্টটি কীভাবে শুরু, পরিবর্তন এবং শেষ হবে তা উল্লেখ করুন, যাতে জেনারেট করা অ্যানিমেশনটি কাঙ্ক্ষিত আচরণের সঙ্গে মিলে যায়।
সম্পাদনাযোগ্য সেটিংসকে ইমপ্লিমেন্টেশনের বিবরণ থেকে আলাদা রাখুন
Framer-এর Properties প্যানেলে কোন মানগুলো উপলভ্য থাকা উচিত তা AI-কে জানান। এতে TSX কম্পোনেন্টের ভেতরের ইমপ্লিমেন্টেশন অপরিবর্তিত রেখে কনটেন্ট ও ভিজ্যুয়াল প্যারামিটারগুলো সমন্বয়যোগ্য থাকে।
সম্পাদনার সময় বিদ্যমান কনফিগারেশন অক্ষুণ্ণ রাখুন
কোনো বিদ্যমান কম্পোনেন্ট পরিবর্তনের জন্য AI-কে বলার সময়, কোন ফিচার বা বাগটি কাজের আওতায় রয়েছে তা নির্দিষ্ট করুন এবং সংশ্লিষ্ট নয় এমন সেটিংস অপরিবর্তিত রাখতে বলুন। Design on the Flank বিশেষভাবে অনুরোধ করা পরিবর্তনের বাইরের কনফিগারেশন না বদলে কম্পোনেন্ট সম্প্রসারণ বা সমস্যা সমাধান সমর্থন করে।
Preview-এ পরীক্ষা করুন
রেসপনসিভ লেআউট, স্ক্রল ট্রানজিশন, পয়েন্টার ইন্টারঅ্যাকশন, টাচ আচরণ এবং অ্যাসেট লোডিং যাচাই করতে Framer Preview ব্যবহার করুন। কোনো কিছু পরিবর্তন করা প্রয়োজন হলে, পরবর্তী অনুরোধে দেখা সমস্যাটি এবং কাঙ্ক্ষিত ফলাফল বর্ণনা করুন।
সমস্যা সমাধান ও ডকুমেন্টেশন
সাধারণ সমস্যার জন্য প্রকল্পের সমস্যা সমাধানের নির্দেশিকা এবং প্রায়শই জিজ্ঞাসিত প্রশ্নাবলি দেখুন। ডকুমেন্টেশনে জেনারেট করা কোড Framer-এ স্থানান্তরের ধাপে ধাপে নির্দেশিকাও রয়েছে।
Design on the Flank Framer Labs-এর Framer ও Three.js-সংক্রান্ত জ্ঞান এবং GreenSock-এর অফিসিয়াল GSAP দক্ষতা ব্যবহার করে। এটি ব্যবহারের আগে প্রকল্পের ব্যবহারের শর্তাবলি এবং তৃতীয় পক্ষের স্বীকৃতি-সংক্রান্ত তথ্য পর্যালোচনা করুন।
উপসংহার
Design on the Flank Three.js, WebGL এবং GSAP ব্যবহার করে Framer Code Components তৈরির জন্য একটি ব্যবহারিক AI-সহায়িত কর্মপ্রবাহ প্রদান করে। স্কিলটি ইনস্টল করুন বা এর জ্ঞান-ফাইল সংযুক্ত করুন, আপনার কাঙ্ক্ষিত অভিজ্ঞতা বর্ণনা করুন, জেনারেট করা TSX Framer-এ কপি করুন এবং Properties প্যানেল ও Preview-এর মাধ্যমে ফলাফল পরিমার্জন করুন।