बिना कोडिंग सीखे मैंने कैसे पिक्सेल आइकन लाइब्रेरी वेबसाइट को वाइब कोड किया (धन्यवाद, कर्सर एआई!)

एक डिज़ाइनर के तौर पर, मैं हमेशा से ही डिज़ाइन और तकनीक के बीच के अंतर से रोमांचित रहा हूँ। डिज़ाइनर और डेवलपर के बीच का अंतर हमेशा से ही मुझे आकर्षित करता रहा है - लेकिन मैंने कभी नहीं सोचा था कि यह अंतर इतनी जल्दी खत्म हो जाएगा।

HackerNoon द्वारा पिक्सेल आइकन लाइब्रेरी की शुरुआत एक मज़ेदार डिज़ाइन प्रोजेक्ट के रूप में हुई थी, जिसमें पिक्सेलयुक्त आइकन बनाए गए थे, जो HackerNoon की डिज़ाइन भाषा के पुराने सार को दर्शाते थे - लेकिन फ़िग्मा डिज़ाइन फ़ाइल को खुद एक पूरी तरह कार्यात्मक वेबसाइट में बदलना? 2025 तक यह मेरे कार्ड पर नहीं था, जब तक कि मैंने Cursor AI की खोज नहीं की। GitHub, xFigma और NPM के माध्यम से लाइब्रेरी को ओपन-सोर्स करने के बाद, हम हमेशा इन आइकन को समुदाय के लिए अधिक सुलभ बनाना चाहते थे। विचार सरल था: आइए एक ऐसी वेबसाइट बनाएं जहाँ डिज़ाइनर और डेवलपर अपनी परियोजनाओं के लिए इन आइकन को ब्राउज़, खोज और डाउनलोड कर सकें।

चुनौती? मुझे कोडिंग का बिल्कुल भी अनुभव नहीं था।

कर्सर एआई, एक एआई-संचालित कोड संपादक जो इस यात्रा के दौरान जल्दी ही मेरा गुरु और मार्गदर्शक बन गया। यहाँ बताया गया है कि कैसे मैंने एआई सहायता और कुछ गंभीर वाइब कोडिंग के साथ डिज़ाइन से लेकर फुल-स्टैक तक अपनी सीमाओं को पार किया।

ग्राउंड जीरो से शुरू

पहला कदम यह तय करना था कि मैं क्या बनाना चाहता था और मेरे पास पहले से क्या है उसका जायजा लेना था:

• एसवीजी प्रारूप में पिक्सेल आइकनों का एक पुस्तकालय।
• वेबसाइट के लिए फ़िग्मा डिज़ाइन.
• वेबसाइट पर मुझे जो सुविधाएँ चाहिए थीं उनकी सूची।
• मुझे बिल्कुल भी पता नहीं है कि इसे कैसे जीवंत किया जाए।

मैंने पिक्सेल आइकन लाइब्रेरी GitHub रिपॉजिटरी पर एक वेबसाइट शाखा स्थापित करके शुरुआत की। फिर मैंने कर्सर एआई स्थापित किया, और शुरुआत करना आश्चर्यजनक रूप से सरल था।

कर्सर AI के साथ प्रोजेक्ट सेट अप करना

कर्सर को स्थापित करने के बाद, अगली चीज़ यह जांचना था:

• GIT - संस्करण नियंत्रण के लिए
• Node.js - NPM पैकेज के लिए

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

क्लाउड के साथ अच्छा अनुभव होने के कारण, मैंने इस प्रक्रिया में मार्गदर्शन के लिए एजेंट मोड में क्लाउड 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 कॉन्फ़िगर करें (इसमें मेरी मदद करने के लिए रिचर्ड को धन्यवाद)
• कुछ मिनट प्रतीक्षा करें और आपकी वेबसाइट लाइव हो जाएगी!

गर्व करने लायक उत्पाद

पिक्सेल-आर्ट आइकन डिज़ाइन करने से लेकर वाइब-कोडिंग करके पूरी तरह से कार्यात्मक साइट बनाने तक, इस प्रोजेक्ट ने मुझे मेरे कम्फर्ट जोन से बाहर धकेल दिया। पीछे मुड़कर देखें तो, यह सिर्फ़ एक वेबसाइट बनाने से कहीं ज़्यादा था - यह मेरे रचनात्मक क्षितिज को व्यापक बनाने और यह महसूस करने के बारे में था कि AI के साथ, डिज़ाइन और विकास के बीच की रेखा पहले से कहीं ज़्यादा तेज़ी से धुंधली हो रही है। और मेरे लिए, यह ऐसा है जैसे मेरी आँखों के सामने एक अंतहीन सड़क खुल गई हो।

क्या आप वेबसाइट के पीछे के कोड पर एक नज़र डालना चाहते हैं? GitHub repo देखें!