ضياء البوزانTech
◈ الدليل العملي خطوة بخطوة

Claude Code الان بيعملك Motion Graphics كامل، وانت بس بتحكي شو بدك

السر مهارة اسمها Remotion. بتتركب جواته بأمر واحد. ما في Timeline ولا Keyframes — بس بتوصف الفكرة بالكلام.

1
أمر للتركيب
7
خطوات
0
برامج تصميم
01

ليش هالدليل يهمكWhy this matters

بدك فيديو ترويجي؟ انترو لقناتك؟ بيبنيلك اياه من الصفر.

وأقوى اشي: أي تعديل بالدردشة بس. الألوان، التوقيت، النصوص، الحركة. بيتغير قدامك بثواني.

يعني Motion Design بدون ما تتعلم ولا برنامج.

02

قبل ما تبلّش: اللي بتحتاجهPrerequisites

  • 1
    Node.js مثبت على جهازك (نسخة 18 أو أحدث)
  • 2
    Claude Code مثبت وفعّال — بحتاج اشتراك Claude مدفوع
  • 3
    محرر أكواد مثل VS Code (اختياري بس بيسهّل عليك)
  • 4
    تعرف تفتح الترمنال وتكتب أمر — بس هيك

نصيحة: ما بتحتاج تعرف React ولا After Effects ولا أي برنامج تصميم. شغلتك الوحيدة إنك تعرف شو بدك وتوصفه بالكلام.

03

الخطواتStep by step

1

أنشئ مشروع Remotion جديد

افتح الترمنال بالمجلد اللي بدك تشتغل فيه وشغّل:

terminal
npm create video@latest

رح يسألك كم سؤال — اختر: القالب Blank · TailwindCSS نعم. وأول ما يخلّص، بيسألك إذا بدك تضيف الـ Agent Skills — اضغط نعم.

الـ Skills هي الأهم — هي اللي بتعلّم Claude Code أفضل طريقة يشتغل فيها بـ Remotion.

2

ركّب الـ Remotion Skills (لو ما ركّبتها بالإنشاء)

لو تخطّيت الخيار فوق، ادخل مجلد المشروع وشغّل هالأمر — بيركّب الـ Skills الرسمية من Remotion:

terminal
npx skills add remotion-dev/skills

بعد التركيب بيصير عند Claude Code أوامر جاهزة مثل /remotion-create و /remotion-markup — بتعطيه خبرة Remotion كاملة.

3

ادخل على مجلد المشروع

terminal
cd my-video

بدّل my-video باسم المشروع اللي اخترته.

4

شغّل استوديو Remotion

terminal
npm run dev

رح يفتح Remotion Studio بالمتصفح. كل فيديو بتعمله بيظهر كـ composition بالقائمة الجانبية — بتعاينه وتعدّله وترندره من هون.

5

افتح Claude Code بنفس المجلد

افتح تبويب ترمنال جديد (خلّي الأول شغال) واكتب:

terminal
claude

تأكد إنك جوا مجلد المشروع عشان يشوف ملفات Remotion ويقدر يعدّل عليها.

6

اطلب الفيديو بالكلام

اكتب وصف واضح لللي بدك اياه. مثال:

claude prompt
اعملي فيديو 5 ثواني، خلفية سوداء، نص "ضياء البوزان | Tech" بيظهر بحركة scale ناعمة، وبعدين بينزل خط ملون تحته

رح يكتب الكود ويضيفه كـ composition جديد — ارجع على Remotion Studio بتلاقيه جاهز.

7

عدّل بالدردشة لحد ما يعجبك

ما بتفتح أي timeline. بس بتكتب اللي بدك تغيّره:

claude prompt
خلي اللون كهرماني بدل الأزرق، وسرّع الحركة نص ثانية، وزيد الفيديو لـ 8 ثواني

كرر لحد ما توصل للنتيجة، وبعدها ارندر من زر Render داخل Remotion Studio.

04

نصائح تخليك تطلع نتيجة احترافيةPro tips

ابدأ ببسيط

نصوص متحركة، بار شارت، لوجو بيظهر — هاي بتطلع ممتازة من أول محاولة.

كن دقيق بالوصف

احكي المدة واللون ونوع الحركة والاتجاه. الوصف الغامض بيعطي نتيجة غامضة.

اعمل مجلد Inspiration

احفظ فيه أي موشن جرافيك عاجبك، وارفقه كمرجع.

عدّل خطوة خطوة

طلب تعديل واحد بكل رسالة أفضل من خمس تعديلات مرة وحدة.

05

أخطاء بتوقع فيها بالبدايةCommon mistakes

ترمنال بمجلد غلط

تشغيل claude من مجلد غلط — لازم تكون جوا مجلد المشروع.

تخطّي الـ Skills

تخطّي خيار تثبيت الـ Skills وقت الإنشاء — بدونه ما رح يشتغل صح مع Remotion.

مشاهد معقدة من البداية

طلب مشاهد معقدة من أول مرة (أسهم كثيرة، رسومات يدوية) — هاي أصعب اشي عليه.

إغلاق الترمنال

إغلاق ترمنال npm run dev — لازم يضل شغال عشان تشوف المعاينة.

06

أسئلة شائعةFAQ

؟بحتاج أعرف برمجة؟

لأ. Claude Code هو اللي بيكتب الكود. انت بس بتوصف اللي بدك اياه بالكلام.

؟بشتغل على ويندوز؟

أي، بيشتغل على ويندوز وماك ولينكس طالما Node.js و Claude Code مثبتين.

؟بحتاج اشتراك مدفوع؟

Claude Code بحتاج اشتراك Claude مدفوع. Remotion مجاني للاستخدام الشخصي، وللشركات في ترخيص لازم تتحقق منه.

؟كيف بطلّع الفيديو ملف نهائي؟

من زر Render داخل Remotion Studio، أو اطلب من Claude Code يعطيك أمر الرندر من الترمنال.