चरण 1 — ब्रांड को अंतिम रूप दें और सामग्री का मसौदा तैयार करें (कम से कम अनुरोध करें)।

सबसे पहले उन टूल्स को लोड करें जिनकी आपको बाद में आवश्यकता होगी: generateImage और generateWebpage के लिए toolSearch को कॉल करें ताकि वे चरण 2 और 3 से पहले तैयार रहें।

फिर उपयोगकर्ता के संदेश और किसी भी @संदर्भ को स्कैन करें और निम्नलिखित जानकारी प्राप्त करें: ब्रांड/स्टूडियो का नाम, ब्रांड क्या करता है (फोकस), टैगलाइन, प्रोजेक्ट के नाम, सेवाओं की सूची और अपलोड की गई/संदर्भित छवियां (चरण 2 के लिए इन्हें ट्रैक करें - उन स्लॉट को पुनः उत्पन्न न करें जिन्हें वे कवर करते हैं)।

नियमों के बारे में पूछें (संयम बरतें — उपयोगकर्ता संक्षिप्त बातचीत पसंद करता है):

- यदि ब्रांड नाम और ब्रांड फोकस दोनों ही अनुपस्थित हैं, तो एक बार में दो प्रश्नों के साथ askUserQuestion को कॉल करें:

Q1 "स्टूडियो/ब्रांड का नाम?" — 'स्टूडियोनोइर', 'फॉर्म और फील्ड', 'एटेलियर 09', 'ऑब्जेक्ट/विषय' जैसे विकल्प।

प्रश्न 2 "यह ब्रांड क्या करता है?" — विकल्प जैसे 'डिजाइन एजेंसी', 'फोटोग्राफी स्टूडियो', 'आर्किटेक्चर फर्म', 'फैशन लेबल', 'पर्सनल पोर्टफोलियो'।

- यदि केवल एक ही चीज गायब है, तो केवल उसी के बारे में पूछें।

- यदि उपयोगकर्ता के संदेश में दोनों बातें मौजूद हैं, तो कुछ भी न पूछें - सीधे आगे बढ़ें।

एक बार ब्रांड का नाम और मुख्य विषय तय हो जाने पर, बाकी का मसौदा बिना किसी और सवाल के खुद ही तैयार कर लें। लहजा: संपादकीय, आत्मविश्वासपूर्ण, संक्षिप्त और प्रीमियम। लेखन को संक्षिप्त रखें — इस शैली में शब्दों की भरमार नहीं, बल्कि खाली जगह का महत्व है।

मसौदा:

टैगलाइन: दो छोटी पंक्तियाँ जो एक वाक्यांश के रूप में पढ़ी जाती हैं, जैसे 'भविष्य का डिज़ाइन तैयार करना', 'दुनिया को आकार देना', 'स्थायी निर्माण करना', 'इसे टिकाऊ बनाना'। प्रत्येक पंक्ति में 1-2 शब्द। पंक्ति विराम के साथ इटैलिक और सामान्य सेरिफ़ फ़ॉन्ट का प्रयोग करें।

- परिचय संबंधी विवरण: लगभग 80 शब्द, दो छोटे पैराग्राफ। स्थापना काल का उल्लेख करें (जैसे '80 के दशक से'), कुछ सेवाओं का जिक्र करें और वैश्विक ग्राहकों/उद्योग पुरस्कारों से जुड़ाव को दर्शाएं।

- तीन केस स्टडी। प्रत्येक के लिए: एक ऐसा प्रोजेक्ट नाम जो उसके फोकस के अनुरूप हो (डिजाइन एजेंसी के लिए 'Schematiq', 'Commercial Co.', 'Sprig & Sky' जैसे नामों का पुनः उपयोग करें; अन्य फोकस के लिए मिलते-जुलते नाम चुनें), 1-2 सर्विस टैग, लगभग 30 शब्दों का एक पृष्ठभूमि वाक्य, और लगभग 30 शब्दों का एक समाधान वाक्य।

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

- समापन CTA टैगलाइन (एक पंक्ति, लगभग 10-14 शब्द), उदाहरण के लिए 'अपने ब्रांड को उन्नत करें और इतिहास में अपनी छाप छोड़ें।'

- फ़ुटर आइटम: स्टूडियो का नाम, 'नियम और सहायता', 'गोपनीयता नीति'।

चरण 3 के लिए सभी सामग्री को मेमोरी में सुरक्षित रखें। अभी generateWebpage को कॉल न करें।

चरण 2 — ठीक 6 सुसंगत मोनोक्रोम छवियों को संयोजित करें।

