فلیک پر ڈیزائن کیا ہے؟
فلیک پر ڈیزائن ایک AI اسکل ہے جو Three.js، WebGL، اور GSAP کے ذریعے Framer Code Components بنانے کے لیے استعمال ہوتی ہے۔ 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 کمپوننٹس کے لیے واضح کریں کہ تجربہ ماؤس، ٹچ، اسکرول پوزیشن، یا ان پٹس کے امتزاج پر ردِعمل دے۔ بتائیں کہ ایفیکٹ کیسے شروع، تبدیل، اور ختم ہونا چاہیے تاکہ تیار کردہ اینیمیشن مطلوبہ رویے سے مطابقت رکھے۔
قابلِ تدوین ترتیبات کو نفاذ کی تفصیلات سے الگ رکھیں
AI کو بتائیں کہ کون سی اقدار Framer کے Properties پینل میں دستیاب ہونی چاہییں۔ اس سے مواد اور بصری پیرامیٹرز کو قابلِ ترمیم رکھا جا سکتا ہے، جبکہ نفاذ TSX جزو کے اندر برقرار رہتا ہے۔
ترمیم کے وقت موجودہ کنفیگریشن برقرار رکھیں
جب AI سے کسی موجودہ جزو میں ترمیم کرنے کو کہیں تو دائرۂ کار میں شامل فیچر یا بگ کی وضاحت کریں اور اس سے غیر متعلقہ ترتیبات برقرار رکھنے کو کہیں۔ Design on the Flank خاص طور پر اس مقصد کے لیے موجود ہے کہ کنفیگریشن میں مطلوبہ تبدیلی کے علاوہ کچھ بدلے بغیر اجزا کو وسعت دی جائے یا مسائل درست کیے جائیں۔
Preview میں جانچ کریں
ریسپانسیو لے آؤٹ، اسکرول ٹرانزیشنز، پوائنٹر انٹریکشنز، ٹچ رویے، اور اثاثوں کے لوڈ ہونے کی تصدیق کے لیے Framer Preview استعمال کریں۔ اگر کسی چیز میں تبدیلی درکار ہو تو فالو اَپ درخواست میں مشاہدہ کیا گیا مسئلہ اور مطلوبہ نتیجہ بیان کریں۔
مسائل کا حل اور دستاویزات
عام مسائل کے لیے پروجیکٹ کی مسائل حل کرنے کی رہنما اور اکثر پوچھے گئے سوالات دیکھیں۔ دستاویزات میں تیار کردہ کوڈ کو Framer میں منتقل کرنے کی مرحلہ وار رہنما بھی شامل ہے۔
Design on the Flank میں Framer اور Three.js سے متعلق معلومات Framer Labs سے، جبکہ GSAP سے متعلق سرکاری مہارتیں GreenSock سے شامل کی گئی ہیں۔ اسے استعمال کرنے سے پہلے پروجیکٹ کی استعمال کی شرائط اور فریقِ ثالث سے منسوب معلومات کا جائزہ لیں۔
نتیجہ
Design on the Flank Three.js، WebGL، اور GSAP کے ساتھ Framer Code Components بنانے کے لیے AI کی معاونت پر مبنی ایک عملی ورک فلو فراہم کرتا ہے۔ اس اسکل کو انسٹال کریں یا اس کی نالج فائل منسلک کریں، مطلوبہ تجربہ بیان کریں، تیار کردہ TSX کوڈ Framer میں کاپی کریں، پھر Properties پینل اور Preview کے ذریعے نتیجے کو بہتر بنائیں۔