تعد منصة Presenta Design، التي طورها فريق Craftwork، استوديو لإنشاء نماذج الأجهزة ثلاثية الأبعاد ومقاطع الفيديو الترويجية للمنتجات دون الحاجة إلى إنشاء حساب، حيث تعالج كافة الملفات المرئية مباشرة من جانب العميل باستخدام Three.js وWebGL وHTML5 Canvas دون رفع البيانات إلى خوادم سحابية. بالإضافة إلى تصدير صور PNG أو JPG أو WebP الثابتة، تتيح المنصة إنتاج مقاطع فيديو WebM عبر مخطط زمني مدمج للكاميرا، وتوفر خادم Playwright MCP محلياً لوكلاء الذكاء الاصطناعي مثل Claude Code وCursor، مما يربط إنتاج النماذج بأوامر سطر الأوامر (CLI).
ملخص هندسي
على عكس أدوات النماذج السحابية التقليدية، تتجاوز Presenta Design طوابير المعالجة من جانب الخادم تماماً. تتم معالجة لقطات الشاشة مباشرة في ذاكرة GPU للمتصفح. وتُحسب التحويلات ثلاثية الأبعاد عبر مصفوفات Three.js، بينما تُرمّز حركات الكاميرا مثل Orbit Right وPunch In وSlow Zoom Out وScan Left to Right مباشرة إلى صيغة WebM داخل المتصفح. والأهم من ذلك، توفر المنصة خادم MCP محلياً مستنداً إلى Playwright (presenta-mcp.mjs) لتمكين وكلاء الذكاء الاصطناعي من بناء نماذج 3D عبر متصفح Headless.
لماذا لفتت انتباهنا؟ دراسة حالة في الإنتاج الفعلي
يواجه مهندسو المنتجات وفرق التسويق عائقين عند استعراض تطبيقات الويب: إعداد إطارات الأجهزة ثلاثية الأبعاد داخل أدوات التصميم مثل Figma يستغرق وقتاً طويلاً، بينما تتطلب مقاطع الفيديو الترويجية برامج مونتاج معقدة مثل After Effects أو Premiere. كما أن معظم الحلول السحابية ترفع الصور إلى خوادم خارجية مسببة مخاوف تتعلق بالخصوصية والبطء. ومثلما أوضحنا في مراجعتنا لمنصة Shots.so، فإن المعالجة من جانب العميل تقدم بديلاً هندسياً قوياً، وتأتي Presenta Design لترتقي بهذا المعيار.
تعمل أداة Presenta فور فتحها في المتصفح دون الحاجة إلى تسجيل. يمكن للمصممين سحب مكونات من أنظمة تصميم UI/UX للشركات وإسقاطها على مساحة العمل لعرضها فوراً على أجهزة ثلاثية الأبعاد، وتعديل زوايا الظلال، وتصدير مقاطع فيديو WebM متحركة في ثوانٍ. أما الخطوة الأكثر ابتكاراً فهي إطلاق وحدة بروتوكول سياق النموذج (MCP) المعتمدة على Playwright لأدوات الذكاء الاصطناعي مثل Claude Code وCodex CLI وCursor.
تحت الغطاء: البنية الهندسية والتفاعل والتقنيات البرمجية
ترتكز بنية Presenta على ثلاث طبقات هندسية رئيسية: محرك تصيير WebGL، ومُرمّز الفيديو بالإطارات الرئيسية (Keyframes)، وطبقة الأتمتة المحلية Headless.
- مشهد WebGL / Three.js داخل المتصفح: تُحوّل لقطات الشاشة المرفوعة إلى عناوين Blob محلية وتُسقط كإكساءات (Textures) على مجسمات Three.js. تُعد هياكل الأجهزة (iPhone وMacBook وiPad والشاشات) نماذج 3D منخفضة المضلعات وعالية التحسين؛ وتُحسب الانعكاسات والظلال في الوقت الفعلي مع تسريع العتاد عبر سياق WebGL.
- المخطط الزمني للكاميرا وتصدير WebM: لا تقتصر المنصة على الصور الثابتة، بل تقدم مسارات كاميرا جاهزة مثل Orbit Right وPunch In وSlow Zoom Out وScan Left to Right. وخلال مدة الحركة، يتم استيفاء مصفوفات كاميرا Three.js وتلتقط إطارات HTML5 Canvas عبر واجهة برمجة تطبيقات MediaRecorder لتتحول محلياً إلى فيديو WebM عالي الجودة.
- ميزة AI Site Shots وخادم Playwright MCP: بدلاً من مفاتيح واجهة برمجة التطبيقات السحابية، توفر Presenta نص Node.js محلياً (https://presenta.design/agents/presenta-mcp.mjs). يمكن للمطورين ربطه مع Claude Code أو Cursor باستخدام الأمر:
. يقوم خادم MCP بفتح جلسة Chromium في الخلفية عبر Playwright، ويلتقط الشاشة للرابط المحدد، ويحقنها في Presenta، ثم يحفظ نموذج 3D الناتج على القرص المحلي.claude mcp add --scope user presenta -- node ~/.presenta/presenta-mcp.mjs - التحقق من الأداء: يمكن للفرق التي تسعى لتحسين سرعة تحميل الصفحات والتقاطها فحص أحمال مواقعهم عبر محلل السرعة لضمان التقاط أسرع عبر Playwright MCP.
| المعيار التقني | بنية Presenta Design | أدوات النماذج السحابية التقليدية |
|---|---|---|
| أمان البيانات | صفر نقل للخوادم؛ معالجة محلية في ذاكرة Blob وWebGL | تُرفع لقطات الشاشة وتُعالج على خوادم سحابية |
| إنتاج الفيديو | تصيير WebM داخلي باستيفاء حركة الكاميرا (Keyframes) | يقتصر غالباً على تصدير صور PNG أو ملفات GIF |
| تكامل الوكلاء | خادم MCP محلي رسمي مستند إلى Playwright (presenta-mcp.mjs) | واجهات REST API محدودة أو خطافات ويب خارجية |
| نموذج الاشتراك | مجاني بالكامل بدون تسجيل وبدون علامات مائية | تسجيل إجباري وقيود باقات مجانية مقيدة |
| الحد الأدنى للشاشة | عرض مكتبي 1200 بكسل (تُقفل مساحة العمل في الشاشات الضيقة) | واجهات متجاوبة أو مقيدة للهواتف المحمولة |
متى يُنصح باستخدامها ومتى يجب تجنبها؟
توفر Presenta Design سرعة استثنائية في سيناريوهات محددة، إلا أن بنيتها تفرض قيوداً يجب مراعاتها:
- سيناريوهات الاستخدام الموصى بها: إنتاج مقاطع فيديو تشويقية لإطلاق البرمجيات بسرعة، وإضافة نماذج 3D للأجهزة في سجلات التغييرات (Changelogs)، وأتمتة لقطات شاشة التوثيق عبر خطوط CI/CD أو وكلاء الذكاء الاصطناعي (Claude Code وما شابهه).
- سيناريوهات يجب تجنبها: العمل عبر شاشات يقل عرضها عن 1200 بكسل أو الأجهزة المحمولة (تتوقف الأداة وتظهر رسالة 'Presenta needs a wider screen'). أو البيئات التي تتطلب حصرياً ملفات MP4 دون تحويل خارجي عبر ffmpeg.
ملاحظة هندسية من Kling Digital
وفقاً للمعايير التقنية لفريق Kling Digital، فإن الميزة الأقوى في Presenta هي خادم Playwright MCP المحلي. إن ربط هذا الخادم مع خطوط CI/CD أو طرفية Cursor/Claude يتيح توليد نماذج 3D تلقائياً لكل تحديث برمجي، مما يبقي توثيق المستودعات محدثاً دون أي تدخل بشري يدوي.
