كيفية إنشاء عرض تقديمي بالذكاء الاصطناعي باستخدام Windsurf وترميز Vibe

بصفتي من عشاق التقنية دائم البحث عن أدوات مبتكرة، شرعت مؤخرًا في مشروع لإنشاء عرض PowerPoint احترافي لجلسة تدريبية مدتها 6 ساعات حول سير عمل الذكاء الاصطناعي في FlowHunt.io. ما جعل هذه التجربة مميزة هو كيف استفدت من Windsurf مع Claude 4 Sonnet كنموذج لغوي لإنشاء عرض تقديمي مكون من 24 شريحة باستخدام مكتبة pptxgenjs—كل ذلك من خلال مطالبة واحدة ومخطط منظم جيدًا. إليكم كيف تم ذلك.

الهدف: عرض تدريبي عملي وبصري

كان هدفي إنشاء عرض تقديمي تفاعلي وجذاب لورشة عمل مدتها 6 ساعات حول FlowHunt.io، وهي منصة لبناء سير عمل الذكاء الاصطناعي. كان يجب أن يكون العرض:

• عملي وبصري، مع شروحات مختصرة تليها تطبيقات عملية
• يتضمن حالات استخدام واقعية تشمل المالية والموارد البشرية والامتثال وإدارة المشاريع
• يحتوي على عناصر تفاعلية مثل المهام أو الاختبارات كل 30 دقيقة لتعزيز التعلم
• يتبع تنسيقًا منظمًا لجلسيتين، يغطي كل شيء من سير العمل الأساسية إلى مكونات العمليات المتقدمة (MPCs)

لضمان الوضوح، استخدمت أولاً Claude 4 Sonnet لإنشاء مخطط تفصيلي للعرض، مقسم إلى جلستين مدة كل منهما 3 ساعات مع مواضيع وتوقيتات محددة. أصبح هذا المخطط الأساس للمشروع، يوجه محتوى الشرائح وبنيتها.

الأداة: pptxgenjs وWindsurf مع Claude 4 Sonnet

اخترت مكتبة pptxgenjs لأنها أداة جافاسكريبت قوية لإنشاء عروض PowerPoint برمجياً. قدرتها على إنشاء الشرائح وإضافة النصوص والصور والتنسيق عبر الكود جعلتها مثالية للأتمتة. لتحقيق هذا الهدف، استخدمت Windsurf المدعوم بـ Claude 4 Sonnet لكتابة الكود وإنشاء العرض بناءً على المخطط.

بدأت العملية بتثبيت المكتبة باستخدام الأمر:

npm install pptxgenjs

تم تثبيت المكتبة وتبعياتها في ثوانٍ، لتكون جاهزة لإنشاء العرض التقديمي.

المطالبة: تعليمات واحدة، إخراج شامل

بعد تثبيت المكتبة، قمت بصياغة مطالبة واحدة مفصلة لـ Claude 4 Sonnet عبر Windsurf. تضمنت المطالبة:

• أمر التثبيت لـ pptxgenjs
• المخطط الكامل لجلسة التدريب الممتدة لـ 6 ساعات، مقسمة إلى حزمتين من الشرائح (الجلسة 1 والجلسة 2)
• معايير محددة للعرض، مع التركيز على التعلم العملي والعناصر البصرية وحالات الاستخدام الواقعية
• تعليمات لإنشاء شرائح لكل وحدة، بما في ذلك المقدمات والعروض التوضيحية الحية وحالات الاستخدام والتحدي النهائي

إليكم نسخة مبسطة من هيكل المطالبة:

ثبّت npm i pptxgenjs. أنشئ عرضًا تقديميًا باستخدام مكتبة pptxgenjs لتدريب سير عمل الذكاء الاصطناعي في FlowHunt.io لمدة 6 ساعات. اتبع هذا المخطط: [تفاصيل الجلسات]. تأكد أن العرض عملي وبصري ويشمل حالات استخدام واقعية (مالية، موارد بشرية، امتثال)، ويحتوي على مهام تفاعلية كل 30 دقيقة. أنشئ شرائح لـ: الترحيب، تعريف FlowHunt، لوحة سير العمل، عرض حي، ربط الأدوات، التكرار، حالات الاستخدام، MPCs، المنطق، APIs، المراقبة، الامتثال، النشر، التحدي النهائي، والأسئلة والأجوبة.

من خلال هذه المطالبة، أنشأ Claude 4 Sonnet ملف جافاسكريبت كامل (flowhunt-training.js) يستخدم pptxgenjs لإنشاء عرض من 24 شريحة. تولى السكربت كل شيء من تصميم الشرائح إلى الحفاظ على هوية FlowHunt اللونية.

