Claude Code में एक पेज के लिए तय संस्करण की DESIGN.md संदर्भ फ़ाइल इस्तेमाल करें

मौजूदा पेज में सुधारने और सुरक्षित रखने की ठोस चीज़ें होती हैं। VoltAgent का Awesome DESIGN.md संग्रह सार्वजनिक वेबसाइटों का सामान्य पाठ में विश्लेषण देता है, जिसे AI कोडिंग एजेंट को संदर्भ बना सकते हैं। यह गाइड 14 अक्टूबर 2026 के कमिट की एक फ़ाइल को सीमित Claude Code बदलाव का दृश्य संदर्भ बनाती है। परिणाम तभी पूरा है जब आप बदला कोड और दिखता पेज स्वयं जाँचें।

BIG CHANGE ने तय रिपॉज़िटरी और Claude Code दस्तावेज़ पढ़े। हमने Claude Code नहीं चलाया, पेज नहीं बदला, समय नहीं मापा और बने परिणाम की जाँच नहीं की। उस तय ट्री में design-md/*/DESIGN.md के सीधे अंतर्गत 84 फ़ाइलें हैं; संख्या उसी कमिट की है, स्थायी कैटलॉग आकार की नहीं।

बड़ा बदलाव

• क्या बदला: तय संस्करण का एक डिज़ाइन विश्लेषण, एक अधिकृत पेज के बदलाव के लिए स्पष्ट संदर्भ दिया जा सकता है।
• यह महत्वपूर्ण क्यों है: मालिक उपयोगी लेआउट या दूरी का विचार ले सकता है और परिणाम को पेज के असली विषय, पहचान और व्यवहार से जाँच सकता है।
• किस पर ध्यान दें: संदर्भ समुदाय का विश्लेषण है। ब्रांड विवरण और उसके कुछ अंदरूनी निर्देश गलत या आपके पेज के लिए अनुपयुक्त हो सकते हैं।

शुरू करने से पहले

ऐसा पेज और रिपॉज़िटरी चाहिए जिन्हें बदलने की अनुमति हो, कार्य कॉपी या ब्रांच, पेज स्थानीय रूप से दिखाने का तरीका और पात्र खाते या प्रदाता से Claude Code की पहुँच। बदलने वाली पेज फ़ाइल और प्रोजेक्ट का सामान्य चलाने व जाँचने का तरीका जानें। पाठक, ज़रूरी पाठ व लिंक, स्वीकृत रंग, फ़ॉन्ट और लोगो तथा हल करने वाली एक दृश्य समस्या लिखें। बदलाव परखने के लिए मालिक के ये निर्णय कार्य कॉपी के साथ रखें।

ग्राहक की निजी सामग्री देने से पहले खाते की डेटा नीति और टूल अनुमतियाँ जाँचें। Claude Code खाते की शर्तों के अनुसार प्रॉम्प्ट और प्रोजेक्ट सामग्री संसाधित करता है; स्थानीय प्रोजेक्ट का अर्थ मॉडल सत्र भी केवल स्थानीय होना नहीं है। काम में खुलने वाले निजी पाठ, संसाधन या कोड साझा करने की अनुमति सुनिश्चित करें।

एक पेज पर एक संदर्भ इस्तेमाल करें

1. खोलें तय संग्रह का README। ऐसी एक design-md/<name>/DESIGN.md चुनें जिसमें तय समस्या के लिए उपयोगी विचार हो। उपयोग से पहले पूरी फ़ाइल पढ़ें। Notion उदाहरण में लेआउट, टाइप, दूरी और घटकों के सुझावों का प्रारूप है। इसमें कैप्सूल और आयताकार दोनों बटन बताए हैं। इस विरोध के कारण अपना निर्णय लें, न कि Claude Code को हर पंक्ति मानने को कहें।
2. उस एक तय DESIGN.md को कार्य प्रोजेक्ट में कॉपी करें, जैसे design-reference/DESIGN.md पर। साथ में मूल URL, पथ और कमिट 3b605329240ce735b510037cca322f1831fdd7f8 दर्ज करें। कॉपी के साथ रिपॉज़िटरी की MIT कॉपीराइट और अनुमति सूचना रखें। Markdown संदर्भ के लिए कोई पैकेज इंस्टॉल नहीं करना पड़ता। लाइसेंस रिपॉज़िटरी सामग्री पर लागू है; वह दिखाई गई कंपनी का लोगो, फ़ॉन्ट फ़ाइलें, चित्र या ट्रेडमार्क इस्तेमाल करने का अधिकार नहीं देता।
3. अधिकृत प्रोजेक्ट में Claude Code खोलें और कॉपी की फ़ाइल स्पष्ट रूप से संदर्भ दें। Anthropic फ़ाइल संदर्भ और अलग प्रोजेक्ट निर्देश फ़ाइलें समझाता है; फ़ोल्डर में अलग DESIGN.md रख देने से सिद्ध नहीं होता कि Claude Code ने उसे लोड किया। नीचे कोष्ठकों में पेज पथ और मालिक के नियम वास्तविक मानों से बदलें, और बदलाव स्वीकारने से पहले फ़ाइल पढ़े जाने की पुष्टि करें।

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. चलाने या स्वीकारने से पहले प्रस्तावित अंतर पढ़ें। हर बदली फ़ाइल, पाठ और लिंक जाँचें। अनचाही निर्भरता, संसाधन या दूसरे पेज का बदलाव अस्वीकार करें। पेज दिखाने के लिए प्रोजेक्ट की अपनी दस्तावेज़ित रन कमांड इस्तेमाल करें। कंप्यूटर और फ़ोन की चौड़ाई पर खोलें; एजेंट के इरादे के वर्णन के बजाय असली पेज जाँचें।
5. दिखते परिणाम की लिखी ज़रूरतों से तुलना करें। अपेक्षित पाठ व लिंक, उपयोगी शीर्षक क्रम, पर्याप्त पाठ व नियंत्रण कंट्रास्ट और फ़ोन पर बिना कटे सामग्री व बिना क्षैतिज स्क्रॉल जाँचें। कीबोर्ड से प्रभावित लिंक, बटन, मेनू और फ़ॉर्म तक पहुँचकर चलाएँ। बदले इंटरैक्शन, दिखते फ़ोकस और त्रुटि स्थिति समेत जाँचें। पेज संस्करण, चौड़ाई, जाँचें और कमियाँ दर्ज करें। आपके पेज पर जाँच सफल होने पर ही बदलाव स्वीकारें।

यदि Claude Code संदर्भ छोड़ दे, फ़ाइल फिर बताएँ और इस्तेमाल किए हिस्से पूछें। यदि संदर्भ ब्रांड नियमों से टकराए, वह निर्देश अनुरोध से हटाकर प्रभावित कोड सुधारें। लिंक, फ़ोकस रास्ता या इंटरैक्शन टूटे तो पिछला काम करता व्यवहार बहाल करें और छोटा बदलाव करें। पेज दिखाना या परिणाम जाँचना संभव न हो तो संभव होने तक बदलाव स्वीकार न करें।

संग्रह अन्य साइटों का समुदाय द्वारा विवरण है, जिसे रखरखावकर्ता जैसा है वैसा देते हैं। Notion फ़ाइल में विरोधी बटन आकार, गैर-दस्तावेज़ित होवर व्यवहार और इस गाइड द्वारा अप्रमाणित कोड-जाँच कमांड है। सुझाई कमांड के बजाय प्रोजेक्ट की जानी जाँचें करें। Claude Code उपयोग और बाद के होस्टिंग या संसाधन खर्च खाते व प्रोजेक्ट पर निर्भर हैं; यहाँ संपादन समय या अंतिम डिज़ाइन गुणवत्ता स्थापित नहीं हुई।

AI की मदद से पेज बनाने के दूसरे तरीके के लिए हमारी Genspark प्रोटोटाइप गाइड होस्ट किए प्रोटोटाइप की कॉपी और निर्यातित स्रोत ZIP की जाँच बताती है। उस काम का शुरुआती साधन और पूर्णता मानदंड अलग है।

स्रोत और आगे पढ़ें

• VoltAgent का तय README संग्रह और सार्वजनिक साइटों के यथावत विश्लेषण को समझाता है। फ़ाइल संख्या तय रिकर्सिव ट्री से है, भविष्य के संस्करणों का दावा नहीं।
• तय संस्करण की Notion DESIGN.md प्रारूप और अंदरूनी विरोध दिखाती है। यह Notion द्वारा स्वीकृत विनिर्देश या उसके संसाधनों का अधिकार नहीं है।
• रिपॉज़िटरी का MIT लाइसेंस प्रतियों या महत्वपूर्ण हिस्सों में कॉपीराइट व अनुमति सूचना बनाए रखना आवश्यक करता है।
• Anthropic की Claude Code शुरुआत गाइड, फ़ाइल संदर्भ सलाह और प्रोजेक्ट निर्देश दस्तावेज़ पहुँच और स्पष्ट संदर्भ बताते हैं। ये इस पेज बदलाव या अलग संदर्भ के अपने-आप लोड होने को सत्यापित नहीं करते।
• Anthropic के खर्च, डेटा उपयोग और अनुमति दस्तावेज़ खाते के अनुसार उपयोग व नियंत्रण बताते हैं। इस गाइड के लिए कोई सत्र, बिल या परिणामी पेज नहीं जाँचा गया।