رئيس التصميم في X يطلق stageshow مفتوح المصدر: وكيل يرسم عروض الواجهات ويحركها

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

ما هي ولماذا

تعلّم stageshow الوكيل صنع faux UI، أي واجهات «غير حقيقية». هي عروض جميلة للمنتج تُستخدم في صفحات الهبوط ومقاطع الترويج والإنفوغرافيك. لا حاجة إلى تطبيق حقيقي: الوكيل يرسم الشاشة بنفسه ويحركها بنفسه. وبحسب المؤلف، صُنعت أمثلة المنشور دون تسجيل للشاشة. كل ذلك رسمه الوكيل وأحياه.

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

كيف تعمل من الداخل

قيمة المهارة الأساسية في العملية لا في الصور الجميلة. يمرّ الوكيل بسبع خطوات.

1. اختيار الصيغة: ثابتة أو متحركة، حلقة متكررة أو تشغيل واحد، والأبعاد.
2. اختيار المظهر: فاتح أو داكن أو blueprint أو glass، إضافة إلى chrome الحقيقي وأيقونات المنتج.
3. ابتكار حبكة من 3 إلى 5 مشاهد.
4. أخذ أقرب مثال مرجعي وتكييفه.
5. بناء الشاشة: بضعة أسطر حقيقية والباقي عناصر نائبة.
6. ضبط الحركة بحيث تتداخل المشاهد وتدور الحلقة دون فواصل ظاهرة.
7. تسجيل العرض بواسطة سكربت، ومراجعة كل إطار، والتحقق من عرض الهاتف، وتصحيح الأخطاء.

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

ماذا تستطيع أيضًا

قائمة الإمكانات عملية إلى حد كبير. ترسم المهارة نوافذ المتصفح والتطبيقات والهواتف، وتدعم أسلوب macOS 26. وهناك عدة أنواع من المؤشر: يعثر على العناصر بأسمائها ويغير شكله عند التمرير فوقها. وهناك كاميرا تقرّب الجزء المطلوب، إضافة إلى التعليقات التوضيحية وشبكات bento. ومن الأمثلة أساليب Linear وSlack وFigma وNotion ومنتجات أخرى.

ويستحق التعامل مع السمات إشارة خاصة. تُمرَّر رموز (tokens) نظام التصميم لديك عبر props: يُكتب المشهد مرة واحدة وتتولى السمة تغيير الألوان. وهذا يعني للفريق أن السيناريو الواحد يمكن إصداره بألوان العلامة التجارية، وبنسخة داكنة، وبنسخ لشرائح مختلفة، دون إعادة عمل الحركة.

كيف تجربها

يتم التثبيت بأمر واحد:

npx skills add benjitaylor/skills --skill stageshow

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

القيود والخلاصة

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

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