अचानक, आज आपका सामान्य ज्ञान चकनाचूर हो जाएगा। सच कहूँ तो, 99% लोग अब भी Claude Code के साथ Markdown का उपयोग कर रहे हैं। Anthropic के Claude Code टीम के एक अंदरूनी सूत्र ने कहा, "इसे रोको।" उन्होंने कहा, "Markdown के बजाय HTML में आउटपुट देना कहीं बेहतर है।"
क्योंकि जैसे-जैसे Claude Code का आउटपुट अधिक उन्नत होता जाता है, Markdown पढ़ने में कठिन होता जाता है, संप्रेषित करने में विफल रहता है, और साझा नहीं किया जाता है।
दूसरी ओर, HTML के साथ:
- आप चित्रण कर सकते हैं
- आप रंग-कोड कर सकते हैं
- आप टैब के साथ व्यवस्थित कर सकते हैं
- आप स्लाइडर और बटन भी बना सकते हैं
- आप सीधे ब्राउज़र में साझा कर सकते हैं
दूसरे शब्दों में, Claude Code के वास्तविक मूल्य को सामने लाने के लिए, न केवल "आप क्या आउटपुट देते हैं" बल्कि "आप किस फॉर्मेट में आउटपुट देते हैं" अविश्वसनीय रूप से महत्वपूर्ण हो जाता है।
मैं यह दावा करता हूँ।
Claude Code युग में इष्टतम समाधान केवल Markdown नहीं, बल्कि HTML-प्रथम है।
वास्तव में, इस लेख के आने से पहले भी, ClaudeCodeStudio इस विधि का उपयोग कर रहा है, यह सुनिश्चित करते हुए कि स्लाइड सामग्री एक ही शॉट में इस गुणवत्ता के साथ आती है 👇
यदि आप इस लेख को अंत तक पढ़ते हैं, तो मुझे लगता है कि आप समझ जाएंगे कि यह क्यों संभव है, तो कृपया पढ़ें!
वैसे, क्या आपने कभी ऐसा अनुभव किया है?
- आपने Claude Code से एक योजना लिखवाई, लेकिन 100 लाइनों से अधिक होने पर रुचि खो दी।
- आपने टीम के साथ एक Markdown स्पेसिफिकेशन साझा किया, लेकिन किसी ने इसे अंत तक नहीं पढ़ा।
- आपने एक ASCII आर्ट डायग्राम देखा और सोचा, "...यह क्या है?"
- आप रंगों या लेआउट के साथ जानकारी व्यवस्थित करना चाहते थे, लेकिन Markdown में इसे व्यक्त नहीं कर सके।
- आपने एक योजना को Slack में पेस्ट किया, लेकिन यह एक अटैचमेंट के रूप में दब गया।
यह सब "आउटपुट फॉर्मेट की समस्या" थी।
Claude Code डेवलपमेंट टीम के सदस्य Thariq (@trq212) द्वारा लिखा गया एक लेख "Using Claude Code: The Unreasonable Effectiveness of HTML" वर्तमान में X पर 11 मिलियन से अधिक व्यूज के साथ वायरल हो रहा है 😳
Thariq Anthropic में Claude Code टीम के सदस्य और YC W20 के एक इंजीनियर हैं। दूसरे शब्दों में, यह एक ऐसे व्यक्ति का लेख है जो हर दिन फ्रंट लाइन पर Claude Code का उपयोग करता है और घोषणा करता है, "मैंने Markdown का उपयोग करना बंद कर दिया।"
इस बार, मैं सामग्री को आसानी से समझने योग्य तरीके से समझाऊंगा, जिसमें विशिष्ट प्रॉम्प्ट उदाहरण शामिल हैं 👇
मूल पोस्ट यहाँ: https://x.com/trq212/status/2052809885763747935
■ Markdown में क्या समस्या है?
Markdown का उपयोग वर्षों से AI एजेंटों और मनुष्यों के बीच संचार के साधन के रूप में किया जाता रहा है। यह सरल है, कहीं भी इस्तेमाल किया जा सकता है, और कुछ हद तक रिच टेक्स्ट लिख सकता है। Claude Code, निश्चित रूप से, डिफ़ॉल्ट रूप से Markdown में आउटपुट देता है।
लेकिन सच कहूँ तो, क्या यह परिचित नहीं लगता?
जैसे-जैसे Claude Code अधिक जटिल कार्यों को संभालने में सक्षम होता जाता है, इसके द्वारा आउटपुट की जाने वाली योजनाएँ और स्पेसिफिकेशन लंबी होती जाती हैं। क्या आप वास्तव में 100 लाइनों से अधिक की Markdown फ़ाइल को अंत तक पढ़ते हैं?
Thariq लेख में लिखते हैं:
"मुझे सौ से अधिक पंक्तियों की markdown फ़ाइल पढ़ना कठिन लगता है।"
इसके अलावा, इन दिनों, हम स्वयं फ़ाइलों को संपादित भी कम ही कर रहे हैं। हम उन्हें स्पेसिफिकेशन के संदर्भ के रूप में या विचार-मंथन के आउटपुट के रूप में उपयोग करते हैं। संपादित करते समय भी, हम Claude से "इसे ठीक करें" कहते हैं। दूसरे शब्दों में, Markdown का सबसे बड़ा लाभ—कि यह "मनुष्यों के लिए हाथ से संपादित करना आसान है"—अब सार्थक नहीं रह गया है।
यह शानदार ढंग से एक ऐसी समस्या को शब्द देता है जिसे कई Claude Code उपयोगकर्ता अनजाने में महसूस कर रहे थे।
■ HTML विकल्प "अनुचित रूप से प्रभावी" क्यों है
Thariq जो प्रस्ताव देते हैं वह Claude Code के आउटपुट फॉर्मेट को Markdown से HTML में बदलना है।
आप सोच सकते हैं, "क्या HTML वेब पेज बनाने के लिए नहीं है?" लेकिन HTML की अभिव्यंजक शक्ति Markdown से अतुलनीय है।
आइए देखें कि HTML के साथ विशेष रूप से क्या व्यक्त किया जा सकता है:
- तालिकाओं का उपयोग करके संरचित डेटा
- CSS का उपयोग करके डिज़ाइन और रंग
- SVG का उपयोग करके चित्र और आरेख
- स्क्रिप्ट टैग का उपयोग करके कोड स्निपेट
- JavaScript और CSS का उपयोग करके इंटरैक्शन
- SVG और HTML को मिलाकर वर्कफ़्लो आरेख
- एब्सोल्यूट पोज़िशनिंग या कैनवास का उपयोग करके स्थानिक डेटा
- इमेज टैग का उपयोग करके इमेज एम्बेड करना
Thariq दावा करते हैं:
"मैं यहाँ तक कहूँगा कि जानकारी का लगभग कोई भी सेट नहीं है जिसे Claude पढ़ सकता है और जिसे आप HTML के साथ काफी कुशलता से प्रस्तुत नहीं कर सकते।"
जिस किसी ने भी Claude से ASCII आरेख बनवाने या यूनिकोड वर्णों के साथ रंग व्यक्त करने की कोशिश की है, वह इन शब्दों का महत्व समझेगा। आप उस अक्षमता से मुक्त हो जाएंगे, जैसे "फेरारी को किराने की दुकान तक चलाना।"
■ सूचना घनत्व बहुत अलग है
HTML की सबसे बड़ी ताकत "सूचना घनत्व" है।
जब एक ही सामग्री Markdown और HTML में लिखी जाती है, तो HTML बहुत अधिक जानकारी को अधिक पठनीय रूप में व्यक्त कर सकता है। आप टैब के साथ स्विच कर सकते हैं, रंग-कोड कर सकते हैं, या आरेख एम्बेड कर सकते हैं।
भले ही आपको 100 लाइनों का Markdown पढ़ने का मन न हो, लेकिन टैब और रंगों के साथ व्यवस्थित समान मात्रा में जानकारी HTML में सीधे आपके दिमाग में उतर जाएगी।
यह केवल "दिखावे का मामला" नहीं है। एक स्पेसिफिकेशन जो पढ़ा नहीं जाता, वह उसके अस्तित्व में न होने के समान है। ऐसे फॉर्मेट में आउटपुट देना जो पढ़ा जाता है, सीधे काम की गुणवत्ता से जुड़ता है।
■ साझा करने में आसानी
जब आप किसी के साथ Markdown फ़ाइल साझा करने का प्रयास करते हैं, तो यह आमतौर पर इस तरह होता है:
- Slack में फ़ाइल के रूप में अटैच करें → कोई नहीं खोलता
- ईमेल में अटैच करें → कोई नहीं खोलता
- GitHub पर डालें → गैर-इंजीनियर एक्सेस नहीं कर सकते
HTML के साथ, आप इसे S3 पर अपलोड करते हैं और एक लिंक भेजते हैं। ब्राउज़र वाला कोई भी इसे पढ़ सकता है। आप इसे रिस्पॉन्सिव भी बना सकते हैं ताकि इसे मोबाइल पर पढ़ा जा सके।
Thariq का मूल टेक्स्ट:
"आपके स्पेक, रिपोर्ट या PR राइटअप को वास्तव में कोई पढ़ेगा इसकी संभावना बहुत अधिक है यदि वह HTML में हो।"
यह व्यवहार में एक सूक्ष्म लेकिन अत्यंत महत्वपूर्ण बिंदु है।
■ दो-तरफा इंटरैक्शन की क्रांति
यह वह जगह है जहाँ HTML वास्तव में चमकता है।
HTML केवल "पढ़ने" के लिए नहीं है। इसे संचालित किया जा सकता है।
उदाहरण के लिए, एक डिज़ाइन को फाइन-ट्यून करना। यदि आप Claude Code से "स्लाइडर के साथ एक HTML फ़ाइल बनाएं" कहते हैं, तो यह एक ऐसी फ़ाइल आउटपुट करेगा जहाँ आप एनिमेशन स्पीड, ईज़िंग और रंगों को रीयल-टाइम में समायोजित कर सकते हैं। एक बार जब आपको पसंदीदा पैरामीटर मिल जाते हैं, तो आप बस एक "कॉपी" बटन दबाते हैं और उन्हें वापस Claude Code में पेस्ट करते हैं।
यह दो-तरफा इंटरैक्शन सटीकता के उस स्तर पर समायोजन को सक्षम बनाता है जो अकेले टेक्स्ट प्रॉम्प्ट कभी हासिल नहीं कर सकते।
आप "थोड़ा और दाईं ओर," "थोड़ा तेज़," या "यह रंग नहीं" को शब्दों में व्यक्त करने के तनाव से मुक्त हो जाते हैं। आप बस स्लाइडर को हिलाते हैं।
■ विशिष्ट उपयोग के मामले (प्रॉम्प्ट उदाहरणों के साथ)
लेख में, Thariq विशिष्ट प्रॉम्प्ट उदाहरणों के साथ HTML उपयोग पैटर्न प्रस्तुत करते हैं। ये इतने व्यावहारिक हैं कि मैं उन्हें वैसे ही प्रस्तुत करूंगा।
𝟭. डिज़ाइन, योजना और अन्वेषण
Claude Code में जटिल कार्यों पर काम करते समय, एक Markdown योजना के बजाय, अन्वेषण का "जाल बिछाने" के लिए कई HTML फ़ाइलों का उपयोग करें।
प्रॉम्प्ट उदाहरण:
"मैं तय नहीं कर पा रहा हूँ कि ऑनबोर्डिंग स्क्रीन के साथ किस दिशा में जाना है। 6 पूरी तरह से अलग दृष्टिकोण उत्पन्न करें, लेआउट, टोन और घनत्व में भिन्नता रखते हुए, और उन्हें एक HTML फ़ाइल में एक ग्रिड में व्यवस्थित करें ताकि मैं उनकी तुलना कर सकूं। प्रत्येक के लिए ट्रेड-ऑफ़ को लेबल पर लिखें।"
"एक HTML फ़ाइल में एक विस्तृत कार्यान्वयन योजना बनाएं। इसमें मॉकअप, डेटा फ़्लो और समीक्षा के लिए महत्वपूर्ण कोड स्निपेट शामिल करें। इसे पढ़ने योग्य और समझने में आसान बनाएं।"
𝟮. कोड समीक्षा और समझ
आप GitHub के डिफ़ स्क्रीन की तुलना में पढ़ने में आसान कोड समीक्षाएँ बना सकते हैं।
प्रॉम्प्ट उदाहरण:
"इस PR की समीक्षा करने के लिए एक HTML आर्टिफैक्ट बनाएं। मैं स्ट्रीमिंग/बैकप्रेशर लॉजिक से परिचित नहीं हूँ, इसलिए उस पर ध्यान केंद्रित करें। इनलाइन मार्जिन एनोटेशन के साथ वास्तविक डिफ़ को रेंडर करें, महत्व के अनुसार रंग-कोडित।"
Thariq लिखते हैं, "अब, मैं हर PR में एक HTML-फॉर्मेट कोड स्पष्टीकरण संलग्न करता हूँ।"
𝟯. डिज़ाइन और प्रोटोटाइपिंग
जिस तरह Claude Design की नींव HTML है, HTML डिज़ाइन अभिव्यक्ति के लिए अत्यंत अच्छा है। भले ही अंतिम कार्यान्वयन React या Swift हो, पहले HTML में स्केच करने और फिर पुनर्लेखन करने का वर्कफ़्लो प्रभावी है।
प्रॉम्प्ट उदाहरण:
"मैं एक नए चेकआउट बटन के लिए एक प्रोटोटाइप बनाना चाहता हूँ। क्लिक करने पर इसे एनिमेट होना चाहिए और बैंगनी हो जाना चाहिए। एक HTML फ़ाइल बनाएं जहाँ मैं स्लाइडर और विकल्पों के साथ प्रत्येक एनिमेशन पैरामीटर आज़मा सकूं। उन पैरामीटर्स को कॉपी करने के लिए एक बटन शामिल करें जो अच्छे काम करते हैं।"
𝟰. रिपोर्ट, शोध और सीखना
Claude Code कई डेटा स्रोतों में जानकारी को संश्लेषित करने और इसे एक पढ़ने योग्य रिपोर्ट में सारांशित करने में अच्छा है। आप इसे Slack, कोडबेस, git हिस्ट्री और इंटरनेट खोजने के लिए कह सकते हैं ताकि लीडरशिप रिपोर्ट या घटना रिपोर्ट तैयार की जा सके।
प्रॉम्प्ट उदाहरण:
"मैं नहीं समझता कि रेट लिमिटर कैसे काम करता है। प्रासंगिक कोड पढ़ें और एक HTML व्याख्या पृष्ठ बनाएं। इसमें एक टोकन बकेट फ़्लो डायग्राम, एनोटेशन के साथ 3-4 महत्वपूर्ण कोड स्निपेट, और अंत में एक 'नुकसान' अनुभाग शामिल करें। इसे अनुकूलित करें ताकि मैं इसे एक बार पढ़ने में समझ सकूं।"
𝟱. कस्टम संपादन इंटरफ़ेस
यह व्यक्तिगत रूप से मेरे लिए सबसे चौंकाने वाला उपयोग मामला था। एक डिस्पोजेबल HTML एडिटर के साथ उन संचालनों को साकार करना जिन्हें टेक्स्ट बॉक्स में व्यक्त करना कठिन है।
प्रॉम्प्ट उदाहरण:
"मैं 30 Linear टिकटों की प्राथमिकता को पुनर्व्यवस्थित करना चाहता हूँ। एक HTML फ़ाइल बनाएं जहाँ प्रत्येक टिकट एक ड्रैगेबल कार्ड हो और उन्हें चार कॉलम में रखें: अभी / बाद में / अगला / हटाएँ। शुरू में अपने अनुमान के आधार पर उन्हें व्यवस्थित करें। अंतिम क्रम को निर्यात करने के लिए प्रत्येक बकेट के लिए एक पंक्ति के तर्क के साथ 'Markdown के रूप में कॉपी करें' बटन शामिल करें।"
"मैं इस सिस्टम प्रॉम्प्ट को समायोजित कर रहा हूँ। एक साइड-बाय-साइड एडिटर बनाएं। बाईं ओर, एक संपादन योग्य प्रॉम्प्ट (वेरिएबल स्लॉट को हाइलाइट करते हुए), और दाईं ओर, तीन नमूना इनपुट ताकि टेम्पलेट रीयल-टाइम में प्रतिबिंबित हो। एक कैरेक्टर/टोकन काउंटर और एक कॉपी बटन शामिल करें।"
क्या यह विचार अद्भुत नहीं है? आवश्यक UI को मौके पर, सिर्फ उस कार्य के लिए उत्पन्न करना। इसे पुन: उपयोग करने की आवश्यकता नहीं है। इसे परिपूर्ण होने की आवश्यकता नहीं है। लेकिन यह अकेले टेक्स्ट के साथ करने से 100 गुना अधिक कुशल है।
■ सामान्य प्रश्नों के उत्तर
लेख में, Thariq HTML के बारे में सामान्य प्रश्नों के उत्तर भी देते हैं।
"क्या यह टोकन-अक्षम नहीं है?"
→ यह सच है कि यह Markdown की तुलना में अधिक टोकन का उपयोग करता है। लेकिन अभिव्यंजक शक्ति और "वास्तव में पढ़े जाने की संभावना" पर विचार करते हुए, यह कुल मिलाकर कुशल है। Opus 4.7 के 1-मिलियन-टोकन कॉन्टेक्स्ट के साथ, वृद्धि उस स्तर पर है जो मायने नहीं रखती।
"क्या इसे उत्पन्न होने में समय नहीं लगता?"
→ इसमें Markdown की तुलना में 2-4 गुना अधिक समय लगता है। लेकिन Thariq स्वयं महसूस करते हैं कि परिणाम उस लायक है।
"संस्करण नियंत्रण के बारे में क्या?"
→ यह ईमानदारी से एक नुकसान है। HTML डिफ़ में Markdown की तुलना में अधिक शोर होता है और समीक्षा करना कठिन होता है। वर्तमान में, यह HTML की सबसे बड़ी कमजोरियों में से एक है।
"डिज़ाइन बेस्वाद लगता है?"
→ यदि आप Claude Code के फ्रंटएंड डिज़ाइन प्लगइन का उपयोग करते हैं तो इसमें सुधार होता है। इसके अलावा, यदि आप Claude Code को अपनी कंपनी का कोडबेस पढ़कर एक "डिज़ाइन सिस्टम HTML फ़ाइल" बनाने और उसके बाद उसे संदर्भ के रूप में उपयोग करने के लिए कहते हैं, तो आप इसे अपनी कंपनी की शैली के साथ एकीकृत कर सकते हैं।
■ HTML "अभी" क्यों?
इस लेख के गूंजने का कारण समय है।
अब जब Claude Code जटिल कार्यों को संभाल सकता है, आउटपुट लंबे और घने होते हैं। इसे Markdown में प्राप्त करना जारी रखना, एक ऐसा फॉर्मेट जो सिर्फ "थोड़ी सी चमक वाला टेक्स्ट" है, अब एक बाधा है।
Thariq का निष्कर्ष यह है:
"HTML का उपयोग करते समय मैं पहले से कहीं अधिक लूप में महसूस करता हूँ।"
सब कुछ Claude Code पर छोड़ने के बजाय, आउटपुट को HTML बनाकर, "मानवीय समझ, निर्णय और प्रतिक्रिया" का एक चक्र चलता है। यह AI के साथ सहयोग का सार है।
■ अभ्यास बिंदुओं का सारांश
- कोई कठिन कौशल या सेटिंग्स आवश्यक नहीं हैं। बस Claude Code को "एक HTML फ़ाइल बनाएं" बताएं।
- शुरू से एक स्किल फ़ाइल बनाने की कोशिश न करें। पहले, रॉ प्रॉम्प्ट के साथ प्रयास करें।
- "चीजों से शुरू करें जो आप चाहते हैं कि लोग पढ़ें," जैसे योजनाएँ, समीक्षाएँ, रिपोर्ट और प्रोटोटाइप।
- प्रभाव दोगुना हो जाता है जब आप "इंटरैक्टिविटी" के प्रति सचेत होते हैं, जैसे स्लाइडर और कॉपी बटन।
- उत्पन्न HTML को ब्राउज़र में खोलें या साझा करने के लिए इसे S3 पर अपलोड करें।
Markdown बुरा नहीं है। लेकिन अब जब Claude Code का आउटपुट इतना उन्नत हो गया है, तो रिसीवर के फॉर्मेट को भी अपग्रेड करने का समय आ गया है।
अगली बार जब आप Claude Code से एक योजना बनवाएं, तो एक पंक्ति जोड़ने का प्रयास करें: "इसे HTML में बनाएं।" आप अंतर देखकर आश्चर्यचकित होंगे।
उन लोगों के लिए जिन्होंने इस लेख को थोड़ा भी उपयोगी पाया:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love) है
तीन Claude Code उत्साही लोगों द्वारा संचालित एक खाता।
हम CLI उपयोग और ऑटोमेशन के बारे में प्रतिदिन पोस्ट करते हैं।
हम वर्तमान में एक सूचीबद्ध कंपनी के साथ एक AI एजेंट का सह-विकास कर रहे हैं।
हमारी सामान्य पोस्ट 👇
- Claude Code और Claude का उपयोग करके वास्तविक उत्पाद विकास के मामले
- Claude Code उपयोग / Vibe Coding / विकास रुझानों को व्यवस्थित करना
- विदेशों से Claude Code पर नवीनतम जानकारी
विकास दर्शन से लेकर डिज़ाइन, कार्यान्वयन और सुधार तक,
हम विदेशी और प्राथमिक जानकारी को इस हद तक सारांशित करते हैं कि एक काम करने वाला उत्पाद दुनिया में डाल दिया जाए, न कि केवल "बिल्ड को खत्म करना।"
यदि आप रुचि रखते हैं, तो कृपया फॉलो करें और हमें देखें 👀 मुझे लगता है कि यह लाभदायक होगा!
