Markdown संस्करण

AI-translated from English; not yet reviewed by a fluent editor.

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

> तय संस्करण की एक DESIGN.md फ़ाइल चुनें, उसे Claude Code को अधिकृत पेज बदलने के लिए दें और फिर कोड तथा कंप्यूटर व फ़ोन पर वास्तविक रूप जाँचें।

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

मौजूदा पेज में सुधारने और सुरक्षित रखने की ठोस चीज़ें होती हैं। VoltAgent का [Awesome DESIGN.md संग्रह](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) सार्वजनिक वेबसाइटों का सामान्य पाठ में विश्लेषण देता है, जिसे AI कोडिंग एजेंट को संदर्भ बना सकते हैं। यह गाइड 14 अक्टूबर 2026 के कमिट की एक फ़ाइल को सीमित Claude Code बदलाव का दृश्य संदर्भ बनाती है। परिणाम तभी पूरा है जब आप बदला कोड और दिखता पेज स्वयं जाँचें।

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

## बड़ा बदलाव

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

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

ऐसा पेज और रिपॉज़िटरी चाहिए जिन्हें बदलने की अनुमति हो, कार्य कॉपी या ब्रांच, पेज स्थानीय रूप से दिखाने का तरीका और पात्र खाते या प्रदाता से [Claude Code](https://code.claude.com/docs/en/quickstart) की पहुँच। बदलने वाली पेज फ़ाइल और प्रोजेक्ट का सामान्य चलाने व जाँचने का तरीका जानें। पाठक, ज़रूरी पाठ व लिंक, स्वीकृत रंग, फ़ॉन्ट और लोगो तथा हल करने वाली एक दृश्य समस्या लिखें। बदलाव परखने के लिए मालिक के ये निर्णय कार्य कॉपी के साथ रखें।

ग्राहक की निजी सामग्री देने से पहले खाते की [डेटा नीति](https://code.claude.com/docs/en/data-usage) और [टूल अनुमतियाँ](https://code.claude.com/docs/en/permissions) जाँचें। Claude Code खाते की शर्तों के अनुसार प्रॉम्प्ट और प्रोजेक्ट सामग्री संसाधित करता है; स्थानीय प्रोजेक्ट का अर्थ मॉडल सत्र भी केवल स्थानीय होना नहीं है। काम में खुलने वाले निजी पाठ, संसाधन या कोड साझा करने की अनुमति सुनिश्चित करें।

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

1. खोलें [तय संग्रह का README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)। ऐसी एक `design-md/<name>/DESIGN.md` चुनें जिसमें तय समस्या के लिए उपयोगी विचार हो। उपयोग से पहले पूरी फ़ाइल पढ़ें। [Notion उदाहरण](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) में लेआउट, टाइप, दूरी और घटकों के सुझावों का प्रारूप है। इसमें कैप्सूल और आयताकार दोनों बटन बताए हैं। इस विरोध के कारण अपना निर्णय लें, न कि Claude Code को हर पंक्ति मानने को कहें।
2. उस एक तय `DESIGN.md` को कार्य प्रोजेक्ट में कॉपी करें, जैसे `design-reference/DESIGN.md` पर। साथ में मूल URL, पथ और कमिट `3b605329240ce735b510037cca322f1831fdd7f8` दर्ज करें। कॉपी के साथ रिपॉज़िटरी की [MIT कॉपीराइट और अनुमति सूचना](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) रखें। Markdown संदर्भ के लिए कोई पैकेज इंस्टॉल नहीं करना पड़ता। लाइसेंस रिपॉज़िटरी सामग्री पर लागू है; वह दिखाई गई कंपनी का लोगो, फ़ॉन्ट फ़ाइलें, चित्र या ट्रेडमार्क इस्तेमाल करने का अधिकार नहीं देता।
3. अधिकृत प्रोजेक्ट में Claude Code खोलें और कॉपी की फ़ाइल स्पष्ट रूप से संदर्भ दें। Anthropic [फ़ाइल संदर्भ](https://code.claude.com/docs/en/common-workflows) और अलग [प्रोजेक्ट निर्देश फ़ाइलें](https://code.claude.com/docs/en/memory) समझाता है; फ़ोल्डर में अलग `DESIGN.md` रख देने से सिद्ध नहीं होता कि Claude Code ने उसे लोड किया। नीचे कोष्ठकों में पेज पथ और मालिक के नियम वास्तविक मानों से बदलें, और बदलाव स्वीकारने से पहले फ़ाइल पढ़े जाने की पुष्टि करें।

```markdown
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 प्रोटोटाइप गाइड](https://bigchange.ai/blog/genspark-design-prototype-source-zip) होस्ट किए प्रोटोटाइप की कॉपी और निर्यातित स्रोत ZIP की जाँच बताती है। उस काम का शुरुआती साधन और पूर्णता मानदंड अलग है।

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

- [VoltAgent का तय README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) संग्रह और सार्वजनिक साइटों के यथावत विश्लेषण को समझाता है। फ़ाइल संख्या तय रिकर्सिव ट्री से है, भविष्य के संस्करणों का दावा नहीं।
- तय संस्करण की [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) प्रारूप और अंदरूनी विरोध दिखाती है। यह Notion द्वारा स्वीकृत विनिर्देश या उसके संसाधनों का अधिकार नहीं है।
- रिपॉज़िटरी का [MIT लाइसेंस](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) प्रतियों या महत्वपूर्ण हिस्सों में कॉपीराइट व अनुमति सूचना बनाए रखना आवश्यक करता है।
- Anthropic की [Claude Code शुरुआत गाइड](https://code.claude.com/docs/en/quickstart), [फ़ाइल संदर्भ सलाह](https://code.claude.com/docs/en/common-workflows) और [प्रोजेक्ट निर्देश दस्तावेज़](https://code.claude.com/docs/en/memory) पहुँच और स्पष्ट संदर्भ बताते हैं। ये इस पेज बदलाव या अलग संदर्भ के अपने-आप लोड होने को सत्यापित नहीं करते।
- Anthropic के [खर्च](https://code.claude.com/docs/en/costs), [डेटा उपयोग](https://code.claude.com/docs/en/data-usage) और [अनुमति](https://code.claude.com/docs/en/permissions) दस्तावेज़ खाते के अनुसार उपयोग व नियंत्रण बताते हैं। इस गाइड के लिए कोई सत्र, बिल या परिणामी पेज नहीं जाँचा गया।

## Sources

- [Awesome DESIGN.md तय README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — अपरिवर्तनीय कमिट पर रिपॉज़िटरी का मुख्य विवरण और एक फ़ाइल कॉपी करने के निर्देश। सार्वजनिक साइट विश्लेषण यथावत बताए गए हैं; परिणाम गुणवत्ता की भाषा प्रचारात्मक है। स्वतंत्र रूप से पढ़े पूरे ट्री में 84 सीधे DESIGN.md हैं, जो इसी संस्करण की संख्या है।
- [तय कमिट का Notion DESIGN.md उदाहरण](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — लेआउट, दूरी, टाइपोग्राफ़ी और घटक विश्लेषण का उदाहरण। कैप्सूल या आयताकार बटन में विरोध है, सत्यापित होवर या गति व्यवहार स्थापित नहीं और अप्रमाणित कोड-जाँच कमांड सुझाई गई है। यह समुदाय विश्लेषण है, Notion का आधिकारिक ब्रांड विनिर्देश या संसाधन कॉपी करने की अनुमति नहीं।
- [Awesome DESIGN.md MIT लाइसेंस](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; प्रतियों या महत्वपूर्ण हिस्सों में कॉपीराइट और अनुमति सूचना रहनी चाहिए। रिपॉज़िटरी लाइसेंस प्रदर्शित साइट के ट्रेडमार्क, लोगो, स्वामित्व वाले फ़ॉन्ट या चित्र के अधिकार स्थापित नहीं करता।
- [Claude Code त्वरित शुरुआत](https://code.claude.com/docs/en/quickstart) — प्रोजेक्ट, खाते या प्रदाता और साइन-इन के आधिकारिक पूर्वापेक्षित नियम। पाठक को पात्र तरीका और अपना प्रोजेक्ट इस्तेमाल करना चाहिए; BIG CHANGE ने Claude Code सेटअप या भुगतान खाते का परीक्षण नहीं किया।
- [Claude Code सामान्य कार्यप्रवाह](https://code.claude.com/docs/en/common-workflows) — स्पष्ट @file संदर्भ और प्रोजेक्ट काम की आधिकारिक सलाह। सेटिंग व सीमाओं के भीतर कॉपी की फ़ाइल को जानबूझकर संदर्भित करना समर्थित है, किसी भी DESIGN.md का स्वतः लोड होना नहीं।
- [Claude Code प्रोजेक्ट मेमोरी](https://code.claude.com/docs/en/memory) — प्रोजेक्ट निर्देश फ़ाइलें और विन्यास के अनुसार लोड होना बताती है। अलग DESIGN.md के रिपॉज़िटरी में मात्र मौजूद होने से लोड होने को स्थापित नहीं करती; गाइड निर्देश विन्यास नहीं बदलती।
- [Claude Code खर्च](https://code.claude.com/docs/en/costs) — खाते पर निर्भर उपयोग और बिलिंग का संदर्भ। Markdown फ़ाइल पैकेज निर्भरता नहीं जोड़ती, पर गाइड किसी Claude Code काम की तय कीमत, मुफ़्त कोटा या समय बचत स्थापित नहीं करती।
- [Claude Code डेटा उपयोग](https://code.claude.com/docs/en/data-usage) — खाते के अनुसार आधिकारिक डेटा व्यवहार और स्थानीय संवाद रिकॉर्ड। निजी ग्राहक कोड या संसाधन साझा करने से पहले मालिक नीति पढ़े; केवल स्थानीय प्रसंस्करण या प्रशिक्षण का कोई सार्वभौमिक दावा नहीं।
- [Claude Code अनुमतियाँ](https://code.claude.com/docs/en/permissions) — आधिकारिक टूल अनुमति नियंत्रण। प्रॉम्प्ट निर्देश स्वयं टूल पहुँच देते या लागू नहीं करते; पाठक को प्रस्तावित क्रियाएँ और वास्तविक बदली फ़ाइलें देखनी चाहिए।