कुछ समय पहले, मैंने guizang-ppt-skill को ओपन-सोर्स किया था, और बाद में जब मैं इसका उपयोग करके खुद कंटेंट बना रहा था, तो मुझे कुछ पता चला।
इससे जनरेट हुए वेब पेजों को जब स्क्रीनशॉट करके इमेज-टेक्स्ट प्लेटफ़ॉर्म पर पोस्ट किया गया, तो उन्हें मेरे मैन्युअल लेआउट की तुलना में कहीं बेहतर फीडबैक और डेटा मिला।
मुझे विश्वास है कि आपने पहले भी कुछ ऐसे प्रॉम्प्ट या Skills खोजे होंगे जो ये 3:4 कार्ड इमेज बनाते हैं।
उन सबका स्वाद लगभग एक जैसा होता है: Tailwind + बड़े कलर ब्लॉक + इमोजी स्टैकिंग + औसत फ़ॉन्ट पदानुक्रम।
इन्हें देखने के बाद, मैं मोटे तौर पर समझ सकता हूँ कि AI द्वारा बनाए गए इमेज-टेक्स्ट कार्ड एक नज़र में क्यों पहचाने जाते हैं—वे वेब पेज बना रहे हैं, मैगज़ीन नहीं।
इमेज-टेक्स्ट कार्ड PPT से बिल्कुल अलग होते हैं: वर्टिकल स्क्रीन, इन्फ़ॉर्मेशन फ़्लो में रुकना या न रुकना एक सेकंड का फ़ैसला, और शब्दों के बजाय तस्वीरों पर निर्भरता।
अलग लेआउट, अलग लय, अलग पाठक।
इसलिए मैंने इसे PPT Skill से अलग करके एक स्टैंडअलोन guizang-social-card-skill (https://github.com/op7418/guizang-social-card-skill) बना दिया।
नीचे मैं बताऊँगा कि यह अच्छा क्यों है और मैं इस पर इतना समय क्यों खर्च करने को तैयार हूँ।
2. आखिर यह अच्छा क्यों है?
3:4 वर्टिकल इमेज इमेज-टेक्स्ट कार्ड का मुख्य युद्धक्षेत्र हैं। इस Skill का अधिकांश डिज़ाइन प्रयास 3:4 पर खर्च किया गया—फ़ॉन्ट पदानुक्रम, लेआउट अनुपात, और लाइन-ब्रेकिंग नियम।
सब कुछ मोबाइल इन्फ़ॉर्मेशन फ़्लो में स्वाइप किए जाने की वास्तविक स्थिति के अनुसार कैलिब्रेट किया गया है। 21:9 और 1:1 WeChat Official Account हेडर इमेज भी सपोर्टेड हैं।
चलिए उस चीज़ से शुरू करते हैं जो इमेज-टेक्स्ट क्रिएटर्स को सबसे ज़्यादा चिंतित करती है।
2.1 यह समझता है कि आप क्या लिख रहे हैं और उसे उचित शैली से मैच करता है
इमेज-टेक्स्ट प्लेटफ़ॉर्म पर कंटेंट को वर्गीकृत किया जाता है। एक मूवी रिव्यू और एक प्रोडक्ट रिव्यू के लिए बिल्कुल अलग विज़ुअल भाषा चाहिए;
एक यात्रा डायरी और कार्यस्थल टिप्स के लिए अलग लेआउट चाहिए।
लेकिन अधिकांश AI टूल इस पर ध्यान नहीं देते; वे आप जो भी लिखें, उसके लिए एक ही टेम्पलेट का उपयोग करते हैं।
इसका परिणाम यह होता है कि सभी के कार्ड ऐसे लगते हैं जैसे वे WeChat Official Account कवर असेंबली लाइन से निकले हों।
इस Skill में 11 सामान्य इमेज-टेक्स्ट श्रेणियों के लिए बिल्ट-इन अनुकूलन नियम हैं:
- यात्रा / जीवनशैली: मैगज़ीन शैली, गर्म रंग पैलेट, फ़ुल-स्क्रीन इमेज, बड़े सेरिफ़ शीर्षक;
- कार्यस्थल / टिप्स / व्यावसायिक अंतर्दृष्टि: ग्रिड शैली, गहरे रंग की पृष्ठभूमि, डेटा-भारी पोस्टर लेआउट;
- फ़िल्म / संस्कृति: कूल टोन वाली मैगज़ीन शैली, मूवी पोस्टर लेआउट, कैरेक्टर क्लोज़-अप को प्राथमिकता;
- उत्पाद समीक्षा / डिजिटल: ग्रिड शैली, तुलना मैट्रिक्स, डिवाइस-फ़्रेम वाले स्क्रीनशॉट;
- पढ़ना / नोट्स: मैगज़ीन शैली, सेरिफ़ फ़ॉन्ट, केंद्रित कोट लेआउट, अधिकतम सफ़ेद स्थान;
- भोजन / दुकान का दौरा: हाई-सैचुरेशन मैगज़ीन शैली, टॉप-डाउन शॉट्स को प्राथमिकता, टेक्स्ट को कोनों में ले जाएँ;
मैंने विशेष रूप से यात्रा ब्लॉगर्स के लिए एक मैप कंपोनेंट भी बनाया है। आप उस पर दुकानों के स्थान और यात्रा मार्ग चिह्नित कर सकते हैं, और AI आपके लिए स्वचालित रूप से एनोटेशन जनरेट करेगा।
उसे एक ही टेक्स्ट खिलाएँ: बताएँ कि यह एक मूवी रिव्यू है, तो वह मूवी पोस्टर शैली का कार्ड देगा; बताएँ कि यह एक प्रोडक्ट रिव्यू है, तो वह डिवाइस फ़्रेम के साथ तुलना चार्ट देगा।
इससे भी महत्वपूर्ण बात यह है कि इसके स्पष्ट "नो-गो" ज़ोन हैं:
- फैन-ओरिएंटेड कंटेंट: आवश्यक विज़ुअल भाषा बिल्कुल अलग होती है;
- शुद्ध प्रमोशनल विज्ञापन: इसके कंटेंट पर जोर देने वाले डिज़ाइन दर्शन के विपरीत;
- 12 स्क्रीन से अधिक लंबे ट्यूटोरियल: इमेज-टेक्स्ट फ़ॉर्मेट लंबे ट्यूटोरियल के लिए सबसे अच्छा माध्यम नहीं है।
इन परिदृश्यों में, Skill शुरुआत में ही आपको बता देगी, "आप शायद कोई दूसरा टूल इस्तेमाल करना चाहें।"
मैंने यह जानबूझकर छोड़ा है। सीमाएँ किसी उत्पाद को उसकी क्षमताओं से अधिक परिभाषित करती हैं; एक Skill जो सब कुछ करने की कोशिश करती है, वह आमतौर पर कुछ भी अच्छा नहीं कर पाती।
2.2 इमेज पर टेक्स्ट कैसे ओवरले करें
इमेज पर टेक्स्ट ओवरले करना इमेज-टेक्स्ट कार्ड का सबसे कठिन हिस्सा है और वह जगह जहाँ "AI फील" सबसे आसानी से उजागर होती है।
अगर अच्छी तरह से नहीं किया गया, तो तीन प्रकार की विफलताएँ होती हैं:
- टेक्स्ट चेहरे या प्रोडक्ट के केंद्र को कवर कर लेता है।
- हल्की पृष्ठभूमि पर सफेद टेक्स्ट या गहरे रंग की पृष्ठभूमि पर काला टेक्स्ट पढ़ने योग्य नहीं होता।
- टेक्स्ट पूरी इमेज में फैल जाता है, एक अच्छी रचना को बर्बाद कर देता है।
Skill तीन चरणों में इससे निपटती है:
- इमेज में विषयों की पहचान करें: चेहरे, उत्पाद, टेक्स्ट-घने क्षेत्र, और लेआउट में स्वचालित रूप से उनसे बचें;
- लैंडिंग क्षेत्र का रंग और चमक गणना करें: टेक्स्ट का रंग तय करें, क्या मास्क जोड़ना है, और छाया कितनी गहरी होनी चाहिए;
- एडेप्टिव फ़ॉन्ट आकार और लाइन ब्रेकिंग: लैंडिंग क्षेत्र के आकार के आधार पर फ़ॉन्ट आकार और लाइन ब्रेक पोजीशन को गतिशील रूप से समायोजित करें, बजाय इसके कि एक हार्डकोडेड फ़ॉन्ट आकार का उपयोग करें जो ओवरफ़्लो हो जाता है।
इन नियमों के साथ, कार्ड का "प्रीमियम फील" स्थापित हो जाता है। पाठक "दबाए गए टेक्स्ट" और "मूल रूप से वहाँ मौजूद टेक्स्ट" के बीच अंतर नहीं बता सकते।
2.3 इमेज कहाँ से आती हैं: यह अन्य AI कार्ड टूल से सबसे बड़ा अंतर है
इमेज-टेक्स्ट कार्ड बनाने वाले अधिकांश AI टूल या तो आपको अपनी इमेज अपलोड करने के लिए कहते हैं, या इमोजी का उपयोग करते हैं, या ऐसे चित्रण जनरेट करते हैं जो पहली नज़र में AI जैसे दिखते हैं।
इसका परिणाम यह है कि मैन्युअल रूप से इमेज खोजना थकाऊ है, या इमोजी स्टैकिंग नकली लगती है।
यह Skill डिफ़ॉल्ट रूप से तीन मुफ्त व्यावसायिक-उपयोग इमेज लाइब्रेरी से जुड़ी है:
- Pexels: चीनी खोज को सपोर्ट करता है, सामान्य परिदृश्यों के लिए अच्छा;
- Unsplash: सबसे मजबूत फ़ोटोग्राफ़ी बनावट, लोगों, जीवन और स्थान सामग्री के लिए पहली पसंद;
- Wallhaven: गेम्स, फ़ोटोग्राफ़ी और वॉलपेपर सब यहाँ हैं, हालाँकि कॉपीराइट गड़बड़ है।
यह टेक्स्ट पैराग्राफ के सिमैंटिक्स के आधार पर स्वचालित रूप से खोज शब्द भेजता है, इमेज प्राप्त करता है, लेआउट में फिट होने के लिए उन्हें क्रॉप करता है, और चेहरों या विषयों को काटने से बचता है।
आपको एक वास्तविक फ़ोटोग्राफ़ी वाला कार्ड मिलता है, न कि कोई कलर-ब्लॉक कार्ड।
और यह कॉपीराइट मुद्दों से पूरी तरह मुक्त इमेज खोजने में कठोर नहीं है। यह आपको बताएगा कि उसे कौन सी इमेज मिलीं, और आप तय करें कि अस्पष्ट कॉपीराइट वाली इमेज का उपयोग करना है या नहीं।
इसके अलावा, प्लेटफ़ॉर्म वर्तमान में AI वॉटरमार्क को लेकर बहुत सख्त हैं। आपके द्वारा अब उपयोग किए जाने वाले अधिकांश AI-जनरेटेड इमेज पर वॉटरमार्क होते हैं, जिन्हें प्लेटफ़ॉर्म फ़्लैग करता है और शैडोबैनिंग का कारण बन सकता है। यह एक बड़ी समस्या है।
2.4 स्क्रीनशॉट भी इमेज हैं: चार-टुकड़ा सौंदर्यीकरण
हमारी बहुत सारी सामग्री फ़ोटोग्राफ़ी का उपयोग नहीं कर सकती; इसमें सॉफ़्टवेयर स्क्रीनशॉट, चैट रिकॉर्ड, या प्रोडक्ट इंटरफ़ेस की आवश्यकता होती है।
Skill में एक बिल्ट-इन स्क्रीनशॉट ब्यूटीफायर है:
macOS/iOS शैली के डिवाइस फ़्रेम (ब्राउज़र क्रोम या फ़ोन बॉर्डर) जोड़ता है, स्क्रीनशॉट को धारण करने के लिए अलग-अलग बैकग्राउंड टेक्सचर का उपयोग करता है—ग्रिड पेपर, डॉट मैट्रिक्स, वार्म व्हाइट, या डार्क—ताकि स्क्रीनशॉट अब सफेद पृष्ठभूमि पर सफेद रंग के साथ तैरता हुआ न दिखे;
साथ ही, यह विज़ुअल शैली के आधार पर स्वचालित रूप से छाया परतों और कोने की त्रिज्या मापदंडों से मेल खाता है। दो शैलियों में से प्रत्येक में एक स्क्रीनशॉट रेसिपी है, जो मैन्युअल समायोजन के बिना स्थिरता सुनिश्चित करती है।
सीधे शब्दों में कहें, तो आपके द्वारा लिया गया कोई भी यादृच्छिक स्क्रीनशॉट इससे गुज़रने के बाद एक आधिकारिक उत्पाद प्रमोशनल इमेज जैसा दिखेगा।
2.5 AI इमेज जनरेशन: संयम से उपयोग करें
यह Skill केवल तब AI इमेज जनरेशन का आह्वान करता है जब सभी पिछले इमेज स्रोत उपयुक्त सामग्री खोजने में विफल होते हैं।
इमेज जनरेट करते समय, यह "स्पष्ट AI चित्रण" की औसत दर्जे की दृश्यता से बचने के लिए शैली बाधा शब्दों को मजबूर करता है।
मैं चाहूँगा कि यह AI का कम उपयोग करे, बजाय इसके कि इस तरह से AI का उपयोग करे जिससे सभी इमेज-टेक्स्ट कार्ड बहनों जैसे दिखें। इससे AI इमेज का उपयोग करके सामग्री एक्सपोज़र को प्रभावित होने से भी बचाता है।
2.6 विज़ुअल सिस्टम: दो शैलियाँ + 28 लेआउट स्केलेटन
जो लोग मेरे पिछले PPT Skill से परिचित हैं, उन्हें यह परिचित लगेगा। ये दो विज़ुअल सिस्टम और लेआउट स्केलेटन PPT Skill से अनुकूलित और पुनर्कैलिब्रेट किए गए थे।
मैं विवरण दोहराऊंगा नहीं, लेकिन यहाँ बताया गया है कि वे इमेज-टेक्स्ट कार्ड संदर्भ में कैसे दिखते हैं।
दो विज़ुअल सिस्टम:
- मैगज़ीन शैली: वह टाइपोग्राफ़ी जो आप द न्यू यॉर्कर या शंघाई ट्रांसलेशन पब्लिशिंग हाउस के कवर पर देखते हैं। बड़ा सफेद स्थान, बड़े सेरिफ़ शीर्षक, असममित लेआउट, और साँस लेने की जगह वाला टेक्स्ट।
- ग्रिड शैली: मास्सिमो विग्नेली और हेल्मुट श्मिड की स्विस ग्राफ़िक डिज़ाइन की शैली में। मजबूत ग्रिड, सेन्स-सेरिफ़ फ़ॉन्ट, ज्यामितीय एहसास, रंग का संयमित लेकिन सटीक उपयोग।
28 लेआउट स्केलेटन, जिन्हें मैंने पिछले एक दशक में देखी गई मैगज़ीन, पोस्टर, एल्बम कवर और मूवी पोस्टर से चुना है—वे जो जाँच में खरे उतरते हैं।
AI अभी भी "मुक्त लेआउट डिज़ाइन" में औसत दर्जे का है। इसे एक सिद्ध स्केलेटन देकर, इसका कार्य "डिज़ाइनिंग" से "भरने" तक कम हो जाता है, और तैयार उत्पाद की स्थिरता तुरंत बढ़ जाती है।
10 थीम कलर पैलेट, निश्चित फ़ॉन्ट पेयरिंग, और सीमित आइकन लाइब्रेरी—मैं इन विवरणों को एक-एक करके सूचीबद्ध नहीं करूँगा।
तर्क एक ही है: बाधाएँ बाधाएँ नहीं हैं; वे आधार रेखा हैं।
एक कंटेंट क्रिएटर को अनंत रंग विकल्प दें, और वे कुछ बदसूरत बनाने की अधिक संभावना रखते हैं; उन्हें 10 सिद्ध पैलेट दें, और उनके कुछ सभ्य बनाने की संभावना 100% के करीब पहुँच जाती है।
3. ऐसा क्यों करें?
3.1 डिज़ाइन परिप्रेक्ष्य: मैगज़ीन फील बहुत प्रभावी है
मैगज़ीन और ग्रिड शैलियों के साथ क्यों जाएँ, बजाय अधिक "आधुनिक" कार्ड डिज़ाइन के?
इमेज-टेक्स्ट कार्ड का सार मुद्रित पोस्टर, चित्रपटी, या एल्बम कवर के समान है। एक स्थिर छवि का उपयोग करके 1 सेकंड में किसी अजनबी को रुकने के लिए मनाएँ। मैगज़ीन और पोस्टर ने पिछले सौ वर्षों में इसका गहन अध्ययन किया है।
वेब डिज़ाइन भाषा स्क्रॉल करने योग्य, इंटरैक्टिव परिदृश्यों के लिए बनाई गई है। इसे एक स्थिर छवि में ले जाने पर यह जबरदस्ती और जानकारी फ्लैट लगती है।
तो, इस Skill के विज़ुअल निर्णयों के सभी "क्यों":
- बड़ा सफेद स्थान क्यों? सफेद स्थान मैगज़ीन का आपको यह बताने का तरीका है कि "फ़ोकस यहाँ है।"
- सेरिफ़ फ़ॉन्ट को प्राथमिकता क्यों? सेरिफ़ फ़ॉन्ट में बड़े आकार में मुद्रित सामग्री का भार होता है।
- असममित लेआउट क्यों? असममिति दृश्य लय बनाती है, जिससे आँख को पता चलता है कि पहले कहाँ देखना है।
- संयमित रंग क्यों? सोशल मीडिया फ़ीड में, एक संयमित पैलेट वास्तव में हाई सैचुरेशन की तुलना में अधिक आकर्षक होता है; यह आसपास के सभी "ज़ोर से चिल्लाने वाले" कार्डों से अलग दिखता है।
ये निर्णय "अमूर्त" लगते हैं, लेकिन ये सभी कोड में विशिष्ट स्थिरांक हैं। फ़ॉन्ट आकार अनुपात, सफेद स्थान अनुपात, ग्रिड कॉलम गणना, कंट्रास्ट थ्रेशोल्ड, लाइन-ब्रेकिंग नियम। ये स्थिरांक इस Skill की असली खाई हैं।
3.2 उत्पाद परिप्रेक्ष्य: यह एक उत्पाद है, सिर्फ एक प्रॉम्प्ट नहीं
इतने सारे Skills बनाने के बाद, मैंने "एक Skill वास्तव में क्या है" पर एक निर्णय बनाया है:
एक Skill मूल रूप से एक छोटा उत्पाद है।
इस प्रोजेक्ट पर लागू:
मैंने इसके लिए एक PRODUCT.md लिखा, जिसमें स्पष्ट रूप से बताया गया है कि यह किस समस्या का समाधान करता है, यह किसके लिए है, और यह क्या नहीं करता है। यह खुद को यह सोचने के लिए मजबूर करने के लिए है कि "मैं वास्तव में क्या कर रहा हूँ।" अगर मैं इसे समझा नहीं सकता, तो Skill जारी नहीं की जानी चाहिए।
मैं इसे संस्करण संख्या देता हूँ (v0.5 / v0.9 / v0.10 / v0.12), और हर संस्करण का एक CHANGELOG है। मैं आपको बता सकता हूँ कि v0.10 एक असफल प्रयास क्यों था और v0.12 ने इसे कैसे ठीक किया।
मैंने इसके लिए एक HANDOVER.md लिखा, जिसमें बताया गया है कि डिलिवरेबल कैसा दिखता है, सीमाएँ कहाँ हैं, और अन्य टूल का उपयोग कब करना है। मुझे उम्मीद है कि इसे संभालने वाला कोई भी व्यक्ति 30 मिनट के भीतर इसकी पूरी समझ प्राप्त कर सकता है।
मैं पहले से सूचीबद्ध करता हूँ कि यह किसमें अच्छा नहीं है, ताकि उपयोगकर्ता परीक्षण और त्रुटि से बच सकें।
इतनी मेहनत क्यों?
क्योंकि Skill इकोसिस्टम की सबसे बड़ी समस्या यह है कि अधिकांश Skills "मैं एक बना सकता हूँ" से संतुष्ट हैं, और कुछ लोग "इसे चरम पर करने" का पीछा करते हैं।
एक Skill एक छोटा उत्पाद होना चाहिए जो अपने आप खड़ा हो सके। एक प्रॉम्प्ट को प्रतियोगी दस मिनट में कॉपी कर सकता है; एक उत्पाद नहीं कर सकता।
दूसरा पहलू यह है कि अगर मैं अपने Skill की सीमाओं को भी समझा नहीं सकता, तो मुझे दूसरों से यह माँग करने का अधिकार नहीं है कि वे अपना वर्कफ़्लो इसे सौंप दें।
अंतिम शब्द
इस Skill ने मुझे यह समझने में मदद की कि मेरा PPT Skill वास्तव में क्या सही था।
इसमें जो सही था वह यह था कि इसे शुरू से ही एक उत्पाद के रूप में माना गया था। कई टेम्पलेट, विस्तृत नियम और सुंदर रंग इसके उप-उत्पाद हैं।
अगर भविष्य में कोई मुझसे पूछता है कि एक Skill क्या है, तो मैं दो वाक्यों में जवाब दूंगा:
एक Skill एक उत्पाद है। यह जाँचने के लिए कि कोई Skill अच्छी है या नहीं, देखें कि क्या इसे इसके लेखक का पक्ष प्राप्त हुआ है।
यदि आप भी इमेज-टेक्स्ट सामग्री बना रहे हैं, तो मुझे उम्मीद है कि यह आपको उन अच्छे विषयों को बचाने में मदद करेगा जो खराब लेआउट के कारण बर्बाद हो गए थे।
यदि आप भी Skills बना रहे हैं, तो मुझे उम्मीद है कि यह आपको यह पुनर्विचार करने पर मजबूर करेगा कि क्या आपके द्वारा बनाई गई चीज़ का PRODUCT.md होना चाहिए।
GitHub: https://github.com/op7418/guizang-social-card-skill
अपने Codex, Xiaolongxia, ClaudeCode, या Workbuddy से कहें: मुझे इस Skill को इंस्टॉल करने में मदद करें: https://github.com/op7418/guizang-social-card-skill
