سجّل عرضاً توضيحياً لتطبيق ويب تلقائياً باستخدام الذكاء الاصطناعي

يمكنك الآن تسجيل عرض توضيحي لتطبيق ويب تلقائياً من خلال كتابة ما تريد عرضه وتسليمه لوكيل ذكاء اصطناعي ينقر عبر منتجك في متصفح سحابي أثناء التسجيل. تعتمد قابلية استخدام اللقطة على ما قمت بإعداده قبل البدء: الحساب الذي يسجل الدخول إليه، والبيانات المعروضة على الشاشة، والتعليمات التي تكتبها. يغطي هذا الدليل كل خطوة، وما يجب فعله عندما يعلق الوكيل، ومتى يكون استخدام برنامج نصي بلغة Playwright أو Puppeteer هو الأداة الأفضل.

إنها أيضاً الطريقة الأكثر مباشرة للحصول على عرض توضيحي للمنتج دون تسجيل الشاشة بنفسك. إذا لم يكن منتجك تطبيق ويب عاماً، أو كان لديك فقط عرض تقديمي أو رابط URL، فإن طرق أخرى لا تتطلب تسجيل الشاشة في نهاية المقال تغطي ذلك.

كيف يعمل تسجيل الموقع الإلكتروني التلقائي#

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

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

الخطوة 1: جهّز حساباً تجريبياً وبيانات تجريبية#

كل ما يراه الوكيل ينتهي به المطاف في الفيديو. قم بإعداد الحساب قبل كتابة أي تعليمات.

• استخدم حساباً تجريبياً مخصصاً. لا توجه الوكيل أبداً إلى حساب مسؤول على بيئة الإنتاج. مساحة عمل تجريبية بتسجيل دخول خاص بها تبقي بيانات العملاء الحقيقية بعيدة عن الشاشة وتحد من تأثير أي خطأ.
• أدخل بيانات واقعية. لوحة التحكم الفارغة تصنع عرضاً توضيحياً سيئاً. أضف من 10 إلى 20 سجلاً بأسماء ومبالغ وتواريخ معقولة، لتبدو الجداول والرسوم البيانية ونتائج البحث وكأن فريقاً يستخدم المنتج بالفعل. تجنب استخدام "Test 1" أو "asdf" أو أسماء عملاء حقيقيين.
• اضبط الحالة التي يبدأ منها التدفق. إذا كان العرض التوضيحي يوضح "إنشاء مشروعك الأول"، فتأكد من عدم وجود أي مشروع بعد. إذا كان يوضح تحرير فاتورة، فتأكد من وجود الفاتورة وأن لها اسماً واضحاً يمكن للتعليمات الإشارة إليه.
• أغلق المقاطعات التي تظهر لمرة واحدة. تخلص من جولات التعريف، ونوافذ "ما الجديد"، ولافتات الفترة التجريبية في ذلك الحساب أولاً. أي شيء يظهر مرة واحدة لكل مستخدم سيظهر في تسجيلك.
• تأكد من إمكانية الوصول إلى التطبيق من الإنترنت. يعمل الوكيل في متصفح سحابي، لذا لا يمكنه فتح localhost، أو خادم تجريبي خلف شبكتك الخاصة (VPN)، أو أي شيء مقيد بعنوان IP خاص بمكتبك. استخدم بيئة تجريبية عامة أو بيئة اختبار (Sandbox).

الخطوة 2: اكتب تعليمات يمكن للوكيل اتباعها#

معظم تسجيلات الذكاء الاصطناعي السيئة تأتي من تعليمات غامضة. يقوم الوكيل بما كتبته، بالترتيب الذي كتبته به، ويملأ الفجوات بالتخمينات. التعليمات الجيدة تُقرأ كبرنامج نصي اختباري قصير مكتوب لشخص لم يرَ منتجك من قبل.

اتبع 4 قواعد:

