डिजाइनरों के लिए त्वरित इंजीनियरिंग: अस्पष्ट निर्देशों से उपयोगी एआई आउटपुट तक

अगर आपका AI आउटपुट स्टॉक फोटोग्राफी जैसा दिखता है, तो आपका प्रॉम्प्ट एक इच्छा जैसा लगता है।

यही वह समस्या है जो ज्यादातर डिजाइनरों को AI टूल्स का इस्तेमाल करना सिखाने के तरीके में है। "एक फिनटेक स्टार्टअप के लिए एक हीरो इमेज बनाओ" प्रॉम्प्ट नहीं है। यह सिर्फ एक भाव है। प्रॉम्प्ट वह होता है जो आप किसी फ्रीलांस इलस्ट्रेटर को ब्रीफ करते समय कहते हैं, जो 400 डॉलर प्रति घंटे चार्ज करता है और तीखे सवाल पूछता है।

डिजाइनर पहले से ही यह करना जानते हैं। आपने स्कूल में ब्रीफ लिखे हैं। आप काम पर हर हफ्ते ब्रीफ लिखते हैं। आप जानते हैं कि स्पष्टता, संदर्भ और सीमाएं लिखित रूप में कैसी दिखती हैं। AI प्रॉम्प्ट भी यही कौशल है, बस इसका लक्ष्य अलग है।

प्रॉम्प्ट गद्य में एक डिजाइन ब्रीफ है

संकेतों को जादुई शब्द समझना बंद करें। इन्हें एक क्रिएटिव ब्रीफ के पहले पैराग्राफ के रूप में सोचें, साथ ही अंत में अंतिम स्पेसिफिकेशन्स के रूप में।

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

प्रॉम्प्ट्स भी इसी तरह काम करते हैं। AI-सहायता प्राप्त डिज़ाइन कार्य में सबसे बड़ी गलती यह होती है कि मॉडल के स्मार्ट होने के कारण अस्पष्ट रहने की प्रवृत्ति अपनाई जाती है। विशिष्ट होना कोई दिखावा नहीं है। यही तो पूरी प्रक्रिया है।

एक अच्छा प्रॉम्प्ट एक डिज़ाइन ब्रीफ की तरह होता है। एक खराब प्रॉम्प्ट एक इच्छा की तरह होता है।

हर उपयोगी प्रॉम्प्ट के पाँच भाग

हर प्रॉम्प्ट जो शिप करने योग्य डिज़ाइन आउटपुट देता है, उसके पाँच भाग होते हैं। आप इन्हें याद कर सकते हैं, आप इन्हें टेम्पलेट में डाल सकते हैं, आप इन्हें स्टिकी नोट पर प्रिंट कर सकते हैं। भाग:

1. भूमिका। AI किसका रूप धारण कर रहा है? ("आप द न्यू यॉर्कर में दस वर्षों के अनुभव वाले एक वरिष्ठ संपादकीय चित्रकार हैं।")
2. संदर्भ। यह किस लिए है, और किसके लिए है? ("यह छवि एआई टूल्स के साथ काम करना सीख रहे डिजाइनरों के बारे में एक ब्लॉग पोस्ट का मुख्य भाग है। दर्शक कार्यरत डिजाइनर, शुरुआती उपयोगकर्ता, संशयवादी लेकिन जिज्ञासु हैं।")
3. सीमाएँ। नियम क्या हैं? ("संपादकीय, कॉर्पोरेट नहीं। कोई कंप्यूटर दिखाई नहीं देना चाहिए। स्टॉक फोटोग्राफी नहीं। सपाट रंग, मजबूत सिल्हूट, उच्च कंट्रास्ट, कम विवरण।")
4. संदर्भ। यह कैसा दिखना चाहिए या कैसा महसूस होना चाहिए? ("सॉल स्टाइनबर्ग की लाइनवर्क 1960 के दशक के स्विस पर्यटन पोस्टरों के संयम के साथ मिश्रित। ब्रांड रंग पैलेट: #080404 पृष्ठभूमि, #ff6434 एक्सेंट।")
5. आउटपुट विनिर्देश। डिलिवरेबल विनिर्देश क्या हैं? ("16:9 आस्पेक्ट रेशियो, 1200x630, PNG, इमेज के अंदर कोई टेक्स्ट नहीं।")

