Antigravity और Stitch MCP की मदद से, डिज़ाइन को कोड में बदलना

1. परिचय

इस कोडलैब में, एआई की मदद से डिज़ाइन की गई वेबसाइट को एजेंट-फ़र्स्ट डेवलपमेंट एनवायरमेंट से जोड़कर, प्रोडक्शन के लिए तैयार वेबसाइट बनाने का तरीका बताया गया है. आपको हाई-फ़िडेलिटी यूज़र इंटरफ़ेस (यूआई) जनरेट करने के लिए, Google Stitch का इस्तेमाल करना होगा. इसके बाद, इसे मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) की मदद से, Antigravity IDE से कनेक्ट करना होगा. आखिर में, "डिज़ाइन डीएनए" को फ़ेच करने के लिए, ऑटोनॉमस एजेंट का इस्तेमाल किया जाएगा. साथ ही, पिक्सल-परफ़ेक्ट React ऐप्लिकेशन को लागू किया जाएगा.

आपको क्या करना होगा

• Stitch में यूआई जनरेट करना: Google Stitch में, नैचुरल लैंग्वेज का इस्तेमाल करके वेब डिज़ाइन बनाएँ.
• एमसीपी से कनेक्ट करें: मॉडल कॉन्टेक्स्ट प्रोटोकॉल का इस्तेमाल करके, Antigravity को अपने Stitch प्रोजेक्ट से कनेक्ट करें.
• ऑटोनॉमस तरीके से लागू करना: डिज़ाइन टोकन पाने और React/Tailwind प्रोजेक्ट को तैयार करने के लिए, Antigravity के "Agent Tab" का इस्तेमाल करें.
• पुष्टि करना और बेहतर बनाना: इंटिग्रेटेड ब्राउज़र का इस्तेमाल करके, कोड की "वाइब चेक" करें. इससे यह पता चलेगा कि कोड, ओरिजनल डिज़ाइन के मुताबिक है या नहीं.

आपको क्या सीखने को मिलेगा

• Google Stitch का इस्तेमाल करके, हाई फ़िडेलिटी वाले यूज़र इंटरफ़ेस (यूआई) डिज़ाइन का प्रोटोटाइप तेज़ी से बनाने का तरीका.
• Antigravity IDE में एमसीपी सर्वर को कॉन्फ़िगर करने का तरीका.
• विज़ुअल डिज़ाइन के मेटाडेटा को मॉड्यूलर कोड में बदलने के लिए, अपने-आप काम करने वाले एजेंट का इस्तेमाल कैसे करें.

आपको इन चीज़ों की ज़रूरत होगी

• Chrome वेब ब्राउज़र
• Antigravity IDE इंस्टॉल किया गया हो
• Google Stitch खाता
• Stitch API पासकोड
• डिवाइस पर Node.js (v18+) इंस्टॉल होना चाहिए

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

1. Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
2. पक्का करें कि आपके Cloud प्रोजेक्ट के लिए बिलिंग चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें .
3. stitch.withgoogle.com पर जाएं और पक्का करें कि आपके पास साइन इन करने का विकल्प हो.
4. पक्का करें कि आपने Antigravity IDE इंस्टॉल किया हो. यह antigravity.google पर उपलब्ध है.

2. Google Stitch में डिज़ाइन बनाना

एजेंट को फ़ॉलो करने के लिए, "भरोसेमंद सोर्स" के तौर पर एक विज़ुअल की ज़रूरत होती है. कोड लिखने से पहले, हमें यह तय करना होगा कि हमें किस तरह का चार्ट बनाना है.

1. प्लैटफ़ॉर्म ऐक्सेस करना: stitch.withgoogle.com पर जाएं.
2. प्रोजेक्ट टाइप चुनें: मुख्य डैशबोर्ड पर, नया डिज़ाइन शुरू करें टॉगल ढूंढें. वेब पर क्लिक करके पक्का करें कि आपका डिज़ाइन, ब्राउज़र पर दिखने वाले लेआउट के लिए ऑप्टिमाइज़ किया गया हो.
3. अपना मॉडल चुनें: प्रॉम्प्ट बॉक्स में मौजूद, मॉडल के ड्रॉपडाउन मेन्यू पर क्लिक करें. फ़िलहाल, इसमें 3.0 Flash दिख रहा है. पक्का करें कि Gemini 3 को चुना गया हो, ताकि आपको सबसे ऐडवांस रीज़निंग और लेआउट जनरेट करने की सुविधा मिल सके.
4. अपने विज़न के बारे में बताएं: "अपने डिज़ाइन के बारे में बताएं" लेबल वाले टेक्स्ट एरिया में, अपना प्रॉम्प्ट डालें:

