मार्कडाउन एजेंटों के लिए हमारे साथ संवाद करने का प्रमुख फ़ाइल फ़ॉर्मेट बन गया है। यह सरल, पोर्टेबल है, इसमें कुछ रिच टेक्स्ट क्षमता है और आपके लिए इसे संपादित करना आसान है। क्लॉड तो मार्कडाउन फ़ाइलों के अंदर आरेख बनाने के लिए ASCII का उपयोग करने में भी आश्चर्यजनक रूप से अच्छा हो गया है।
लेकिन जैसे-जैसे एजेंट अधिक शक्तिशाली होते गए हैं, मुझे लगा है कि मार्कडाउन एक सीमित फ़ॉर्मेट बन गया है। मुझे सौ से अधिक पंक्तियों की मार्कडाउन फ़ाइल पढ़ना मुश्किल लगता है। मैं समृद्ध विज़ुअलाइज़ेशन, रंग और आरेख चाहता हूँ और मैं उन्हें आसानी से साझा करने में सक्षम होना चाहता हूँ।
मैं इन फ़ाइलों को स्वयं भी तेजी से संपादित नहीं कर रहा हूँ, बल्कि उन्हें स्पेक, संदर्भ फ़ाइलों, विचार-मंथन आउटपुट आदि के रूप में उपयोग कर रहा हूँ। जब मैं संपादन करता हूँ, तो मैं आमतौर पर क्लॉड को उन्हें संपादित करने का निर्देश दे रहा होता हूँ, जो मार्कडाउन के सबसे बड़े लाभों में से एक को हटा देता है।
मैंने मार्कडाउन के बजाय आउटपुट फ़ॉर्मेट के रूप में HTML को प्राथमिकता देना शुरू कर दिया है और तेजी से देख रहा हूँ कि क्लॉड कोड टीम पर दूसरों द्वारा इसका उपयोग किया जा रहा है, यही कारण है।
(यदि आप कुछ उदाहरणों से शुरुआत करना चाहते हैं, तो आप यहाँ बहुत सारे देख सकते हैं: https://thariqs.github.io/html-effectiveness, बस वापस आना सुनिश्चित करें और इसके बारे में और पढ़ें कि क्यों)
HTML क्यों?
सूचना घनत्व
HTML मार्कडाउन की तुलना में अधिक समृद्ध जानकारी व्यक्त कर सकता है। यह निश्चित रूप से हेडर और फ़ॉर्मेटिंग जैसी सरल दस्तावेज़ संरचना कर सकता है, लेकिन यह अन्य सभी प्रकार की जानकारी का भी प्रतिनिधित्व कर सकता है जैसे:
- तालिकाओं का उपयोग करके सारणीबद्ध डेटा
- CSS के साथ डिज़ाइन डेटा
- SVG के साथ चित्रण
- स्क्रिप्ट टैग के साथ कोड स्निपेट
- जावास्क्रिप्ट + CSS के साथ HTML तत्वों का उपयोग करके इंटरैक्शन
- SVG और HTML का उपयोग करके वर्कफ़्लो
- निरपेक्ष स्थितियों और कैनवस का उपयोग करके स्थानिक डेटा
- इमेज टैग का उपयोग करके चित्र
मैं यहाँ तक कहूँगा कि जानकारी का लगभग कोई भी सेट नहीं है जिसे क्लॉड पढ़ सकता है जिसे आप HTML के साथ काफी कुशलता से प्रस्तुत नहीं कर सकते। यह मॉडल के लिए आपको गहन जानकारी संप्रेषित करने और आपके लिए इसकी समीक्षा करने का एक अत्यधिक कुशल तरीका बनाता है।
मैंने पाया है कि ऐसा करने में सक्षम नहीं होने पर, मॉडल मार्कडाउन में अधिक अक्षम चीजें कर सकता है जैसे ASCII आरेख या, मेरा पसंदीदा, क्लॉड कोड से इस स्क्रीनशॉट में यूनिकोड वर्णों के साथ रंगों का अनुमान लगाना।
क्लॉड कोड मार्कडाउन में रंग दिखाने की कोशिश कर रहा है
दृश्य स्पष्टता और पढ़ने में आसानी
जैसे-जैसे क्लॉड अधिक जटिल कार्य करने में सक्षम होता है, वह बड़े और बड़े स्पेक और योजनाएँ भी लिख रहा है। व्यवहार में, मैंने पाया है कि मैं 100-पंक्ति मार्कडाउन फ़ाइल से अधिक नहीं पढ़ता हूँ, और मैं निश्चित रूप से अपने संगठन में किसी और को इसे पढ़वाने में सक्षम नहीं हूँ।
लेकिन HTML दस्तावेज़ पढ़ने में बहुत आसान होते हैं, क्लॉड संरचना को दृश्य रूप से टैब, चित्रण, लिंक आदि के साथ नेविगेट करने के लिए आदर्श रूप से व्यवस्थित कर सकता है। यह मोबाइल रिस्पॉन्सिव भी हो सकता है ताकि आप अपने फ़ॉर्म फ़ैक्टर के आधार पर इसे अलग-अलग तरीके से पढ़ सकें।
साझा करने में आसानी
मार्कडाउन फ़ाइलों को साझा करना काफी कठिन है क्योंकि अधिकांश ब्राउज़र उन्हें मूल रूप से अच्छी तरह से रेंडर नहीं करते हैं। आपको अक्सर उन्हें ईमेल या संदेशों में अटैचमेंट के रूप में जोड़ना पड़ता है।
HTML के साथ, जब तक आप फ़ाइल अपलोड करते हैं (उदाहरण के लिए S3 पर), आप लिंक आसानी से साझा कर सकते हैं। आपके सहकर्मी इसे जहाँ चाहें खोल सकते हैं और आसानी से इसका संदर्भ ले सकते हैं।
आपके स्पेक, रिपोर्ट या PR राइटअप को वास्तव में कोई पढ़ने की संभावना बहुत अधिक होती है यदि वह HTML में हो।
दो-तरफ़ा इंटरैक्शन
HTML आपको दस्तावेज़ के साथ बातचीत करने की अनुमति दे सकता है, उदाहरण के लिए आप इसे डिज़ाइन को समायोजित करने के लिए स्लाइडर या नॉब जोड़ने या आपको एल्गोरिदम में विभिन्न विकल्पों को ट्वीक करने की अनुमति देने के लिए कह सकते हैं ताकि यह देख सकें कि क्या होता है। आप इसे इन परिवर्तनों को एक प्रॉम्प्ट में कॉपी करने की अनुमति देने के लिए भी कह सकते हैं जिसे वापस क्लॉड कोड में पेस्ट किया जा सके।
इस दो-तरफ़ा इंटरैक्शन के उदाहरण देखने के लिए मेरी प्लेग्राउंड पोस्ट के बारे में और पढ़ें: https://x.com/trq212/status/2017024445244924382
डेटा इंजेशन
क्लॉड कोड का उपयोग HTML फ़ाइलें बनाने के लिए क्यों करें, उदाहरण के लिए ClaudeAI या Claude Design के बजाय? सबसे बड़े कारणों में से एक वह सारा संदर्भ है जिसे क्लॉड कोड इन्जेस्ट कर सकता है।
उदाहरण के लिए, इस लेख को लिखते समय, मैंने क्लॉड कोड से मेरे कोड फ़ोल्डर को पढ़ने और मेरे द्वारा उत्पन्न सभी HTML फ़ाइलों को खोजने, उन्हें समूहित और वर्गीकृत करने और फिर प्रत्येक प्रकार का प्रतिनिधित्व करने वाले सभी आरेखों के साथ एक HTML फ़ाइल बनाने के लिए कहा। इस लेख में आप जो आरेख देख रहे हैं, वे उसी का प्रत्यक्ष परिणाम हैं।
फ़ाइल सिस्टम के अलावा, क्लॉड कोड आपके MCPs (जैसे Slack, Linear, आदि), आपके वेब ब्राउज़र (Chrome में Claude के साथ), आपके git इतिहास आदि का उपयोग करके अतिरिक्त संदर्भ पा सकता है।
यह आनंददायक है
क्लॉड के साथ HTML दस्तावेज़ बनाना अधिक मज़ेदार है और मुझे सृजन में अधिक शामिल और निवेशित महसूस कराता है, और यह अपने आप में पर्याप्त है।
कैसे शुरू करें
मुझे थोड़ा डर है कि लोग इस लेख को पढ़ेंगे और इसे /html स्किल या कुछ और में बदल देंगे। जबकि इसमें कुछ मूल्य हो सकता है, मैं इस बात पर जोर देना चाहता हूँ कि क्लॉड को ऐसा करने के लिए आपको बहुत कुछ करने की आवश्यकता नहीं है। आप बस इसे "एक HTML फ़ाइल बनाएँ" या "एक HTML आर्टिफैक्ट बनाएँ" कह सकते हैं।
ट्रिक यह जानना है कि आप आर्टिफैक्ट को क्या करना चाहते हैं और आप इसका उपयोग कैसे कर सकते हैं। समय के साथ आप एक स्किल बना सकते हैं, लेकिन अभी के लिए मैं सुझाव दूँगा कि विभिन्न मामलों में इसका उपयोग करने का तरीका जानने के लिए शुरू से ही प्रॉम्प्ट करें।
उपयोग के मामले
इसे और अधिक ठोस बनाने के लिए, मैंने विभिन्न उपयोग मामलों के लिए कई अलग-अलग HTML फ़ाइलें बनाई हैं। आप उन सभी को यहाँ देख सकते हैं: https://thariqs.github.io/html-effectiveness/ लेकिन यहाँ एक सिंहावलोकन है।
स्पेक, योजना और अन्वेषण
HTML क्लॉड के लिए किसी समस्या में गोता लगाने का एक समृद्ध कैनवास है। जब मैं किसी समस्या पर काम करना शुरू करता हूँ, तो एक साधारण मार्कडाउन योजना के बजाय मैं HTML फ़ाइलों का एक वेब बनाने की उम्मीद करता हूँ। उदाहरण के लिए, मैं क्लॉड कोड से विचार-मंथन करने और विभिन्न विकल्पों की कुछ खोजें बनाने के लिए कहकर शुरुआत कर सकता हूँ। फिर मैं इसे एक में और विस्तार करने, शायद मॉकअप या कोड स्निपेट बनाने के लिए कहूँगा। अंत में, जब मैं अच्छा महसूस करूँगा, तो मैं इसे एक कार्यान्वयन योजना लिखने के लिए कहूँगा। जब मैं योजना से खुश हो जाऊँगा, तो मैं एक नया सत्र बनाऊँगा और इसे लागू करने के लिए इन सभी फ़ाइलों को पास करूँगा।
सत्यापन करते समय, मैं सत्यापन एजेंट को भी फ़ाइलों को पढ़ने के लिए कहूँगा और उसके पास इस बात का व्यापक संदर्भ होगा कि क्या आवश्यक है।
उदाहरण प्रॉम्प्ट:
- मुझे यकीन नहीं है कि ऑनबोर्डिंग स्क्रीन को किस दिशा में ले जाना है। 6 स्पष्ट रूप से भिन्न दृष्टिकोण उत्पन्न करें — लेआउट, टोन और घनत्व में भिन्नता रखें — और उन्हें एक एकल HTML फ़ाइल में एक ग्रिड में रखें ताकि मैं उनकी तुलना साथ-साथ कर सकूँ। प्रत्येक को उस ट्रेडऑफ़ के साथ लेबल करें जो वह कर रहा है।
- एक HTML फ़ाइल में एक विस्तृत कार्यान्वयन योजना बनाएँ, कुछ मॉकअप बनाना सुनिश्चित करें, डेटा प्रवाह दिखाएँ और महत्वपूर्ण कोड स्निपेट जोड़ें जिनकी मैं समीक्षा करना चाह सकता हूँ। इसे पढ़ने और समझने में आसान बनाएँ।
उपयोग के मामले:
- कोड में किसी चीज़ को लागू करने के अन्य तरीकों की खोज करना
- कई दृश्य डिज़ाइनों की खोज करना
कोड समीक्षा और समझ
मार्कडाउन फ़ाइल में कोड पढ़ना मुश्किल हो सकता है। लेकिन HTML के साथ हम डिफ़, एनोटेशन, फ़्लोचार्ट, मॉड्यूल आदि रेंडर कर सकते हैं। एजेंट द्वारा लिखे गए कोड को समझने, कोड समीक्षा प्राप्त करने या आपके कोड की समीक्षा करने वाले किसी व्यक्ति को PR समझाने के लिए इसका उपयोग करें। मुझे लगता है कि यह अक्सर डिफ़ॉल्ट Github डिफ़ व्यू से बेहतर काम करता है, और मैं अब हर PR में एक HTML कोड एक्सप्लेनर संलग्न करता हूँ।
उदाहरण प्रॉम्प्ट:
इस PR की समीक्षा करने में मेरी मदद करें, एक HTML आर्टिफैक्ट बनाकर जो इसका वर्णन करता है। मैं स्ट्रीमिंग/बैकप्रेशर लॉजिक से बहुत परिचित नहीं हूँ, इसलिए उस पर ध्यान केंद्रित करें। वास्तविक डिफ़ को इनलाइन मार्जिन एनोटेशन के साथ रेंडर करें, गंभीरता के अनुसार निष्कर्षों को रंग-कोड करें और जो कुछ भी अवधारणा को अच्छी तरह से व्यक्त करने के लिए आवश्यक हो।
उपयोग के मामले:
- PR बनाना
- PR की समीक्षा करना
- कोड में किसी विषय को समझना
डिज़ाइन और प्रोटोटाइप
Claude Design HTML पर आधारित है क्योंकि HTML डिज़ाइन में अविश्वसनीय रूप से अभिव्यंजक है, भले ही आपकी अंतिम सतह HTML न हो। क्लॉड HTML में एक डिज़ाइन स्केच कर सकता है और फिर इसे आपकी पसंद की भाषा में लिख सकता है, चाहे वह React, Swift आदि हो।
आप एनिमेशन, क्रियाओं आदि जैसे इंटरैक्शन का प्रोटोटाइप भी बना सकते हैं। क्लॉड से स्लाइडर, नॉब आदि बनाने के लिए कहने पर विचार करें ताकि आप जो खोज रहे हैं उसे ठीक से ट्यून कर सकें।
उदाहरण प्रॉम्प्ट:
मैं एक नए चेकआउट बटन का प्रोटोटाइप बनाना चाहता हूँ, जब क्लिक किया जाता है तो यह एक प्ले एनिमेशन करता है और फिर जल्दी से बैंगनी हो जाता है। इस एनिमेशन पर विभिन्न विकल्पों को आज़माने के लिए मेरे लिए कई स्लाइडर और विकल्पों के साथ एक HTML फ़ाइल बनाएँ, मुझे उन पैरामीटर्स को कॉपी करने के लिए एक कॉपी बटन दें जो अच्छे काम करते हैं।
इसका उपयोग करें:
- डिज़ाइन सिस्टम आर्टिफैक्ट बनाना
- घटकों को समायोजित करना
- घटक पुस्तकालयों की कल्पना करना
- आनंददायक एनिमेशन का प्रोटोटाइप बनाना
रिपोर्ट, अनुसंधान और सीखना
क्लॉड कोड कई डेटा स्रोतों से जानकारी को संश्लेषित करने और इसे पठनीयता के लिए एक रिपोर्ट में बदलने में अविश्वसनीय रूप से अच्छा है। आप क्लॉड को अपने Slack, आपके कोडबेस, git इतिहास, इंटरनेट आदि को खोजने और अपने लिए, नेतृत्व के लिए, अपनी टीम के लिए आदि अत्यधिक पठनीय रिपोर्ट तैयार करने के लिए प्रॉम्प्ट कर सकते हैं।
आप इसे एक लंबे HTML दस्तावेज़, एक इंटरैक्टिव एक्सप्लेनर या यहाँ तक कि एक स्लाइडशो/डेक के रूप में भी इकट्ठा कर सकते हैं। क्लॉड से आरेखों के लिए SVG का उपयोग करने के लिए कहें ताकि इसे विज़ुअलाइज़ करने में मदद मिल सके।
उदाहरण के लिए, प्रॉम्प्ट कैशिंग पर मेरी पोस्ट के लिए, मैंने क्लॉड से git इतिहास पढ़ने के बाद प्रॉम्प्ट कैशिंग में हमारे सभी परिवर्तनों पर मेरे पढ़ने के लिए HTML में एक गहन शोध फ़ाइल तैयार करने के लिए कहा।
उदाहरण प्रॉम्प्ट:
मैं नहीं समझता कि हमारा रेट लिमिटर वास्तव में कैसे काम करता है। प्रासंगिक कोड पढ़ें और एक एकल HTML एक्सप्लेनर पेज तैयार करें: टोकन-बकेट प्रवाह का एक आरेख, 3-4 प्रमुख कोड स्निपेट जिन पर एनोटेशन किया गया है, और नीचे एक "गॉचाज़" अनुभाग। इसे किसी ऐसे व्यक्ति के लिए अनुकूलित करें जो इसे एक बार पढ़ रहा हो।
इसका उपयोग करें:
- सारांशित करें कि कोई सुविधा कैसे काम करती है
- मुझे एक अवधारणा समझाएँ
- अपने बॉस को साप्ताहिक स्थिति रिपोर्ट
- अपने नेतृत्व को घटना रिपोर्ट
- SVG चित्रण, फ़्लोचार्ट, तकनीकी आरेख आदि
कस्टम संपादन इंटरफ़ेस
कभी-कभी यह वर्णन करना मुश्किल होता है कि आप केवल एक टेक्स्ट बॉक्स में क्या चाहते हैं। इस मामले में, मैं क्लॉड से उस सटीक चीज़ के लिए एक डिस्पोजेबल एडिटर बनाने के लिए कहूँगा जिस पर मैं काम कर रहा हूँ। कोई उत्पाद या पुन: प्रयोज्य उपकरण नहीं, बल्कि एक एकल HTML फ़ाइल, जो डेटा के इस एक टुकड़े के लिए उद्देश्य-निर्मित हो।
ट्रिक हमेशा एक निर्यात के साथ समाप्त करना है: एक "JSON के रूप में कॉपी करें" या "प्रॉम्प्ट के रूप में कॉपी करें" बटन जो मैंने UI में जो कुछ भी किया है उसे वापस किसी ऐसी चीज़ में बदल देता है जिसे मैं क्लॉड कोड में पेस्ट कर सकता हूँ।
उदाहरण प्रॉम्प्ट:
- मुझे इन 30 लीनियर टिकटों को पुन: प्राथमिकता देने की आवश्यकता है। मेरे लिए एक HTML फ़ाइल बनाएँ जिसमें प्रत्येक टिकट अब / अगला / बाद में / काटें कॉलम में एक ड्रैग करने योग्य कार्ड के रूप में हो। उन्हें आपके सर्वोत्तम अनुमान के अनुसार पूर्व-क्रमबद्ध करें। एक "मार्कडाउन के रूप में कॉपी करें" बटन जोड़ें जो प्रति बकेट एक-पंक्ति तर्क के साथ अंतिम ऑर्डरिंग निर्यात करता है।
- यहाँ हमारा फ़ीचर फ़्लैग कॉन्फ़िगरेशन है। इसके लिए एक फ़ॉर्म-आधारित एडिटर बनाएँ, फ़्लैग को क्षेत्र के अनुसार समूहित करें, उनके बीच निर्भरताएँ दिखाएँ, मुझे चेतावनी दें यदि मैं एक ऐसा फ़्लैग सक्षम करता हूँ जिसकी पूर्वापेक्षा बंद है। एक "डिफ़ कॉपी करें" बटन जोड़ें जो मुझे केवल बदली गई कुंजियाँ देता है।
- मैं इस सिस्टम प्रॉम्प्ट को ट्यून कर रहा हूँ। एक साथ-साथ एडिटर बनाएँ: बाईं ओर संपादन योग्य प्रॉम्प्ट जिसमें वेरिएबल स्लॉट हाइलाइट किए गए हों, दाईं ओर तीन नमूना इनपुट जो भरे हुए टेम्पलेट को लाइव री-रेंडर करते हैं। एक कैरेक्टर/टोकन काउंटर और एक कॉपी बटन जोड़ें।
इसका उपयोग करें:
- किसी भी चीज़ को पुन: क्रमित करना, ट्राइएज करना या बकेट करना (टिकट, टेस्ट केस, फ़ीडबैक)
- संरचित कॉन्फ़िगरेशन संपादित करना (फ़ीचर फ़्लैग, env vars, बाधाओं के साथ JSON/YAML)
- लाइव प्रीव्यू के साथ प्रॉम्प्ट, टेम्पलेट या कॉपी को ट्यून करना
- डेटासेट क्यूरेट करना, पंक्तियों को स्वीकार/अस्वीकार करना, उदाहरणों को टैग करना, चयन निर्यात करना
- किसी दस्तावेज़, ट्रांसक्रिप्ट या डिफ़ को एनोटेट करना और एनोटेशन निर्यात करना
- उन मानों को चुनना जिन्हें टेक्स्ट में व्यक्त करना कठिन है: रंग, ईज़िंग कर्व, क्रॉप क्षेत्र, क्रॉन शेड्यूल, रेगेक्स।
अक्सर पूछे जाने वाले प्रश्न
मैं कई लोगों को बता रहा हूँ कि मैंने HTML पर कैसे स्विच किया है और मैंने कुछ बार-बार पूछे जाने वाले प्रश्न देखे हैं।
क्या यह टोकन-कुशल नहीं है?
जबकि मार्कडाउन अक्सर कम टोकन का उपयोग करता है, मैंने पाया है कि HTML की अतिरिक्त अभिव्यंजना और मेरे द्वारा इसे पढ़ने की बहुत अधिक संभावना का मतलब है कि मुझे कुल मिलाकर बेहतर आउटपुट मिलता है। Opus 4.7 में 1MM संदर्भ विंडो के साथ, बढ़ा हुआ टोकन उपयोग संदर्भ विंडो में वास्तव में ध्यान देने योग्य नहीं है।
अब आप मार्कडाउन का उपयोग कब करते हैं?
मैंने ईमानदारी से लगभग हर चीज़ के लिए मार्कडाउन का उपयोग करना पूरी तरह से बंद कर दिया है, लेकिन मैं शायद HTML अधिकतमवादी पक्ष में बहुत दूर हूँ।
मैं HTML फ़ाइल कैसे देखूँ?
मैं इसे स्थानीय रूप से ब्राउज़र में खोलता हूँ (आप क्लॉड से इसे खोलने के लिए कह सकते हैं), या यदि आप एक साझा करने योग्य लिंक चाहते हैं तो S3 पर अपलोड करता हूँ।
क्या इसे उत्पन्न करने में मार्कडाउन से अधिक समय नहीं लगता?
इसमें अधिक समय लगता है! HTML मार्कडाउन की तुलना में 2-4 गुना अधिक समय ले सकता है, लेकिन मैंने पाया है कि परिणाम इसके लायक हैं।
संस्करण नियंत्रण के बारे में क्या?
यह ईमानदारी से HTML की सबसे बड़ी कमियों में से एक है, HTML डिफ़ शोरगुल वाले होते हैं और मार्कडाउन की तुलना में समीक्षा करना कठिन होता है।
मैं क्लॉड को अपने स्वाद से मेल खाने / इसे बदसूरत न बनाने के लिए कैसे प्राप्त करूँ?
फ्रंटएंड डिज़ाइन प्लगइन क्लॉड को अच्छी HTML फ़ाइलें बनाने में मदद करता है। लेकिन अपनी खुद की कंपनी की शैली से मेल खाने के लिए, आप क्लॉड को अपने कोडबेस पर इंगित करके एक एकल डिज़ाइन सिस्टम HTML फ़ाइल बना सकते हैं। फिर आप अन्य HTML फ़ाइलों के लिए संदर्भ के रूप में उस डिज़ाइन सिस्टम फ़ाइल का उपयोग कर सकते हैं।
लूप में बने रहें
उपरोक्त सभी का मतलब यह है कि मुझे लगता है कि HTML का उपयोग करने का वास्तविक कारण यह है कि मैं क्लॉड के साथ बहुत अधिक लूप में महसूस करता हूँ। मुझे डर लगने लगा था कि क्योंकि मैंने योजनाओं को गहराई से पढ़ना बंद कर दिया था, मुझे बस क्लॉड को अपनी पसंद बनाने के लिए छोड़ना होगा।
लेकिन मैं यह कहते हुए खुश हूँ कि इसके बजाय मैं HTML का उपयोग करते समय पहले से कहीं अधिक लूप में महसूस करता हूँ। मुझे उम्मीद है कि आप भी ऐसा ही महसूस करेंगे।