रोल को छोड़ देने पर आपको औसत दर्जे का आउटपुट मिलेगा। कॉन्टेक्स्ट को छोड़ देने पर आपको ऐसा आउटपुट मिलेगा जो किसी काम का नहीं है। कंस्ट्रेंट्स को छोड़ देने पर आपको वह आउटपुट मिलेगा जो मॉडल अनुमान लगाता है कि आप चाहते हैं, जो आमतौर पर स्टॉक फोटोग्राफी होती है। रेफरेंसेस को छोड़ देने पर आउटपुट उस दिशा में चला जाता है जिस पर ट्रेनिंग डेटा हावी होता है। आउटपुट स्पेसिफिकेशन को छोड़ देने पर आपको गलत डाइमेंशन मिलते हैं।

| प्रॉम्प्ट भाग | यह क्या करता है | इसे छोड़ने पर क्या होता है |

|-------------|--------------|-----------------------------|

| रोल | स्वाद और विशेषज्ञता स्तर निर्धारित करता है | सामान्य आउटपुट |

| कॉन्टेक्स्ट | मॉडल को बताता है कि काम किस लिए है | गलत समस्या का समाधान करता है |

कंस्ट्रेंट्स | यह परिभाषित करता है कि क्या टालना है | आपको नापसंद क्लिच मिलते हैं |

| रेफरेंसेस | दृश्य या टोनल दिशा को निर्धारित करता है | ट्रेनिंग औसत की ओर जाता है |

| आउटपुट स्पेसिफिकेशन | फॉर्मेट और डिलीवरेबल को नियंत्रित करता है | गलत आयाम, गलत प्रारूप |

उदाहरण: हीरो विज़ुअल के लिए इमेज जनरेशन

वह अस्पष्ट संस्करण जिसे हर डिज़ाइनर ने कम से कम एक बार टाइप किया होगा:

"डिज़ाइनरों के लिए प्रॉम्प्ट इंजीनियरिंग पर एक ब्लॉग पोस्ट के लिए हीरो इमेज।"

आपको क्या मिलता है: लैपटॉप पर बैठा एक डिज़ाइनर, या चमकता हुआ दिमाग, या पेंसिल पकड़े एक रोबोट, या इन तीनों का कोई संयोजन। स्टॉक। बेजान।

संरचित संस्करण:

आप एक संपादकीय इलस्ट्रेटर हैं जिन्होंने दस वर्षों तक द न्यू यॉर्कर और वायर्ड के लिए काम किया है। "डिज़ाइनरों के लिए प्रॉम्प्ट इंजीनियरिंग" शीर्षक वाले एक ब्लॉग पोस्ट के लिए एक हीरो इमेज बनाएं। दर्शक वे कार्यरत डिज़ाइनर हैं जो AI के प्रचार को लेकर संशय में हैं लेकिन इसके उपकरणों का गंभीरता से उपयोग करने के लिए तैयार हैं।

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

शैली: संपादकीय, सपाट रंग, मजबूत सिल्हूट, उच्च कंट्रास्ट, कम विवरण। कागज़ की बनावट स्वीकार्य है। कंप्यूटर का उपयोग नहीं। रोबोट का उपयोग नहीं। दिमाग का उपयोग नहीं। चमकते गोले का उपयोग नहीं।

संदर्भ: ब्रीफ के लिए सॉल स्टाइनबर्ग की लाइनवर्क। प्रॉम्प्ट साइड के लिए स्विस पर्यटन पोस्टर की सादगी। ब्रांड पैलेट: #080404 बैकग्राउंड, #ff6434 एक्सेंट, #d0d3d8 न्यूट्रल।

आउटपुट: 1200x630, छवि के अंदर कोई टेक्स्ट नहीं।

आपको क्या मिलेगा: एक हीरो इमेज जिसे आप वास्तव में शिप कर सकते हैं, चार बार रीजेनरेट करने की आवश्यकता नहीं।

अंतर प्रतिभा का नहीं, संरचना का है।

उदाहरण: v0 या लवेबल में UI प्रोटोटाइप

अस्पष्ट:

"एक डिज़ाइन एजेंसी के लिए एक लैंडिंग पेज बनाएं।"

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

संरचित:

Brainy के लिए एक लैंडिंग पेज बनाएं, जो Instagram और Threads के माध्यम से 2 मिलियन से अधिक फॉलोअर्स वाला एक डिज़ाइन स्टूडियो है। लक्षित दर्शक: सीरीज़-ए से सीरीज़-सी SaaS कंपनियों के संस्थापक जिन्हें ब्रांड, वेब और डिज़ाइन सेवाओं की आवश्यकता है। उन्होंने सभी एजेंसी वेबसाइटें देखी हैं। टेम्पलेटेड दिखने पर वे वेबसाइट छोड़ देते हैं।

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

