الكود الخاص بك، هو يستطيع 'رؤيته': تحليل متعمق لقدرات الترميز المرئي (Visual Coding) في Kimi k2.5
في المقالة السابقة، ناقشنا كيف أصبح OpenClaw و Kimi k2.5 "شراكة قوية". كان العديد من القراء مهتمين جدًا بالميزة الأساسية "الترميز المرئي" (Visual Coding) في Kimi k2.5.
"كتابة الكود من الصور" ليس أمرًا جديدًا تمامًا؛ ChatGPT و Claude يقومان بذلك منذ فترة. إذن، ما نوع "السحر الأسود" الذي ابتكرته Moonshot AI هذه المرة لتجعل المطورين يهتفون بأن "مطوري الواجهة الأمامية (Frontend) سيصبحون عاطلين عن العمل"؟ اليوم، نكشف التفاصيل التقنية.
ما هو "الترميز المرئي الأصلي" (Native Visual Coding)؟
يكمن أكبر اختراق تقني لـ Kimi k2.5 في كونه "أصليًا" (Native).
كيف كانت نماذج الذكاء الاصطناعي السابقة ترى الصور؟
معظم النماذج متعددة الوسائط "مخيطة معًا": لديها عين مخصصة لرؤية الصور (مشفّر بصري) ودماغ مخصص للتفكير (نموذج لغوي). عندما تكتب كودًا من صورة، يقوم الذكاء الاصطناعي فعليًا بـ "ترجمة" الصورة إلى وصف نصي ثم يكتب الكود بناءً على هذا الوصف. في هذه العملية، غالبًا ما تضيع العديد من التفاصيل — مثل الظلال الدقيقة، وإيقاع الرسوم المتحركة، ونسب التخطيط الدقيقة.
كيف يرى Kimi k2.5 الصور؟
يعتمد Kimi k2.5 بنية متعددة الوسائط أصلية (Native Multimodal Architecture). تتضمن بيانات التدريب الخاصة به 15 تريليون رمز ممزوج بين النص والصورة. وهذا يعني بالنسبة له، أن بكسلات الصورة هي تمامًا مثل أحرف الكود — جزء من لغته الأم. لا يحتاج إلى "ترجمة" الصورة؛ يمكنه "قراءة" التصميم المرئي مباشرة.
تجلب هذه البنية قفزة نوعية:
- الدقة: يمكنه تحديد فرق في الحدود بمقدار 2 بكسل في تصميمك.
- الديناميكية: يمكنه فهم تدفق الوقت في مقاطع الفيديو، وبالتالي تكرار تأثيرات الرسوم المتحركة (animation) بشكل مثالي.
ثلاثة سيناريوهات تطبيق رئيسية
1. من الفيديو إلى الكود (Video-to-Code): الكأس المقدسة لتكرار التفاعل
هذه هي الميزة الأكثر إثارة للذهول في Kimi k2.5. لم تعد بحاجة للمعاناة لوصف "أريد تأثير تلاشي للداخل/الخارج بعد النقر"؛ ما عليك سوى:
- تسجيل الشاشة: سجل تفاعل موقع ويب أو رسمًا متحركًا لتطبيق يعجبك.
- التغذية: قم برمي الفيديو في Kimi k2.5.
- التوليد: سيقوم بتحليل تغييرات واجهة المستخدم إطارًا تلو الآخر ويولد كودًا مباشرًا يحتوي على رسوم متحركة CSS ومنطق تفاعل JS متطابقين.
حالة واقعية: قام مطور بتسجيل صفحة ويب معقدة تحتوي على تمرير المنظر (Parallax Scrolling). لم يقم Kimi k2.5 باستعادة التخطيط فحسب، بل قام أيضًا بتكرار الجدول الزمني للرسوم المتحركة التي يتم تشغيلها بواسطة التمرير بدقة، وحتى ضبط معلمات دالة التسارع (Easing Function) بشكل شبه مثالي.
📺 فيديو توضيحي: New Kimi K2.5: Build and Automate ANYTHING!
أبرز النقاط: يوضح هذا الفيديو الميزة الأكثر إثارة للدهشة — من تسجيل الشاشة إلى الكود. قام المنشئ بتسجيل موقع ويب يحتوي على رسوم متحركة معقدة لتمرير المنظر، ثم قام بتغذية الفيديو لـ Kimi، الذي قام بتكرار تأثير التفاعل بالكامل بشكل شبه مثالي.
المحتوى أدناه مشارك علنًا من قبل منشئي YouTube وهو لغرض العرض التقني والتعليمي فقط. حقوق الطبع والنشر للفيديو تعود للمؤلف الأصلي. إذا رغب مالك الفيديو في إزالة الرابط، يرجى الاتصال بنا وسنتعامل مع الأمر فورًا.
2. التصحيح المرئي المستقل (Autonomous Visual Debugging)
ما هو الجزء الأكثر إيلامًا في كتابة كود الواجهة الأمامية؟ إنه "تعديل الكود -> تحديث المتصفح -> رؤية أنه غير محاذاة -> تعديل الكود مرة أخرى". يقدم Kimi k2.5 قدرات تصحيح مرئي مغلق الحلقة (Closed-Loop Visual Debugging):
- بعد توليد الكود، سيقوم بـ "تصيير" (render) النتيجة بنفسه.
- سيقوم بإجراء مقارنة على مستوى البكسل بين النتيجة المصيَّرة والتصميم الأصلي الذي قدمته.
- إذا وجد تناقضات (على سبيل المثال، زر مزاح 5 بكسل إلى اليسار)، سيقوم بتعديل الكود تلقائيًا حتى يصبح التأثير المرئي متسقًا تمامًا.
لا تتطلب العملية برمتها أي تدخل منك؛ إنه مثل مصمم يعاني من اضطراب الوسواس القهري (OCD) ولن يتوقف حتى يصبح الأمر مثاليًا.
3. من الرسم التخطيطي إلى تطبيق كامل الوظائف
ليس فقط الصفحات الثابتة، يمكن لـ Kimi k2.5 فهم التدفق المنطقي لتطبيق كامل.
- أعطه رسمًا تخطيطيًا على سبورة بيضاء مليئة بخطوط الاتصال ويمكنه التعرف على "هذه صفحة تسجيل الدخول، متصلة بالصفحة الرئيسية، انقر هنا لظهور نافذة منبثقة".
- يمكنه توليد كود مشروع واجهة أمامية كامل مباشرة، بما في ذلك التوجيه (routing)، وإدارة الحالة (state management)، وحتى محاكاة واجهة الخلفية.
- هناك حالات تظهر كيف يحل المتاهات المرئية المعقدة ويكتب عرضًا توضيحيًا لخوارزمية BFS (البحث بالعرض أولاً) مرئية، مما يثبت أنه لا يقوم فقط بـ "تقليد" الصور بل يقوم بـ استنتاج مرئي حقيقي.
لماذا هذا مهم؟
الترميز المرئي لـ Kimi k2.5 لا يجعل البرمجة أسرع فحسب؛ بل يخفض عتبة "تواصل النوايا".
في الماضي، كان عليك معرفة المصطلحات المهنية (Margin, Padding, Flexbox) لتوجيه الذكاء الاصطناعي لتعديل التخطيطات. الآن، ما عليك سوى وضع دائرة حول مكان في الصورة والقول "هذا ليس صحيحًا، حركه كما في الفيديو"، وسيفهم. هذا يمنح مديري المنتجات والمصممين وحتى المستخدمين العاديين القدرة على بناء نماذج أولية عالية الدقة مباشرة لأول مرة.
تسمي Moonshot AI هذه التجربة "Vibe Coding" (ترميز الأجواء) — أنت تدير الأجواء (vibe) فقط، وتترك العمل القذر لـ Kimi.
هل تريد تجربته بنفسك؟ Kimi k2.5 متاح الآن على منصات OpenClaw و Fireworks AI، ويدعم استدعاءات API. جهز تصميماتك وتسجيلات الشاشة الخاصة بك وتحدَّ حدوده.