1. سمِّ الشاشات. استخدم التسميات التي تظهر في واجهة المستخدم: "افتح الفواتير من الشريط الجانبي الأيسر"، وليس "اذهب إلى قسم الأموال".
2. حدد الترتيب. رقم الخطوات. إذا كان الترتيب مهماً للقصة (الإعداد، ثم الاستخدام، ثم رؤية النتيجة)، فاذكر ذلك.
3. أشر إلى عناصر محددة. سمِّ الزر أو علامة التبويب أو الحقل أو السجل: "انقر على الفاتورة INV-1042"، "افتح قائمة الفلاتر المنسدلة واختر المتأخرة".
4. حدد مكان التوقف. انتهِ عند شاشة النتيجة التي يجب أن يتذكرها المشاهد، واطلب من الوكيل البقاء هناك للحظة.

إليك الفرق في الممارسة العملية.

تعليمات سيئة:

أظهر كيف تعمل فواتيرنا.

يجب على الوكيل أن يقرر أي الشاشات مهمة، وأي سجل يجب فتحه، ومتى ينتهي الأمر. ستحصل على جولة لما يجده أولاً.

أفضل، ولكن لا تزال فضفاضة:

أظهر كيفية إنشاء فاتورة وإرسالها إلى عميل.

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

تعليمات جيدة:

ابدأ من لوحة التحكم. 1) انقر على الفواتير في الشريط الجانبي الأيسر. 2) انقر على زر فاتورة جديدة في أعلى اليمين. 3) في العميل، اختر "Northwind Studio". 4) أضف بنداً واحداً: "أتعاب التصميم"، الكمية 1، السعر 2,400. 5) انقر على حفظ كمسودة. 6) افتح المسودة وانقر على معاينة، ثم توقف على شاشة المعاينة لمدة 3 ثوانٍ. لا تنقر على إرسال.

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

بعض العادات الأخرى تساعد:

• تدفق واحد لكل تسجيل. "إنشاء فاتورة، ثم إعداد جدول متكرر، ثم تصدير تقرير" هي 3 فيديوهات. التشغيلات الأقصر أسهل في الإصلاح وأسهل في إعادة الاستخدام.
• اكتب القيم التي يجب كتابتها. إذا كان على الوكيل اختراع نص، فقد يبتكر شيئاً غريباً على الكاميرا.
• اذكر المراوغات المعروفة. "زر الحفظ معطل حتى يفقد حقل السعر التركيز" يوفر على الوكيل بضع نقرات مرتبكة.

الخطوة 3: اختر خيار تسجيل الدخول#

معظم عروض تطبيقات الويب التوضيحية تقع خلف تسجيل دخول. لديك 3 خيارات:

الحساب التجريبي من الخطوة 1 يؤتي ثماره هنا. كلمة مرور تجريبية فقط مع وصول إلى بيانات تجريبية فقط هي الخيار منخفض المخاطر عند توفير بيانات الدخول. إذا كانت شركتك تسجل الدخول عبر SSO مع التحقق بخطوتين (2FA)، فإن كتابتها بنفسك عادة ما تكون أسرع من محاولة جعل الوكيل يقوم بذلك.

الخطوة 4: قرر بين وضع القراءة فقط أو الإنشاء/التعديل#

القراءة فقط هي الوضع الافتراضي، وهي تغطي عروضاً توضيحية أكثر مما تتوقع (مخاطر السماح للوكيل بالكتابة موجودة في أمان وكيل تسجيل شاشة الذكاء الاصطناعي): التنقل، التصفية، البحث، فتح السجلات، تبديل علامات التبويب وعرض التقارير.

اسمح بالإنشاء أو التعديل فقط عندما يحتاج التدفق إلى ذلك حقاً (إنشاء سجل، تغيير إعداد، إرسال نموذج) وفقط على حساب تجريبي. ثم قم بأمرين:

• اكتب نقطة التوقف في التعليمات، كما في "لا تنقر على إرسال" أعلاه. الإجراءات التي ترسل بريداً إلكترونياً للأشخاص، أو تخصم من البطاقات، أو تنشر في عمليات التكامل يجب أن تظل خارج التشغيل، أو يتم فصلها في مساحة العمل التجريبية.
• أعد تعيين البيانات التجريبية بعد ذلك، حتى يبدأ التشغيل التالي من نفس الحالة.

الخطوة 5: تولَّ التحكم عندما يعلق الوكيل#

