1. परिचय
इस कोडलैब में, एआई की मदद से डिज़ाइन की गई वेबसाइट को एजेंट-फ़र्स्ट डेवलपमेंट एनवायरमेंट के साथ जोड़कर, प्रोडक्शन के लिए तैयार वेबसाइट बनाई जाएगी. इसमें Google Stitch का इस्तेमाल करके, हाई-फ़िडेलिटी यूआई जनरेट किया जाएगा. इसके बाद, इसे मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) की मदद से Antigravity IDE से कनेक्ट किया जाएगा. आखिर में, "डिज़ाइन डीएनए" फ़ेच करने और पिक्सल-परफ़ेक्ट React ऐप्लिकेशन लागू करने के लिए, अपने-आप काम करने वाले एजेंट का इस्तेमाल किया जाएगा.
आप क्या करेंगे
- Stitch में यूआई जनरेट करना: Google Stitch में, नैचुरल लैंग्वेज का इस्तेमाल करके, वेब के लिए पूरी तरह से काम करने वाला डिज़ाइन बनाना.
- एमसीपी के साथ जोड़ना: मॉडल कॉन्टेक्स्ट प्रोटोकॉल का इस्तेमाल करके, Antigravity को अपने Stitch प्रोजेक्ट से कनेक्ट करना.
- अपने-आप लागू करना: डिज़ाइन टोकन फ़ेच करने और React/Tailwind प्रोजेक्ट को तैयार करने के लिए, Antigravity के "एजेंट टैब" का इस्तेमाल करना.
- पुष्टि करना और बेहतर बनाना: ओरिजनल डिज़ाइन के हिसाब से कोड की "वाइब चेक" करने के लिए, इंटिग्रेटेड ब्राउज़र का इस्तेमाल करना.
आपको क्या सीखने को मिलेगा
- Google Stitch का इस्तेमाल करके, हाई-फ़िडेलिटी यूआई डिज़ाइन के प्रोटोटाइप तेज़ी से बनाने का तरीका.
- Antigravity IDE में, एमसीपी सर्वर कॉन्फ़िगर करने का तरीका.
- विज़ुअल डिज़ाइन के मेटाडेटा को मॉड्यूलर कोड में बदलने के लिए, अपने-आप काम करने वाले एजेंट का इस्तेमाल करने का तरीका.
आपको क्या चाहिए
- Chrome वेब ब्राउज़र
- Antigravity IDE इंस्टॉल किया गया हो
- Google Stitch खाता
- Stitch एपीआई पासकोड
- Node.js (वर्शन 18 या इसके बाद का) स्थानीय तौर पर इंस्टॉल किया गया हो
शुरू करने से पहले
- Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर, कोई Google Cloud प्रोजेक्ट चुनें या बनाएं.
- पक्का करें कि आपके Cloud प्रोजेक्ट के लिए बिलिंग चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें .
- stitch.withgoogle.com पर जाएं और पक्का करें कि आपने साइन इन किया हो.
- पक्का करें कि आपने Antigravity IDE इंस्टॉल किया हो. यह antigravity.google पर उपलब्ध है.
2. Google Stitch में डिज़ाइन बनाना
एजेंट को फ़ॉलो करने के लिए, विज़ुअल "सोर्स ऑफ़ ट्रुथ" की ज़रूरत होती है. कोड लिखने से पहले, हमें डिज़ाइन की थीम तय करनी होगी.
- प्लैटफ़ॉर्म ऐक्सेस करना: stitch.withgoogle.com पर जाएं.
- प्रोजेक्ट का टाइप चुनना: मुख्य डैशबोर्ड पर, नया डिज़ाइन शुरू करें टॉगल ढूंढें. वेब पर क्लिक करें, ताकि आपका डिज़ाइन ब्राउज़र पर दिखने वाले लेआउट के लिए ऑप्टिमाइज़ हो.
- अपना मॉडल चुनना: प्रॉम्प्ट के बॉक्स में मौजूद, मॉडल के ड्रॉपडाउन मेन्यू (फ़िलहाल 3.0 Flash दिख रहा है) पर क्लिक करें. सबसे बेहतर ऐडवांस रीज़निंग और लेआउट जनरेट करने के लिए, Gemini 3 को चुना जाना चाहिए.
- अपनी विज़न के बारे में बताना: "अपने डिज़ाइन के बारे में बताएं" लेबल वाले टेक्स्ट एरिया में, अपना प्रॉम्प्ट डालें:
"LaunchPad नाम के स्पेस-टेक स्टार्टअप के लिए, SaaS का आधुनिक लैंडिंग पेज डिज़ाइन करें. मिडनाइट ब्लू और नियॉन पर्पल पैलेट का इस्तेमाल करें. इसमें 'शुरू करें' बटन वाला हीरो सेक्शन, तीन कॉलम वाली सुविधाओं का ग्रिड, और ग्लासमॉर्फ़िज़्म वाला प्राइसिंग टेबल शामिल करें." 5. जनरेट करना: जनरेट करने की प्रोसेस शुरू करने के लिए, ऐरो आइकॉन (मॉडल सिलेक्टर के बगल में) पर क्लिक करें. 6. बेहतर बनाना और नाम देना: यूआई जनरेट होने के बाद, सबसे ऊपर मौजूद हेडर में अपने प्रोजेक्ट को कोई नाम दें. इसे LaunchPad नाम दें. आईडीई पर जाने से पहले, किसी भी एलिमेंट को बेहतर बनाने के लिए, चैट साइडबार का इस्तेमाल किया जा सकता है.
[!TIP] आपके पास
"ये प्रॉम्प्ट आज़माएं"
सेक्शन में से भी कोई प्रॉम्प्ट चुनने का विकल्प है, अगर आपको तुरंत शुरू करना है..
3. Antigravity एमसीपी कॉन्फ़िगर करना
Antigravity एजेंट को अपना डिज़ाइन "पढ़ने" की अनुमति देने के लिए, आपको सुरक्षित एपीआई पासकोड जनरेट करना होगा और Stitch एमसीपी सर्वर जोड़ना होगा.
Stitch एपीआई पासकोड जनरेट करना
- Google Stitch में, सबसे ऊपर दाएं कोने में मौजूद, अपनी प्रोफ़ाइल फ़ोटो पर क्लिक करें.
- ड्रॉपडाउन मेन्यू से Stitch की सेटिंग चुनें.
- एपीआई पासकोड सेक्शन पर जाएं.
- पासकोड बनाएं बटन पर क्लिक करें.
- पासकोड कॉपी करना: जनरेट किए गए पासकोड को तुरंत कॉपी करें और इसे सुरक्षित जगह पर सेव करके रखें. आपको अगले चरण के लिए इसकी ज़रूरत होगी.
Antigravity में Stitch एमसीपी कॉन्फ़िगर करना
- Antigravity IDE खोलें.
- एजेंट मैनेजर खोलें
किसी भी समय, CMD+E (Mac) या CTRL+E (Windows) दबाकर या मेन्यू बार में सबसे ऊपर दाएं कोने में मौजूद, एडिटर खोलें और एजेंट मैनेजर खोलें बटन की मदद से, एजेंट मैनेजर और एडिटर के बीच टॉगल किया जा सकता है. .
- + वर्कस्पेस खोलें पर क्लिक करें.
किसी वर्कस्पेस में नई बातचीत शुरू करने के लिए, बातचीत शुरू करें टैब से अपनी पसंद का वर्कस्पेस चुनें या साइडबार में वर्कस्पेस के नाम के बगल में मौजूद, प्लस बटन दबाएं.
- नया वर्कस्पेस खोलें पर क्लिक करें. इसके बाद, वर्कस्पेस को
LaunchPad-Projectनाम दें और कोई लोकल डायरेक्ट्री चुनें. इससे एजेंट के पास फ़ाइलें तैयार करने के लिए, एक खास रूट फ़ोल्डर होगा. इससे अन्य प्रोजेक्ट में गड़बड़ी नहीं होगी.
Stitch एमसीपी कॉन्फ़िगर करना
- अपने नए वर्कस्पेस में, एजेंट मैनेजर (Mac के लिए CMD+E या Windows के लिए CTRL+E) पर वापस जाएं और एमसीपी सर्वर चुनें.
एडिटर के एजेंट पैनल में सबसे ऊपर मौजूद, "..." ड्रॉपडाउन की मदद से, एमसीपी स्टोर खोलें.
Antigravity, मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) के साथ काम करता है. यह एक ऐसा स्टैंडर्ड है जिसकी मदद से एडिटर, आपके लोकल टूल, डेटाबेस, और बाहरी सेवाओं से सुरक्षित तरीके से कनेक्ट हो सकता है. इस इंटिग्रेशन से, एआई को रीयल-टाइम कॉन्टेक्स्ट मिलता है. यह सिर्फ़ आपके एडिटर में खुली फ़ाइलों तक सीमित नहीं होता.
एमसीपी, Antigravity और Google Stitch के बीच एक पुल की तरह काम करता है. डिज़ाइन टोकन को मैन्युअल तरीके से एक्सपोर्ट करने या हेक्स कोड और लेआउट मेटाडेटा को एडिटर में कॉपी करने के बजाय, एमसीपी की मदद से Antigravity, ज़रूरत पड़ने पर आपके Stitch प्रोजेक्ट से सीधे डिज़ाइन डीएनए फ़ेच कर सकता है.
- "Stitch" खोजें और इंस्टॉल करें पर क्लिक करें.
- प्रॉम्प्ट मिलने पर, Stitch एपीआई पासकोड को कॉन्फ़िगरेशन फ़ील्ड में चिपकाएं.
- पुष्टि करना: एजेंट चैट में,
List my Stitch projects.टाइप करें. अगर जवाब मेंLaunchPadमिलता है, तो इसका मतलब है कि सब कुछ ठीक है.
- पुष्टि करना: एजेंट चैट में,
List my Stitch projects.टाइप करें. अगर एजेंट जवाब मेंLaunchPadदेता है, तो इसका मतलब है कि पुल को सही तरीके से कॉन्फ़िगर किया गया है.
4. डिज़ाइन कॉन्टेक्स्ट फ़ेच करना
अब एजेंट को डिज़ाइन मेटाडेटा को इनजेस्ट करना होगा, ताकि कोड सटीक हो.
- Antigravity चैट में, "Stitch एमसीपी का इस्तेमाल करके, ‘LaunchPad' प्रोजेक्ट फ़ेच करें. कलर पैलेट और टाइपोग्राफ़ी एक्सट्रैक्ट करें. इसके बाद, मेरी रूट डायरेक्ट्री में
DESIGN.mdफ़ाइल जनरेट करें." टाइप करें. - समीक्षा करना: एजेंट ने जो हेक्स कोड और लेआउट के नियम एक्सट्रैक्ट किए हैं उन्हें देखने के लिए, नई बनाई गई
DESIGN.mdफ़ाइल खोलें.
5. रणनीति लागू करना (बनाना)
डिज़ाइन को काम करने वाले React ऐप्लिकेशन में बदलने के लिए, एजेंट का इस्तेमाल करें.
- "बनाएं" प्रॉम्प्ट दें:
"मुझे अब यह पूरी वेबसाइट बनानी है. React और Tailwind सीएसएस का इस्तेमाल करें. पक्का करें कि कॉम्पोनेंट मॉड्यूलर हों. पूरा होने के बाद, डेवलपमेंट सर्वर चलाएं और इसे इंटिग्रेटेड ब्राउज़र में दिखाएं." 2. एजेंट को देखना: यह टर्मिनल में प्रोजेक्ट को तैयार करेगा, एडिटर में कॉम्पोनेंट लिखेगा, और इंटिग्रेटेड ब्राउज़र में प्रीव्यू खोलेगा.
6. समीक्षा करें और बेहतर बनाएं
आउटपुट की पुष्टि करें और विज़ुअल में किसी भी तरह की गड़बड़ी को ठीक करने के लिए, एजेंट का इस्तेमाल करें.
- इंटिग्रेटेड ब्राउज़र के आउटपुट की तुलना, अपने ओरिजनल Stitch डिज़ाइन से करें.
- अगर कोई एलिमेंट (जैसे, बटन पैडिंग या फ़ॉन्ट वेट) मैच नहीं करता है, तो एजेंट को यह प्रॉम्प्ट दें: "‘शुरू करें' बटन की पैडिंग थोड़ी अलग है. Stitch डिज़ाइन पर वापस जाएं और Tailwind क्लास अपडेट करें."
- एजेंट, डिज़ाइन कॉन्टेक्स्ट को फिर से फ़ेच करेगा और गड़बड़ी को तुरंत ठीक कर देगा.
7. खास जानकारी और अगले चरण
बधाई हो! आपने Antigravity और Stitch एमसीपी का इस्तेमाल करके, हाई-फ़िडेलिटी डिज़ाइन और काम करने वाले कोड बेस के बीच के अंतर को कम कर दिया है.
आपने क्या किया, इसकी खास जानकारी:
- Gemini 3 का इस्तेमाल करके, Stitch में यूआई डिज़ाइन किया.
- सुरक्षित एपीआई पासकोड जनरेट किया और Antigravity एमसीपी कॉन्फ़िगर किया.
- React + Tailwind साइट बनाने और उसकी पुष्टि करने के लिए, अपने-आप काम करने वाले एजेंट का इस्तेमाल किया.