सीमाएं: ग्रेडिएंट, स्टॉक इमेज और सामान्य हीरो इलस्ट्रेशन का उपयोग नहीं किया जा सकता है। केवल डार्क मोड, बैकग्राउंड #080404, एक्सेंट #ff6434। टाइपोग्राफी: सभी टेक्स्ट के लिए एक ही सेन्स-सेरिफ़ फ़ॉन्ट, हेडलाइन के लिए बोल्ड और बॉडी टेक्स्ट के लिए लाइट। सभी टेक्स्ट में 4px का स्पेसिंग स्केल इस्तेमाल किया गया है।

संदर्भ: Linear का स्पेसिंग संयम। Vercel का टाइपोग्राफिक वेट। Apple का बेंटो-ग्रिड सेक्शन पैटर्न। इनमें से किसी की भी हूबहू नकल नहीं है।

आउटपुट: रिस्पॉन्सिव, मोबाइल-फर्स्ट, शेडकन कंपोनेंट्स।

एक ही टूल। बिल्कुल अलग आउटपुट।

उदाहरण: कोडिंग एजेंट द्वारा कंपोनेंट बनाना

अस्पष्ट:

"मुझे एक बटन कंपोनेंट बनाकर दो।"

आपको क्या मिलेगा: एक बटन। एक ही वेरिएंट। कोई एक्सेसिबिलिटी नहीं। कोई फ़ोकस स्टेट नहीं। ऐसे रंग जो आपने नहीं मांगे।

संरचित:

आप एक सीनियर डिज़ाइन सिस्टम इंजीनियर हैं। हमारे डिज़ाइन सिस्टम में एक बटन कंपोनेंट बनाएं।

संदर्भ: यह बटन हमारे पुराने, बारह मार्केटिंग पेजों पर बिखरे हुए अस्थायी बटन स्टाइल को प्रतिस्थापित करता है। इसे प्राथमिक, द्वितीयक और घोस्ट वेरिएंट, तीन आकार (sm, md, lg), और लोडिंग, डिसेबल्ड और फोकस स्थितियों का समर्थन करना चाहिए।

प्रतिबंध: tokens.css से हमारे मौजूदा टोकन का उपयोग करें (नए रंग शामिल न करें)। फोकस रिंग को --color-accent का उपयोग करके 2px ऑफ़सेट किया जाना चाहिए। स्पेसिंग के लिए कभी भी px का उपयोग न करें, हमेशा --space टोकन का उपयोग करें। टाइपोग्राफी हमेशा --font-sans होनी चाहिए, आकार के आधार पर --text-sm या --text-base का उपयोग किया जाना चाहिए। लोडिंग स्थिति में स्पिनर दिखाई देता है और क्लिक अक्षम हो जाते हैं।

संदर्भ: एक्सेसिबिलिटी पैटर्न के लिए रेडिक्स UI प्रिमिटिव। फ़ाइल संरचना संदर्भ के लिए /components/Card.tsx पर हमारा मौजूदा कार्ड कंपोनेंट।

आउटपुट: TypeScript, टेलविंड, स्टोरीबुक स्टोरी जो प्रत्येक वेरिएंट और स्थिति का परीक्षण करती है। डिसेबल्ड, लोडिंग और फोकस व्यवहार को कवर करने वाले परीक्षण।

किसी कोडिंग एजेंट को यह दें, और आपको एक असली बटन मिल जाएगा। उसे "मेरे लिए एक बटन बनाओ" कहें, और आपको कुछ ऐसा मिलेगा जिसे आपको खुद से दोबारा लिखना पड़ेगा।

हर डिज़ाइनर को चुरा लेना चाहिए यह कंस्ट्रेंट लाइब्रेरी

कंस्ट्रेंट एक गुप्त हथियार हैं। डिज़ाइनर इनका सबसे कम उपयोग भी करते हैं। इस लाइब्रेरी को कॉपी करें, संबंधित पंक्तियों को अपने प्रॉम्प्ट में पेस्ट करें, और अपने ब्रांड के अनुसार समायोजित करें।

| डोमेन | शामिल करने योग्य कंस्ट्रेंट |

|--------|------------------------|