بعض الشاشات تعيق أي متصفح آلي. خطط لها بدلاً من إعادة تشغيل التدفق بالكامل:

• لافتات ملفات تعريف الارتباط والنوافذ المنبثقة للموافقة. تولَّ التحكم، واقبل أو أغلق، ثم أعد التحكم.
• منتقيات التاريخ المخصصة والسحب والإفلات. الأدوات غير العادية هي المكان الذي يضيع فيه الوكلاء معظم الوقت. اختر التاريخ بنفسك وأعد التحكم.
• رموز التحقق (Captchas). هذه موجودة لإيقاف الأتمتة. حلها بنفسك.
• رموز التحقق بخطوتين (2FA). اكتب الرمز من هاتفك، ثم أعد التحكم.

عندما تعيد التحكم، يكمل الوكيل من الشاشة التي تركته عليها. إذا ظهرت عملية تسليم التحكم في اللقطة، قم بقصها في المحرر.

الخطوة 6: اجعل التشغيلات قصيرة للحفاظ على الرصيد#

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

ماذا يصبح التسجيل#

التسجيل الخام هو المدخلات، وليس المنتج النهائي. من نفس تسجيل الذكاء الاصطناعي يمكنك إنشاء:

• فيديو تعليمي. تغطي Clevera كل إجراء مطلوب بالترتيب، وتكتب النص وتضيف تعليقاً صوتياً بالذكاء الاصطناعي، لذا لا أحد يحتاج للسرد المباشر. إنه التنسيق المثالي لمراكز المساعدة وتأهيل المستخدمين. شاهد كيف يعمل في صانع الدروس التعليمية بالذكاء الاصطناعي.
• عرض توضيحي للمنتج. الذكاء الاصطناعي انتقائي هنا: يمكنه تخطي اللقطات منخفضة القيمة، وإعادة ترتيب المقاطع، وسرد النتائج بدلاً من كل نقرة. إنه التنسيق المثالي للمبيعات وصفحات الإطلاق. يغطي مولد العروض التوضيحية للمنتج تنسيقات العرض التوضيحي.
• مقالة. دليل مكتوب مع لقطات شاشة مختارة تلقائياً ومزودة بتعليقات، للوثائق وتحسين محركات البحث (SEO).

كل منها عنصر محتوى منفصل، وتتم ترجمة الفيديوهات والمقالات إلى 74 لغة. عندما تتغير واجهة المستخدم، يتم تحديث التعديلات على السرد والنص في الروابط المستضافة والمضمنة، لكن اللقطات نفسها لا تتغير. أعد تشغيل نفس التعليمات للحصول على لقطات جديدة؛ يغطي كيفية تحديث فيديوهات الدروس التعليمية بعد تغيير واجهة المستخدم متى يجب إعادة التسجيل ومتى يكون التعديل كافياً.

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

تشغيلنا الأول: تعليمات واحدة، 78 ثانية، 9 أرصدة#

في أكتوبر 2026 قمنا بتشغيل مسجل الذكاء الاصطناعي على TodoMVC، وهو تطبيق تجريبي عام، بهذه التعليمات:

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

كان تسجيل الدخول 'لا يوجد'. قمنا بتفعيل خيار 'السماح بالتغييرات'، لأن إضافة المهام وإكمالها هي عمليات كتابة، وقمنا بذلك فقط لأنه تطبيق تجريبي عام لا يحتوي على بيانات حقيقية خلفه. في منتجك الخاص، اتبع الخطوة 4 بدلاً من ذلك.

قام الوكيل بالضبط بما كتبناه، بالترتيب، دون أي محاولات إعادة أو نقرات خاطئة لاحظناها، ولم نحتج للتدخل. استغرق التشغيل حوالي 78 ثانية من الوقت الفعلي وترك 58 ثانية من اللقطات لمهمة يقوم بها الشخص في حوالي 20 ثانية، لأن الوكيل يتوقف مؤقتاً بين الخطوات. قامت Clevera بقصه إلى فيديو تعليمي مدته 0:40 مع فصلين، و6 خطوات، وتكبير تلقائي بمعدل 1.5x و1.8x، في حوالي 50 ثانية. الأرصدة: 5 لتحليل التسجيل و4 للفيديو التعليمي، 9 في المجموع.

