أطلقت Cursor وضع التصميم: عدّل واجهة المستخدم بالنقرات والرسومات، والوكيل يعدّل الكود

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

أربع طرق لإعطاء الوكيل المهمة

تقدّم Cursor عدة طرق حدسية لإظهار الوكيل التغييرات المطلوبة:

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

تحت الغطاء، يرسل النظام للوكيل مجموعتين من المعلومات. الأولى — البيانات التقنية للعنصر: مساره XPath، اسم المكون، سمات HTML، أنماط CSS المحسوبة وبيانات من شجرة مكونات React/Vue. الثانية — لقطة شاشة للصفحة في اللحظة التي أعطيت فيها الأمر. معاً يعطيان الوكيل السياق الكامل للتعديل الخالي من الأخطاء.

لماذا يسرّع هذا التطوير

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

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

الفكرة الرئيسية — يجب أن يكون النموذج ذكياً وسريعاً. إذا قضى الوكيل نصف دقيقة في التفكير في المهمة، ستفقد التركيز. يعطي Composer 2.5 إجابة فوراً تقريباً، مما يسمح لك بالحفاظ على إيقاع العمل.

ما الذي يعنيه هذا بالنسبة للواجهة الأمامية

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

«مستقبل التطوير هو القدرة على التنقل بين مستويات التجريد العالية والتفاصيل منخفضة المستوى دون فقدان حالة التدفق»، — نهج

Cursor لوضع التصميم.

بالنسبة للعمل، هذا يعني أنه يمكن حل مهام الواجهة بشكل أسرع وأرخص، خاصة بالنسبة للتعديلات التكرارية واختبار A/B. يمكن للمطور التركيز على البنية، بينما تذهب CSS والترميز الروتيني للوكيل.

ما يعنيه هذا

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