"LaunchPad नाम की स्पेस-टेक स्टार्टअप कंपनी के लिए, आधुनिक SaaS लैंडिंग पेज डिज़ाइन करो. मिडनाइट ब्लू और नियॉन पर्पल पैलेट का इस्तेमाल करो. इसमें ‘शुरू करें' बटन वाला हीरो सेक्शन, तीन कॉलम वाली सुविधाओं की ग्रिड, और ग्लासमॉर्फ़िज़्म वाली कीमत की टेबल शामिल करो." 5. जनरेट करें: जनरेट करने की प्रोसेस शुरू करने के लिए, ऐरो आइकॉन (मॉडल सिलेक्टर के बगल में) पर क्लिक करें. 6. बदलाव करें और नाम दें: यूज़र इंटरफ़ेस (यूआई) जनरेट होने के बाद, सबसे ऊपर मौजूद हेडर में अपने प्रोजेक्ट का नाम दें. इसे LaunchPad नाम दें. आईडीई पर जाने से पहले, चैट साइडबार का इस्तेमाल करके किसी खास एलिमेंट को बेहतर बनाया जा सकता है.

[!TIP] आपके पास

"इन प्रॉम्प्ट को आज़माएं"

सेक्शन पर जाएं.

3. Antigravity MCP को कॉन्फ़िगर करना

Antigravity Agent को अपने डिज़ाइन को "पढ़ने" की अनुमति देने के लिए, आपको एक सुरक्षित एपीआई कुंजी जनरेट करनी होगी. साथ ही, Stitch MCP सर्वर जोड़ना होगा.

Stitch API पासकोड जनरेट करना

1. Google Stitch में, सबसे ऊपर दाएं कोने में मौजूद अपनी प्रोफ़ाइल फ़ोटो पर क्लिक करें.
2. ड्रॉपडाउन मेन्यू से स्टिच सेटिंग चुनें.
3. एपीआई पासकोड सेक्शन पर जाएं.
4. कुंजी बनाएं बटन पर क्लिक करें.
5. कुंजी को कॉपी करें: जनरेट की गई कुंजी को तुरंत कॉपी करें और उसे सुरक्षित रखें. आपको इसकी ज़रूरत अगले चरण में पड़ेगी.

Antigravity में Stitch MCP को कॉन्फ़िगर करना

1. Antigravity IDE खोलें.
2. Agent Manager खोलें

किसी भी समय, CMD+E (Mac) या CTRL+E (Windows) दबाकर, एजेंट मैनेजर और एडिटर के बीच टॉगल किया जा सकता है. इसके अलावा, मेन्यू बार में सबसे ऊपर दाईं ओर मौजूद, 'एडिटर खोलें' और 'एजेंट मैनेजर खोलें' बटन का इस्तेमाल करके भी ऐसा किया जा सकता है. .

3. + फ़ाइल फ़ोल्डर खोलें पर क्लिक करें.

किसी वर्कस्पेस में नई बातचीत शुरू करने के लिए, 'बातचीत शुरू करें' टैब से मनचाहा वर्कस्पेस चुनें. इसके अलावा, साइडबार में वर्कस्पेस के नाम के बगल में मौजूद प्लस बटन पर क्लिक करें.

4. 'नया फ़ाइल फ़ोल्डर खोलें' पर क्लिक करें. इसके बाद, फ़ाइल फ़ोल्डर को नाम दें LaunchPad-Project और कोई लोकल डायरेक्ट्री चुनें. इससे यह पक्का होता है कि एजेंट के पास फ़ाइलों को व्यवस्थित करने के लिए कोई खास रूट फ़ोल्डर है, ताकि अन्य प्रोजेक्ट में कोई गड़बड़ी न हो.

Stitch MCP को कॉन्फ़िगर करना

1. अपने नए वर्कस्पेस में, Agent Manager (Mac के लिए CMD+E या Windows के लिए CTRL+E) पर वापस जाएं और MCP Servers चुनें.

एडिटर के एजेंट पैनल में सबसे ऊपर मौजूद "..." ड्रॉपडाउन से, MCP स्टोर खोलें.

Antigravity, मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) के साथ काम करता है. यह एक ऐसा स्टैंडर्ड है जिसकी मदद से एडिटर, आपके लोकल टूल, डेटाबेस, और बाहरी सेवाओं से सुरक्षित तरीके से कनेक्ट हो सकता है. इस इंटिग्रेशन की मदद से, एआई को रीयल-टाइम में कॉन्टेक्स्ट मिलता है. यह कॉन्टेक्स्ट, सिर्फ़ आपके एडिटर में खुली हुई फ़ाइलों से नहीं मिलता.

