صنع Claude شرحًا تعليميًا مدته 18 دقيقة لتطبيقي

ظننت أن تطوير مساعد ذكاء اصطناعي داخلي وإطلاقه سيكون الجزء المُبهِر. اتضح أن الشرح التعليمي ودليل المستخدم، اللذين صنعهما Claude في معظمهما، هما ما أذهلني.

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

احتجنا إلى مواد تعريفية لـ MemodoAI، مساعد الذكاء الاصطناعي الذي نشغّله داخليًا في العمل (نسخة LibreChat مستضافة ذاتيًا). المطلوب: فيديو إرشادي ودليل مكتوب حتى لا أعلق في تقديم الدعم التقني لزملائي. الجزء المثير للاهتمام كان كم استطعت أن أُسلِّم من العمل، والجزأين اللذين لم أستطع.

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

لا ترى المشغّل؟ شاهده على YouTube.

ما الذي بنيناه فعليًا

مُخرَجان اثنان، ومصدر حقيقة واحد.

مصدر الحقيقة هو قائمة لقطات (shot list): كل قسم مُقسَّم إلى Action (ما الذي يُنقَر أو يُكتَب)، وExpected UI (ما الذي ينبغي أن يظهر على الشاشة بعد ذلك)، وCapture (اسم لقطة الشاشة أو الفصل). عندما تتغيّر واجهة المنتج، تُعدِّل هذا الملف الواحد، وتعيد تصوير الأقسام المتأثرة فقط. يقرأ كلٌّ من الفيديو والدليل المكتوب منه، فلا يمكن أن يتباعدا. هذا القرار الواحد هو السبب في أن الفيديو والدليل لم يتحوّلا إلى عبئَي صيانة منفصلين.

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

فيلم وثائقي، لا فيلم رسوم متحركة

إليك النموذج الذهني الذي جعل كل شيء آخر يقع في مكانه. الشرح التعليمي للمنتج ليس قطعة motion graphics، بل هو تسجيل شاشة وثائقي ملفوف بطبقة رقيقة من الزينة التي تحمل هوية العلامة.

إعادة التأطير هذه مهمة لأنها تخبرك أين تصرف جهدك. في النهاية تُركَّب ثلاثة مسارات معًا:

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

لكل مسار خط إنتاجه الصغير الخاص، فاستطعت إعادة تصيير التعليق الصوتي دون إعادة التصوير، أو استبدال بطاقة عنوان دون إعادة المونتاج. إبقاؤها مستقلة هو ما جعل التكرار رخيصًا.

Claude شغّل المنتج الحيّ

وصلنا Claude Code بالمتصفح المفتوح أصلًا والمُسجَّل الدخول إليه أصلًا عبر إضافة Claude-in-Chrome. اخترت الإضافة بدل Playwright عن قصد: الجلسة كانت مسجَّلة الدخول بالفعل، فلم يكن هناك إعداد مصادقة أعتني به. استطاع Claude ببساطة أن يتصرّف على المنتج الحيّ.

وبينما كان يستكشف المنتج الحيّ، ناقرًا عبر كل شاشة ليرى أي الميزات مُفعَّلة فعلًا في نشرتنا، التقط لكل واحدة لقطة شاشة لمنطقة محددة بدقة ثابتة 1440×900 حتى يصطفّ كل شيء. كنا قد استقررنا على بنية من خمسة عشر قسمًا، وخرجت اثنتان وثلاثون صورة PNG مُعلَّقة مرقّمة بما يطابقها. من هذه اللقطات بُني الدليل المكتوب.

أما الفيديو نفسه، فقد قامت قائمة اللقطات تلك (ملف Markdown واحد، recording-script.md) بدور قائمة مهام Claude Code أيضًا. وجّهت Claude Code إليها فعمل صفًّا بصف: يقرأ كل Action، وينفّذ النقرة أو ضغطة المفتاح في المتصفح الحيّ عبر الإضافة، ويتحقق من النتيجة مقابل Expected UI، ثم ينتقل إلى الصف التالي. ملف Markdown بسيط بوصفه السيناريو، ومنتج حقيقي مُسجَّل الدخول إليه بوصفه بيئة التشغيل.

التعليق الصوتي أنجزه التحويل من نص إلى كلام (text-to-speech) من ElevenLabs. ثمانية عشر ملف MP3، واحد لكل قسم، نحو عشرين دقيقة إجمالًا، صُيِّرت من نص مكتوب ليُنطَق لا ليُقرأ (جُمل قصيرة، وعلامات ترقيم تؤدي دور ضبط الإيقاع). كلّف التصيير الكامل لنص من نحو 17,000 حرف نحو دولار واحد. وتصحيح جملة واحدة لاحقًا يكلّف سنتات.