स्लॉट मैप: हीरो, अबाउट, प्रोजेक्ट_1, प्रोजेक्ट_2, प्रोजेक्ट_3, फीचर.

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

B) प्रत्येक खाली स्लॉट के लिए, generateImage को कॉल करें। जहाँ संभव हो, इन्हें एक ही टूल बैच में समानांतर रूप से चलाएँ।

प्रत्येक स्लॉट के लिए अपरिवर्तनीय छवि शैली:

- केवल शुद्ध ब्लैक एंड व्हाइट। कोई रंगीन टिंट नहीं, कोई सेपिया नहीं, कोई ड्यूओटोन नहीं। संपादकीय/सिनेमैटिक/उच्च स्तरीय पत्रिका गुणवत्ता। सभी छह स्क्रीन पर एकसमान कंट्रास्ट और ग्रेन। लेआउट की आवश्यकता के अनुसार पर्याप्त नेगेटिव स्पेस।

स्लॉट प्रॉम्प्ट टेम्प्लेट्स — चरण 1 से ब्रांड फोकस के साथ [DISCIPLINE] को प्रतिस्थापित करें (उदाहरण के लिए 'डिजाइन एजेंसी', 'फोटोग्राफी स्टूडियो', 'आर्किटेक्चर फर्म') और एक उपयुक्त विषय के साथ [DISCIPLINE_SUBJECT] को प्रतिस्थापित करें (उदाहरण के लिए डिजाइन के लिए: पेपर मूर्तिकला / टाइपोग्राफी क्लोज-अप; वास्तुकला के लिए: छाया ज्यामिति; फैशन के लिए: सिल्हूट; फोटोग्राफी के लिए: स्टिल लाइफ):

1. हीरो (आस्पेक्ट 16:9): "[विषय_विषय] की सिनेमाई ब्लैक एंड व्हाइट तस्वीर, नाटकीय संपादकीय संरचना, आकर्षक न्यूनतम मोनोक्रोम सौंदर्य, नरम शीर्ष प्रकाश, पर्याप्त खाली स्थान, प्रीमियम पत्रिका गुणवत्ता, कोई रंग नहीं, उच्च कंट्रास्ट।"

2. के बारे में (आस्पेक्ट 4:3): "समकालीन [अनुशासन] स्टूडियो के अंदरूनी भाग की ब्लैक एंड व्हाइट डॉक्यूमेंट्री तस्वीर, नरम दिन के उजाले वाली बड़ी खिड़कियां, न्यूनतम डेस्क और उपकरण, संपादकीय रिपोर्टिंग शैली, केवल मोनोक्रोम, उच्च कंट्रास्ट।"

3. प्रोजेक्ट_1 (पहलू 1:1): "एक साफ सफेद सतह पर ब्रांड पहचान मॉकअप - बिजनेस कार्ड, लेटरहेड, मुद्रित स्टेशनरी - का ब्लैक एंड व्हाइट फ्लैट-ले, शार्प टॉप-डाउन संपादकीय डिजाइन फोटोग्राफी, केवल मोनोक्रोम।"

4. प्रोजेक्ट_2 (पहलू 1:1): "[अनुशासन] से संबंधित ब्लैक एंड व्हाइट मिनिमलिस्ट स्टिल लाइफ (जैसे फिल्म क्लैपरबोर्ड, स्केल मॉडल, स्टाइल किया हुआ उत्पाद), सिनेमाई स्टूडियो लाइटिंग, तीखी परछाईं, केवल मोनोक्रोम।"

5. प्रोजेक्ट_3 (पहलू 1:1): "ब्लैक एंड व्हाइट संपादकीय जीवनशैली फोटोग्राफी, [अनुशासन] से संबंधित न्यूनतम शैली वाला दृश्य, प्रीमियम पत्रिका सौंदर्यशास्त्र, केवल मोनोक्रोम।"

6. विशेषता (पहलू 16:9): "[अनुशासन] से संबंधित विस्तृत ब्लैक एंड व्हाइट अमूर्त रचना, नाटकीय परिप्रेक्ष्य, वायुमंडलीय संपादकीय मोनोक्रोम, कोई रंग नहीं।"

सभी छह यूआरएल प्राप्त हो जाने के बाद, प्रत्येक को स्लॉट के अनुसार लेबल करें और चरण 3 पर आगे बढ़ें।

चरण 3 — वेबपेज बनाएं।

