الرسوم المتحركة Claude: كيفية إنشاء رسوم متحركة باستخدام Claude وشحنها إلى تطبيقك
كيفية إنشاء رسوم متحركة باستخدام Claude: Claude Design وClaude Motion والمصنوعات وClaude Code، وما يخرجه كل واحد منهم، وكيفية تحويل الرسوم المتحركة المصنوعة من Claude إلى تطبيق حقيقي.
الوجبات الجاهزة الأساسية
يمكنك إنشاء رسوم متحركة باستخدام Claude بثلاث طرق: Claude Design أو Claude Motion للإخراج المرئي، وعناصر Claude للعروض التوضيحية HTML وCSS وJavaScript، وكتابة كود الرسوم المتحركة Claude Code أو تشغيل أدوات أخرى عبر MCP. يمنحك كل واحد تصميمًا أو ملف فيديو أو رمزًا لا يزال يتعين عليك وضعه في منتجك. تحتاج الرسوم المتحركة التي يجب تشغيلها داخل تطبيق حقيقي إلى تنسيق يمكن للتطبيق تشغيله، لذلك يتم تسليم معظم الحركات المصنوعة في Claude إلى وقت التشغيل قبل شحنها.
حول هذا الدليل
ExodeUI لا ينتمي إلى Anthropic. Claude هي علامة تجارية لشركة Anthropic. يصف هذا الدليل ما يمكن أن تنتجه Claude للحركة، استنادًا إلى وثائق Anthropic الخاصة، وما يتطلبه الأمر للحصول على هذه الحركة في تطبيق تم شحنه.
طرق عمل رسوم متحركة باستخدام Claude
يمكن لـ Claude إنتاج الحركة في عدة أشكال مختلفة، وهي غير قابلة للتبديل. أي واحد تستخدمه يقرر ما ستحصل عليه ومقدار العمل المتبقي.
- Claude Design: قم بالدردشة مع Claude للحصول على تصميمات ونماذج أولية تفاعلية على لوحة قماشية. وهو مضمن في خطط Free وPro وMax وTeam وEnterprise، ويتم إغلاق الموقع المستقل على claude.ai/design في 14 ديسمبر 2026.
- Claude Motion: يحول مطالبتك وملفاتك إلى رسوم متحركة قصيرة، تم إنشاؤها كرمز يتم تشغيله مثل الفيديو ويتم تصديره كـ MP4. إنه في مرحلة تجريبية لخطتي Team وEnterprise، ولا يستخدم نموذج فيديو، لذلك لا يمكنه إنشاء لقطات واقعية أو أشخاص.
- عناصر Claude: HTML وCSS وJavaScript القابلة للتشغيل والتي يتم عرضها داخل المحادثة، وهي سريعة لعرض الحركة.
- Claude Code: يكتب كود الرسوم المتحركة في الريبو الخاص بك، أو يحرر الأدوات عبر MCP، بما في ذلك خادم ExodeUI MCP.
نصائح سريعة تنتج حركة أفضل
المطالبات الغامضة تحصل على حركة غامضة. يستجيب Claude للتفاصيل التي قد يطلبها مصمم الحركة على أي حال: الخاصية، والمبلغ، والتوقيت، والمشغل، والحالات. قم بتسميتها بدلاً من وصف الشعور.
قم بتسمية التخفيف والمدة
قل "ربيع مع ارتداد خفيف" أو "تخفيف أكثر من 200 مللي ثانية" بدلاً من "سلس". القيمة التي يمكن للنموذج استخدامها تغلب على الصفة.
قم بتسمية المشغل
قل ما يبدأ: "عند النقر" أو "عند التمرير" أو "عند انتهاء تحميل القائمة". يمكن ربط الحركة التي تحتوي على مشغل بحدث حقيقي لاحقًا.
قم بتسمية الولايات
قم بإدراجها، على سبيل المثال، "خامل، مضغوط، جاري التحميل، نجاح، خطأ"، حتى تحصل على آلة حالة صغيرة بدلاً من رسم متحرك واحد.
قم بتسمية المنصة والحدود
قل ما إذا كان الإخراج هو React أو SwiftUI أو عرض توضيحي على الويب، وما يجب ألا يفعله، على سبيل المثال "تحريك التحويل والتعتيم فقط".
لماذا الرسوم المتحركة التجريبية ليست جاهزة للإنتاج
يمكن لـ Claude إنتاج تعليمات برمجية للرسوم المتحركة تبدو صحيحة في المعاينة ولا تزال بحاجة إلى العمل قبل شحنها. الفجوة ليست الجودة، بل هي شكل الإخراج.
- وعادةً ما يكون رمزًا لمرة واحدة لشاشة واحدة، وليس مكونًا قابلاً لإعادة الاستخدام
- غالبًا ما يكون لها حالة واحدة ولا يوجد منطق للتحميل أو الخطأ أو التفاعلات المعطلة أو المتقطعة
- لقد تمت كتابته لمنصة واحدة، لذلك لن يتم تشغيل إصدار React على نظام التشغيل iOS دون إعادة كتابته
- التوقيت والتخفيف موجودان داخل الكود، لذلك لا يمكن للمصمم تغييرهما بدون مطور
- أي شيء يُراد إعادة استخدامه يحتاج إلى تنسيق ملف يمكن للتطبيق تشغيله، وليس مقتطفًا تم لصقه في مكون واحد
شحن الرسوم المتحركة التي تم إنشاؤها بواسطة Claude باستخدام خادم MCP الخاص بـ ExodeUI
ExodeUI عبارة عن أداة متصفح وسطح مكتب لواجهة المستخدم التفاعلية والرسوم المتحركة. توجد الرسوم المتحركة في ملف .exode مفتوح واحد يحتوي على التخطيط والجدول الزمني وأجهزة الحالة وفيزياء الربيع والمنطق. تعمل حزم وقت التشغيل على تشغيل هذا الملف في React وVue وSvelte وAngular وSolid وReact Native وSwiftUI وFlutter، بحيث يتم تشغيل نفس الرسوم المتحركة داخل التطبيق بدلاً من إعادة بنائها لكل نظام أساسي. يعرض ExodeUI خادم MCP مزودًا بأكثر من 100 أداة (الإنشاء، وتحريك، وإضافة المنطق والفيزياء، والمزامنة مع المحرر المباشر، والتصدير)، لذلك يمكن لعملاء Claude Code، وCursor، وOpenCode، وعملاء MCP الآخرين إنشاء الملف وتحريره من خلال المطالبات باللغة العادية. الإعداد موجود في المنتج، وليس في برنامج نصي، لذلك لا يوجد أمر لنسخه: قم بتشغيل MCP في إعدادات ExodeUI، ثم قم بتوصيل العميل الخاص بك بالطريقة التي تتصل بها بأي خادم MCP. نحن نصنع ExodeUI، لذا تحقق من البدائل أيضًا.
1. قم بتشغيل MCP في ExodeUI
في إعدادات ExodeUI، قم بتمكين خادم MCP. ينشر الأدوات التي يستخدمها عميل ترميز الذكاء الاصطناعي لإنشاء الملف وتحريره.
2. قم بتوصيل العميل الخاص بك
قم بتوجيه Claude Code أو Cursor أو OpenCode أو أي عميل MCP إلى خادم ExodeUI، بنفس الطريقة التي تتصل بها بخوادم MCP الأخرى.
3. وصف الحركة
اطلب الرسوم المتحركة بلغة واضحة. يقوم الوكيل بتحرير ملف .exode، ويظهر التغيير في محرر ExodeUI.
4. قم بشحن نفس الملف
قم بعرض ملف .exode خلال وقت تشغيل ExodeUI في React وSwiftUI وFlutter والمزيد، وقم بتوجيه مدخلاته وحالاته من التعليمات البرمجية الخاصة بك.
Claude Design مقابل Claude Code + ExodeUI
يبدأ كلا الطريقين بمطالبة وينتهيان بالحركة في منتجك. وهي تختلف فيما يحدث بينهما: يحتفظ Claude Design بالعمل في لوحة التصميم، بينما يحتفظ Claude Code بالإضافة إلى ExodeUI بالعمل في ملف يتم تشغيله.
ما تحصل عليه
Claude Design: تصميم أو نموذج أولي قابل للنقر، بالإضافة إلى حزمة تسليم لـ Claude Code. Claude Code + ExodeUI: ملف .exode يتم تشغيله كمكون.
حيث يتم تشغيل الرسوم المتحركة
Claude Design: في لوحة التصميم وفي النماذج الأولية المشتركة. Claude Code + ExodeUI: في التطبيق، على الويب، iOS وAndroid، يتفاعل مع المدخلات والبيانات.
التحرير بعد التسليم
Claude Design: قم بتغيير التصميم، ثم قم بتسليمه مرة أخرى. Claude Code + ExodeUI: يقوم المصمم بتحرير نفس الملف الذي يقوم التطبيق بتشغيله، بدون إعادة البناء.
حيث يفوز Claude Design
استكشاف العديد من التوجيهات المرئية، وتقديمها إلى أصحاب المصلحة، وإنتاج عمل ثابت أو نموذج أولي على أي خطة، بما في ذلك الخطة المجانية.
حيث يفوز ExodeUI
الحركة التي يجب أن يتم شحنها، مع الحالات والفيزياء والمدخلات، وإعادة استخدامها عبر الأنظمة الأساسية من ملف واحد.
مقتطف من تنفيذ الإنتاج
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}مفتاح Principle للتذكر
- تنتج Claude Design وClaude Motion عملاً مرئيًا، بينما تنتج Claude Code تعليمات برمجية، لكن لا يعد أي منهما وقت تشغيل
- يتم شحن الرسوم المتحركة فقط عندما تحتوي على تنسيق يمكن للتطبيق تشغيله ويتم توصيله بالحالات والمدخلات الحقيقية
- قم بتسمية التخفيف والمحفز والحالات في الموجه الخاص بك للحصول على الحركة التي يمكنك استخدامها بالفعل
- يتيح خادم MCP الخاص بـ ExodeUI لـ Claude Code إنشاء وتحرير ملف .exode واحد يتم تشغيله في React وSwiftUI وFlutter والمزيد