हर Claude Code यूज़र को चाहिए ये दो टूल — Agentation और Readout

Claude Code से फ्रंटएंड काम करते हुए दो बातें हमेशा परेशान करती रहीं। एजेंट को सही-सही बताना कि कौन सा एलिमेंट ठीक करना है। और सेशन खत्म होने के बाद पता लगाना कि एजेंट ने असल में क्या किया।

दोनों समस्याओं के लिए अब डेडिकेटेड टूल मौजूद हैं — और दोनों एक ही इंसान ने बनाए हैं।

Agentation: UI एलिमेंट्स को शब्दों में बताने का ज़माना गया

AI एजेंट से “वो नीला बटन ठीक कर दो” कहने का दौर खत्म हुआ।

Agentation एक विज़ुअल फ़ीडबैक टूल है जो आपको स्क्रीन पर किसी भी एलिमेंट पर क्लिक करने देता है और ऑटोमैटिकली उसका CSS सेलेक्टर और पोज़िशन की जानकारी निकाल लेता है। “साइडबार में नीला बटन” टाइप करने के बजाय, .sidebar > button.primary सीधे एजेंट को दे दीजिए।

फ़र्क तुरंत दिखता है। जो प्रॉम्प्ट तीन-चार बार आगे-पीछे करने के बाद सही होते थे, वो अब पहली बार में ही सही लगते हैं।

ये क्यों काम करता है

• एक लाइन में इंस्टॉल। npm i agentation और किसी भी React 18+ प्रोजेक्ट में एक कंपोनेंट जोड़ दीजिए।
• चार आउटपुट मोड। Compact (सेलेक्टर + मेमो) से Forensic (सारे कंप्यूटेड स्टाइल्स) तक। अपने वर्कफ़्लो के हिसाब से डिटेल लेवल चुनें।
• MCP से Agent Sync। MCP सर्वर कनेक्ट करें ताकि एजेंट रियल टाइम में विज़ुअल फ़ीडबैक पढ़ सके।
• एनिमेशन डीबगिंग। CSS एनिमेशन को बीच फ़्रेम में पॉज़ करें और इंटरमीडिएट स्टेट पर फ़ीडबैक दें — टाइमिंग कर्व्स, कीफ़्रेम पोज़िशन, सब कुछ।
• टेक्स्ट और एरिया सेलेक्शन। टेक्स्ट सेलेक्ट करें या खाली जगह ड्रैग करें — स्पेसिंग और लेआउट पर भी फ़ीडबैक दे सकते हैं।

टूल के npm डाउनलोड 1.7 लाख पार कर चुके हैं। एक ट्वीट से 6.7 लाख व्यूज़ आए। इतने बड़े नंबर आमतौर पर मतलब होते हैं कि टूल एक असली समस्या हल करता है।

Readout: Claude Code सेशन को वीडियो की तरह रीप्ले करें

Readout एक नेटिव macOS ऐप है जो Claude Code के डेवलपमेंट एनवायरनमेंट और कॉन्फ़िगरेशन स्टेट को एक ही डैशबोर्ड में दिखाता है।

सबसे शानदार फ़ीचर सेशन रीप्ले है। कोई भी पुराना सेशन चुनें और टाइमलाइन पर स्क्रब करें। प्रॉम्प्ट, टूल कॉल, और फ़ाइल चेंजेज़ समय के क्रम में दिखते हैं। एडिट की गई फ़ाइलें रियल टाइम में ब्लिंक करती हैं।

अगर आप एजेंट सिस्टम डिज़ाइन करते हैं — या बस ये जानना चाहते हैं कि किसी लंबे ऑटोनॉमस रन में क्या हुआ — सेशन लॉग एनालिसिस ज़रूरी है। इतना इंट्यूटिव व्यूअर मैंने अभी तक नहीं देखा।

मुख्य बातें

• फ़्री डाउनलोड। readout.org से सीधे डाउनलोड करें। कोई अकाउंट नहीं चाहिए। पूरी तरह लोकल चलता है।
• प्लेबैक कंट्रोल। स्पीड एडजस्ट करें या मैन्युअली इवेंट्स में स्टेप करें।
• Codex सपोर्ट। Claude Code और Codex दोनों सेशन के साथ काम करता है।

फ्रंटएंड का असली बॉटलनेक मॉडल परफ़ॉर्मेंस नहीं, फ़ीडबैक की सटीकता है

ये उल्टी बात लगती है। AI कोडिंग टूल की काबिलियत पर दोष लगाने से पहले, खुद के दिए फ़ीडबैक की क्वालिटी देख लीजिए।

Storybook से कंपोनेंट आइसोलेट करें। Agentation से विज़ुअल फ़ीडबैक कैप्चर करें। Claude Code को दे दें। इस लूप के साथ, ज़्यादातर UI मॉडिफ़िकेशन एजेंट अकेला हैंडल कर लेता है।

Agentation की खुद की डॉक्यूमेंटेशन साइट पूरी तरह इसी वर्कफ़्लो से बनी है। एनिमेशन टाइमिंग एडजस्टमेंट से लेकर कर्सर मूवमेंट रिफ़ाइनमेंट तक — सब विज़ुअल फ़ीडबैक लूप से किया गया।

एक ही बनाने वाला, एक ही शुरुआत

दोनों टूल Benji Taylor ने बनाए हैं, जो Coinbase Base में Design Head हैं। वो प्रोफ़ेशनल डेवलपर नहीं हैं। AI से कोडिंग करते हुए जो दिक्कतें महसूस कीं, उन्हें खुद टूल में बदल दिया।

“ये शब्दों में क्यों समझाना पड़ रहा है?” Agentation बन गया। “सेशन रिकॉर्ड एक नज़र में क्यों नहीं दिखता?” Readout बन गया। यूज़र के नज़रिए से बने टूल अक्सर प्रैक्टिकल डेवलपर वर्कफ़्लो में बेहतर फ़िट होते हैं।

Benji ने पहले Family वॉलेट की स्थापना की, Aave द्वारा अधिग्रहण के बाद अब Coinbase Base में डिज़ाइन लीड कर रहे हैं।

निष्कर्ष

AI कोडिंग टूल अच्छे से इस्तेमाल करना ज़रूरी है लेकिन काफ़ी नहीं। जब टूल कम पड़ें, तो जो खुद बना ले — वही आगे निकलता है।