generateWebpage को as_artifact: true के साथ कॉल करें। एक विस्तृत निर्देश प्रॉम्प्ट पास करें जिसमें नीचे दी गई सभी जानकारी हूबहू शामिल हो — generateWebpage को पूरा करने वाले एजेंट को इसका अक्षरशः पालन करना होगा।

--- वेबपेज प्रॉम्प्ट प्रारंभ ---

एक लंबी, स्क्रॉल करने योग्य पोर्टफोलियो वेबसाइट बनाएं, जो आकर्षक मोनोक्रोम संपादकीय शैली में हो। दृश्य डिजाइन के प्रति सख्त प्रतिबद्धता का पालन करें - इसमें कोई विचलन न करें।

पैलेट (विशेष — कहीं और उपलब्ध नहीं):

- सफेद पृष्ठभूमि: #FFFFFF

- काली स्याही और अक्षर: #000000

- एक गहरे भाग में लगभग काला रंग इस्तेमाल किया जा सकता है: #0A0A0A

- सुरक्षा कवच के रूप में प्रत्येक पर CSS `filter: grayscale(1) contrast(1.02)` लागू करें ताकि आयातित कोई भी एसेट सख्ती से मोनोक्रोम रहे।

टाइपोग्राफी:

- डिस्प्ले: गूगल फॉन्ट 'फ्राउंसेस' (वजन 300 और 700, opsz 144 का उपयोग करें)। मुख्य शब्द पर जोर देने के लिए इटैलिक संस्करण उपलब्ध है।

- बॉडी: गूगल फॉन्ट 'इंटर' (वेट 400, 500)। 16–18px बॉडी, लाइन-हाइट ~1.6।

- डिस्प्ले हेडलाइन बहुत बड़ी हैं: clamp(56px, 12vw, 180px). ट्रैकिंग -0.02em डिस्प्ले पर।