10% تجعله يبدو احترافيًا

الزينة التي تحمل هوية العلامة خرجت من Claude Design: بطاقة مقدمة يدخل فيها الشعار، وخاتمة، وأربع عشرة بطاقة عناوين أقسام. هذا هو مسار الزينة، الجزء الذي يحوّل تسجيل شاشة كفؤًا إلى شيء يبدو مُنتَجًا عن قصد. بلا أداة motion graphics، وبلا مصمّم في العملية، مُولَّد مباشرةً وفق العلامة.

ما بقي في يديّ

شيئان، وسأذكرهما كليهما، لأن عبارة «Claude صنع الفيديو» تتجاوزهما بهدوء.

الأول كان الضغط على زر التسجيل. حاولت أتمتة حتى هذا، وخسرت. محاولة مبكرة شغّلت screencapture -v في الخلفية وتركت Claude يُجري الاستعراض بأكمله؛ فضاعت اللقطة، لأن تلك الأداة لا تكتب ملفها على القرص عندما تُنهيها عملية أخرى، فلم تُنتِج جولة نظيفة مدتها اثنتا عشرة دقيقة شيئًا. التقسيم الذي نجح: كل حركة على الشاشة من نصيب Claude، وزر التسجيل في OBS من نصيب إنسان. يسير Claude في السيناريو من أوله إلى آخره، وأنا أبدأ التسجيل وأوقفه. (هناك مستقبل أكثر أتمتة تُتحكَّم فيه OBS عبر واجهة websocket الخاصة بها بعلامات فصول مُسمّاة. يستحق ذلك يوم يصير هذا مُخرَجًا متكررًا. وهو ليس كذلك بعد.)

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

المونتاج الفعلي، والجزء الذي أنجزته بيدي. مسار الفيديو في الأعلى هو تسجيل الشاشة مُقطَّعًا إلى أقسام؛ والأشرطة الخضراء تحته هي ملفات التعليق الصوتي الثمانية عشر (section-01.mp3، section-02.mp3…)؛ والدبابيس الملوّنة هي علامات الفصول. محاذاة الأخضر مع الأزرق هي ما يلتهم الوقت.

النسخ النصي

نسخت نصيًا النسخة النهائية المُحرَّرة باستخدام whisper.cpp، لا تصديرًا صوتيًا منفصلًا، حتى تتطابق الطوابع الزمنية تمامًا مع الفيديو الذي تشير إليه الفصول. أنتج تشغيل واحد ترجمات SRT وVTT، ونصًا عاديًا، وJSON بتوقيت على مستوى الرمز (token)، بالإنجليزية والألمانية معًا، إضافةً إلى قائمة الفصول المكوَّنة من خمسة عشر بندًا التي تشغّل الفصول القابلة للنقر في المشغّل داخل التطبيق.

أين يعيش الآن

الفيديو، والنص المنسوخ، والفصول، والدليل المكتوب، كلها تظهر داخل MemodoAI. والدليل المكتوب نفسه صفحة HTML ثنائية اللغة قائمة بذاتها بناها Claude Design من مسودة Markdown نفسها ولقطات الشاشة نفسها: ملف واحد، بكل الأصول مُضمَّنة داخله، بالإنجليزية والألمانية.

الدليل المكتوب: الأقسام الخمسة عشر نفسها التي في الفيديو، صقلها Claude Design في صفحة واحدة قائمة بذاتها وثنائية اللغة (EN/DE).

يجتمع كل ذلك في صفحة واحدة داخل المنتج: الفيديو في المقدمة، وقائمة الفصول بجانبه، والترجمات والنص المنسوخ والدليل المكتوب على بُعد نقرة واحدة، كلٌّ منها بالإنجليزية أو الألمانية.

• A. قائمة الفصول. انقر أي بند للقفز إلى تلك النقطة في الفيديو.
• B. الترجمات. الإنجليزية والألمانية.
• C. النص المنسوخ الكامل. الإنجليزية والألمانية.
• D. الدليل المكتوب. الإنجليزية والألمانية.

قائمة اللقطات، ونص التعليق الصوتي، ولقطات الشاشة، وسكربتات الأدوات الصغيرة (مُصيِّر الـ TTS، وغلاف whisper)، كلها موجودة في المستودع إن أردت أن ترى الآلية الفعلية: docs/memodo-ai-tutorial على GitHub.

شخص واحد فعل كل هذا