العملية: من الكود إلى الشرائح

تشغيل السكربت المولّد كان بسيطًا. نفذت الأمر التالي:

node flowhunt-training.js

عمل السكربت بسلاسة، رغم أنني واجهت بعض التحذيرات بشأن رموز الألوان غير الصحيحة (“70AD4720 ليست رمز لون صحيح أو hex RGB! ‘000000’ تم استخدامه بدلاً من ذلك”). كانت هذه أمورًا بسيطة لم تؤثر على النتيجة، حيث اعتمدت المكتبة اللون الأسود افتراضيًا. خلال لحظات، أنشأ السكربت ملفًا باسم FlowHunt-AI-Workflows-Training.pptx يضم 24 شريحة مصممة باحترافية.

كان العرض التقديمي تحفة أتمتة:

الجلسة 1 (10 شرائح): تناولت أساسيات FlowHunt.io، عرضًا حيًا لبناء سير عمل، ربط الأدوات (CSV، Google Sheets)، نصائح للتكرار، وحالات استخدام في المالية (التحقق من الميزانية) والموارد البشرية (بوت التوظيف الآلي). كما قدمت مقدمة عن MPCs باستخدام تشبيه بسيط بالليغو.

الجلسة 2 (8 شرائح): ركزت على مواضيع متقدمة تشمل إنشاء MPC، المنطق الشرطي، تكاملات API (Google Search، CRM، Slack)، الحوكمة، روبوتات الامتثال، والنشر. وانتهت بشريحة تحدي نهائي لمهمة بأسلوب الهاكاثون المصغر.

شرائح إضافية: شملت الترحيب، جدول الأعمال، الاستراحة، الأسئلة والأجوبة، وشريحة الشكر، لضمان تدفق احترافي طوال العرض.

تميزت الشرائح بهوية بصرية متناسقة، وعناوين واضحة، وعناصر بصرية مع أماكن مخصصة للصور المتحركة أو مقاطع الفيديو. تم دمج العناصر التفاعلية مثل تعليمات العرض الحي خطوة بخطوة وتحديات المجموعات بسلاسة.

النتيجة: عرض جاهز للاستخدام

كان الناتج النهائي ملف PowerPoint بحجم 239 كيلوبايت جاهز للفتح في أي برنامج متوافق. إلى جانب العرض، أنشأ Claude 4 Sonnet ملف README.md يوثق المشروع ويحتوي على تعليمات الاستخدام وأبرز ما في العرض. النتيجة كانت عرضًا احترافيًا وتفاعليًا وجذابًا بصريًا ويلبي جميع معاييري.

تأملات: قوة التطوير المدعوم بالذكاء الاصطناعي

أظهرت هذه التجربة القوة الاستثنائية لأدوات الذكاء الاصطناعي مثل Windsurf وClaude 4 Sonnet. من خلال مطالبة واحدة فقط، حولت مخططًا عالي المستوى إلى عرض تقديمي متكامل مكون من 24 شريحة، مكتمل بالتنسيق والهوية والعناصر التفاعلية. أثبتت مكتبة pptxgenjs أنها خيار قوي، وكانت قدرة Claude على فهم متطلباتي وتوليد كود وظيفي مثيرة للإعجاب.

ما لفت انتباهي هو الكفاءة. كتابة الكود يدويًا كانت ستستغرق ساعات، إن لم يكن أيامًا، خاصة لضمان التنسيق الموحد عبر 24 شريحة. أنجز Claude ذلك في ثوانٍ، منتجًا سكربتًا كان مرنًا وسهل التخصيص. كانت تحذيرات رموز الألوان العائق الوحيد، وسهل إصلاحها بتعديل رموز hex في السكربت عند الحاجة.

الخطوات التالية

أنا متحمس للنتيجة وأخطط لاستخدام هذا العرض في دورة FlowHunt.io الخاصة بي. في المستقبل، يمكنني تحسينه من خلال:

• إضافة صور أو رسوم متحركة مخصصة للشرائح (الكود يحتوي على أماكن مخصصة لذلك)
• تحسين نظام الألوان لإزالة التحذيرات
• توسيع التحديات التفاعلية مع تعليمات أكثر تفصيلاً

ألهمني هذا المشروع لاستكشاف المزيد من الأتمتة المدعومة بالذكاء الاصطناعي لإنشاء المحتوى. إذا كنت تبحث عن طريقة سريعة وفعالة لإنشاء العروض التقديمية، أنصحك بشدة بدمج pptxgenjs مع أداة ذكاء اصطناعي مثل Claude 4 Sonnet عبر Windsurf—ستكتشف أنه بالفعل يغير قواعد اللعبة!