| चित्रण | सपाट रंग, मजबूत सिल्हूट, उच्च कंट्रास्ट, कम विवरण, छवि में कोई टेक्स्ट नहीं, स्पष्ट रूप से आवश्यक होने पर ही कंप्यूटर/फोन/रोबोट/दिमाग का उपयोग करें, संपादकीय, कॉर्पोरेट नहीं |

| फोटोग्राफी शैली | स्टॉक-फोटो जैसा लुक नहीं, चमकदार प्रकाश व्यवस्था नहीं, अनुरोध किए जाने पर ही 3D रेंडरिंग, प्राकृतिक संरचना, वास्तविक दुनिया की खामियों का स्वागत है |

| UI जनरेशन | मौजूदा घटकों का उपयोग करें, टोकन के बाहर कोई नया रंग नहीं, मोबाइल-फर्स्ट, एक्सेसिबिलिटी आवश्यक (फोकस स्टेट्स, कंट्रास्ट रेशियो), ब्रांड की आवश्यकता होने पर ही ग्रेडिएंट का उपयोग करें |

| टाइपोग्राफी | यूआई के लिए एक सैन्स-सेरिफ़ फ़ॉन्ट, सेरिफ़ फ़ॉन्ट केवल तभी जब ब्रांड की आवश्यकता हो, एक रचना में तीन से अधिक वज़न नहीं, जस्टिफ़ाइड टेक्स्ट नहीं, 4 शब्दों से अधिक लंबे ऑल-कैप्स टेक्स्ट नहीं |

रंग | हेक्साडेसिमल के बजाय टोकन का उपयोग करें, शुद्ध काले रंग पर कभी भी सफ़ेद टेक्स्ट नहीं, शुद्ध हरे रंग पर कभी भी शुद्ध लाल नहीं, बॉडी टेक्स्ट के लिए न्यूनतम कंट्रास्ट 4.5:1 |

लेआउट | 4px या 8px स्पेसिंग स्केल, बॉडी टेक्स्ट को कभी भी सेंटर-अलाइन न करें, कभी भी फुल-जस्टिफ़ाइड न करें, प्रति पंक्ति अधिकतम 75 अक्षर, छवियों को बाएँ से एंकर करें जब तक कि रचना की आवश्यकता न हो |

कोड | TypeScript सख्त, नेम्ड एक्सपोर्ट डिफ़ॉल्ट नहीं, बिना पूछे कोई नई डिपेंडेंसी नहीं, प्रत्येक नए कंपोनेंट के लिए टेस्ट कवरेज |

इन्हें पेस्ट-रेडी ब्लॉक के रूप में उपयोग करें। शुरुआत में आपको अजीब लगेगा। फिर आपको एहसास होगा कि आउटपुट रातोंरात दोगुना बेहतर हो गया है।

यदि आप AI वर्कफ़्लो के और अधिक विवरण चाहते हैं, तो Brainy पेपर्स के शेष भाग को ब्राउज़ करें। अगर आप अपनी टीम के ब्रांड के लिए एक वास्तविक प्रॉम्प्ट लाइब्रेरी चाहते हैं, न कि अपने पुराने ChatGPT इतिहास के लिए, तो किराया Brainy पर जाएं।

बिना शुरुआत किए सुधार कैसे करें

प्रॉम्प्ट इंजीनियरिंग में सबसे बुरी आदत है आउटपुट गलत होने पर पूरे प्रॉम्प्ट को डिलीट करके दोबारा लिखना। दस में से नौ बार, प्रॉम्प्ट लगभग सही होता है। बस एक वेरिएबल गलत होता है।

बारीकी से सुधार करें। एक बार में एक ही चीज़ बदलें।

1. प्रॉम्प्ट को एक बार चलाएं। देखें कि क्या गलत है।

2. पहचानें कि पांचों में से कौन सा हिस्सा गलत है। अगर आउटपुट बहुत सामान्य है, तो संदर्भ कमजोर हैं। अगर इसमें गलत तत्व हैं, तो कंस्ट्रेंट में "X नहीं" का विकल्प गायब है। अगर यह गलत दर्शकों के लिए है, तो संदर्भ अधूरा है।

3. सिर्फ उस हिस्से को संपादित करें। पूरा प्रॉम्प्ट दोबारा न लिखें।

4. फिर से चलाएं। पहले आउटपुट से तुलना करें। बेहतर, खराब या समान?

5. दोहराएँ। आमतौर पर तीन से पाँच बार दोहराने से लक्ष्य प्राप्त हो जाता है।

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

तीन गलतियाँ जो बेकार परिणाम सुनिश्चित करती हैं