تراجع عن الفيديو لحظة، لأنه يجلس فوق شيء أكبر بكثير.

قبل أن توجد أيٌّ من هذه المواد التعريفية، كنت قد بنيت MemodoAI نفسه: مساعد ذكاء اصطناعي داخلي مُحوسَب بـ Docker، مع تسجيل ومراقبة وقابلية للرصد (observability)، ومع أمان وكشف للبيانات الشخصية (PII) على البيانات الداخلة والخارجة، قادر على قراءة معظم مستندات Microsoft Office، وموصول ببيئة Microsoft 365 لدينا. ذلك هو المنتج الحقيقي. أما الشرح ذو الثماني عشرة دقيقة والدليل ثنائي اللغة، فهما ما ركّبته فوقه بعد أن صار يعمل.

شخص واحد فعل الأمرين. قبل بضع سنوات، تحتاج هذه الجملة إلى مهندس backend، وموظف DevOps، ومراجع أمان، وكاتب تقني، ومسجّل شاشة، ومؤدّي تعليق صوتي، ومصمّم motion. فعلتها بوصفي «جيشًا من رجل واحد»، لأن Claude اختزل معظم تلك الأدوار في: «قرّر ما الذي تريده، ثم افحص العمل».

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

كيف تصنع نسختك الخاصة

إن أردت أن تبني الشيء نفسه، فإليك خط الإنتاج كله، من البداية إلى النهاية.

1. استكشف المنتج حيًّا، والتقط لقطات الشاشة أثناء ذلك. صِل Claude Code بتطبيقك الحقيقي المُسجَّل الدخول إليه عبر إضافة Claude-in-Chrome، واجعله يمرّ معك على الواجهة كلها. استقرّ على بنية أقسام (أنا استخدمت خمسة عشر)، وفي المرور الحيّ نفسه التقط لكل شاشة لقطة لمنطقة محددة. من هذه اللقطات يُبنى الدليل المكتوب لاحقًا.
2. اكتب قائمة اللقطات (shot list). ملف واحد، صف لكل خطوة: الإجراء المطلوب، والواجهة التي تتوقعها بعده، والأصل المطلوب التقاطه (اسم لقطة شاشة أو عنوان فصل). هذا هو مصدر الحقيقة الوحيد الذي يُبقي الفيديو والدليل متزامنين.
3. اكتب نص التعليق الصوتي. مقطع لكل قسم، مكتوب ليُنطَق لا ليُقرأ: جُمل قصيرة، وعلامات ترقيم للإيقاع، وبلا «انقر هنا». ضَع علامة على إرشادات الإنتاج حتى لا تُقرأ بصوت عالٍ.
4. صيِّر التعليق الصوتي. أرسل النص إلى واجهة برمجية للتحويل من نص إلى كلام (text-to-speech) (أنا استخدمت ElevenLabs) لتحصل على ملف صوتي لكل قسم. تغيير سطر لاحقًا هو إعادة تصيير رخيصة.
5. سجّل الشاشة. اجعل Claude يقود المتصفح عبر قائمة اللقطات من البداية إلى النهاية بينما يشغّل إنسانٌ زر التسجيل في OBS. احصل على لقطة نظيفة واحدة؛ كل التجميع يحدث بعد ذلك.
6. اصنع الزينة التي تحمل هوية العلامة. ولّد بطاقة المقدمة، والخاتمة، وبطاقة عنوان لكل قسم في Claude Design، وفق علامتك. هذه هي الطبقة الرقيقة التي تجعل كل شيء يبدو مُنتَجًا.
7. حرّر الفيديو. في برنامج تحرير (أنا استخدمت Shotcut)، ضع تسجيل الشاشة على مسار والتعليق الصوتي على آخر، وضع بطاقة عنوان أمام كل قسم، وحرّك الصوت حتى يقع التعليق على الإجراء الذي يصفه.
8. انسخ نصيًا النسخة النهائية. مرّر الفيديو الجاهز عبر whisper.cpp للحصول على ترجمات، ونص منسوخ عادي، وقائمة فصول. كرّر ذلك للغة ثانية إن أردت واحدة.
9. اكتب الدليل واصقله. اكتب مسودة الاستعراض بصيغة Markdown اعتمادًا على لقطات الشاشة نفسها، ثم سلّم المسودة والصور إلى Claude Design لتصدير صفحة HTML قائمة بذاتها.
10. ضعه حيث يكون الناس أصلًا. ضع الفيديو والنص المنسوخ والفصول والدليل في مكان ينظر إليه مستخدموك أصلًا. بالنسبة لنا، هذا صفحة داخل المنتج نفسه.