SevenTnewS

تفاعل بصري مع الذكاء الاصطناعي

Cursor يمنح المطورين طريقة أكثر ذكاءً لإخبار الذكاء الاصطناعي بما يجب إصلاحه: الإشارة إليه

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

Emmanuel Fabrice Omgbwa Yasse

2026-07-12 · قراءة 4 دقائق

Cursor يمنح المطورين طريقة أكثر ذكاءً لإخبار الذكاء الاصطناعي بما يجب إصلاحه: الإشارة إليه

قام Cursor بتحديث وضع التصميم (Design Mode) الخاص به بأدوات تفاعل بصري تتيح للمطورين الإشارة أو الرسم أو التحدث بالتعديلات مباشرة على عرض المتصفح الحي لمنتجهم. يهدف التحديث إلى تقليل الاحتكاك بين ما يراه الإنسان على الشاشة وما يفهمه وكيل الذكاء الاصطناعي حول الكود الأساسي. vibe-coding-works-but-the-technical-debt-nobody-talks-about-could-sink-your-project

من الدردشة إلى الحوار المكاني

لا تزال الدردشة هي الواجهة السائدة لوكلاء ترميز الذكاء الاصطناعي، لكن العمل التصميمي هو عمل مكاني. يتواصل المصممون ومديرو المنتجات ومطورو الواجهة الأمامية من خلال التعليقات التوضيحية: الإشارة إلى عناصر أو مناطق أو حالات صفحة محددة. يقوم وضع التصميم من Cursor بإضفاء الطابع الرسمي على هذا الأمر. فبدلاً من وصف التغيير باستخدام النص فقط، يحدد المستخدم الهدف البصري على الصفحة، ويستخرج الوكيل سياق الكود المقابل تلقائيًا. microsofts-bet-on-small-models-for-agentic-ai-is-about-orchestration-not-knowledge

عندما يحدد المستخدم عنصرًا ما، يتلقى الوكيل إشارتين: هوية العنصر، ومسار xpath، واسم المكون، والسمات، والأنماط المحسوبة، وخصائص شجرة الألياف (fiber tree props)، ولقطة شاشة للسياق المكاني والتخطيط والعناصر المحيطة وحالة الصفحة الدقيقة. يستخدم الوكيل هذه الإشارات للعثور على المصدر وتطبيق التغيير.

ثلاث طرق إدخال لهدف واحد

يقدم وضع التصميم عدة طرق لتوصيل القصد:

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

الإشارة والسرد معًا يحاكيان كيفية قيام الفرق بالفعل بمراجعة التصاميم في طلبات السحب أو أدوات التصميم التعاونية. لكن الآن أصبحت الحلقة بين اكتشاف المشكلة وتطبيق الإصلاح أقصر لأن النموذج يعمل مباشرة على المنتج قيد التشغيل.

مواءمة النموذج مع سير العمل

صُمم وضع التصميم لسير عمل متعدد المهام. يمكن للمستخدم الإشارة إلى عنصر، ووصف التغيير، والانتقال إلى جزء آخر من الصفحة، وتقديم تعديل آخر قبل أن ينتهي التعديل السابق. يقوم Cursor بتشغيل عدة وكلاء فرعيين في الخلفية، ويعيد تحميل التطبيق بشكل ساخن مع اكتمال كل مهمة. why-parallel-agents-are-the-next-battleground-for-ai-orchestration

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

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

آثار على تطوير الواجهة الأمامية

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

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

التفاعل المكاني كنموذج جديد

وضع التصميم ليس الأداة الأولى التي تقدم حلقات تغذية راجعة بصرية لترميز الذكاء الاصطناعي. فقد جرب كل من مساحة عمل GitHub Copilot وGhostwriter من Replit نوافذ سياق تشمل أشجار الملفات وتحديدات داخل المحرر. لكن نهج Cursor يختلف بطريقتين: فهو يعمل على المنتج الحي قيد التشغيل بدلاً من الكود في شجرة ملفات، ويعالج عرض المتصفح كسطح قابل للتحرير حيث يتم تحليل المدخلات البصرية للمستخدم إلى إشارات منظمة للوكيل. cursor-expands-team-marketplaces-with-mcp-servers-and-org-group-access

قد يثبت سير العمل القائم على التعليقات التوضيحية المكانية هذا قيمته للفرق التي يبدأ فيها غير المطورين، المصممين أو مديري المنتجات، أو يراجعون تغييرات الواجهة الأمامية. إذا كان بإمكان المصمم وضع دائرة حول منطقة على عرض المتصفح ويقول "اجعل هذا القسم أضيق" دون فتح دردشة نصية، فإن الحاجز أمام تفويض تغييرات الكود إلى وكيل ينخفض بشكل كبير. the-migration-isnt-finished-until-the-build-server-says-it-is-why-ai-agents-keep-failing-at-enterprise-java

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

وضع التصميم متاح الآن في نافذة وكيل Cursor. نشرت الشركة وثائق لميزة المتصفح وأتاحت أحدث إصدار من المحرر للتحميل.