मुख्य सामग्री पर जाएं
Flowstep प्राकृतिक भाषा के प्रॉम्प्ट से UI स्क्रीन जनरेट करता है, जिससे आप सेकंडों में विचार से विज़ुअल डिज़ाइन तक पहुँच सकते हैं। चाहे आपको किसी कॉन्सेप्ट को परखने के लिए एक स्क्रीन चाहिए हो, या पूरे यूज़र जर्नी को कवर करने वाले स्क्रीन का सेट, शुरू करने के लिए एक अच्छा लिखा प्रॉम्प्ट काफ़ी है।

डिज़ाइन जनरेट करें

1

नया प्रोजेक्ट खोलें

अपने Flowstep डैशबोर्ड से नया प्रोजेक्ट बनाएँ, या कोई मौजूदा प्रोजेक्ट खोलें जहाँ आप स्क्रीन जोड़ना चाहते हैं।
2

अपना प्रॉम्प्ट लिखें

आप जो स्क्रीन या स्क्रीन चाहते हैं, उसका विवरण लिखें। ऐप के प्रकार, यूज़र के लक्ष्य और उस कंटेंट के बारे में स्पष्ट रहें जो आप देखने की उम्मीद करते हैं।
3

बताएँ कि आपको कितनी स्क्रीन चाहिए

डिफ़ॉल्ट रूप से, Flowstep एक स्क्रीन जनरेट करता है। अगर आपको कई स्क्रीन चाहिए, तो अपने प्रॉम्प्ट में साफ़ तौर पर लिखें — Flowstep एक प्रॉम्प्ट से 6 स्क्रीन तक जनरेट कर सकता है।
4

जनरेट करें

अपना प्रॉम्प्ट सबमिट करें। Flowstep आपकी स्क्रीन बनाता है और उन्हें एडिटर में दिखाता है, ताकि आप उनकी समीक्षा या सुधार कर सकें।
जब आप नई फ़ाइल बनाते हैं और उसका पहला प्रॉम्प्ट भेजते हैं, तो Flowstep उस प्रॉम्प्ट के आधार पर फ़ाइल का नाम रखता है, ताकि वह बाद में आसानी से मिल जाए। जिस फ़ाइल का पहले से नाम है — या जिसमें पहले के प्रॉम्प्ट हैं — वह अपना नाम रखती है, और आप किसी भी समय कोई भी फ़ाइल खुद नाम बदल सकते हैं।

जनरेशन रोकें

Flowstep जवाब दे रहा हो, तब सेंड बटन स्टॉप बटन में बदल जाता है (Stop Flowstep response)। जनरेशन रोकने के लिए उस पर क्लिक करें। कई स्क्रीन वाले अनुरोध में, जो स्क्रीन पहले ही पूरी हो चुकी हैं वे आपके कैनवस पर रहती हैं, और अधूरी स्क्रीन हटा दी जाती हैं। Flowstep द्वारा स्क्रीन बनाना शुरू करने के बाद रोकने पर भी मैसेज इस्तेमाल होता है — देखें मैसेज और सीमाएँ।

एक स्क्रीन बनाम कई स्क्रीन

आप एक प्रॉम्प्ट से एक स्क्रीन या 6 स्क्रीन तक जनरेट कर सकते हैं। दोनों तरीके डिज़ाइन कार्य के अलग-अलग चरणों के लिए उपयुक्त हैं।
  • एक स्क्रीन — किसी खास UI स्थिति, कॉम्पोनेंट या केंद्रित कॉन्सेप्ट को एक्सप्लोर करने के लिए सबसे अच्छा।
  • कई स्क्रीन — फ़्लो का नक्शा बनाने, लेआउट विकल्पों की तुलना करने, या पूरे यूज़र जर्नी को जल्दी कवर करने के लिए सबसे अच्छा।
जब आपको कई स्क्रीन चाहिए, तो अपने प्रॉम्प्ट में साफ़ लिखें। Flowstep यह तय करने के लिए आपके प्रॉम्प्ट के शब्दों का उपयोग करता है कि कितनी स्क्रीन बनानी हैं, इसलिए अस्पष्ट प्रॉम्प्ट आमतौर पर एक ही स्क्रीन लौटाते हैं। जनरेट की गई स्क्रीन को Screen 1, Screen 2 आदि नामों से बनाया जाता है — फ़ॉलो-अप प्रॉम्प्ट में किसी खास स्क्रीन का संदर्भ देने के लिए इन नामों का उपयोग करें।

