एक डिज़ाइनर के तौर पर, मैं हमेशा से ही डिज़ाइन और तकनीक के बीच के अंतर से रोमांचित रहा हूँ। डिज़ाइनर और डेवलपर के बीच का अंतर हमेशा से ही मुझे आकर्षित करता रहा है - लेकिन मैंने कभी नहीं सोचा था कि यह अंतर इतनी जल्दी खत्म हो जाएगा। HackerNoon द्वारा शुरुआत एक मज़ेदार डिज़ाइन प्रोजेक्ट के रूप में हुई थी, जिसमें पिक्सेलयुक्त आइकन बनाए गए थे, जो HackerNoon की डिज़ाइन भाषा के पुराने सार को दर्शाते थे - लेकिन फ़िग्मा डिज़ाइन फ़ाइल को खुद एक पूरी तरह कार्यात्मक वेबसाइट में बदलना? 2025 तक यह मेरे कार्ड पर नहीं था, जब तक कि मैंने Cursor AI की खोज नहीं की। GitHub, xFigma और NPM के माध्यम से लाइब्रेरी को ओपन-सोर्स करने के बाद, हम हमेशा इन आइकन को समुदाय के लिए अधिक सुलभ बनाना चाहते थे। विचार सरल था: आइए एक ऐसी वेबसाइट बनाएं जहाँ डिज़ाइनर और डेवलपर अपनी परियोजनाओं के लिए इन आइकन को ब्राउज़, खोज और डाउनलोड कर सकें। पिक्सेल आइकन लाइब्रेरी की चुनौती? मुझे कोडिंग का बिल्कुल भी अनुभव नहीं था। कर्सर एआई, एक एआई-संचालित कोड संपादक जो इस यात्रा के दौरान जल्दी ही मेरा गुरु और मार्गदर्शक बन गया। यहाँ बताया गया है कि कैसे मैंने एआई सहायता और कुछ गंभीर साथ डिज़ाइन से लेकर फुल-स्टैक तक अपनी सीमाओं को पार किया। वाइब कोडिंग के ग्राउंड जीरो से शुरू पहला कदम यह तय करना था कि मैं क्या बनाना चाहता था और मेरे पास पहले से क्या है उसका जायजा लेना था: एसवीजी प्रारूप में पिक्सेल आइकनों का एक पुस्तकालय। वेबसाइट के लिए फ़िग्मा डिज़ाइन. वेबसाइट पर मुझे जो सुविधाएँ चाहिए थीं उनकी सूची। मुझे बिल्कुल भी पता नहीं है कि इसे कैसे जीवंत किया जाए। मैंने पर एक स्थापित करके शुरुआत की। फिर मैंने कर्सर एआई स्थापित किया, और शुरुआत करना आश्चर्यजनक रूप से सरल था। पिक्सेल आइकन लाइब्रेरी GitHub रिपॉजिटरी वेबसाइट शाखा कर्सर AI के साथ प्रोजेक्ट सेट अप करना कर्सर को स्थापित करने के बाद, अगली चीज़ यह जांचना था: - संस्करण नियंत्रण के लिए GIT - NPM पैकेज के लिए Node.js आवश्यक चीजें इंस्टॉल होने के बाद, अब समय आ गया था कि मैं अपने हाथों को गंदा करूं। मैंने अपने सिस्टम पर रेपो को क्लोन किया, कर्सर एआई में प्रोजेक्ट फ़ोल्डर खोला, और बिल्ट-इन एआई असिस्टेंट के साथ बातचीत शुरू की। क्लाउड के साथ अच्छा अनुभव होने के कारण, मैंने इस प्रक्रिया में मार्गदर्शन के लिए एजेंट मोड में क्लाउड 3.7 सॉनेट का विकल्प चुना। पहले प्रॉम्प्ट के साथ, मैंने संक्षेप में बताया कि मैं क्या बनाना चाहता था और परियोजना की बुनियादी संरचना के साथ आवश्यक सुविधाओं को सूचीबद्ध किया, और सुझाव मांगे कि किस फ्रेमवर्क को दक्षता और गति को प्राथमिकता देनी चाहिए। कर्सर ने आवश्यक फ़ोल्डर संरचना में मदद की और सुझाव दिया कि मैं परियोजना के लिए HTML और टेलविंड का उपयोग करूँ। इसने परियोजना शुरू करने के लिए आवश्यक फ़ाइलें भी बनाईं। इसके बाद फ़ोल्डर संरचना इस प्रकार दिखाई दी: ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ अगला कदम टेलविंड को स्थापित करना और यूआई से शुरुआत करना था। टेलविंड CSS सेट अप करना और UI बनाना मुझे आश्चर्य हुआ कि कर्सर ने टेलविंड इंस्टॉलेशन में गड़बड़ी की और टेलविंड v3.4 और v4.0 के कमांड को मिला दिया। इसलिए, मेरे लिए कदम उठाने का समय आ गया था! मैं पर गया और इन चरणों का पालन किया: टेलविंडcss इंस्टॉलेशन डॉक्स टेलविंड को स्थापित करने के लिए, टर्मिनल खोलें और चलाएँ: npm install tailwindcss @tailwindcss/cli टेलविंड को src/style.css फ़ाइल में आयात करें: @import "tailwindcss"; बिल्ड प्रक्रिया सेट करने के लिए, चलाएँ: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch HTML में Tailwind का उपयोग शुरू करें: <link href="/src/output.css" rel="stylesheet"> एक बार जब टेलविंड स्थापित हो गया और कक्षाएं उपयोग के लिए तैयार हो गईं, तो मैंने अपने फिग्मा डिज़ाइन के अनुसार अधिक जटिल अणुओं, जीवों और पृष्ठों का निर्माण करने से पहले एआई एजेंट के लिए रंग, फ़ॉन्ट और अन्य परमाणुओं को परिभाषित करना शुरू कर दिया। फिर, मैंने प्रोजेक्ट में आइकन का उपयोग करने के लिए पिक्सेल आइकन लाइब्रेरी NPM पैकेज स्थापित किया। NPM पैकेज स्थापित करने के चरण इस प्रकार हैं: पैकेज स्थापित करें: npm i @hackernoon/pixel-icon-library अपने HTML में CSS आयात करें (मैंने आसानी से पहुंच के लिए सभी आवश्यक आइकन फ़ॉन्ट फ़ाइलों को /fonts फ़ोल्डर में स्थानांतरित कर दिया है।) <link href="/fonts/iconfont.css" rel="stylesheet"> आइकन प्रदर्शित करने के लिए, जोड़ें <i class="hn hn-icon-name"></i> यूआई के लिए, मैंने चीजों को व्यवस्थित रखने के लिए तत्व-दर-तत्व दृष्टिकोण अपनाया और यदि आवश्यक हो तो पिछले संस्करण पर वापस लौटना आसान बना दिया। आदेश इस प्रकार है: नव बार फ़ुटबाल हीरो सेक्शन खोज पट्टी आइकन कार्ड और ग्रिड व्यक्तिगत आइकन मोडल मैंने इन सभी तत्वों के लिए पैडिंग, मार्जिन, बॉर्डर रेडियस, रंग और आयाम परिभाषित करना सुनिश्चित किया, साथ ही होवर और क्लिक स्टेट्स भी जोड़े। CSS प्रॉपर्टीज़ के अलावा, मैंने प्रॉम्प्ट में रिस्पॉन्सिव व्यवहार और इंटरैक्शन भी शामिल किए। मैं जिस कोड को मंजूरी दे रहा था, उसका पूर्वावलोकन बनाने के लिए मैंने एक्सटेंशन का इस्तेमाल किया। यह एक्सटेंशन एक क्लिक में स्थिर और गतिशील पृष्ठों के लिए लाइव रीलोड सुविधा के साथ एक स्थानीय विकास सर्वर लॉन्च करता है! लाइव सर्वर आइकन डेटा चुनौती और खोज कार्यक्षमता को लागू करना UI तत्वों के साथ, अब असली चुनौती का समय था: सभी आइकन को उनके विवरण के साथ प्रदर्शित करना - आइकन नाम, आइकन प्रकार टैग, और SVG कोड, जबकि सुचारू खोज कार्यक्षमता सुनिश्चित करना। इस पर काबू पाने के लिए, कर्सर ने एक संरचित दृष्टिकोण का सुझाव दिया: आइकन मेटाडेटा और SVG कोड के साथ JSON फ़ाइल बनाना JSON से डेटा लोड करके उसे कुशलतापूर्वक प्रदर्शित करना। आइकन नाम के आधार पर खोज लागू करें. आइकन प्रकार टैग के आधार पर खोज फ़िल्टर जोड़ें - ठोस, नियमित, ब्रांड / सोशल-मीडिया-आइकन, purrcats इस प्रक्रिया को और अधिक स्वचालित बनाने के लिए, मैंने कर्सर से /data/icons.json फ़ाइल में सभी आइकन डेटा जोड़ने के लिए एक स्क्रिप्ट बनाने को कहा। अब, जब खोज कार्य कर रही थी, खोज फ़िल्टर स्थापित हो चुके थे, तथा आइकन मोडल अपेक्षित रूप से काम कर रहा था, तो केवल इतना करना बाकी था कि यूआई में शेष इंटरैक्शन को जोड़ा जाए, गहन परीक्षण किया जाए, तथा तैनाती की जाए! तैनाती और उससे आगे एक बार जब मैं यूआई से संतुष्ट हो गया और प्रत्येक कार्यक्षमता का अच्छी तरह से परीक्षण कर लिया, तो अगली चुनौती का समय आ गया - परिनियोजन!!! चूँकि यह प्रोजेक्ट एक स्थिर साइट थी, इसलिए मुझे एक होस्टिंग समाधान की आवश्यकता थी जो तेज़, मुफ़्त और रखरखाव में आसान हो। GitHub Pages एक आसान विकल्प था! इसने यह पेशकश की: GitHub repo के साथ सहज एकीकरण, जिससे परिनियोजन सरल हो जाता है। इसका उपयोग निःशुल्क है और यह इस तरह की स्थैतिक परियोजनाओं के लिए सबसे उपयुक्त है। अपडेट करना बहुत आसान है - आपको बस एक प्रतिबद्धता की आवश्यकता है! लेकिन इससे पहले कि मैं अपना सारा कोड रिपॉजिटरी में डाल सकूँ और GitHub पेज के ज़रिए उसे तैनात कर सकूँ, मुझे कोड को साफ करना था और किसी भी प्रोडक्शन समस्या की जाँच करनी थी। कर्सर के साथ एक त्वरित आगे-पीछे और कुछ बदलावों के बाद, यह लॉन्च के लिए पूरी तरह तैयार था! GitHub पेज के माध्यम से अपनी परियोजना को तैनात करने के लिए आपको बस इतना करना होगा: अपना सारा कोड GitHub repo पर डालें और सुनिश्चित करें कि यह सार्वजनिक है रिपो के लिए GitHub पेज सक्षम करना पर जाएँ सेटिंग्स पर क्लिक करें पेज “ ” पर सेट करें (वह शाखा जहाँ आपका कोड है। मेरे मामले में, यह वेबसाइट शाखा में था) शाखा को वेबसाइट क्लिक करें सहेजें पर वैकल्पिक: अपना कस्टम डोमेन जोड़ें (जैसे मैंने उपयोग किया: pixeliconlibrary.com) DNS कॉन्फ़िगर करें (इसमें मेरी मदद करने के लिए को धन्यवाद) रिचर्ड कुछ मिनट प्रतीक्षा करें और आपकी वेबसाइट लाइव हो जाएगी! https:// Pixeliconlibrary.com/?embedable=true गर्व करने लायक उत्पाद पिक्सेल-आर्ट आइकन डिज़ाइन करने से लेकर वाइब-कोडिंग करके पूरी तरह से कार्यात्मक साइट बनाने तक, इस प्रोजेक्ट ने मुझे मेरे कम्फर्ट जोन से बाहर धकेल दिया। पीछे मुड़कर देखें तो, यह सिर्फ़ एक वेबसाइट बनाने से कहीं ज़्यादा था - यह मेरे रचनात्मक क्षितिज को व्यापक बनाने और यह महसूस करने के बारे में था कि AI के साथ, डिज़ाइन और विकास के बीच की रेखा पहले से कहीं ज़्यादा तेज़ी से धुंधली हो रही है। और मेरे लिए, यह ऐसा है जैसे मेरी आँखों के सामने एक अंतहीन सड़क खुल गई हो। एक डिज़ाइनर दूसरे से कहता है: अगर मैं कर सकता हूँ, तो तुम भी कर सकते हो। तो, तुम किस बात का इंतज़ार कर रहे हो? चलो निर्माण शुरू करते हैं! पी.एस.: लाइव है! पिक्सेल आइकन लाइब्रेरी वेबसाइट क्या आप वेबसाइट के पीछे के कोड पर एक नज़र डालना चाहते हैं? देखें! GitHub repo
