شنو هو Design on the Flank؟
Design on the Flank هي مهارة ديال الذكاء الاصطناعي لبناء مكوّنات Framer Code باستعمال Three.js وWebGL وGSAP. ملي كتستعملها مع Codex ولا Claude ولا Claude Code ولا ChatGPT، كتعاونك تصايب مشاهد ثلاثية الأبعاد، وتأثيرات الشيدرز، وحركات مرتبطة بالتمرير، وتفاعلات مخصّصة انطلاقاً من وصف مكتوب ولا مرجع بصري.
كل مكوّن كيتولّد كيتعطى ليك فملف TSX كامل تقدر تنسخو لـ Framer. إعدادات المكوّن كيبانو فلوحة Properties ديال Framer، وهاد الشي كيخليك تبدّل المحتوى والألوان والصور ومعاملات الحركة بلا ما تعدّل الكود.
أهم المزايا
- رسومات ثلاثية الأبعاد: صايب مشاهد ديال المنتجات، وأنظمة الجزيئات، والمواد، والإضاءة، وتفاعلات الماوس ولا اللمس.
- تأثيرات WebGL: بنِ تشويهات الصور، والتموجات، والانتقالات، وتأثيرات الشيدرز المخصّصة.
- الحركة بـ GSAP: استعمل الجداول الزمنية، وتأثيرات النص، وتسلسلات الانتقال، والحركات المرتابطة بموضع التمرير.
- التكامل مع Framer: ولّد تخطيطات متجاوبة، وProperty Controls، ومكوّنات تقدر تستعملها مباشرة فـ Framer.
- تعديل المكوّنات: وسّع مكوّناً موجوداً ولا صلّح المشاكل مع الحفاظ على الإعدادات اللي خارج النطاق المطلوب.
اختار منصة الذكاء الاصطناعي
المشروع كيدعم بزاف ديال طرق العمل مع الذكاء الاصطناعي. اختار الطريقة اللي كتناسب الأداة اللي كتستعمل دابا.
- Codex: طلب من الذكاء الاصطناعي يثبّت المهارة. قرا دليل تثبيت Codex.
- Claude: حمّل حزمة المهارة وزيدها لقسم Skills ديال Claude. شوف دليل تثبيت Claude.
- Claude Code: طلب من الذكاء الاصطناعي يثبّت المهارة فبيئة العمل ديالك. تبع دليل 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. تقدر حتى تعطي صورة مرجعية، ولا فيديو، ولا كود موجود.
- طلب الكود كامل. طلب من الذكاء الاصطناعي ملف TSX كامل، ولا هيكل كود كامل إلا كان المكوّن محتاج موارد إضافية.
- دخل الكود لـ Framer. صايب Framer Code Component، وبدّل المحتوى التجريبي بالكود المتولّد، وزيد المكوّن للصفحة ديالك. استعمل دليل التكامل مع Framer باش تعرف العملية بالتفصيل.
- خصّص واختبر. عدّل الإعدادات اللي باينة فلوحة Properties، ومن بعد حلّ Preview واختبر الحركة، والتمرير، وإدخال الماوس، وإدخال اللمس، والسلوك المتجاوب.
كتب طلبات فعّالة
الطلب المزيان كيوصف الشكل والضوابط اللي محتاج. حدّد الدور ديال المكوّن، وسلوك الحركة ديالو، ونموذج التفاعل، والقيم اللي خاصها تكون قابلة للتعديل من خلال Properties.
مثلاً، تقدر تطلب قسم hero ثلاثي الأبعاد بهاد الشكل:
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.بالإنجليزية، نفس الطلب غادي يطلب hero ديال منتج ثلاثي الأبعاد لـ Framer، وزاوية كاميرا كتتبدّل مع التمرير، وإعدادات قابلة للتعديل للموديل والإضاءة والمحتوى فـ Properties. تقدر تلقى أمثلة إضافية فـ دليل نماذج الطلبات ديال المشروع.
الخدمة مع الموارد الخارجية
شي مكوّنات كيحتاجو موديل ثلاثي الأبعاد، ولا صورة، ولا بيانات خاصة أخرى. فهاد الحالة، عطِ المورد المناسب للذكاء الاصطناعي وتبع تعليمات الإعداد اللي جاية مع الكود المتولّد. ما تفترضش أن مكوّناً معتمداً على مورد غادي يخدم حتى تكمّل إعداد الموارد المطلوبة ديالو.
منين يدخل المكوّن لـ Framer، استعمل Properties للإعدادات اللي مكشوفة فالكود المتولّد. هاد الشي يقدر يشمل المحتوى، والألوان، والصور، ومعاملات الحركة، حسب المكوّن.
نصائح متقدمة
وصف التفاعل بدقة
بالنسبة لمكوّنات Three.js وWebGL، وضّح واش التجربة خاصها تتفاعل مع الماوس، ولا اللمس، ولا موضع التمرير، ولا خليط من هاد المدخلات. ذكر كيفاش خاص التأثير يبدا ويتبدّل ويسالي باش الحركة المتولّدة توافق السلوك اللي بغيتي.
فرّق بين الإعدادات القابلة للتعديل وتفاصيل التنفيذ
قول للذكاء الاصطناعي شنو القيم اللي خاصها تكون متاحة فلوحة Properties ديال Framer. هادشي كيساعد يخلي المحتوى والمعايير البصرية قابلين للتعديل، مع بقاء التنفيذ داخل مكوّن TSX.
حافظ على الإعدادات الموجودة ملي كتعدّل
ملي كتطلب من الذكاء الاصطناعي يعدّل مكوّن موجود، حدّد الميزة ولا المشكل اللي داخل فالنطاق، وطلب منّو يخلي الإعدادات اللي ما عندهاش علاقة بالتعديل كيف ما هي. Design on the Flank كيدعم بالخصوص توسيع المكوّنات ولا إصلاح المشاكل بلا ما يبدّل الإعدادات اللي خارج التغيير المطلوب.
جرّب فـ Preview
استعمل Framer Preview باش تتأكد من التخطيط المتجاوب، وانتقالات التمرير، وتفاعلات المؤشر، وسلوك اللمس، وتحميل الأصول. إلا كان شي حاجة خاصها تبدّل، وصف المشكل اللي لاحظتي والنتيجة اللي بغيتي فطلب متابعة.
حلّ المشاكل والتوثيق
بالنسبة للمشاكل الشائعة، راجع دليل حلّ المشاكل ديال المشروع والأسئلة المتكررة. التوثيق فيه حتى دليل خطوة بخطوة لنقل الكود المُولَّد إلى Framer.
Design on the Flank كيجمع المعرفة ديال Framer وThree.js من Framer Labs، ومهارات GSAP الرسمية من GreenSock. راجع شروط الاستعمال ديال المشروع ومعلومات نسب الفضل للأطراف الثالثة قبل ما تستعملو.
الخلاصة
Design on the Flank كيوفّر سير عمل عملي بمساعدة الذكاء الاصطناعي لإنشاء مكوّنات Framer Code Components باستعمال Three.js وWebGL وGSAP. ثبّت المهارة ولا زِد ملف المعرفة ديالها، وصف التجربة اللي بغيتي، نسخ كود TSX المُولَّد إلى Framer، ومن بعد حسّن النتيجة باستعمال لوحة Properties وPreview.