प्रॉम्प्ट देने के और तरीके

सिर्फ़ टेक्स्ट ही इनपुट नहीं है। आप यह भी कर सकते हैं:
  • फ़ाइलें अटैच करें — प्रॉम्प्ट में इमेज (JPG, PNG, WEBP) या दस्तावेज़ (PDF, MD, TXT) जोड़ें, हर फ़ाइल 3 MB तक, ड्रैग-एंड-ड्रॉप, फ़ाइल पिकर, या पेस्ट करके। अपने प्रॉम्प्ट में अटैच की गई इमेज का संदर्भ दें, और Flowstep उसे जनरेट की गई स्क्रीन में शामिल करेगा। देखें डिज़ाइन रेफरेंस का उपयोग करें।
  • प्रॉम्प्ट बोलकर लिखें — प्रॉम्प्ट बार में माइक बटन पर क्लिक करें (या Mac पर Cmd+Shift+V या Windows पर Ctrl+Shift+V दबाएँ) और 60 सेकंड तक बोलें। ट्रांसक्रिप्ट आपके पहले से लिखे टेक्स्ट के अंत में जुड़ जाता है।
  • Flowstep को वेब पर रिसर्च करने दें — जब आपका प्रॉम्प्ट इसकी माँग करे (जैसे, “Stripe की प्राइसिंग पेज क्लोन करें”), तो Flowstep वेब खोज सकता है और किसी पेज की ब्रांडिंग — रंग, फ़ॉन्ट, लोगो, UI कॉम्पोनेंट — पढ़कर जनरेट की गई स्क्रीन में इस्तेमाल कर सकता है। Flowstep स्वयं तय करता है कि रिसर्च करनी है या नहीं, इसलिए यह हर प्रॉम्प्ट पर ट्रिगर नहीं होगा। ध्यान रखें कि दोबारा बनाई गई वेबसाइटों में मूल वेबसाइट से अलग इमेज और नेविगेशन होते हैं।
  • डिज़ाइन गाइडलाइन्स सेट करें — ऐसे स्थायी स्टाइल नियम तय करें जो फ़ाइल की हर जनरेशन पर लागू हों। देखें डिज़ाइन गाइडलाइन्स।

प्रभावी प्रॉम्प्ट लिखना

एक स्क्रीन वाले प्रॉम्प्ट का उदाहरण: “फ़िटनेस ट्रैकिंग ऐप के लिए एक मोबाइल लॉगिन स्क्रीन डिज़ाइन करें, जिसमें ईमेल और पासवर्ड फ़ील्ड, एक साइन-इन बटन और एक पासवर्ड भूल जाने का लिंक हो।”
कई स्क्रीन वाले प्रॉम्प्ट का उदाहरण: “फ़ूड डिलीवरी ऐप की ऑनबोर्डिंग फ़्लो के लिए कई स्क्रीन जनरेट करें — खाने की पसंद चुनना, डिलीवरी पता डालना, और पहले ऑर्डर की पुष्टि करना शामिल करें।”
पूरी जर्नी वाले प्रॉम्प्ट का उदाहरण: “एक खर्च रिपोर्टिंग ऐप में पूरी यूज़र जर्नी कवर करें, रसीद जमा करने से लेकर मैनेजर की मंज़ूरी तक।”
प्रॉम्प्ट लिखते समय इन सिद्धांतों का ध्यान रखें:
  • प्लेटफ़ॉर्म का नाम लें (मोबाइल, डेस्कटॉप, टैबलेट), ताकि Flowstep स्क्रीन का सही आकार तय कर सके।
  • केवल UI एलिमेंट्स नहीं, यूज़र के लक्ष्य का वर्णन करें — Flowstep इरादे से लेआउट का अनुमान लगाता है।
  • लेबल, कार्रवाइयाँ या डेटा जैसी मुख्य सामग्री शामिल करें, अगर वे डिज़ाइन के लिए मायने रखते हैं।
  • मल्टी-स्क्रीन आउटपुट शुरू करने के लिए “कई स्क्रीन जनरेट करें” या “पूरी यूज़र जर्नी कवर करें” जैसे वाक्यांश इस्तेमाल करें।