DESIGN.md क्या है? एआई कोडिंग एजेंट जिस डिज़ाइन फ़ाइल को पढ़ते हैं (मुफ़्त मोबाइल ऐप उदाहरणों के साथ)

DESIGN.md एक Markdown फ़ाइल है जो एआई कोडिंग एजेंट्स के लिए किसी प्रोडक्ट की विज़ुअल पहचान का वर्णन करती है। Google Labs फ़ॉर्मेट वैकल्पिक YAML डिज़ाइन टोकन को उनके उपयोग से संबंधित लिखित मार्गदर्शन के साथ जोड़ता है। यह किसी एजेंट को इंटरफ़ेस जनरेट करने से पहले पढ़ने के लिए स्पष्ट रंग, टाइपोग्राफी, स्पेसिंग और कंपोनेंट नियम प्रदान करता है।

मोबाइल ऐप डेवलपर्स के लिए सबसे उपयोगी बात यह है कि वे इन डिज़ाइन विकल्पों को अगली स्क्रीन पर भी ले जा सकते हैं। हमारी मुफ़्त मोबाइल DESIGN.md लाइब्रेरी से एक फ़ाइल चुनें, उसके साथ दी गई स्क्रीन को समझें, और उन नियमों को अपने ऐप के हिसाब से ढाल लें।

DESIGN.md किसने बनाया?

Google Labs उस DESIGN.md फ़ॉर्मेट को प्रकाशित करता है जिसका इस्तेमाल Stitch करता है। Google ने अपने मार्च 2026 के Stitch ऐलान में DESIGN.md इंपोर्ट और एक्सपोर्ट को पेश किया, और फिर अप्रैल में इसके ड्राफ्ट स्पेसिफिकेशन को ओपन-सोर्स कर दिया। आधिकारिक रिपोजिटरी अभी भी इस फ़ॉर्मेट को अल्फा बताती है, इसलिए कोई इंटीग्रेशन बनाते समय इसके मौजूदा स्पेसिफिकेशन को ज़रूर जांच लें।

DESIGN.md नाम की फ़ाइल एक साधारण प्रोजेक्ट डॉक्यूमेंट भी हो सकती है। इसे शेयर करते समय यह स्पष्ट करें कि यह किस फ़ॉर्मेट का उपयोग करती है और मूल टेक्स्ट को जांचने के लिए उपलब्ध रखें।

DESIGN.md फ़ाइल में क्या होता है?

Google Labs स्पेसिफिकेशन वैकल्पिक YAML फ्रंटमैटर वाले एक Markdown बॉडी का वर्णन करता है। टोकन समूह में रंग, टाइपोग्राफी, गोल कोने (rounded corners), स्पेसिंग और कंपोनेंट शामिल हैं। बॉडी में उन फैसलों के बारे में बताया गया है जैसे कि एक्सेंट रंग कहाँ इस्तेमाल होना चाहिए या बटन कार्ड से कैसे अलग हैं। सटीक वैल्यू और लिखित निर्देश अलग-अलग काम करते हैं।