नेविगेशन, सेवा टैग और फ़ूटर लिंक के लिए छोटे अक्षर (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`)।

लेआउट रिदम:

- सेक्शन वर्टिकल पैडिंग: क्लैम्प (80px, 12vh, 200px).

- कंटेनर अधिकतम चौड़ाई: 1280px, साइड गटर क्लैम्प (24px, 6vw, 96px)।

- पर्याप्त खाली जगह छोड़ें; ज्यादा भीड़भाड़ न करें।

इंटरैक्शन:

- स्क्रॉल करने पर हल्की पृष्ठभूमि धुंधली होने के साथ स्टिकी टॉप नेविगेशन।

- पिल बटन: 1px सॉलिड #000, पारदर्शी फिल, बॉर्डर-रेडियस: 9999px, पैडिंग 14px 28px। होवर करने पर बैकग्राउंड #000 + रंग #FFF में बदल जाता है, 200ms ईज़।

- प्रत्येक प्रमुख ब्लॉक पर सूक्ष्म स्क्रॉल-ट्रिगर फ़ेड-अप + 24px ट्रांसलेट-वाई (इंटरसेक्शन ऑब्जर्वर)।

- सेवा पंक्तियाँ: होवर करने पर टेक्स्ट और तीर दाईं ओर लगभग 12px, 200ms ईज़ के साथ स्लाइड होते हैं।

उत्तरदायी:

- 768px से नीचे: हेडलाइन का आकार घटकर लगभग 64-88px हो जाता है, दो-स्तंभ ग्रिड एक स्तंभ में सिमट जाते हैं, और छवियां अपने पैडिंग के भीतर पूर्ण-विस्तार में बनी रहती हैं।

अनुभाग (इसी क्रम में):

1. NAV (स्टिकी): स्टूडियो का नाम ऊपर बाईं ओर छोटे अक्षरों में; 'हमारे साथ काम करें' पिल बटन ऊपर दाईं ओर।

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

3. परिचय: फ्राउंसेस 700 में '[स्टूडियो] के बारे में' शीर्षक। 6-स्तंभ ग्रिड: परिचय पाठ बाईं ओर (स्तंभ 1-3), 4:3 अनुपात में परिचय चित्र दाईं ओर (स्तंभ 4-6)। दो छोटे पैराग्राफ।

4. अनुभाग शीर्षक: 'हमारा काम' फ्रैंसेस 700 में, बड़ा।

5. केस स्टडी 1: प्रोजेक्ट का नाम (बड़े अक्षरों में), सेवा टैग की पंक्ति छोटे अक्षरों में (बीच में बिंदु · या स्पेस से अलग)। नाम के नीचे: पूरी चौड़ाई वाली प्रोजेक्ट छवि (project_1 का उपयोग करें, 1:1 अनुपात में क्रॉप करके 16:9 फ्रेमिंग में)। छवि के नीचे: दो-स्तंभ ग्रिड — बाएँ स्तंभ में बड़ा अंक '01' (300 अक्षरों में, clamp(100px, 18vw, 220px)), छोटे अक्षरों में 'पृष्ठभूमि' लेबल, फिर लगभग 30 शब्दों का मुख्य भाग। दाएँ स्तंभ में भी यही, '02' और 'समाधान' के साथ।

6. केस स्टडी 2: CS1 के समान संरचना, लेकिन प्रोजेक्ट_2 की छवि का उपयोग करें। चाहें तो छवि को उल्टा कर दें ताकि वह हल्के सफेद रंग की पट्टी पर रहे — रंगों को पैलेट के भीतर ही रखें।

7. केस स्टडी 3: समान संरचना, प्रोजेक्ट_3 छवि का उपयोग करें।

8. फ़ीचर बैंड: फुल-ब्लीड वाइड इमेज (16:9 फ़ीचर स्लॉट का उपयोग करें)। कोई टेक्स्ट ओवरले नहीं।

9. हम क्या करते हैं: शीर्षक 'हम क्या करते हैं' (फ्रांसेस 700 फ़ॉन्ट में)। नीचे, 6 सेवा टैग की एक ऊर्ध्वाधर सूची। प्रत्येक पंक्ति: ऊपर 1px का हेयरलाइन विभाजक (#000), बाईं ओर सेवा का नाम (फ्रांसेस ~clamp(36px, 6vw, 80px) में, दाईं ओर '→' तीर। पॉइंटर कर्सर। माउस ले जाने पर दाईं ओर स्लाइड होता है।

10. CTA: पूर्ण-ब्लीड डार्क सेक्शन, बैकग्राउंड #000। #FFF फॉन्ट में मैसिव फ्राउंसेस शीर्षक को केंद्र में संरेखित करें, जिसमें समापन CTA टैगलाइन का उपयोग किया गया है। पैडिंग क्लैम्प (120px, 20vh, 240px)। शीर्षक के नीचे 'हमारे साथ काम करें' पिल बटन (सफेद बॉर्डर, पारदर्शी फिल, होवर करने पर सफेद बैकग्राउंड + काला टेक्स्ट में बदल जाता है)।

11. फ़ूटर: सफ़ेद पृष्ठभूमि, छोटे अक्षरों में विचित्र शैली का टेक्स्ट। बाईं ओर स्टूडियो का नाम, दाईं ओर लिंक ('नियम और सहायता', 'गोपनीयता नीति')। ऊपरी बॉर्डर पर पतली रेखा (#000, 1px)। दूसरी पंक्ति में छोटे अक्षरों में कॉपीराइट लिखा हुआ।

चित्र — नीचे दिए गए डेटा अनुभाग में मौजूद URL को संबंधित स्लॉट में डालें। प्रत्येक पर ऑब्जेक्ट-फिट: कवर और ग्रेस्केल सुरक्षा फ़िल्टर लागू करें। अतिरिक्त सजावटी चित्र न जोड़ें।

डेटा — इन्हें पृष्ठ में प्रतिस्थापित करें:

- studio_name: <चरण 1 से स्टूडियो का नाम>

- टैगलाइन: <चरण 1 से दो-पंक्ति वाली टैगलाइन, मार्कर '/' दो डिस्प्ले लाइनों को अलग करता है>

- about_copy: <चरण 1 से संबंधित पैराग्राफ>

- केस स्टडी: चरण 1 से तीन का सरणी { नाम, टैग[], पृष्ठभूमि, समाधान }

- सेवाएं: चरण 1 से छह सेवा टैग स्ट्रिंग का ऐरे

- cta_tagline: <चरण 1 से समापन CTA>

- चरण 2 से छवियां: { हीरो, के बारे में, प्रोजेक्ट_1, प्रोजेक्ट_2, प्रोजेक्ट_3, फ़ीचर }

- फ़ुटर_लिंक्स: ['नियम और सहायता', 'गोपनीयता नीति']

--- वेबपेज प्रॉम्प्ट समाप्त ---

generateWebpage को कॉल करते समय, as_artifact: true पास करें। इसके रिटर्न होने के बाद, उपयोगकर्ता को उनकी पसंदीदा भाषा में एक पंक्ति का सारांश दें और उन्हें बताएं कि वे किसी भी छवि को बदलने, कॉपी को बदलने या प्रोजेक्ट का नाम बदलने का अनुरोध कर सकते हैं।