एक PPT स्किल को ओपन सोर्स करना: 10 वर्षों का डिज़ाइन अनुभव एक टूल में समाहित

पिछले हफ़्ते, शिक्षक ली जिगांग ने मुझे AI और संगठनों के बारे में एक निजी साझाकरण सत्र साक्षात्कार के लिए आमंत्रित किया।

सत्र के बाद, मैंने पाया कि सबसे अधिक पूछा गया सवाल यह था: "वह PPT किससे बनाया गया था? क्या आप इसे ओपन-सोर्स कर सकते हैं?"

मुझे उम्मीद नहीं थी कि उप-उत्पाद मुख्य उत्पाद बन जाएगा।

इसलिए मैंने इसे ओपन-सोर्स करने का निर्णय लिया, जिसे मैं guizang-ppt-skill कहता हूँ (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).

आज का लेख इस बारे में होगा कि यह Skill कैसी दिखती है और क्यों, एक डिज़ाइनर होने के नाते जो दस वर्षों से काम कर रहा है, मुझे लगता है कि यह अच्छी दिखती है।

यह कैसा दिखता है

जब आप Skill द्वारा बनाई गई PPT खोलते हैं, तो पहली प्रतिक्रिया संभवतः यह होगी: यह AI द्वारा बनाई गई नहीं लगती।

कुछ सहज विशेषताएँ:

• कवर: स्याही-रंग की पृष्ठभूमि + सेरिफ़ मुख्य शीर्षक, पीछे एक हल्का WebGL द्रव धीरे-धीरे बहता हुआ।
• मुख्य भाग: पृष्ठभूमि का रंग वापस कागज़ के सफेद में बदल जाता है और स्याही-रंग का पाठ उस पर दबा होता है, जैसे कोई खुली मुद्रित पत्रिका।
• पृष्ठ पलटना: क्षैतिज बाएँ-दाएँ स्लाइड, कीबोर्ड, स्क्रॉल व्हील, और स्पर्श जेस्चर का समर्थन करता है—मानक PowerPoint "अगली स्लाइड" नहीं।
• मेटाडेटा: प्रत्येक पृष्ठ के चारों कोनों में छोटा monospaced पाठ होता है, जो "Act II · 15 / 25" जैसा पढ़ता है, समाचार पत्र के पृष्ठ संख्याओं के समान।

मैंने इस दृश्य स्वर को एक नाम दिया: "इलेक्ट्रॉनिक मैगज़ीन × ई-इंकइंक**।"

प्रेरणा Monocle, The Guardian, और NYT जैसी मुद्रित पत्रिकाओं की लेआउट परंपराओं से आती है, जो Kindle इलेक्ट्रॉनिक पेपर के पढ़ने के सौंदर्यशास्त्र पर आरोपित है, और समकालीन Web इंटरैक्शन सिंटैक्स के साथ जुड़ी हुई है।

यह क्या कर सकता है

Skill वर्तमान में 10 पृष्ठ लेआउट, 5 थीम रंग प्रीसेट, और पृष्ठ-पलटने की एक पूर्ण सेट प्रदान करता है।

10 लेआउट 15-30 पृष्ठों के साझाकरण सत्र में उपयोग किए जाने वाले लगभग सभी पृष्ठ प्रकारों को कवर करते हैं:

उद्घाटन कवर, अध्याय विभाजक, डेटा पोस्टर, पाठ-बाएँ-चित्र-दाएँ, चित्र ग्रिड, पाइपलाइन प्रक्रिया, रहस्य प्रश्न, बड़े उद्धरण, Before/After तुलना, और मिश्रित पाठ-चित्र लेआउट।

प्रत्येक एक HTML कंकाल है जिसे सीधे चिपकाया जा सकता है; बस पाठ और चित्र बदलें और उपयोग करें।

5 थीम विभिन्न परिदृश्यों के अनुरूप हैं:

• Ink Classic — व्यावसायिक रिलीज़, सामान्य डिफ़ॉल्ट
• Indigo Porcelain — प्रौद्योगिकी, अनुसंधान, AI सम्मेलन
• Forest Ink — प्रकृति, स्थिरता, मानविकी
• Kraft Paper — पुरानी यादें, साहित्य, स्वतंत्र पत्रिकाएँ
• Dune — कला, डिज़ाइन, रचनात्मकता

प्रत्येक थीम केवल 6 CSS वेरिएबल्स के मानों का एक अलग सेट है। थीम बदलने के लिए केवल उन 6 कोड रेखाओं को :root में बदलना होगा।

उपयोगकर्ताओं को कस्टम हेक्स कोड की अनुमति नहीं है; मैं बाद में समझाऊँगा क्यों।

पृष्ठ-पलटने की बातचीत में कीबोर्ड बाएँ/दाएँ तीर, माउस व्हील, स्पर्श स्लाइडिंग, नीचे डॉट जंप, और ESC कुंजी से थंबनेल इंडेक्स खोलना शामिल है।

इसका लक्ष्य ब्राउज़र में एक वास्तविक पत्रिका को पलटने के अनुभव के जितना संभव हो उतना करीब जाना है।