الفيديو التعليمي الذي مدته 0:40 والذي صنعته Clevera من تسجيل الذكاء الاصطناعي ذلك، بدون تعديل.

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

البديل المكتوب: Playwright و Puppeteer#

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

Playwright يسجل الفيديو محلياً. في Playwright Test تقوم بضبط خيار video على 'on' أو 'retain-on-failure' أو 'on-first-retry'؛ مع المكتبة تقوم بتمرير recordVideo إلى browser.newContext() مع dir و size اختياري. تفصيلان يوقعان الناس في الخطأ. يتم حفظ الفيديوهات فقط عند إغلاق سياق المتصفح، لذا يجب عليك await context.close(). والفيديو افتراضياً يتم ضبط حجمه ليناسب 800x800، لذا اضبط منفذ العرض و size بنفسك إذا كنت تريد لقطة حادة بدقة 1080p. لا يتعين عليك كتابة المحددات يدوياً أيضاً: npx playwright codegen ينشئ النص أثناء نقرك عبر التطبيق.

Puppeteer لديه page.screencast()، الذي يسجل WebM بمعدل 30 إطاراً في الثانية افتراضياً ويتطلب ffmpeg على الجهاز. اعتباراً من Puppeteer 25.13 تشير الوثائق إلى أنه عفا عليه الزمن لصالح page.record()، الذي يخرج MP4.

يكون النص هو الخيار الأفضل عندما:

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

يكون الوكيل هو الخيار الأفضل عندما:

• الشخص الذي يحتاج للفيديو يعمل في تسويق المنتجات أو المبيعات أو الدعم ولا يكتب الكود.
• التدفق لمرة واحدة أو يتغير كثيراً: عرض توضيحي خاص بعميل محتمل، ميزة جديدة، مقالة مساعدة.
• تحتاج إلى فيديو نهائي ومسرد، وليس لقطات خام. النص يمنحك التقاط شاشة صامتاً؛ السرد والتكبير والتحرير لا تزال مسؤوليتك.

النهجان يتكاملان بشكل جيد. تقبل Clevera الفيديوهات المرفوعة، بما في ذلك التسجيلات الصامتة، لذا يمكن للفريق تسجيل تدفق باستخدام Playwright في CI ورفع الملف لإنشاء الفيديو التعليمي أو العرض التوضيحي المسرد.

طرق أخرى لعمل عرض توضيحي للمنتج بدون تسجيل الشاشة#

اللقطة النظيفة تحتاج عادةً إلى حساب مرتب، ونص تتبعه أثناء النقر، وعدم وجود منعطفات خاطئة، وأي تغيير في واجهة المستخدم يرسل شخصاً ما لإعادة العمل. يزيل مسجل الذكاء الاصطناعي ذلك لتطبيقات الويب. عندما لا يكون ذلك مناسباً، لا يزال لديك خيارات لا تحتاج إلى تسجيل:

من عرض تقديمي أو PDF أو لقطات شاشة#

استخدم هذا عندما لا تكون الميزة قد تم شحنها بعد، أو التطبيق ليس عاماً، أو ليس تطبيق ويب على الإطلاق. ارفع عرض PDF أو لقطات شاشة، واختر نوع العرض التوضيحي مثل 'ميزة جديدة'، وأضف سطراً من التوجيه ("الجمهور هم المسؤولون الحاليون، أقل من 90 ثانية"). يوجه نص الشريحة السرد الذي تكتبه Clevera وتعلق عليه صوتياً فوق شرائحك، لذا فإن النسخ المحددة ("تصدير أي تقرير إلى CSV بنقرة واحدة") تتفوق على الشعارات. بالنسبة لتطبيق سطح المكتب، يمكن أن تصبح 8 إلى 10 لقطات شاشة مختارة بعناية شرحاً توضيحياً واضحاً ومسرداً. القيد: لا توجد نقرات حية أو مؤشر، لذا فهو يناسب معاينة الإطلاق أكثر من فيديو تدريبي "انقر هنا بالضبط".

