Applitools تربط Figma بالاختبارات البصرية لمراجعة واجهات أنشأها الذكاء الاصطناعي
قدّمت Applitools تكامل Figma Design Baselines الذي يحوّل إطارات Figma المعتمدة إلى مرجع بصري تقارن به الواجهة المنفذة تلقائياً. الهدف هو كشف الفروقات الدقيقة التي قد تتركها أدوات توليد الكود بالذكاء الاصطناعي، مثل تغيّر المحاذاة أو أحجام العناصر أو سلوك التصميم المتجاوب، قبل وصولها إلى الإنتاج.
أبرز النقاط
- تكامل Figma Design Baselines من Applitools يستخدم إطارات Figma كمرجع بصري لاختبار الواجهات المنفذة.
- التكامل يطابق حجم نافذة الاختبار مع أبعاد إطار Figma ثم يرصد الفروقات البصرية في التنفيذ.
- لا يحتاج المسار، وفقاً لـ Applitools، إلى إضافة Figma أو تصدير لقطات شاشة ورفعها يدوياً.
- توسيع Eyes MCP Server يتيح لوكلاء البرمجة فحص الاختبارات البصرية ومراجعتها والمساعدة في حل الفروقات من المحادثة.
- يدعم سير العمل المذكور أدوات مثل Claude Code وCursor وCopilot وCodex، مع ورود Cline أيضاً في إعلان الشركة.
- الاختبار البصري يكمل اختبار الوظائف: قد يعمل العنصر برمجياً لكنه لا يطابق التصميم المعتمد.
تستطيع أدوات الذكاء الاصطناعي اليوم إنشاء واجهات ويب عاملة خلال وقت قصير، لكن الواجهة التي تعمل برمجياً ليست بالضرورة الواجهة التي وافق عليها المصمم. فقد يكون الزر قابلاً للنقر لكنه في موضع خاطئ، أو يلتف العنوان على سطر مختلف، أو ينهار ترتيب العناصر عند عرض معين للشاشة.
لهذا أطلقت Applitools تكامل Figma Design Baselines، الذي يسمح للفرق باستخدام إطار من Figma مرجعاً بصرياً معتمداً، ثم مقارنة الواجهة التي تُنفذ فعلياً بهذا المرجع لاكتشاف الانحرافات البصرية تلقائياً.
من ملف التصميم إلى خط أساس للاختبار
يعتمد التكامل على رابط إطار Figma؛ إذ تقول Applitools إنه يطابق حجم نافذة الاختبار تلقائياً مع أبعاد الإطار الأصلي، ثم يقارن النتيجة المرئية للواجهة المنفذة بالتصميم عبر تقنية Visual AI الخاصة بها.
المقصود بخط الأساس البصري هنا هو الصورة أو التصميم المرجعي الذي يُفترض أن تبدو الواجهة مطابقة له. بدلاً من أن يفتح المصمم Figma والمتصفح جنباً إلى جنب لملاحظة الفروقات يدوياً، يمكن للاختبار رصد اختلافات مثل المسافات والأبعاد وترتيب العناصر ومظهر المكونات.
ووفقاً للشركة، لا يتطلب المسار الجديد إضافة داخل Figma أو تصدير لقطات شاشة يدوياً أو رفع صور مرجعية منفصلة.
ليس كل خلل بصري خللاً برمجياً
تزداد أهمية هذا النوع من الاختبارات مع أدوات توليد وتعديل كود الواجهات، مثل Claude Code وCursor وGitHub Copilot وCodex. هذه الأدوات قد تنتج كوداً صالحاً للعمل بسرعة، لكن السرعة لا تضمن التطابق مع التصميم.
الفارق مهم: اختبار الوظائف يجيب عن سؤال مثل «هل يعمل الزر؟»، بينما الاختبار البصري يضيف سؤالاً آخر: «هل يظهر الزر في المكان والحجم والشكل اللذين حددهما التصميم؟».
وهنا يتحول Figma من ملف تسليم بين المصمم والمطور إلى مواصفة بصرية يمكن التحقق منها تلقائياً بعد تنفيذ الواجهة.
إعطاء وكيل البرمجة تفاصيل الفرق
يتضمن إصدار Applitools الصادر في 15 سبتمبر توسيعاً لخادم Eyes MCP Server، الذي يربط نظام الاختبارات البصرية بوكلاء البرمجة المعتمدين على الذكاء الاصطناعي.
كان الوكيل قادراً سابقاً على إضافة اختبارات بصرية من خلال المحادثة. أما الأدوات الجديدة فتتيح له، بحسب Applitools، فحص الاختبارات ومراجعتها والمساعدة في حلها أيضاً. ويمكن للنظام تزويده بمعلومات دقيقة عن الفروقات البصرية، إلى جانب سياق من DOM، وهي البنية التي يمثل بها المتصفح عناصر الصفحة.
بذلك يستطيع الوكيل البحث في سبب التغير داخل الواجهة دون الانتقال بالضرورة إلى لوحة اختبار منفصلة. كما يمكنه قبول الخطوط المرجعية البصرية أو رفضها أو استثناء مناطق منها من المقارنة مباشرة من المحادثة.
وتذكر الشركة دعم سير عمل يشمل Claude Code وCursor وCopilot وCodex، كما ورد اسم Cline في إعلانها الصادر في 15 سبتمبر.
حلقة مراجعة أوضح للواجهات
المسار الذي تقترحه Applitools يمكن تلخيصه كالتالي:
- يحدد المصمم الواجهة المعتمدة في Figma.
- يُنشئ المطور أو وكيل الذكاء الاصطناعي الواجهة في الكود.
- تُعرض الواجهة في المتصفح ضمن الاختبار.
- تقارن Applitools النتيجة بتصميم Figma وتحدد الفروقات.
- يستخدم وكيل البرمجة معلومات الفرق للتحقيق أو المعالجة.
وتقول Applitools إن منصتها تجري التحقق البصري عبر متصفحات وأجهزة وأنظمة تشغيل مختلفة. ومع ربط الاختبار مباشرة بتصميم Figma، يصبح السؤال العملي ليس فقط ما إذا كان الذكاء الاصطناعي أنشأ كوداً يعمل، بل ما إذا كانت الواجهة التي يراها المستخدم ما زالت تطابق ما اعتُمد في التصميم.
في بيئات التطوير المدعومة بالذكاء الاصطناعي، قد تصبح قيمة ملف Figma أكبر لا أقل: فهو لا يصف النتيجة المرغوبة فحسب، بل يمكن أن يصبح المرجع الذي يضبط جودة التنفيذ البصري آلياً.
لماذا يهم؟
مع تسارع توليد كود الواجهات بالذكاء الاصطناعي، تصبح مراجعة التطابق البصري عنق زجاجة محتمل. ربط Figma بالاختبارات البصرية يمنح الفرق مرجعاً معتمداً لاكتشاف تغيّر التخطيط أو المكونات مبكراً، ويجعل التصميم جزءاً مباشراً من التحقق الآلي للجودة.