आउटपुट एक एकल-फ़ाइल HTML है। ब्राउज़र में देखने के लिए डबल-क्लिक करें। इसे दूसरों को भेजना एक फ़ाइल है, इसलिए आपको इस बारे में चिंता नहीं करनी होगी कि फ़ॉन्ट या एनिमेशन किसी और के कंप्यूटर पर टूट जाएँगे।

इसका उपयोग कैसे करें

वास्तव में, इस Skill का सही मूल्य स्वयं टेम्पलेट में नहीं है, बल्कि इस तथ्य में है कि यह मानव × AI सहयोग के लिए एक इंटरफ़ेस परिभाषित करता है PPT पर।

यहाँ तीन चीज़ें हैं जो मुझे लगता है कि एक सप्ताह स्वयं उपयोग करने के बाद दूसरों को बताने लायक हैं।

पहले AI से ये 6 चीज़ें स्पष्ट करें

Skill स्थापित होने के बाद, आपको बस कहना होगा "मेरे लिए एक मैगज़ीन-शैली PPT बनाओ," और Claude सक्रिय रूप से आपसे 6 प्रश्न पूछेगा:

1. दर्शक कौन है और परिदृश्य क्या है? (आंतरिक उद्योग / व्यावसायिक रिलीज़ / निजी साझाकरण)
2. साझाकरण कितना लंबा है? (15 मिनट ≈ 10 पृष्ठ, 30 मिनट ≈ 20 पृष्ठ)
3. क्या कोई मूल सामग्री है? (दस्तावेज़, डेटा, पुरानी PPT, लेख लिंक)
4. क्या चित्र हैं, और वे कहाँ हैं?
5. आप कौन सी थीम रंग चाहते हैं? (5 प्रीसेट में से चुनें)
6. किसी एक को)
7. क्या कोई कठोर बाधाएँ हैं? (XX डेटा शामिल होना चाहिए / YY नहीं दिखाया जा सकता)

आपको सब कुछ एक साथ कहने की ज़रूरत नहीं है; यह एक-एक करके पूछेगा। उत्तर देने के बाद, यह पहले आपको एक रूपरेखा और एक थीम लय तालिका देगा। पहले संरेखित करें, फिर कोड लिखना शुरू करें—यह कदम मेरे 80% रीवर्क को रोकता है।

पहले AI का उपयोग करके PPT बनाने का सबसे बड़ा दर्द बिंदु यह था कि यह तुरंत लिखना शुरू कर देता था, और आपको पृष्ठ 10 पर ही एहसास होता था कि दिशा गलत है। यह स्पष्टीकरण प्रक्रिया "संरेखण" को बिल्कुल शुरुआत में ले जाती है।

चित्र कैसे डालें

चित्र index.html के समान स्तर पर images/ फ़ोल्डर में रखे जाते हैं, विशिष्ट नामकरण नियमों के साथ:

1ppt/
2├── index.html
3└── images/
4    ├── 01-cover.jpg
5    ├── 03-figma.png
6    └── 05-dashboard.png

• शून्य-पैडेड पृष्ठ संख्याएँ + अंग्रेज़ी शब्दार्थ—1 के बजाय 01, fengmian के बजाय cover। इससे छँटाई आसान होती है और AI संदर्भ स्पष्ट होता है।
• फ़ोटो के लिए JPG, स्क्रीनशॉट के लिए PNG—स्क्रीनशॉट में पाठ होता है; PNG उन्हें तेज रखता है।
• एकल चित्र चौड़ाई ≥ 1600px—ताकि बड़े स्क्रीन प्रोजेक्शन पर धुँधला न हो।

आपको बस Claude को बताना होगा "पृष्ठ 3 एक फ़िग्मा इंटरफ़ेस स्क्रीनशॉट है," और यह स्वचालित रूप से इसे images/03-figma.png के रूप में लिखेगा। आप बस उसी नाम की फ़ाइल को फ़ोल्डर में ड्रॉप करें।

बिना नुकसान के चित्र बदलने का रहस्य: उसी नाम से ओवरराइट करें

यह सबसे बड़ा गड्ढा है जिसमें मैं फँसा—कॉपी हो जाने के बाद चित्र बदलना चाहता था, फिर पूरे पथों को खोज और बदलना पड़ता था, जो अक्सर HTML को तोड़ देता था।

सही तरीका सिर्फ एक वाक्य है: पुराने चित्र को उसी नाम के नए चित्र से ओवरराइट करें, और HTML में एक भी अक्षर न बदलें।

यह ऐसा क्यों दिखता है

उपयोग के बारे में बात करने के बाद, आइए बात करते हैं यह ऐसा क्यों है जैसा है।

अच्छा डिज़ाइन कोई रहस्य नहीं है; यह विघटित निर्णयों का एक सेट है। मैंने जो किया है वह मूलतः पत्रिका उद्योग द्वारा सौ वर्षों में संचित लेआउट भाषा को HTML में ले जाना है।

टाइपोग्राफी का तीन-स्तरीय विभाजन

