प्रॉम्प्ट के लिए गाइड
enter.converge.ai में प्रॉम्प्ट्स में महारत हासिल करने की अंतिम गाइड
आपने शायद पहले ही खोज लिया होगा कि enter.converge.ai का मुख्य जादू prompt में निहित है। यह वह भाषा है जिसका उपयोग आप हमारे AI के साथ संवाद करने, सहयोग करने और निर्माण करने के लिए करते हैं।
आपका प्रॉम्प्ट जितना बेहतर होगा, परिणाम उतना ही प्रभावशाली होगा।
आप Enter को एक शानदार, अविश्वसनीय रूप से तेज़ जूनियर डेवलपर के रूप में सोचें... जो दूसरों के मन की बात पढ़ने में बहुत खराब है। यह वह सब कुछ बना सकता है जो आप मांगते हैं, लेकिन यह आपके इरादे का अनुमान नहीं लगा सकता है। आपका काम निर्देशों का एक बिल्कुल स्पष्ट सेट प्रदान करना है, जैसे कि एक आदर्श Business Requirements Document (BRD)।
यह मार्गदर्शिका आपको प्रभावी प्रॉम्प्टिंग की कला और विज्ञान के माध्यम से ले जाएगी, जो आपको नौसिखिए से पेशेवर बनाएगी।
भाग 1: मुख्य सिद्धांत — एक मजबूत नींव का निर्माण
कुछ भी बनाने से पहले, इन तीन सुनहरे नियमों को याद कर लें।
नियम 1: स्पष्टता ही राजा है (अस्पष्ट होना बंद करें)
अस्पष्टता आपकी सबसे बड़ी दुश्मन है। आपके निर्देश पिक्सेल-परफेक्ट होने चाहिए।
खराब प्रॉम्प्ट 👎:
"मुझे अपनी साइट के लिए मूल्य निर्धारण योजनाओं की आवश्यकता है।"
अच्छा प्रॉम्प्ट 👍:
"इन विशेषताओं के साथ एक इंटरैक्टिव मूल्य निर्धारण अनुभाग घटक बनाएं:- मासिक/वार्षिक टॉगल के साथ 3 मूल्य निर्धारण स्तर (Starter, Professional, Enterprise) - Framer Motion का उपयोग करके माउस की गति पर प्रतिक्रिया करने वाला एनिमेटेड स्टारफील्ड बैकग्राउंड - वार्षिक बिलिंग पर स्विच करने पर कंफ़ेद्दी एनीमेशन - @number-flow/react का उपयोग करके सुचारू मूल्य संक्रमण - "Most Popular" बैज के साथ पेशेवर कार्ड जो डेस्कटॉप पर ऊपर उठता है - एनिमेटेड स्लाइडिंग पिल प्रभाव के साथ मासिक/वार्षिक टॉगल - स्क्रॉल पर कंपकंपी वाले कार्ड एनिमेशन के साथ रिस्पॉन्सिव लेआउट - सिमेंटिक डिज़ाइन टोकन का उपयोग करके आधुनिक नीला रंग योजना"
https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro
प्रो-टिप: अपने प्रॉम्प्ट की शुरुआत मजबूत, सक्रिय क्रियाओं से करें जैसे Create, Generate, Refactor, Write, Design, या List
नियम 2: संदर्भ रानी है ("क्यों" प्रदान करें)
Enter को इस बात का कोई अंदाजा नहीं है कि आपका प्रोजेक्ट क्या है, यह किसके लिए है, या आपके लक्ष्य क्या हैं। आपको "क्या" के पीछे का "क्यों" प्रदान करना होगा।
खराब प्रॉम्प्ट 👎:
"मेरे लिए एक लैंडिंग पेज बनाएं।"
अच्छा प्रॉम्प्ट 👍:
"मैं डिजाइनरों के लिए एक नया AI कलर पैलेट जनरेटर 'Chroma' के लिए एक लैंडिंग पेज बना रहा हूँ। इस दर्शकों को प्रभावित करने के लिए डिज़ाइन भविष्यवादी, कलात्मक और प्रीमियम महसूस होना चाहिए। मुझे एक सूक्ष्म, एनिमेटेड ग्रेडिएंट बैकग्राउंड के साथ एक 'ग्लासमॉर्फिज्म' हीरो सेक्शन चाहिए। एक उबाऊ 'विशेषताओं' की सूची के बजाय, मुझे एक इंटरैक्टिव अनुभाग चाहिए जहां उपयोगकर्ता नमूना रंग पैलेट को मॉक UI कार्ड पर गतिशील रूप से लागू होते देख सके। यह मुख्य विक्रय बिंदु है।"
https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro
नियम 3: निरंतरता लागू करें (अपना "बॉक्स" परिभाषित करें)
AI का कोई डिफ़ॉल्ट स्वाद नहीं होता है। नियमों के बिना, यह एक अस्त-व्यस्त कलाकार बन जाएगा। आपको AI के खेलने के लिए "बॉक्स"—यानी आपके डिज़ाइन सिस्टम—को परिभाषित करना होगा। यह एक पॉलिश और पेशेवर ऐप का रहस्य है।
खराब अभ्यास 👎:
"एक नीला CTA बटन बनाएं।"
"एक मूल्य निर्धारण कार्ड बनाएं और 'Pro' योजना को हाइलाइट करें।"
अच्छा अभ्यास 👍:
"ऐप एक हाई-एंड वित्तीय विश्लेषण टूल है, इसलिए थीम 'डार्क मोड फर्स्ट', पेशेवर और डेटा-सघन होनी चाहिए, जैसे कि Bloomberg Terminal या Linear। इन नियमों को लागू करें: थीम: केवल डार्क मोड। बैकग्राउंड: '#111111'। मुख्य कार्ड/मॉड्यूल बैकग्राउंड: '#1A1A1A'। टाइपोग्राफी: सभी टेक्स्ट के लिए 'Inter' का उपयोग करें। सभी नंबरों और वित्तीय डेटा के लिए 'SF Mono' का उपयोग करें। एक्सेंट रंग: एक एकल, जीवंत एक्सेंट: '#00F5D4' (चमकीला चैती)। इसका उपयोग केवल प्राथमिक CTA और सक्रिय डेटा बिंदुओं के लिए करें। शैली: कोई बॉर्डर-त्रिज्या (border-radius) नहीं; सभी तत्वों में नुकीले, 90-डिग्री के कोने होने चाहिए। घटकों को परिभाषित करने के लिए '#333333' में 1px बॉर्डर का उपयोग करें, छाया का नहीं।"
https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro
भाग 2: enter.converge.ai प्लेबुक — लेगो की तरह निर्माण
यह केवल पेज ही नहीं, बल्कि संपूर्ण एप्लिकेशन बनाने के लिए सबसे महत्वपूर्ण रणनीति है।
रणनीति 1: मॉड्यूलर तरीके से बनाएं, मोनोलिथिक तरीके से नहीं (लेगो विधि)
यह नंबर एक नौसिखिया गलती है। Enter से एक ही बार में संपूर्ण, जटिल एप्लिकेशन जेनरेट कराने का प्रयास न करें।
पेशेवर तरीका एक समय में एक संपूर्ण स्क्रीन या यूजर फ्लो बनाना है।
खराब प्रॉम्प्ट 👎:
"मेरे लिए Airbnb जैसा एक ऐप बनाएं।"
अच्छा प्रॉम्प्ट 👍:
"आइए हमारे Airbnb-क्लोन, 'Roam' के लिए संपूर्ण यूजर बुकिंग फ्लो बनाएं। हम इसे स्क्रीन दर स्क्रीन करेंगे। स्क्रीन 1 से शुरू करें: लिस्टिंग विवरण पेज। इस स्क्रीन में एक फोटो ग्रिड (जैसे Airbnb का, एक मुख्य छवि और 4 छोटी छवियां), बुकिंग/प्रति-रात-कीमत मॉड्यूल के साथ दाईं ओर एक 'स्टिकी' साइडबार, और बाईं ओर मुख्य सामग्री कॉलम की आवश्यकता है।"
"ठीक है, बहुत बढ़िया। अब, स्क्रीन 2 बनाएं: 'पुष्टि करें और भुगतान करें' पेज। जब कोई उपयोगकर्ता स्क्रीन 1 से 'बुक' पर क्लिक करता है, तो वे यहां पहुंचते हैं। इस पेज पर बुकिंग सारांश, मूल्य विवरण और क्रेडिट कार्ड इनपुट के लिए एक सरल, अत्यधिक सुरक्षित फॉर्म दिखाने की आवश्यकता है। रूपांतरण को अधिकतम करने के लिए डिज़ाइन बेहद साफ-सुथरा और भरोसेमंद होना चाहिए।"
https://26985927857e4d70be5075c634aae015.prod.enterapp.pro
रणनीति 2: उदाहरण प्रदान करें (फ्यू-शॉट प्रॉम्प्टिंग)
जब आपके वांछित डिज़ाइन पैटर्न का वर्णन करना कठिन हो, तो केवल बताएं नहीं, बल्कि दिखाएं। Enter को अपना वांछित विज़ुअल पैटर्न सिखाने के लिए एक छोटा इनपुट/आउटपुट उदाहरण प्रदान करें।
खराब प्रॉम्प्ट 👎:
"मुझे अपने टीम के सदस्यों की एक सूची दिखानी है।"
अच्छा प्रॉम्प्ट 👍:
"मुझे 'टीम से मिलें' पेज जेनरेट करना है। मेरे पास लोगों की एक सूची है, लेकिन मैं उन पर एक विशिष्ट विज़ुअल पैटर्न लागू करना चाहता हूं। यहाँ मेरा पैटर्न है: इनपुट पैटर्न: [Name], [Role], [Short Bio], [Image URL] आउटपुट पैटर्न (विज़ुअल लेआउट): एक कार्ड बनाएं। [Image URL] डिफ़ॉल्ट रूप से लागू ग्रेस्केल फ़िल्टर के साथ 3:4 आस्पेक्ट रेशियो का होना चाहिए। इंटरैक्शन: होवर करने पर, छवि पूर्ण रंग में बदल जाती है और थोड़ी ज़ूम इन होती है (स्केल 1.05)। छवि के नीचे, [Name] को अपरकेस 'Inter' फ़ॉन्ट (ट्रैकिंग-वाइड) में प्रदर्शित करें। नाम के नीचे, [Role] को सेरिफ़ फ़ॉन्ट, इटैलिक और हल्के भूरे रंग में प्रदर्शित करें। * अब, इस सटीक विज़ुअल आउटपुट पैटर्न को निम्नलिखित डेटा पर लागू करें: [3 टीम सदस्यों के लिए डेटा...]। फिर, सभी 4 कार्डों को एक रिस्पॉन्सिव 3-कॉलम ग्रिड में रेंडर करें।"
https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro
भाग 3: उन्नत तकनीकें — AI को अपना भागीदार बनाएं
एक बार जब आप बुनियादी बातों में महारत हासिल कर लेते हैं, तो अपने वर्कफ़्लो को बेहतर बनाने के लिए इन तकनीकों का उपयोग करें।
तकनीक 1: AI से कहें कि वह आपसे प्रश्न पूछे
सुनिश्चित नहीं हैं कि आपने एक जटिल ऐप स्क्रीन के लिए पर्याप्त विवरण प्रदान किया है या नहीं? पासा पलटें और Enter से आवश्यकताएं जेनरेट कराएं।
खराब प्रॉम्प्ट 👎:
"मुझे एक उपयोगकर्ता प्रोफ़ाइल पेज चाहिए।"
अच्छा प्रॉम्प्ट 👍:
"मैं एक उपयोगकर्ता के लिए संपूर्ण 'खाता सेटिंग्स' क्षेत्र डिज़ाइन करना चाहता हूं। यह कई टैब वाला एक जटिल पेज होगा। निर्माण शुरू करने से पहले, मुझसे आवश्यक अनुभागों, डेटा और उपयोगकर्ता क्रियाओं (जैसे खाता हटाने के लिए 'डेंजर ज़ोन') के बारे में 5 महत्वपूर्ण प्रश्न पूछें ताकि आप सही डिज़ाइन बना सकें।"
तकनीक 2: एक कला निर्देशक की तरह बात करें
Enter भाषा जानता है। एक जटिल सौंदर्यशास्त्र को तेजी से परिभाषित करने के लिए उद्योग के कीवर्ड का उपयोग करें।
खराब प्रॉम्प्ट 👎:
"मेरी तस्वीरें दिखाने के लिए मुझे एक वेबसाइट बना कर दें।"
अच्छा प्रॉम्प्ट 👍
"एक हाई-एंड फैशन फोटोग्राफर के लिए एक होमपेज बनाएं। सौंदर्यशास्त्र 'Editorial' और 'Minimalist' होना चाहिए। मुझे 'Awwwards' या 'Vogue' से प्रेरित एक पूर्ण-स्क्रीन, असममित 'broken grid' लेआउट चाहिए। ग्रिड इंटरैक्टिव होना चाहिए: जैसे ही उपयोगकर्ता का माउस किसी छवि पर होवर करता है, उसे थोड़ा विस्तारित होना चाहिए (जैसे, स्केल: 1.05) और ग्रेस्केल से पूर्ण रंग में परिवर्तित होना चाहिए। टाइपोग्राफी एक बोल्ड, सुरुचिपूर्ण Serif फ़ॉन्ट (जैसे 'Playfair Display') होनी चाहिए, जिसमें कुछ सुर्खियां छवियों के ऊपर ओवरलैप करती हों। नेविगेशन एक छोटा, न्यूनतम sans-serif होना चाहिए, जो ऊपर-बाएं कोने में पिन किया गया हो।"
https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro
तकनीक 3: डीबग कैसे करें (जब चीजें गलत हो जाएं)
जब Enter आपके ऐप पर अटक जाता है या कोई विज़ुअल गलती करता है, तो केवल "इसे ठीक करें" न कहें। एक सीनियर डेवलपर की तरह उसका मार्गदर्शन करें।
एक स्क्रीनशॉट प्रदान करें 🌟: यह सबसे तेज़ तरीका है। टूटे हुए हिस्से और एरर मैसेज का स्क्रीनशॉट अपलोड करें।
"जैसा कि आप इस मोबाइल स्क्रीनशॉट में देख सकते हैं, कार्ड कंटेनर से बाहर निकल रहे हैं। वे 600px से छोटी स्क्रीन पर सिंगल-कॉलम फ्लेक्स लेआउट में होने चाहिए। कृपया मीडिया क्वेरीज़ की जाँच करें।"
कारण पूछें 🌟:
"इस लेआउट शिफ्ट का मूल कारण क्या है? मुझे इसे सरल शब्दों में समझाएं।"
पिवट 🌟:
"यह CSS Grid दृष्टिकोण विफल होता दिख रहा है। आइए एक पूरी तरह से अलग तरीका आज़माएं। इसके बजाय Flexbox का उपयोग करने के लिए इस पूरे सेक्शन को रीफैक्टर करें।"
निष्कर्ष: आपकी यात्रा अभी शुरू हो रही है
प्रॉम्प्टिंग एक कला और कौशल दोनों है। सीखने का सबसे अच्छा तरीका प्रयास, त्रुटि और पुनरावृत्ति है।
प्रयोग करने से न डरें। आपके निर्देश जितने स्पष्ट होंगे, आपका संदर्भ उतना ही समृद्ध होगा, और आपके ऐप स्क्रीन जितने अधिक मॉड्यूलर होंगे, आपके परिणाम उतने ही शानदार होंगे।
अब, enter.converge.ai पर जाएं और अपना पहला प्रॉम्प्ट आज़माएं!
परिशिष्ट: enter.converge.ai प्रॉम्प्टिंग चीट शीट
अपने प्रॉम्प्ट्स में इन कीवर्ड्स का उपयोग करने का प्रयास करें। ये Enter को आपकी मंशा को सटीकता से समझने में मदद करते हैं।
| श्रेणी | कीवर्ड्स |
|---|---|
| लेआउट | Responsive, Grid layout, Flexbox, Three-column layout, Sidebar, Navbar, Footer, Header, Full-width, Centered, Sticky, Split-screen, Masonry layout, Dashboard layout, Card-based layout |
| शैली | Glassmorphism, Neumorphism, Minimalist, Techy, Corporate, Modern, Dark mode, Rounded corners, Shadow, Gradient, Brutalist, Playful, Editorial, Futuristic, Retro, Pastel, High contrast, Clean white, Colorful accents |
| घटक | Modal, Popup, Date picker, Carousel, Slider, Accordion, Tabs, Breadcrumbs, CTA button, Form, Input field, Dropdown, Table, Pagination, Search bar, Sidebar menu, Chat bubble, Notification toast, Progress bar, Stepper, Timeline, Card |
| एनिमेशन और मोशन | Hover animation, Fade-in, Slide-up, Parallax scrolling, Microinteraction, Smooth transition, Framer Motion, GSAP-like, Scroll-based reveal, Animated gradient, Looping hero video, Subtle hover glow, Animated icons |
| प्रेरणा | Inspired by Linear, Like Superhuman's onboarding, Airbnb-style grid, Bloomberg-style (data-dense), Notion-like interface, Framer aesthetic, Apple-style marketing page, Stripe documentation look, Pitch deck vibe, Figma-like collaboration feel |