तीन पैटर्न जो मैं हर हफ्ते देखता हूँ, उनमें से हर एक आउटपुट की गुणवत्ता को खराब कर देता है।

गलती 1: "इसे बेहतर बनाओ।" मॉडल नहीं जानता कि आपके लिए "बेहतर" का क्या अर्थ है। "बेहतर" का अर्थ है मॉडल का औसत "बेहतर", जो कि औसत की ओर प्रतिगमन है। स्पष्ट रहें। "रंगों का कंट्रास्ट बढ़ाएँ।" "रचना को अधिक असममित बनाएँ।" "पृष्ठभूमि से आधा विवरण हटा दें।"

गलती 2: एक साथ पाँच विकल्प माँगना। आपको एक अच्छे विकल्प के बजाय पाँच औसत दर्जे के विकल्प मिलते हैं। एक विकल्प माँगें। दोहराएँ। पहले अच्छे विकल्प को स्वीकार करें।

त्रुटि 3: संदर्भ न देना। संदर्भ मॉडल की पसंद को निर्धारित करते हैं। इनके बिना, आपको प्रशिक्षण डेटा का औसत मिलता है। तीन सोच-समझकर चुने गए संदर्भों से आपको वह परिणाम मिलता है जो आप चाहते थे।

अक्सर पूछे जाने वाले प्रश्न

क्या प्रॉम्प्ट इंजीनियरिंग एक वास्तविक कौशल है या सिर्फ़ एक प्रचार?

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

कौन सा टूल प्रॉम्प्ट को बेहतर ढंग से संभालता है?

छवियों के लिए, Midjourney और Gemini Pro विस्तृत टेक्स्ट प्रॉम्प्ट के साथ सबसे अच्छा प्रदर्शन करते हैं। UI के लिए, v0 और Lovable संरचित बाधाओं पर अच्छी प्रतिक्रिया देते हैं। कोडिंग के लिए, Claude Code और Cursor सबसे अच्छे हैं, विशेष रूप से एक अच्छी तरह से लिखी गई CLAUDE.md फ़ाइल के साथ। टूल से ज़्यादा महत्वपूर्ण प्रॉम्प्ट की गुणवत्ता है।

क्या मुझे प्रॉम्प्ट लाइब्रेरी का उपयोग करना चाहिए?

हाँ। एक बनाइए। उपयोग के अनुसार व्यवस्थित कीजिए। जब ​​भी आप कोई प्रॉम्प्ट सही ढंग से लिखें, उसे सहेज लीजिए। जब ​​भी कोई प्रॉम्प्ट गलत हो, तो उसका कारण नोट कर लीजिए। तीन महीने बाद आपके पास एक ऐसी लाइब्रेरी होगी जो किसी भी टूल सब्सक्रिप्शन से कहीं अधिक उपयोगी होगी।

प्रॉम्प्ट कितना लंबा होना चाहिए?

पांचों भागों को कवर करने के लिए पर्याप्त लंबा, और इतना छोटा कि हर वाक्य उपयोगी हो। मेरे अधिकांश प्रॉम्प्ट 100 से 300 शब्दों के बीच होते हैं। इससे छोटा प्रॉम्प्ट अपर्याप्त जानकारी देता है। इससे अधिक लंबा प्रॉम्प्ट दोहराव का कारण बन सकता है।

क्या मुझे तापमान या top_p जैसी तकनीकी प्रॉम्प्ट तकनीकें सीखने की आवश्यकता है?

अधिकांश डिज़ाइन कार्यों के लिए नहीं। ये API कॉल में उपयोग होते हैं, चैट इंटरफ़ेस में नहीं। पहले पांचों भागों को सही ढंग से लिखें। API कॉल करते समय आप पैरामीटर के बारे में सोच सकते हैं।

इसे गंभीरता से लिखें

हर अस्पष्ट प्रॉम्प्ट दस मिनट का समय बर्बाद करता है और बेकार परिणाम देता है। हर संरचित प्रॉम्प्ट दस मिनट का निवेश है जो उपयोगी परिणाम देता है।

भूमिका, संदर्भ, बाधाएँ, संदर्भ और आउटपुट विनिर्देश लिखें। एक-एक करके चर की जाँच करें। जो चर सही काम कर रहे हैं, उन्हें सहेज लें।

आपको संक्षिप्त विवरण लिखना तो आता ही है। मॉडल तो बस एक नौसिखिया है।

इसे गंभीरता से लिखें।