• सेरिफ़ → "राय". मुख्य शीर्षकों के लिए सेरिफ़ का उपयोग करें; पाठक तुरंत महसूस करते हैं "यह एक वाक्य है जिसे गंभीरता से लिया जाना चाहिए।"
• सैन्स-सेरिफ़ → "सूचना". मुख्य पाठ के लिए उच्च घनत्व, पढ़ने में आसान।
• मोनोस्पेस → "मेटाडेटा". अध्याय संख्याएँ, दिनांक, और हेडर तथा फ़ुटर में पृष्ठ संख्याएँ, पत्रिका के फ़ुटर या टर्मिनल में कोड जैसी।

पाठकों को कठिन सोचने की ज़रूरत नहीं है; उनकी आँखें स्वचालित रूप से जान लेती हैं कि कोई वाक्य मुख्य पाठ है या फ़ुटनोट।

रंग अनुशासन

कागज़ का सफेद, स्याही का रंग, और एक उच्चारण रंग पर्याप्त है।

शुद्ध सफेद चौंधिया देता है, और शुद्ध काला आक्रामक होता है; मुद्रण उद्योग ऐसा कभी नहीं करता, और Kindle भी नहीं करता।

Skill के 5 थीम में, कोई भी पृष्ठभूमि रंग #FFFFFF नहीं है, और कोई भी पाठ रंग #000000 नहीं है।

प्रत्येक सेट केवल 6 CSS वेरिएबल्स को उजागर करता है, और SKILL.md स्पष्ट रूप से बताता है: उपयोगकर्ताओं को कस्टम हेक्स कोड की अनुमति नहीं है; उन्हें पाँच में से एक चुनना होगा।

जितनी सख्त बाधाएँ होंगी, शैली उतनी ही स्थिर होगी। सौंदर्यशास्त्र की रक्षा करना उपयोगकर्ताओं को स्वतंत्रता देने से अधिक महत्वपूर्ण है।

ग्रिड और लय

निश्चित ग्रिड जैसे 7:5, 6:6, और 8:4 एक पृष्ठ पर क्रम सुनिश्चित करते हैं।

हीरो पृष्ठ और नॉन-हीरो पृष्ठों को वैकल्पिक होना चाहिए ताकि पूरे डेक की लय सुनिश्चित हो।

एक पृष्ठ घना, एक पृष्य, एक पृष्ठ विरल—यही "साँस लेने" की भावना है जो आपको पत्रिका पलटते समय मिलती है।

Skill में एक कठोर नियम लिखा गया है: एक पंक्ति में तीन से अधिक पृष्ठों का एक ही थीम होना P0 त्रुटि माना जाता है।

बिना लय के PPT सिर्फ स्लाइडों का एक ढेर है जो PDF में बदल दिया गया है।

अंतिम शब्द

उपरोक्त में से कोई भी नियम मेरे द्वारा आविष्कृत नहीं था।

मैं दस वर्षों से डिज़ाइनर हूँ, UI, इंटरैक्शन, और AI प्रभाव कर रहा हूँ; ये वास्तव में उद्योग की सामान्य समझ हैं।

मैंने बस उन्हें एक-एक करके SKILL.md और checklist.md में लिख दिया ताकि AI उन्हें मेरे लिए निष्पादित कर सके।

दूसरे शब्दों में, यह Skill मेरे दस वर्षों के सौंदर्यशास्त्र का एक संकुचित पैकेज है।

पहले, एक अच्छी PPT बनाने के लिए, मुझे ग्रिड को समायोजित करने, फ़ॉन्ट आकार चुनने, और रंग मान चुनने में दो दिन बिताने पड़ते थे।

अब, मैं सिर्फ सामग्री AI को फेंकता हूँ, यह उन नियमों के अनुसार उन्हें इकट्ठा करता है, और मुझे बस उन्हें जाँचना होता है।

इस वजह से, मैं इसे ओपन-सोर्स करने की हिम्मत करता हूँ।

नियम मेरे अनन्य नहीं थे; Monocle डिज़ाइनरों ने उनका उपयोग मुझसे दशकों पहले किया था। मैंने बस उन्हें 2026 HTML में कॉपी किया।

Skill पहले से ही GitHub पर है: github.com/op7418/guizang-ppt-skill

README में AI के लिए "स्थापना संकेत" है। इसे कॉपी करें और अपने Claude Code या किसी अन्य AI Agent में पेस्ट करें, और यह स्वचालित रूप से स्थापना पूरी करेगा। स्थापित होने के बाद, "मेरे लिए एक मैगज़ीन-शैली PPT बनाओ" कहें इसे ट्रिगर करने के लिए।

आप Bloome Agent के भीतर भी इसका उपयोग कर सकते हैं, जो वर्तमान में मुफ़्त है:

https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G

यदि आपको यह सामग्री सहायक पाते हैं, तो कृपया मुझे एक लाइक दें या इसे उन दोस्तों के साथ साझा करें जिन्हें इसकी आवश्यकता है।

आप इस Skill से बनी अपनी PPT को टिप्पणी अनुभाग में भी साझा कर सकते हैं।