أداتان لا غنى عنهما لكل مستخدم Claude Code — Agentation و Readout

نقطتا احتكاك لازمتاني في كل جلسة عمل على الواجهات الأمامية مع Claude Code. إيصال المعلومة للوكيل بدقة عن العنصر المطلوب تعديله. ومعرفة ما فعله الوكيل فعلياً بعد انتهاء الجلسة.

كلتا المشكلتين لهما الآن أدوات مخصصة — وبناهما الشخص نفسه.

Agentation: توقف عن وصف عناصر الواجهة بالكلمات

انتهى عصر إخبار وكيل الذكاء الاصطناعي بعبارة «أصلح ذلك الزر الأزرق».

Agentation أداة تغذية راجعة بصرية تتيح لك النقر على أي عنصر في الشاشة لاستخراج محدد CSS ومعلومات الموضع تلقائياً. بدلاً من كتابة «الزر الأزرق في الشريط الجانبي»، تمرر .sidebar > button.primary مباشرة إلى الوكيل.

الفرق فوري. الأوامر التي كانت تحتاج ثلاث أو أربع محاولات تصيب الهدف الآن من المحاولة الأولى.

ما يجعلها فعّالة

• تثبيت بسطر واحد. npm i agentation وأضف مكوناً واحداً لأي مشروع React 18+.
• أربعة أوضاع للمخرجات. من Compact (محدد + ملاحظة) إلى Forensic (جميع الأنماط المحسوبة). اختر مستوى التفصيل الذي يناسب سير عملك.
• Agent Sync عبر MCP. وصّل خادم MCP ليقرأ الوكيل التغذية الراجعة البصرية في الوقت الفعلي.
• تنقيح الحركات. أوقف حركات CSS مؤقتاً في منتصف الإطار وقدّم ملاحظات على الحالات الوسيطة — منحنيات التوقيت ومواضع الإطارات المفتاحية وغيرها.
• تحديد النص والمناطق. حدد نصاً أو اسحب مناطق فارغة لتقديم ملاحظات على التباعد والتخطيط، وليس فقط على العناصر.

تجاوزت الأداة 170 ألف تنزيل على npm. تغريدة واحدة عنها حققت 670 ألف مشاهدة. أرقام كهذه تعني عادةً أن الأداة تحل مشكلة حقيقية.

Readout: أعد تشغيل جلسات Claude Code كأنها فيديو

Readout تطبيق أصلي لنظام macOS يعرض بيئة تطوير Claude Code وحالة الإعدادات في لوحة تحكم واحدة.

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

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

تفاصيل أساسية

• تنزيل مجاني من readout.org. لا حاجة لحساب. يعمل محلياً بالكامل.
• أدوات تحكم بالتشغيل. اضبط السرعة أو تنقل يدوياً بين الأحداث.
• دعم Codex. متوافق مع جلسات Claude Code و Codex.

عنق الزجاجة الحقيقي في الواجهات الأمامية هو دقة التغذية الراجعة، وليس أداء النموذج

هذه ملاحظة غير بديهية. قبل لوم قدرات أداة البرمجة بالذكاء الاصطناعي، انظر في جودة التغذية الراجعة التي تقدمها.

اعزل المكونات باستخدام Storybook. التقط التغذية الراجعة البصرية بـ Agentation. مررها إلى Claude Code. بهذه الحلقة، يستطيع الوكيل التعامل مع معظم تعديلات الواجهة بشكل مستقل.

موقع توثيق Agentation نفسه بُني بالكامل بهذا الأسلوب. كل ضبط لتوقيت الحركة، كل تحسين لحركة المؤشر — كلها تمت عبر حلقة التغذية الراجعة البصرية.

نفس الصانع، نفس نقطة الانطلاق

كلتا الأداتين من صنع Benji Taylor، رئيس التصميم في Coinbase Base. ليس مطوراً بالمهنة. بنى هذه الأدوات أثناء برمجته بالذكاء الاصطناعي لأن الاحتكاك كان واضحاً جداً ليتم تجاهله.

«لماذا أشرح هذا بالكلمات؟» أصبحت Agentation. «لماذا لا أستطيع رؤية ما حدث؟» أصبحت Readout. الأدوات المولودة من منظور المستخدم غالباً ما تتناسب مع سير العمل الفعلي للمطورين أفضل من الأدوات المصممة من أعلى إلى أسفل.

أسس Benji محفظة Family ومرّ بعملية استحواذ Aave قبل توليه منصبه الحالي في Coinbase Base.

الخلاصة

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