एमसीपी, Antigravity और Google Stitch के बीच एक पुल की तरह काम करता है. मैन्युअल तरीके से डिज़ाइन टोकन एक्सपोर्ट करने या हेक्स कोड और लेआउट मेटाडेटा को एडिटर में कॉपी करने के बजाय, MCP की मदद से Antigravity, ज़रूरत पड़ने पर सीधे आपके Stitch प्रोजेक्ट से Design DNA फ़ेच कर सकता है.

2. "Stitch" खोजें और Install पर क्लिक करें.
3. जब कहा जाए, तब कॉन्फ़िगरेशन फ़ील्ड में अपना Stitch API पासकोड चिपकाएं.
4. पुष्टि करें: एजेंट चैट में टाइप करें: List my Stitch projects. अगर यह LaunchPad दिखाता है, तो इसका मतलब है कि आप तैयार हैं.

5. पुष्टि करें: एजेंट चैट में, List my Stitch projects. टाइप करें. अगर एजेंट LaunchPad दिखाता है, तो इसका मतलब है कि ब्रिज को सही तरीके से कॉन्फ़िगर किया गया है.

4. डिज़ाइन कॉन्टेक्स्ट फ़ेच करना

अब एजेंट को डिज़ाइन मेटाडेटा को प्रोसेस करना होगा, ताकि कोड सटीक हो.

1. Antigravity चैट में टाइप करें: "Use the Stitch MCP to fetch the ‘LaunchPad' project. कलर पैलेट और टाइपोग्राफ़ी एक्सट्रैक्ट करो. इसके बाद, मेरी रूट डायरेक्ट्री में एक DESIGN.md फ़ाइल जनरेट करो."
2. समीक्षा करें: एजेंट ने जो हेक्स कोड और लेआउट के नियम निकाले हैं उन्हें देखने के लिए, नई बनाई गई DESIGN.md खोलें.

5. लागू करना (बिल्ड)

एजेंट का इस्तेमाल करके, डिज़ाइन को काम करने वाले React ऐप्लिकेशन में बदलें.

1. "बनाओ" प्रॉम्प्ट दें:

"मुझे अब यह पूरी वेबसाइट बनानी है. React और Tailwind CSS का इस्तेमाल करो. पक्का करें कि कॉम्पोनेंट मॉड्यूलर हों. इसके बाद, देव सर्वर चलाओ और इसे इंटिग्रेटेड ब्राउज़र में दिखाओ." 2. एजेंट को देखें: यह टर्मिनल में प्रोजेक्ट को तैयार करेगा, एडिटर में कॉम्पोनेंट लिखेगा, और इंटिग्रेटेड ब्राउज़र में झलक खोलेगा.

6. समीक्षा करना और बेहतर बनाना

आउटपुट की पुष्टि करें और इमेज में मौजूद किसी भी तरह की गड़बड़ी को ठीक करने के लिए, एजेंट का इस्तेमाल करें.

1. इंटीग्रेटेड ब्राउज़र के आउटपुट की तुलना, अपने ओरिजनल स्टिच डिज़ाइन से करें.
2. अगर कोई एलिमेंट (जैसे, बटन पैडिंग या फ़ॉन्ट वेट) मेल नहीं खाता है, तो एजेंट को यह निर्देश दें: "‘शुरू करें' बटन की पैडिंग थोड़ी अलग है. Stitch के डिज़ाइन को फिर से देखें और Tailwind क्लास अपडेट करें."
3. एजेंट, डिज़ाइन के कॉन्टेक्स्ट को फिर से फ़ेच करेगा और समस्या को तुरंत ठीक कर देगा.

7. खास जानकारी और अगले चरण

बधाई हो! आपने Antigravity और Stitch MCP का इस्तेमाल करके, हाई-फ़िडेलिटी डिज़ाइन और फ़ंक्शनल कोडबेस के बीच के अंतर को कम कर दिया है.

आपने क्या किया, इसकी खास जानकारी:

• Gemini 3 का इस्तेमाल करके, Stitch में यूज़र इंटरफ़ेस (यूआई) डिज़ाइन किया.
• सुरक्षित एपीआई पासकोड जनरेट किया गया और Antigravity MCP को कॉन्फ़िगर किया गया.
• React + Tailwind साइट बनाने और उसकी पुष्टि करने के लिए, ऑटोनॉमस एजेंट का इस्तेमाल किया गया.