حفلة الكاكابو: هكذا بنى سايمون ويليسون شريحة ختامية للعرض بمساعدة Claude وPlaywright

بنى سايمون ويليسون الشريحة الختامية لخطابه في مؤتمر WeAreDevelopers World Congress North America بمساعدة الذكاء الاصطناعي، ووثّق العملية كاملة في تدوينة نشرها في 26 سبتمبر 2026. وقد شارك فيها الأمر الذي استخدمه والكود أيضاً.

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

من ثلاث صور إلى HTML5 canvas

جمع ويليسون ثلاث صور لكاكابو من بحث صور Google وأرسلها إلى Claude مع مهمة قصيرة: إنشاء رسوم متحركة لحفلة كاكابو بكسلي على HTML5 canvas، تقفز فيها الطيور وتتساقط قصاصات الاحتفال، وبعدد لا يقل عن 20 طائراً. نص المحادثة منشور، والنتيجة تعمل كصفحة مستقلة على العنوان tools.simonwillison.net/kakapo-party، حيث يؤدي النقر إلى تشغيل تأثير القصاصات.

Claude Code يسجّل الفيديو عبر Playwright

لم يكن ممكناً تضمين الرسم المتحرك في العرض كصفحة ويب، لذلك نزّل ويليسون ملف HTML وأعطى جلسة Claude Code محلية ثلاثة شروط: فتح الملف في المتصفح، والنقر عدة مرات لتشغيل تأثير القصاصات، وتسجيل فيديو مدته 15 ثانية. كان النقر ممنوعاً خلال الثواني الثلاث الأولى، وكان يجب توزيع النقرات على منطقة النقر. استخدم Claude Code مكتبة أتمتة المتصفح Playwright وأنتج الفيديو المطلوب تماماً للشريحة الختامية.

جاء النص البرمجي قصيراً: يفتح نافذة بأبعاد 1280×720 مع تسجيل الفيديو، وينتظر حتى الثانية الثالثة، ثم ينفذ عشر نقرات بين الثانية 3.0 والثانية 13.2 في وسط canvas وزواياه وحوافه، ويغلق الجلسة عند الثانية 16. ونشر ويليسون في التدوينة نص المحادثة والنص البرمجي كاملاً.

ماذا يوضح هذا الأسلوب

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