Codex + एक गुप्त टूल वह डिज़ाइन वर्कफ़्लो है जिसे हम अपनी एजेंसी में चला रहे हैं... और आउटपुट सचमुच एक अलग लेवल पर है।
मैं महीनों से यह कह रहा हूँ। अगर आपका ऐप AI स्लॉप जैसा दिखता है, तो यह Codex की समस्या नहीं है। यह वर्कफ़्लो की समस्या है।
ज़्यादातर बिल्डर एक ही लूप में फंसे हुए हैं। वे AI के साथ फ़ीचर शिप करते हैं। बैकएंड काम करता है। लॉजिक सॉलिड है। लेकिन इंटरफ़ेस हर दूसरे वाइब-कोडेड ऐप जैसा दिखता है। यूज़र दो सेकंड में तय करते हैं कि यह रियल लगता है या नहीं।
पुराना फिक्स एक डिज़ाइनर को हायर करना था। Figma फ़ाइलों के लिए हफ़्तों इंतज़ार करना। फिर अपने डेवलपर को उन डिज़ाइनों को इंटरप्रेट करते और कोड में रीबिल्ड करते देखना। जब तक डिज़ाइन लाइव हुआ, आपकी मोमेंटम खत्म हो चुकी थी और आपने वह कैश जला दिया था जिसे जलाने की ज़रूरत नहीं थी।
अब वह पूरी प्रक्रिया ऑप्शनल है।
इस वॉकथ्रू के लिए मैंने Haven बनाया, एक रियल एस्टेट मोबाइल ऐप कॉन्सेप्ट। 20 मिनट में पूरा डिज़ाइन सिस्टम। एक घंटे से भी कम समय में हर स्क्रीन डिज़ाइन की गई। Codex के ज़रिए प्रोडक्शन कोड शिप किया गया, बिना CSS की एक भी लाइन रीराइट किए।
यह वह वर्कफ़्लो है जिसे मैं अब चला रहा हूँ। और AI के साथ शिप करने वाले हर बिल्डर को समझना होगा कि यह कैसे काम करता है।
Moonchild वास्तव में क्या है
सीक्रेट टूल Moonchild है।
मैंने पिछले एक साल में लॉन्च हुए लगभग हर AI डिज़ाइन टूल का परीक्षण किया है। ज़्यादातर पहली स्क्रीन पर अच्छे लगते हैं, फिर जैसे ही आप दूसरा पेज बनाते हैं, बिखर जाते हैं। कंसिस्टेंसी ही समस्या है। Moonchild इसे इस तरह हल करता है जैसे और किसी ने नहीं किया।
यह एक चैट-पावर्ड डिज़ाइन कैनवास है जो आपके डिज़ाइन सिस्टम से शुरू होता है। किसी खाली प्रॉम्प्ट से नहीं। किसी स्क्रीनशॉट से नहीं। आपके असल सिस्टम से। आप अपने सिस्टम को तीन तरीकों से लाते हैं:
→ Figma, GitHub, या लाइव URL से इम्पोर्ट करें
→ अपने ब्रांड को इसके Agentic Design System Builder में डिस्क्राइब करें
→ Dribbble या कहीं और से डिज़ाइन इंस्पिरेशन ड्रॉप करें
एक बार वह सिस्टम अंदर आ जाए, तो आप पुराने तरीके से डिज़ाइन के लिए प्रॉम्प्ट नहीं करते। आप एक PRD पेस्ट करते हैं। यह आपके सिस्टम के खिलाफ पूरी स्क्रीन जनरेट करता है। वहाँ से आप आर्ट डायरेक्ट करते हैं।
और एक्सपोर्ट पाथ ही वह चीज़ है जो लूप को बंद करता है। Moonchild एक MCP कनेक्टर शिप करता है जो आपके डिज़ाइन को सीधे Codex को स्ट्रक्चर्ड आउटपुट के रूप में हैंड करता है। Codex को इंटरप्रेट करने के लिए कोई स्क्रीनशॉट नहीं। असल डिज़ाइन डेटा। कम्पोनेंट, टोकन, लेआउट, सब कुछ।
यही वर्कफ़्लो है। अब यहाँ बताया गया है कि इसे असल में कैसे इस्तेमाल करें।
समस्या: ज़्यादातर बिल्डर AI का इस्तेमाल डिज़ाइन के लिए कैसे करते हैं
यहाँ बताया गया है कि ज़्यादातर बिल्डर क्या करते हैं।
वे Codex को एक नया फ़ीचर बनाने के लिए प्रॉम्प्ट करते हैं। यह शिप हो जाता है। ठीक लगता है। फिर वे अगले फ़ीचर के लिए प्रॉम्प्ट करते हैं। थोड़ा अलग दिखता है। पाँचवें फ़ीचर तक ऐप पाँच अलग-अलग प्रोडक्ट्स की तरह दिखता है जिन्हें एक साथ जोड़ दिया गया है।
लोग जब कहते हैं कि AI डिज़ाइन खराब है, तो उनका यही मतलब होता है।
मॉडल खराब नहीं है। वर्कफ़्लो खराब है।
Codex को पता नहीं है कि आपकी डिज़ाइन भाषा क्या है। हर प्रॉम्प्ट एक नया कॉन्टेक्स्ट है। हर स्क्रीन एक अनुमान है। हर कम्पोनेंट पिछले से भटक जाता है। रंग बदल जाते हैं। टाइपोग्राफ़ी बदल जाती है। सब कुछ बढ़ता जाता है।
फिक्स सरल है। Codex को फॉलो करने के लिए एक सिस्टम दें। फिर उसे बनाने के लिए असल डिज़ाइन दें।
ज़्यादातर वर्कफ़्लो उसे एक या दूसरा देते हैं। Moonchild प्लस MCP कनेक्शन उसे एक ही समय में दोनों देता है।
चरण 1: पहले अपना डिज़ाइन सिस्टम बनाएँ। हमेशा।
यह वह चरण है जिसे हर कोई छोड़ देता है। यह सबसे महत्वपूर्ण भी है।
@ignytlabs पर हम हर क्लाइंट के लिए एक स्क्रीन को छूने से पहले एक डिज़ाइन सिस्टम बनाते हैं। पहले इसमें एक डिज़ाइनर को दो दिन लगते थे। Moonchild इसे लगभग 20 मिनट में करता है।
इस वॉकथ्रू के लिए मैंने Haven बनाया, एक रियल एस्टेट मोबाइल ऐप कॉन्सेप्ट। Moonchild में डिज़ाइन सिस्टम लाने के कुछ तरीके हैं। आप Figma, GitHub, या लाइव URL से इम्पोर्ट कर सकते हैं। आप अपने ब्रांड को Agentic Design System Builder में डिस्क्राइब कर सकते हैं। Haven के लिए मैंने वही किया जो मैं आमतौर पर तब करता हूँ जब मैं एक वाइब से शुरू कर रहा होता हूँ। Dribbble से डिज़ाइन इंस्पिरेशन। मैंने मोबाइल रियल एस्टेट ऐप्स के तीन स्क्रीनशॉट ड्रॉप किए जिन्होंने उस फील को पकड़ लिया जो मैं चाहता था और एक छोटा विवरण कि Haven क्या है और यह किसके लिए है। टूल ने डिज़ाइन भाषा निकाली और स्क्रैच से सिस्टम बनाया।
मुझे जिस चीज़ ने सबसे ज़्यादा हैरान किया वह यह है कि सब कुछ कितना प्रीव्यू करने योग्य है। ज़्यादातर AI टूल, जिसमें Google Stitch वर्कफ़्लो भी शामिल है जिसके बारे में मैंने अपने पिछले लेख में लिखा था, आपको एक फ्लैट टोकन फ़ाइल देते हैं। रंग। फ़ॉन्ट। शायद स्पेसिंग। यह कुछ अलग करता है। यह एक पूरी कम्पोनेंट लाइब्रेरी और एक गैलरी बनाता है। हर बैज, बटन, कार्ड और चिप उसी तरह रेंडर किया जाता है जैसे वह आपके ऐप में असल में दिखेगा। किसी भी कम्पोनेंट पर क्लिक करें और आप इसे लाइव देखते हैं, वेरिएंट और साइज़ का परीक्षण करने के लिए कंट्रोल के साथ। प्रीव्यू के ठीक नीचे आपको उस कम्पोनेंट के लिए असल JavaScript, CSS, उदाहरण और डिपेंडेंसी मिलती है। कोडबेस में खींचने के लिए तैयार।
गैलरी वह हिस्सा है जो वास्तव में आपके डिज़ाइन करने के तरीके को बदल देता है। यह अनुमान लगाने के बजाय कि कॉन्टेक्स्ट में "ब्रांड बैज" या "रेटिंग बैज" कैसा दिखना चाहिए, आप उन्हें साथ-साथ देखते हैं। For Sale. For Rent. Featured. पूरा परिवार एक साथ। एक भी स्क्रीन जनरेट होने से पहले आप सूचित डिज़ाइन निर्णय लेते हैं।
यह एक स्टाइल शीट और एक वास्तविक सिस्टम के बीच का अंतर है।
चरण 2: PRD से UI तक
एक बार जब आपका डिज़ाइन सिस्टम अंदर आ जाता है, तो आप पुराने तरीके से डिज़ाइन के लिए प्रॉम्प्ट नहीं करते।
आप एक PRD पेस्ट करते हैं।
एक पेज की फ़ीचर ब्रीफ। एक प्रोडक्ट स्पेक। एक गोल स्टेटमेंट। जो कुछ भी आपके पास है।
Haven के लिए मैंने एक स्ट्रक्चर्ड PRD पेस्ट किया जिसमें प्रोडक्ट का परिचय, उद्देश्य, लक्षित उपयोगकर्ता और भूमिकाएँ, प्रमुख विशेषताएँ और MVP स्कोप, पूर्ण उपयोगकर्ता यात्राएँ, तकनीकी स्टैक और डिज़ाइन दिशा शामिल थी। लगभग एक पेज। टूल को वास्तविक कॉन्टेक्स्ट देने के लिए पर्याप्त विशिष्ट। इतना स्ट्रक्चर्ड कि यह सही विवरण को सही स्क्रीन में खींचे।
फिर मैंने कुछ ऐसा किया जो ज़्यादातर लोग छोड़ देते हैं।
एक भी स्क्रीन जनरेट करने से पहले मैंने इसके साथ विचार-विमर्श किया।
यह वह अनलॉक है जो ज़्यादातर बिल्डर मिस करते हैं। चैट मोड पूरे PRD कॉन्टेक्स्ट को धारण करता है। PRD डंप करने और जनरेट दबाने के बजाय, आप पहले प्रोडक्ट के बारे में बात करते हैं। स्क्रीन लिस्ट की पुष्टि करें। नेविगेशन पैटर्न को लॉक करें। किसी भी पिक्सेल के अस्तित्व में आने से पहले प्रमुख स्क्रीन के पदानुक्रम को पूर्व-निर्धारित करें।
Haven के लिए मैंने पूछा:
→ "इस PRD के आधार पर, आप किन स्क्रीन को पहले बनाने की सलाह देते हैं? क्या मैं रियल एस्टेट ऐप के लिए कुछ भूल रहा हूँ?"
→ "क्या प्राथमिक नेविगेशन होम, सर्च, फ़ेवरिट, प्रोफ़ाइल के साथ एक बॉटम टैब होना चाहिए? या कुछ अलग?"
→ "जनरेट करने से पहले, मुझे प्रॉपर्टी डिटेल स्क्रीन के लिए प्राथमिकता क्रम बताएँ। पहले फ़ोटो, फिर नाम और कीमत, फिर स्पेक्स, फिर सुविधाएँ, फिर एजेंट। पुष्टि करें या सुधारें।"
→ "ठीक है, अब कृपया आगे बढ़ें और इन स्क्रीन को लाइट और डार्क दोनों मोड में जनरेट करें, जबकि मेरे पास वर्तमान में जुड़े डिज़ाइन सिस्टम से चिपके रहें। सुनिश्चित करें कि आप पूरी उपयोगकर्ता यात्रा पूरी करें और सभी स्क्रीन बनाएँ।"
जब तक मैंने जनरेट दबाया, टूल पहले से ही प्रोडक्ट को ज़्यादातर डिज़ाइनरों से बेहतर जानता था, उनके पहले क्लाइंट कॉल के बाद भी।
अब वेरिएंट पर एक त्वरित नोट। इसे ध्यान से पढ़ें।
एक अच्छी सुविधा: आप अपनी स्क्रीन के अलग-अलग वेरिएंट बना सकते हैं। आपको बस Moonchild को स्पष्ट रूप से बताना होगा और यह इसका ध्यान रखेगा। Haven के लिए मैं एक पर प्रतिबद्ध होने से पहले पूरे ऐप के लिए तीन अलग-अलग सौंदर्य दिशाएँ चाहता था। यहाँ वह सटीक प्रॉम्प्ट है जो मैंने उपयोग किया:
“मैं चाहता हूँ कि आप Haven के लिए 3 पूर्ण मोबाइल UI डिज़ाइन कॉन्सेप्ट जनरेट करें:
कॉन्सेप्ट 1 - वार्म एडिटोरियल: क्रीम बैकग्राउंड, उदार स्पेसिंग, प्रॉपर्टी नामों के लिए सेरिफ़ हेडलाइन, सॉफ्ट शैडो, मैगज़ीन-स्टाइल इमेज ट्रीटमेंट।
कॉन्सेप्ट 2 - बोल्ड मॉडर्न: डार्क मोड, हाई कंट्रास्ट, पूरी तरह से सैन्स-सेरिफ़, शार्प कॉर्नर, फ़ोटो-लेड विद एज-टू-एज इमेजेस।
कॉन्सेप्ट 3 - प्रीमियम मिनिमल: न्यूट्रल पैलेट (ऑफ़-व्हाइट, चारकोल, सिंगल एक्सेंट), रिफ़ाइंड टाइपोग्राफ़ी, ढेर सारी ब्रीदिंग रूम, सबटल माइक्रो-इंटरैक्शन।
कनेक्टेड डिज़ाइन सिस्टम को फाउंडेशन के रूप में उपयोग करें, लेकिन प्रत्येक कॉन्सेप्ट को सिस्टम को एक अलग सौंदर्य दिशा में खींचने दें। पूर्ण स्क्रीन जनरेट करें, सिर्फ़ सेक्शन नहीं। आप क्या करेंगे?”
अंत में "आप क्या करेंगे?" पर ध्यान दें। यह वह छोटा विवरण है जो इसे काम करता है। बस आँख बंद करके सब कुछ जनरेट करने के बजाय, टूल एक योजना के साथ वापस आया।
इसने कहा कि यह पहले प्रति कॉन्सेप्ट 5 प्रतिनिधि स्क्रीन बनाएगा। मैं तीनों दिशाओं की साथ-साथ समीक्षा करूंगा। एक बार जब मैंने वह चुन लिया जो मुझे चाहिए था, तो यह उस दिशा में पूरे ऐप को डिज़ाइन करने के लिए आगे बढ़ेगा।
यह लागत समीकरण को पूरी तरह से बदल देता है। आप तीन पूर्ण बिल्ड के लिए भुगतान नहीं कर रहे हैं। आप तीन त्वरित सैंपलर के लिए भुगतान कर रहे हैं, फिर उस दिशा में एक एकल पूर्ण बिल्ड के लिए जिसे आप वास्तव में चुनते हैं।
मैंने वार्म एडिटोरियल चुना। स्क्रीन का पूरा सेट अगली बार वापस आया।
अब वह हिस्सा जिसने वास्तव में मुझे आश्चर्यचकित किया।
Moonchild द्वारा जनरेट की गई हर स्क्रीन प्रीव्यू मोड में इंटरैक्टिव है। कोई स्थिर मॉकअप नहीं। वास्तव में इंटरैक्टिव।
आप इनपुट फ़ील्ड में क्लिक कर सकते हैं। बटन टैप कर सकते हैं। स्क्रीन के बीच एक वास्तविक उपयोगकर्ता की तरह आगे बढ़ सकते हैं जो कोई भी कोड लिखे जाने से पहले प्रोटोटाइप का परीक्षण कर रहा है। Haven के लिए मैंने प्रीव्यू में दो फ़्लो समस्याएँ पकड़ीं जो अन्यथा Codex को शिप हो जातीं। प्रॉपर्टी डिटेल स्क्रीन से ब्राउज़ पर वापस जाने का कोई स्पष्ट रास्ता नहीं था। कॉन्टैक्ट एजेंट CTA फोल्ड से बहुत नीचे था। यदि मैंने पहले क्लिक थ्रू किए बिना डिज़ाइन Codex को सौंप दिया होता तो दोनों शिप हो जाते।
यही अनलॉक है। कोई भी कोड लिखे जाने से पहले आप प्रोडक्ट का परीक्षण करते हैं।
रीफ़ाइनमेंट लूप अंतिम टुकड़ा है।
जब एक स्क्रीन को काम की आवश्यकता होती है, तो आप स्क्रैच से फिर से प्रॉम्प्ट नहीं करते। आप स्क्रीन का चयन करते हैं, टूल को बताते हैं कि क्या बदलना है, और यह जगह पर एक v2 जनरेट करता है। अधिक सिनेमाई हीरो चाहिए? v2। एक कार्ड लेआउट को सूची दृश्य में बदलना चाहते हैं? v3। वेरिएंट स्टैक होते हैं ताकि आप तुलना कर सकें और सबसे मजबूत चुन सकें।
Haven की प्रॉपर्टी डिटेल स्क्रीन के लिए मैं तीन पुनरावृत्तियों से गुज़रा। v1 में एजेंट ब्लॉक बहुत ऊपर था। v2 ने पदानुक्रम तय किया लेकिन फ़ोटो गैलरी छोटी लग रही थी। v3 ने दोनों को सही किया। लगभग 8 मिनट का आगा-पीछा।
आप एक खाली स्लेट से क्यूरेट नहीं कर रहे हैं। आप एक वास्तविक दिशा को रीफ़ाइन कर रहे हैं। यह वह हिस्सा है जो एक वरिष्ठ डिज़ाइनर के साथ काम करने के सबसे करीब लगता है।
चरण 3: Moonchild को MCP के ज़रिए Codex से कनेक्ट करें
यह वह जगह है जहाँ वर्कफ़्लो CRACKED हो जाता है।
डिज़ाइन सिस्टम Codex को नियम देता है। MCP कनेक्शन Codex को कुछ अधिक शक्तिशाली देता है। वास्तविक डिज़ाइन आउटपुट तक सीधी पहुँच। स्क्रीनशॉट नहीं। डिज़ाइन का टेक्स्ट विवरण नहीं। स्ट्रक्चर्ड डिज़ाइन डेटा जिसे Codex पढ़ और रीबिल्ड कर सकता है।
यहाँ सेटअप है:
→ Moonchild Settings, फिर MCP पर जाएँ
→ अपने सेटअप के लिए इंस्टॉल कमांड कॉपी करें
→ Codex CLI खोलें
→ इंस्टॉल कमांड पेस्ट करें
→ अपने Moonchild खाते से प्रमाणित करें
→ हो गया
एक बार कनेक्ट होने के बाद, Codex आपके डिज़ाइन सिस्टम और आपके द्वारा डिज़ाइन की गई विशिष्ट Haven स्क्रीन दोनों को देखता है।
चरण 4: Codex कोड शिप करता है
अब आप Codex को इस तरह प्रॉम्प्ट करते हैं:
Moonchild MCP का उपयोग करके Haven Real Estate Mobile App प्रोजेक्ट लाएँ, और मुझे बताएँ कि हमारे अंदर कौन सी स्क्रीन हैं।
यह पहला प्रॉम्प्ट दो काम करता है। यह पुष्टि करता है कि MCP सही ढंग से वायर्ड है। और यह Codex को आपके द्वारा डिज़ाइन किए गए हर स्क्रीन में पूर्ण दृश्यता देता है।
Codex को कुछ भी भारी करने देने से पहले एक त्वरित टिप। प्लान मोड में रहें। Codex निष्पादित करने से पहले सतह पर लाता है कि वह क्या करने वाला है। हर बार योजना पढ़ें। सुनिश्चित करें कि यह समझता है कि आप कौन सी स्क्रीन चाहते हैं, किस क्रम में, और किस फ़िडेलिटी पर। यह Codex द्वारा वह कोड करने के बीच का अंतर है जो आपको वास्तव में चाहिए और Codex द्वारा वह कोड करने के बीच जो वह सोचता है कि आपको चाहिए।
एक बार जब आप योजना की समीक्षा कर लेते हैं और इसे उस स्क्रीन पर इंगित कर देते हैं जो आप चाहते हैं, तो Codex सीधे Moonchild से डिज़ाइन डेटा खींचता है, आपके डिज़ाइन सिस्टम को संदर्भित करता है, और कोड लिखता है। यह होवर स्टेट्स, ट्रांज़िशन और एज-केस हैंडलिंग भी जोड़ता है क्योंकि यह एक प्रॉम्प्ट से अनुमान लगाने के बजाय वास्तविक डिज़ाइन डेटा से काम कर रहा है।
परिणाम। आपके वास्तविक कोडबेस में प्रोडक्शन-ग्रेड UI, डिज़ाइन से बिल्कुल मेल खाता है, मिनटों में।
@ignytlabs पर हम हर क्लाइंट MVP में डिज़ाइन के लिए दो सप्ताह का बजट रखते थे। एक डिज़ाइनर Figma फ़ाइल बनाता था। एक डेवलपर इसकी व्याख्या करता था। व्याख्या भटक जाती थी। हम सही करते थे। चक्र। इस वर्कफ़्लो के साथ पूरा लूप काम के एक ही दोपहर में ढह जाता है। समान गुणवत्ता। उच्च मार्जिन। बहुत कम कॉन्टेक्स्ट स्विचिंग।
इस वर्कफ़्लो का उपयोग कब करें
यह हर टीम के लिए सही वर्कफ़्लो नहीं है। इस बारे में ईमानदार रहें कि यह कब फिट बैठता है।
इसका उपयोग करें जब:
→ आप एक एकल बिल्डर या छोटी टीम के रूप में MVP शिप कर रहे हों
→ डिज़ाइन की स्थिरता स्क्रीन के पार टूटती रहती है
→ आप एक अलग Figma से डिज़ाइनर से डेवलपर पाइपलाइन बनाए नहीं रखना चाहते
→ आपके पास पहले से एक डिज़ाइन सिस्टम है और आप चाहते हैं कि इसे हर जगह लागू किया जाए
इसे छोड़ें जब:
→ आप पैमाने पर हैं जिसमें एक पूर्ण इन-हाउस डिज़ाइन टीम और एक परिपक्व Figma लाइब्रेरी है
→ आपको एक मार्केटिंग साइट या ब्रांड वर्क के लिए पिक्सेल-परफेक्ट हैंडऑफ़ की आवश्यकता है जहाँ हर शैडो मायने रखता है
→ आपके कोडबेस में अत्यधिक कस्टम UI पैटर्न हैं जिन्हें बेस्पोक डिज़ाइन वर्क की आवश्यकता है
MVP और SaaS प्रोडक्ट शिप करने वाले 80% बिल्डरों के लिए, यह वर्कफ़्लो आपकी ज़रूरत की हर चीज़ को कवर करता है।
किन बातों का ध्यान रखें
इसे चलाने से पहले कुछ ईमानदार झंडे।
आपके डिज़ाइन सिस्टम की गुणवत्ता आपके आउटपुट की गुणवत्ता निर्धारित करती है। कचरा अंदर, कचरा बाहर। तीन रंग टोकन वाली आधी-अधूरी Figma फ़ाइल औसत दर्जे की स्क्रीन का उत्पादन करेगी। सिस्टम पर पहले से समय बिताएँ। यह हर स्क्रीन पर वापस भुगतान करता है।
PRD गुणवत्ता मायने रखती है। एक अस्पष्ट ब्रीफ आपको सामान्य स्क्रीन देती है। उपयोगकर्ता प्रवाह, एज केस और स्पष्ट पदानुक्रम वाला एक विशिष्ट PRD आपको उपयोगी डिज़ाइन देता है। यह एक टूल सीमा नहीं है। यह एक सोच सीमा है।
आपको अभी भी स्वाद की आवश्यकता है। टूल उत्पादन करता है। आप निर्देशित करते हैं। सही वेरिएंट चुनना और उसे रीफ़ाइन करना वह जगह है जहाँ आपका निर्णय रहता है। यदि आप क्यूरेशन चरण को छोड़ देते हैं, तो आप वाइब-डिज़ाइनिंग पर वापस आ जाते हैं।
कुछ कम्पोनेंट्स को मैनुअल नजर की आवश्यकता होती है। जटिल एनिमेटेड स्टेट्स, कस्टम इंटरैक्शन पैटर्न, डिज़ाइन सिस्टम के बाहर कुछ भी Codex में मैनुअल पास की आवश्यकता है। MCP आपको 90% तक ले जाता है। अंतिम 10% आपका स्वाद है।
इसका वास्तव में क्या मतलब है
यहाँ मेरी ईमानदार राय है।
AI-निर्मित उत्पादों को शिप करने में अड़चन कभी कोड नहीं रही है। AI कोड लिख सकता है। अड़चन हमेशा डिज़ाइन लेयर रही है। स्थिरता, स्वाद, वह सिस्टम जो सब कुछ एक साथ बांधता है।
वह अड़चन अभी ढह गई है।
हमारी एजेंसी में हम हर क्लाइंट MVP में डिज़ाइन के लिए दो सप्ताह का बजट रखते थे। एक डिज़ाइनर को हायर करें। Figma फ़ाइलों की प्रतीक्षा करें। डेवलपर को इसकी व्याख्या करते देखें। चक्र। जिसमें दो सप्ताह लगते थे, अब दो दिन लगते हैं। समान गुणवत्ता। तेज़ डिलीवरी। उच्च मार्जिन।
यह वह वर्कफ़्लो है जो फ़ंडेड टीमों के पास पहले से ही उनके Figma प्लस डिज़ाइनर प्लस डेवलपर पाइपलाइनों के साथ है। अंतर यह है कि अब एकल बिल्डर, इंडी एजेंसियाँ और छोटे स्टूडियो हेडकाउंट के बिना समान लाभ प्राप्त करते हैं।
2026 उन एजेंसियों और बिल्डरों के लिए UNFAIR होने वाला है जो पहले यह पता लगा लेते हैं।
TLDR
→ खराब UI के लिए Codex को दोष देना बंद करें। Codex समस्या नहीं है। आपका वर्कफ़्लो है।
→ चरण 1: Moonchild के अंदर अपना डिज़ाइन सिस्टम बनाएँ। Figma, GitHub, या लाइव URL से इम्पोर्ट करें। या अपने ब्रांड का वर्णन करें। या Dribbble प्रेरणा ड्रॉप करें जैसा मैंने Haven के लिए किया था।
→ चरण 2: अपना PRD पेस्ट करें। जनरेट करने से पहले चैट मोड में विचार-विमर्श करें। पहले स्क्रीन लिस्ट और नेविगेशन पैटर्न को लॉक करें।
→ डिफ़ॉल्ट एक वेरिएंट जनरेट करता है। हीरो स्क्रीन पर अलग-अलग वाइब निर्दिष्ट करते हुए स्पष्ट रूप से कई वेरिएंट के लिए पूछें।
→ कोई भी कोड लिखे जाने से पहले फ़्लो का परीक्षण करने के लिए इंटरैक्टिव प्रीव्यू का उपयोग करें। जगह पर v2, v3 पुनरावृत्तियों के साथ स्क्रीन को रीफ़ाइन करें।
→ चरण 3: Moonchild को MCP के ज़रिए Codex से कनेक्ट करें। यह Codex को वास्तविक डिज़ाइन डेटा देता है, स्क्रीनशॉट नहीं।
→ चरण 4: MCP का उपयोग करके प्रत्येक स्क्रीन बनाने के लिए Codex को प्रॉम्प्ट करें। प्रोडक्शन-ग्रेड UI मिनटों में शिप होता है।
→ आपके डिज़ाइन सिस्टम की गुणवत्ता आपके आउटपुट की गुणवत्ता निर्धारित करती है। वहाँ निवेश करें।
→ Figma से हैंडऑफ़ से डेवलपर तक का चक्र मर चुका है। एक वर्कफ़्लो अब डिज़ाइन और कोड को एक साथ चलाता है।
LFG.
