प्रोडक्ट लीडर्स के लिए v0 | डेमो

VVercel
컴퓨터/소프트웨어마케팅/광고창업/스타트업AI/미래기술

Transcript

00:00:00हेलो दोस्तों,
00:00:00मैं ऐली हूं,
00:00:01और आज मैं आपको vZero दिखाने जा रही हूं।
00:00:03अगर आप एक प्रोडक्ट मैनेजर या डिज़ाइनर हैं,
00:00:05तो शायद आपके दिमाग में एक मिलियन आइडियाज़ होंगे और उन्हें बनाने के लिए पर्याप्त समय नहीं होगा।
00:00:09vZero आपको तेज़ी से आगे बढ़ने में मदद करता है जब आप आइडिएशन या कोलैबोरेशन कर रहे होते हैं।
00:00:13आप एक कॉन्सेप्ट टाइप करते हैं और झटपट,
00:00:15आपके पास अपनी टीम को दिखाने के लिए एक वर्किंग प्रोटोटाइप तैयार है। इस वीडियो में,
00:00:18हम देखेंगे कि कैसे vZero आपको आइडिया या PRD से लाइव प्रोटोटाइप तक मिनटों में पहुंचने में मदद करता है। कोई इंतजार नहीं,
00:00:24कोई डेक्स या फ़ालतू चीज़ें नहीं,
00:00:25बस असली प्रोटोटाइप जो आपको तेज़ी से align करने और ship करने में मदद करते हैं। चलिए शुरू करते हैं। इस उदाहरण के लिए,
00:00:31मैं आपको दिखाऊंगी कि हम वास्तव में vZero को बनाने के लिए vZero का उपयोग कैसे करते हैं।
00:00:35हम एक टीम टेम्पलेट के साथ शुरुआत करने जा रहे हैं जो पूरी vZero टीम के साथ शेयर किया गया है और मूल रूप से vZero के अंदर बने vZero के एक मिनी वर्ज़न की तरह काम करता है।
00:00:42तो यह शुरू करने के लिए एक शानदार जगह है जब आप यह पता लगाने की कोशिश कर रहे हैं कि vZero के अंदर क्या काम करेगा या क्या नहीं करेगा। टीम टेम्पलेट्स आपको अपनी टीम में टीम डिज़ाइन सिस्टम्स का उपयोग करने की अनुमति भी देते हैं जिन्हें आप vZero में import कर सकते हैं।
00:00:52इसका मतलब है कि आपकी जनरेशन्स आपके डिज़ाइन्स और ब्रांड्स से मैच कर सकती हैं।
00:00:56इस टेम्पलेट के लिए,
00:00:57हमारे डिज़ाइनर ने इसे पहले से ही हमारे ऐप की तरह दिखने के लिए बनाया है,
00:01:00तो हम vZero में open पर क्लिक करेंगे और ऐप के अंदर vZero के इस बेबी वर्ज़न पर iterate करना शुरू कर सकेंगे। चलिए शुरू करते हैं। हाल ही में,
00:01:07हम यह explore कर रहे हैं कि हम वास्तव में अपने लैंडिंग पेज की लॉग्ड आउट स्टेट में conversion कैसे बढ़ा सकते हैं।
00:01:13एक हाइपोथीसिस जिसे हम टेस्ट करना चाहते हैं वह है कि क्या होगा अगर हम चैट के नीचे इन पांच बटन्स को किसी और चीज़ से बदल दें जो ज़्यादा conversion drive करने में मदद कर सके। मान लेते हैं कि यूज़र्स वास्तव में उन बटन्स पर क्लिक नहीं कर रहे हैं और हम यूज़र को suggested prompts दिखाने के लिए एक अलग रणनीति try करना चाहते हैं। मैं vZero से मदद मांग सकती हूं। मैं एक स्क्रीनशॉट के साथ शुरुआत करूंगी जो सिर्फ एप्लीकेशन के उस हिस्से को दिखा रहा है जिसे मैं modify करने की कोशिश कर रही हूं।
00:01:35इस केस में,
00:01:36यह साइट का सिर्फ वह सेक्शन है जिसमें चैट बॉक्स और वे पांच बटन हैं। फिर हम उस स्क्रीनशॉट का उपयोग कर सकते हैं और vZero को बता सकते हैं कि हम वास्तव में क्या बदलना चाहते हैं। बढ़िया। हम उस स्क्रीनशॉट को चैट बॉक्स में drag करेंगे और फिर अपना prompt शुरू कर सकते हैं। मैं इन suggested actions को हटाने का प्रयास करना चाहती हूं। इसके बजाय,
00:02:06मैं मुख्य चैट बॉक्स इनपुट में rotating placeholder text बनाना चाहती हूं जिसमें example prompts हों।
00:02:16चलिए 10 की लिस्ट में से चुने गए एक defined example placeholder prompt के साथ शुरुआत करते हैं। मैं एक टाइपिंग इफ़ेक्ट भी जोड़ना चाहती हूं ताकि जब आपको placeholders को rotate करने की ज़रूरत हो तो ऐसा लगे जैसे आप character by character backspace कर रहे हैं।
00:02:49फिर तेज़ी से एक नया prompt टाइप कर रहे हैं।
00:02:56ठीक है,
00:02:57चलिए देखते हैं कि vZero क्या बनाता है। आप देखेंगे कि मेरा prompt काफी specific और detailed था कि मैं वास्तव में क्या चाहती थी।
00:03:03जब आप एक प्रोटोटाइप बना रहे हैं और आपके दिमाग में कुछ clear है,
00:03:08तो जितना ज़्यादा specific आप हो सकते हैं,
00:03:12उतना बेहतर vZero बना सकता है। अब आप देखेंगे कि vZero एक plan तैयार कर रहा है कि वह क्या बनाने जा रहा है और फिर वह वास्तव में उस feature को बनाने के लिए code लिखना शुरू कर रहा है जो मैं चाहती थी।
00:03:27और हो गया। आपके पास उस exact आइडिया का mock-up है जो मैं सोच रही थी जिसे मैं अब अपनी बाकी टीम के साथ शेयर कर सकती हूं। अगर मैं यहां कुछ सिंपल बदलाव करना चाहती हूं तो मैं design mode में जा सकती हूं और छोटे copy edits,
00:03:39font changes,
00:03:40colors और भी बहुत कुछ बदल सकती हूं। चलिए अभी देखते हैं और यह करते हैं।
00:03:43तो मैं design में जाऊंगी और मैं इस टाइटल पर क्लिक कर सकती हूं। मैं text में एडिट करना चाहती हूं तो मैं इस शब्द को ship से create में बदलना चाहती हूं। मैं ऐसा कर सकती हूं और save पर क्लिक कर सकती हूं और फिर हम तैयार हैं। अगर मैं देखना चाहती हूं कि यह अलग-अलग devices पर कैसा दिखेगा,
00:04:02तो मैं preview screen के ऊपर अलग-अलग preview views पर क्लिक कर सकती हूं।
00:04:07तो अभी यह दिखा रहा है कि यह desktop पर कैसा दिखेगा लेकिन हम देख सकते हैं कि यह tablet या phone पर कैसा दिखेगा। हम उन views पर बाद में काम कर सकते हैं।
00:04:17फिलहाल चलिए इसे deploy करते हैं और visibility को केवल मेरी organization तक सेट करते हैं ताकि मैं अपने teammates के साथ share कर सकूं और वे Vercel toolbar का उपयोग करके सीधे comments छोड़ सकें। बढ़िया। अब हम ऐप के production वर्ज़न में हैं।
00:04:28तो मेरे teammates अंदर जा सकते हैं और मान लीजिए वे एक छोटा सा बदलाव करना चाहते हैं जैसे इसे वापस ship में बदलना तो वे वह comment छोड़ सकते हैं।
00:04:37चलिए इसे वापस ship में बदलते हैं।
00:04:42एक बार जब वे वह comment छोड़ देते हैं तो मुझे एक notification मिलेगी और फिर मुझे पता चल जाएगा कि मुझे अपनी टीम के feedback के आधार पर कौन से बदलाव करने चाहिए।
00:04:49और यह हो गया। V0 आपको तेज़ी से आगे बढ़ने में मदद करता है।
00:04:52आप उन आइडियाज़ के surface area को बढ़ा सकते हैं जिन्हें आपकी टीम explore कर सकती है,
00:04:55उन आइडियाज़ को जल्द test कर सकते हैं और वास्तव में दिखा सकते हैं कि आपका मतलब क्या है।
00:04:59v0.app पर अपना अगला प्रोटोटाइप मिनटों में बनाएं। हम यह देखने के लिए इंतज़ार नहीं कर सकते कि आप क्या बनाते हैं।