من رابط أو بضع جمل#

لمقطع قصير لوسائل التواصل الاجتماعي أو الإعلانات أو أعلى صفحة الهبوط، لا تحتاج أنواع Clevera الاجتماعية والترويجية (Starter وما فوق، في مرحلة تجريبية) إلى لقطات. الصق رابطاً وستسحب Clevera حقائق المنتج ولقطات الشاشة والشعار من الصفحة، أو صف المنتج في بضع جمل؛ يكتب الذكاء الاصطناعي المقطع كرسوم متحركة مع موسيقى، وحيثما كان للنوع واحد، تعليق صوتي. جولة المنتج، وتسليط الضوء على الميزة، وإعلان الميزة هي أقرب الأنواع للعرض التوضيحي، ويضيف نوع الصورة الرمزية (Avatar) بالذكاء الاصطناعي (أيضاً Starter وما فوق، تجريبي) مقدماً. هذه ترويجية وليست تدريبية: فهي تظهر ماهية المنتج، وليس سير عمل حقيقياً.

أدوات الصورة الرمزية والعروض التوضيحية التفاعلية#

تحول أدوات الصورة الرمزية مثل HeyGen نصاً أو رابط منتج إلى فيديو يقوده مقدم؛ بالنسبة للبرمجيات، لا تزال لقطات الشاشة يجب أن تأتي من مكان ما. تنتج الأدوات التفاعلية مثل Arcade و Supademo عروضاً توضيحية بالنقر بدلاً من الفيديو، لكن لا يزال شخص ما ينقر عبر المنتج لالتقاطها. تغطي مقارنتنا بين العروض التوضيحية التفاعلية مقابل فيديوهات المنتج متى يكون كل منها أفضل في التحويل.

أي طريقة تناسب أي وظيفة#

في اختباراتنا في أكتوبر 2026 كانت الفجوة واضحة. كلف تشغيل مسجل الذكاء الاصطناعي أعلاه بالإضافة إلى نظرة عامة على المنتج مدتها 0:55 حوالي 11 رصيداً وأظهر نقرات حقيقية. كلف تسليط الضوء على ميزة مدته 35 ثانية تم إنشاؤه من clevera.ai مع 'بحث في موقع ويب' 96 رصيداً، واستغرق حوالي 7 دقائق، وفتح على مشهد غير ذي صلة كان علينا إصلاحه قبل النشر. كانت اللقطات الحقيقية أرخص وأقرب إلى العرض التوضيحي؛ المقطع الترويجي مخصص للوصول، وليس للشروحات التوضيحية.

حدود يجب معرفتها قبل البدء#

• عبر الويب فقط. يسجل مسجل الذكاء الاصطناعي المواقع وتطبيقات الويب في متصفح سحابي. هو لا يسجل برامج سطح المكتب أو تطبيقات الجوال الأصلية. لتدفقات سطح المكتب، أو تدفقات الويب التي تفضل النقر عليها بنفسك، استخدم تطبيق Clevera لسطح المكتب (macOS أو Windows).
• التطبيقات المتاحة فقط. لا يدعم localhost، أو بيئات الاختبار المحمية بـ VPN، أو الأدوات المقيدة بقائمة عناوين IP.

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

الأسئلة الشائعة#

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

كيف أحافظ على بيانات العملاء الحقيقية بعيداً عن العرض التوضيحي؟ وجّه الوكيل إلى حساب تجريبي مخصص مليء ببيانات وهمية واقعية (الخطوة 1)، وليس أبداً إلى حساب مسؤول على بيئة الإنتاج.

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

هل يمكنني إنشاء عرض توضيحي مجاناً؟ تتضمن الخطة المجانية مقاطع فيديو تعليمية وعروضاً توضيحية للمنتجات ومقالات تصل مدتها إلى 3 دقائق، تتم مشاركتها عبر رابط أو تضمين (تنزيلات MP4 تبدأ من خطة Starter). يستخدم تسجيل الذكاء الاصطناعي رصيداً في كل الخطط؛ بينما تتطلب المقاطع الاجتماعية والترويجية والصورة الرمزية بالذكاء الاصطناعي خطة Starter أو أعلى.