स्पेसिफिकेशन CSS कलर स्ट्रिंग्स को स्वीकार करता है, जिसमें hex वैल्यू भी शामिल हैं। YAML में hex रंगों को कोट करें: बिना कोट वाला हैश (#) कमेंट शुरू कर देता है। {colors.primary} जैसा रेफरेंस फ़ाइल में किसी अन्य टोकन की ओर इशारा करता है। Sleek की लाइब्रेरी मूल टेक्स्ट के साथ hex स्वैच (swatches) भी दिखाती है ताकि आप डाउनलोड करने से पहले पैलेट की जांच कर सकें।

एक न्यूनतम (minimal) DESIGN.md उदाहरण कैसा दिखता है?

एक शुरुआती DESIGN.md एक छोटे विज़ुअल सिस्टम का वर्णन कर सकता है: एक पैलेट, एक बॉडी स्टाइल, एक स्पेसिंग वैल्यू और एक बटन। नीचे दिया गया उदाहरण इस गाइड के लिए लिखा गया है। इसे DESIGN.md के रूप में सेव करें, फिर अपने मोबाइल ऐप की ज़रूरत के अनुसार नियम जोड़ते जाएँ। यह एक शुरुआत है, कोई तैयार कंपोनेंट लाइब्रेरी नहीं।

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

रिपोजिटरी के लिंट कमांड के साथ अपने जोड़े गए बदलावों की जांच करें। इसके निष्कर्ष आपको टूटे हुए रेफरेंस और कलर-पेयर कॉन्ट्रास्ट समस्याओं को पकड़ने में मदद कर सकते हैं। फिर भी रेंडर की गई स्क्रीन को खुद जांचें: एक टेक्स्ट फ़ाइल आपको कटा हुआ लेबल, भ्रमित करने वाला कंट्रोल या फॉर्म को ढकने वाला कीबोर्ड नहीं दिखा सकती।

npx @google/design.md lint DESIGN.md

Claude Code के साथ DESIGN.md का उपयोग कैसे करें?

DESIGN.md को अपने प्रोजेक्ट में रखें और UI के काम के लिए Claude Code से उसे पढ़ने को कहें। Anthropic के मेमोरी दस्तावेज़ बताते हैं कि CLAUDE.md के इंपोर्ट सेशन शुरू होने पर लोड होते हैं। ज़रूरत पर पढ़ने के लिए सामान्य पाथ का संदर्भ दें, या .claude/rules/ में अपने UI की फ़ाइलों से मेल खाने वाले paths पैटर्न के साथ नियम बनाएँ।

उदाहरण के लिए, @ इंपोर्ट के बिना यह निर्देश CLAUDE.md में जोड़ें:

For UI tasks, read DESIGN.md before creating or changing app screens.

फिर किसी खास स्क्रीन और उसकी स्थितियों (states) के लिए कहें। उदाहरण के लिए, खाली स्थिति (empty state) और विफल-सिंक स्थिति (failed-sync state) वाली एक टास्क लिस्ट बनाने को कहें। यह समीक्षा करें कि जनरेट किया गया UI फ़ाइल की वैल्यूज़ का पालन करता है या नहीं, और जब आप जानबूझकर डिज़ाइन बदलते हैं तो फ़ाइल को अपडेट करें। Claude के साथ डिज़ाइन करने की हमारी गाइड इस व्यापक वर्कफ़्लो को कवर करती है।

Cursor या Stitch के साथ DESIGN.md का उपयोग कैसे करें?

Cursor में, टास्क के साथ स्पष्ट रूप से DESIGN.md अटैच करें या किसी प्रोजेक्ट रूल में इसका रेफरेंस दें। Stitch में, प्रोजेक्ट्स के बीच डिज़ाइन नियमों को ले जाने के लिए इसके DESIGN.md इंपोर्ट और एक्सपोर्ट वर्कफ़्लो का उपयोग करें। यह अंतर महत्वपूर्ण है: एक कोडिंग एजेंट को अपने संदर्भ (context) में फ़ाइल की आवश्यकता होती है, जबकि Stitch इस फ़ॉर्मेट के इर्द-गिर्द बना एक वर्कफ़्लो प्रदान करता है।

Cursor के लिए, नियम डॉक्यूमेंटेशन प्रोजेक्ट नियमों और फ़ाइल रेफरेंस को समझाता है। एक नियम एजेंट को UI बदलावों के लिए DESIGN.md पढ़ने का निर्देश दे सकता है। यह चुनें कि नियम कब लागू होता है ताकि असंबद्ध बैकएंड टास्क में लंबा डिज़ाइन डॉक्यूमेंट न जुड़ा रहे।

Stitch के लिए, Google का DESIGN.md ऐलान पुष्टि करता है कि आप प्रोजेक्ट्स के बीच डिज़ाइन नियमों को इंपोर्ट और एक्सपोर्ट कर सकते हैं। इंपोर्ट करने के बाद, जनरेट की गई स्क्रीन की तुलना सोर्स से करें और ज़रूरत के अनुसार नियम बदलें।

Sleek मोबाइल ऐप स्टाइल के लिए DESIGN.md का उपयोग कैसे करता है?

Sleek हर रीमिक्स करने योग्य विशेष रेफरेंस के साथ एक डिज़ाइन फ़ाइल स्टोर करता है। जब आप "यह स्टाइल इस्तेमाल करें" चुनते हैं और अपने ऐप का वर्णन करते हैं, तो Sleek उस फ़ाइल को आपके ब्रीफ़ के साथ जनरेशन प्रक्रिया में भेजता है। फ़ाइल दिखावट का वर्णन करती है; आपका ब्रीफ़ ऐप के उद्देश्य और कंटेंट को तय करता है। आप पहले स्क्रीन और फ़ाइल दोनों की जांच कर सकते हैं।

रेफरेंस गैलरी और DESIGN.md लाइब्रेरी एक ही विशेष प्रोजेक्ट्स का उपयोग करती हैं। Sleek, Google Labs की संरचना का उपयोग करता है और बॉर्डर तथा शैडो जैसी कंपोनेंट प्रॉपर्टी जोड़ता है, जिन्हें लिंटर चेतावनियों के रूप में दिखाता है। यह आइकनोग्राफी, इलस्ट्रेशन, दृश्य पदानुक्रम और विशिष्ट विज़ुअल विवरणों के लिए मार्गदर्शन भी जोड़ता है। स्टाइल फ़ाइल में नया ऐप जनरेट करने के लिए विज़ुअल विकल्प दर्ज होते हैं।

किसी स्टाइल का DESIGN.md कॉपी या डाउनलोड करने के लिए उसे लाइब्रेरी में खोलें, या अपने ऐप का आइडिया दर्ज करने के लिए Use this style in Sleek चुनें। यदि आप अपने कोडिंग एनवायरनमेंट से Sleek को चलाना चाहते हैं, तो एजेंट सेटअप गाइड उस अलग इंटीग्रेशन को समझाती है।

DESIGN.md के बारे में अक्सर पूछे जाने वाले सवाल