من ضغطة في المتصفح إلى commit: ربط ملاحظات العملاء بوكيل البرمجة بالذكاء الاصطناعي

لماذا لا تكفي لقطة الشاشة؟

وكيل الذكاء الاصطناعي بارع في تعديل الكود، لكنه لا يعرف أي زر تقصد حين تقول «الزر الذي في الأعلى». ما زالت أغلب ملاحظات الواجهة تصل كلقطة شاشة وجملة، ثم يضطر أحدهم إلى تحويلها إلى موجّه: يبحث عن الصفحة ثم العنصر ثم الملف، ثم يصف الـ CSS.

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

الدورة خطوة بخطوة

1. اضغط على العنصر في التطبيق وهو يعمل

يفتح العميل أو الـ QA أو مدير المنتج أو المطوّر التطبيق (محليًا أو على staging أو production)، ويضغط على العنصر الذي يقصده: زرًّا أو عنوانًا أو قسمًا كاملًا. ثم يكتب التعديل بكلماته وبلغته. تعمل العربية والإنجليزية معًا، ويستلم الوكيل ترجمة ويبقى النص الأصلي مع التعليق.

تضيف زر التعليق إلى تطبيقك بإحدى ثلاث طرق:

• npx @pinsay/cli@latest init داخل المستودع: يكتشف التقنيات المستخدمة، ويضيف الودجت، ويثبّت مهارات الوكيل.
• وسم script واحد قبل وسم إغلاق body:

  <script src="https://app.pinsay.dev/widget.js" defer></script>
  <pinsay-feedback project="YOUR_PROJECT_KEY" server="https://app.pinsay.dev"></pinsay-feedback>

  نسخ
• إضافة Chrome، لتعلّق على أي موقع دون أي تغيير في الكود.

2. يلتقط PinSay سياق العنصر

يحمل كل تعليق ما يحتاجه الوكيل ليصل إلى المكان الصحيح:

• CSS selector العنصر؛
• قواعد CSS المطبّقة عليه، ومنها القاعدة الغالبة (winning rule)؛
• الـ route وحجم الـ viewport؛
• لقطة DOM منقّاة (يُلتقط نص الصفحة افتراضيًا، ويستطيع المسؤول تعطيله للمشروع)؛
• في React وVue على Vite، عند تفعيل source mapping: الملف المصدري ورقم السطر، مثل CheckoutSummary.tsx:42.

ويذكر كل تعليق البيئة التي كُتب فيها، فلا يختلط تعليق من staging بتعليق من production.

3. يسحب الوكيل التعليقات عبر CLI أو MCP

يقرأ الوكيل قائمة التعليقات بإحدى طريقتين:

• CLI. يجهّز الأمر npx @pinsay/cli apply الموجّه للتعليقات المعلّقة، ومع --mark يُنشئ commit ويعلّمها «مُطبَّقة». يستخدمه أي وكيل يستطيع تشغيل أمر في الطرفية.
• خادم MCP. يشغّل الأمر npx @pinsay/cli mcp خادم MCP محليًا فيه 10 أدوات محددة الأنواع. تتصل به الأدوات التي تدعم MCP، مثل Claude Code وCursor، بإضافة سطر إعداد واحد. التفاصيل في صفحة خادم MCP.

وتعلّم مهارات الوكيل (curl -fsSL https://app.pinsay.dev/install.sh | sh) وكيلك كيف يقرأ التعليقات ويطبّقها، فلا تكتب الموجّه بنفسك.

4. يعدّل الوكيل ويُنشئ commit على جهازك

وكيل الذكاء الاصطناعي الخاص بك هو من يعدّل الكود في المستودع ويُنشئ commit. لا يشغّل PinSay أي ذكاء اصطناعي بنفسه، ولا ينفّذ push ولا ينشر أبدًا. ويُعلَّم التعليق «مُطبَّقًا» ويُربط بالـ commit.

5. أنت تراجع وتنشر

تقرأ الـ diff، ثم تنفّذ push وتنشر كما تفعل دائمًا. لا يصل شيء إلى production من دونك.

6. يظهر التعليق منشورًا بعد النشر

بعد النشر، يعلّم الأمر npx @pinsay/cli status --deployed (من الطرفية أو من CI) التعليقات المطبّقة الموجودة في هذا الـ build على أنها منشورة، فيعرف صاحب الطلب أن التعديل وصل.

ويمكن أن تصل التعليقات أيضًا إلى Slack أو Discord أو Microsoft Teams (في الخطط المدفوعة) أو Telegram أو إلى Webhook، وإلى GitHub Issues مع مزامنة في الاتجاهين: أغلق الـ issue أو أعد فتحه فتتغيّر حالة التعليق، ويعود التعليق على الـ issue ردًّا.

طبّق تعليقات المتصفح عبر Claude Code أو Cursor أو أي وكيل

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

يعمل مع أي وكيل يستطيع تشغيل أمر في الطرفية أو الاتصال بخادم MCP: ‏Claude Code وCodex وCursor وغيرها.

ليس لإصلاح الأخطاء فقط

يعطي الدبوس الوكيل العنصر نفسه، فاطلب ما تشاء بشأنه: إصلاحًا أو نصًا جديدًا أو فحصًا لإمكانية الوصول أو اختبارًا. تعليق مثل «Write a Playwright test for this form: empty email shows an error» طلب صحيح تمامًا.

وعند تفعيل التقاط الأخطاء (bug capture) في المشروع، يمكن للتعليق المعلَّم كخطأ أن يحمل طلبات الـ network، وأخطاء الـ console، والأخطاء غير الملتقطة، وخطوات المستخدم، ولقطة شاشة لكل خطوة. أما محتوى الطلبات والردود فإعداد منفصل، معطّل افتراضيًا، وتُحجب منه البيانات السرية.

ما يبقى بين يديك

• مستودعك. يعمل الوكيل على جهازك، ولا يلمس PinSay الكود بنفسه.
• مراجعتك. يُنشئ الوكيل commit، وأنت تقرّر ما يُنشر.
• بياناتك. اللقطات منقّاة، ويستطيع المسؤول تعطيل التقاط نص الصفحة لكل مشروع، وتبقى التعليقات الخاصة خاصة.