Key Takeaway

vZero एक AI-powered प्रोटोटाइपिंग टूल है जो प्रोडक्ट टीम्स को detailed prompts से मिनटों में working prototypes बनाकर तेज़ी से ideate, collaborate और ship करने में सक्षम बनाता है।

Highlights

vZero एक टूल है जो प्रोडक्ट मैनेजर्स और डिज़ाइनर्स को आइडिया से लाइव प्रोटोटाइप तक मिनटों में पहुंचने में मदद करता है

टीम टेम्पलेट्स की सुविधा से यूज़र्स अपने डिज़ाइन सिस्टम्स को import कर सकते हैं ताकि जनरेशन्स ब्रांड से मैच करें

स्क्रीनशॉट और detailed prompts का उपयोग करके specific UI features बनाए जा सकते हैं जैसे rotating placeholder text और typing effects

Design mode में copy edits, font changes और colors जैसे छोटे बदलाव आसानी से किए जा सकते हैं

टीम collaboration के लिए Vercel toolbar के साथ prototype को deploy किया जा सकता है जहां teammates सीधे comments छोड़ सकते हैं

vZero का उपयोग खुद vZero को बनाने के लिए किया गया, जो टूल की क्षमता को दर्शाता है

Timeline

vZero का परिचय और मुख्य उद्देश्य

ऐली vZero टूल का परिचय देती हैं जो विशेष रूप से प्रोडक्ट मैनेजर्स और डिज़ाइनर्स के लिए डिज़ाइन किया गया है। वह बताती हैं कि प्रोडक्ट professionals के पास आमतौर पर बहुत सारे आइडियाज़ होते हैं लेकिन उन्हें बनाने के लिए पर्याप्त समय नहीं होता। vZero इस समस्या का समाधान करता है क्योंकि यह यूज़र्स को आइडिया या PRD से लाइव प्रोटोटाइप तक मिनटों में पहुंचने की सुविधा देता है। यह टूल तेज़ ideation और collaboration को संभव बनाता है, जहां यूज़र्स एक कॉन्सेप्ट टाइप करते हैं और तुरंत एक working prototype तैयार हो जाता है जिसे टीम के साथ शेयर किया जा सकता है।

टीम टेम्पलेट्स और डिज़ाइन सिस्टम integration

इस सेक्शन में ऐली बताती हैं कि कैसे vZero टीम वास्तव में vZero को बनाने के लिए vZero का उपयोग करती है। वह टीम टेम्पलेट्स की अवधारणा को समझाती हैं जो पूरी टीम के साथ शेयर किया जाता है और vZero के अंदर एक मिनी वर्ज़न की तरह काम करता है। टीम टेम्पलेट्स की सबसे महत्वपूर्ण सुविधा यह है कि यह यूज़र्स को अपनी टीम के डिज़ाइन सिस्टम्स को vZero में import करने की अनुमति देती है। इसका मतलब है कि generated prototypes automatically यूज़र की existing designs और brand guidelines से मैच करते हैं, जो consistency और professional look सुनिश्चित करता है।

Practical use case - landing page conversion optimization

ऐली एक real-world example शेयर करती हैं जहां टीम अपने landing page की logged out state में conversion बढ़ाने की कोशिश कर रही है। उनकी hypothesis यह है कि चैट के नीचे मौजूद पांच बटन्स को किसी और चीज़ से बदला जाए जो ज़्यादा conversion drive करे। Analytics से पता चलता है कि यूज़र्स उन बटन्स पर क्लिक नहीं कर रहे हैं, इसलिए टीम suggested prompts दिखाने के लिए एक अलग strategy try करना चाहती है। यह सेक्शन दिखाता है कि कैसे product teams वास्तविक business problems को solve करने के लिए vZero का उपयोग कर सकती हैं।

Detailed prompting और prototype generation

इस सेक्शन में ऐली demonstrate करती हैं कि कैसे स्क्रीनशॉट और detailed prompt का उपयोग करके prototype बनाया जाता है। वह application के relevant section का स्क्रीनशॉट लेती हैं और फिर एक बहुत specific prompt देती हैं जिसमें suggested actions को हटाने, rotating placeholder text बनाने, 10 example prompts की list में से चुनने, और typing effect जोड़ने का अनुरोध है। ऐली emphasize करती हैं कि जितना ज़्यादा specific और detailed आपका prompt होगा, उतना बेहतर vZero आपके vision को implement कर सकता है। vZero फिर एक plan तैयार करता है और real-time में code लिखता है, जो exact आइडिया का mock-up बनाता है जिसे टीम के साथ immediately शेयर किया जा सकता है।

Design mode और quick edits

यह सेक्शन vZero की design mode functionality को cover करता है जो यूज़र्स को छोटे बदलाव quickly करने की सुविधा देता है। ऐली दिखाती हैं कि कैसे copy edits, font changes और color modifications बिना code लिखे किए जा सकते हैं। Example में, वह एक title text को 'ship' से 'create' में बदलती हैं और फिर वापस करती हैं। Design mode में preview functionality भी है जो यूज़र्स को अलग-अलग devices (desktop, tablet, phone) पर design कैसा दिखेगा यह देखने की सुविधा देती है। यह feature designers को responsive designs को quickly validate करने में मदद करता है।

Deployment और team collaboration

अंतिम सेक्शन में ऐली deployment process और team collaboration features को demonstrate करती हैं। Prototype को organization-only visibility के साथ deploy किया जाता है ताकि केवल team members ही access कर सकें। Vercel toolbar integration की मदद से teammates सीधे production version पर comments छोड़ सकते हैं, जिससे real-time feedback loop create होता है। जब कोई comment छोड़ता है, तो creator को notification मिलती है, जो iterative improvement को facilitate करता है। ऐली conclude करती हैं कि vZero teams को ideation के surface area को बढ़ाने, ideas को jaldi test करने और effectively communicate करने में मदद करता है, और viewers को v0.app पर अपना prototype बनाने के लिए invite करती हैं।

Community Posts

View all posts