एटमाइज़ डिज़ाइनरों और डेवलपर्स के लिए एक खुला स्रोत डिज़ाइन सिस्टम और रिएक्ट घटक लाइब्रेरी है। परमाणु डिजाइन (परमाणु डिजाइन) पद्धति के आधार पर, यह स्केच/फिगमा डिजाइन ड्राफ्ट से लेकर रिएक्ट कोड तक एंड-टू-एंड मैपिंग क्षमताएं प्रदान करता है।

परमाणुकरण

मुख्य पैरामीटर और आँकड़े

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

प्रोजेक्ट्स	सार्वजनिक सूचना
आधिकारिक स्थिति	रिएक्ट जेएस के लिए डिजाइन सिस्टम - डेवलपर्स और डिजाइनरों को लगातार यूजर इंटरफेस बनाने में सहयोग करने में मदद करता है
टेक्नोलॉजी स्टैक	प्रतिक्रिया + स्टाइल-घटक + परमाणु डिजाइन पद्धति
घटक गणना	15+ आउट-ऑफ़-द-बॉक्स घटक (परमाणु + अणु)
पूर्वनिर्धारित रंग	60+ अर्थपूर्ण रंग चर
डिज़ाइन संसाधन	स्केच डिज़ाइन स्रोत फ़ाइलें (गमरोड द्वारा वितरित)
ओपन सोर्स लाइसेंस	एमआईटी
गिटहब स्टार्स	~1,800 सितारे (मुख्य भंडार)
एनपीएम साप्ताहिक डाउनलोड	~19 (एनपीएम आधिकारिक डेटा)
नवीनतम संस्करण	1.0.28 (एनपीएम)
समर्थित प्लेटफार्म	वेब, इलेक्ट्रॉन, एसएसआर (सर्वर-साइड रेंडरिंग)

डिज़ाइन-कोड सिंक्रनाइज़ेशन तंत्र: एटमाइज़ का मूल विचार "एआई स्वचालित रूप से कोड उत्पन्न नहीं करता है", बल्कि परमाणु डिज़ाइन पद्धति के माध्यम से डिज़ाइन टोकन और रिएक्ट घटक विशेषताओं के बीच दो-तरफा मैपिंग स्थापित करना है। जब डिज़ाइनर स्केच में संसाधनों को डिज़ाइन करने के लिए एटमाइज़ का उपयोग करते हैं, तो चयनित पैरामीटर जैसे रंग, रिक्ति, फ़ॉन्ट आकार, आदि सीधे textColor, p (पैडिंग), textSize और रिएक्ट घटक में अन्य प्रॉप्स से मेल खाते हैं। डेवलपर्स को डिज़ाइन के इरादे का अनुमान लगाने की आवश्यकता नहीं है।

पारिस्थितिकी घनत्व: GitHub पर 1,800+ सितारे और 336 फोर्क्स इंगित करते हैं कि स्वतंत्र ओपन सोर्स डिजाइन सिस्टम परियोजनाओं में पहले से ही एक निश्चित सामुदायिक आधार है, लेकिन इसके साप्ताहिक एनपीएम डाउनलोड (लगभग 19) यह भी दर्शाते हैं कि यह मुख्यधारा की पसंद नहीं है और एक विशिष्ट उच्च गुणवत्ता वाले डिजाइन सिस्टम को प्राथमिकता देता है।

परिपक्वता निर्णय: परियोजना का अंतिम प्रस्तुतिकरण लगभग 3 साल पहले किया गया था, और एनपीएम का नवीनतम संस्करण लगभग 5 साल पहले जारी किया गया था, जो दर्शाता है कि परियोजना सक्रिय पुनरावृत्ति चरण के बजाय स्थिर रखरखाव में प्रवेश कर चुकी है। यह दोनों अच्छी बात है (एपीआई स्थिर है), लेकिन इसका मतलब यह भी है कि इसमें कोड टूल के लिए एआई डिज़ाइन की "निरंतर विकास" विशेषता का अभाव है।

उपयोगकर्ता और बाज़ार की पहचान

एटमाइज़ की बाज़ार पहचान मुख्य रूप से बड़े पैमाने पर वाणिज्यिक राजस्व या उद्यम ग्राहक संख्या के बजाय खुले स्रोत समुदाय में मौखिक प्रसार और स्वतंत्र डेवलपर्स के तकनीकी प्रभाव से आती है।

सामुदायिक लोकप्रियता: मुख्य GitHub रिपॉजिटरी (github.com/Proksh/atomize) वर्तमान समय में 9 योगदानकर्ताओं के साथ लगभग 1,800 सितारे और 336 फोर्क्स दिखाता है। स्वतंत्र डेवलपर्स द्वारा बनाए गए ओपन सोर्स डिज़ाइन सिस्टम के लिए, यह संख्या स्थिर ध्यान को दर्शाती है, लेकिन मटेरियल-यूआई (~94k स्टार्स) और एंट डिज़ाइन (~93k स्टार्स) जैसे मुख्यधारा समाधानों की तुलना में एक बड़ा अंतर है। एनपीएम पर इसके साप्ताहिक डाउनलोड केवल लगभग 19 बार हैं, जो दर्शाता है कि उत्पादन में प्रत्यक्ष अपनाने की दर बहुत कम है, और इसका उपयोग सीखने के संदर्भ या छोटे व्यक्तिगत प्रोजेक्ट के रूप में अधिक किया जाता है।

डिज़ाइन संसाधन वितरण: एटमाइज़ डिज़ाइन (स्केच संसाधन पैकेज) गमरोड के माध्यम से वितरित किया जाता है, जो डिजाइनरों के लिए एक भुगतान संसाधन प्रवेश प्रदान करता है, लेकिन विशिष्ट बिक्री डेटा का खुलासा नहीं किया जाता है।

उद्योग बेंचमार्किंग पोजीशनिंग: एटमाइज़ का पारिस्थितिक क्षेत्र "लाइटवेट रिएक्ट डिज़ाइन सिस्टम" है। एंट डिज़ाइन (एंटरप्राइज़-स्तरीय मध्य और बैकएंड), मटेरियल-यूआई (Google मटेरियल डिज़ाइन विनिर्देश), चक्र यूआई (उच्च पहुंच) जैसे प्रमुख निर्माताओं द्वारा संचालित डिज़ाइन सिस्टम से भिन्न, एटमाइज़ के फायदे संक्षिप्त एपीआई डिज़ाइन, "परमाणु-अणुओं" की स्पष्ट परत और एक उच्च अनुकूलन योग्य थीम प्रणाली में निहित हैं। इसके नुकसान भी समान रूप से स्पष्ट हैं: घटकों की कम संख्या, कमजोर सामुदायिक पारिस्थितिकी और दीर्घकालिक रखरखाव में उच्च अनिश्चितता।

आवश्यकताएँ: टीम के लिए, अधिक मुख्यधारा समाधानों के बजाय एटमाइज़ को चुनने का आमतौर पर मतलब है कि आप इसकी परमाणु डिजाइन अवधारणा से सहमत हैं, एक कस्टम थीम के निर्माण में समय बिताने के इच्छुक हैं, और परियोजना में घटक विविधता के लिए उच्च आवश्यकताएं नहीं हैं।

लागत लाभ

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

शुल्क प्रकार	परमाणुकरण	सामग्री-यूआई (एमयूआई)	चींटी डिजाइन
ओपन सोर्स लाइसेंस	एमआईटी मुफ़्त	एमआईटी मुफ़्त	एमआईटी मुफ़्त
प्रीमियम थीम/टेम्पलेट्स	कोई शुल्क नहीं	MUI स्टोर सशुल्क टेम्प्लेट	चींटी डिजाइन प्रो भुगतान
डिज़ाइन संसाधन (स्केच/फ़िग्मा)	एटमाइज़ डिज़ाइन गमरोड के माध्यम से शुल्क पर उपलब्ध है (कीमत का खुलासा नहीं किया गया है)	आंशिक रूप से निःशुल्क + फिग्मा समुदाय प्लग-इन	खुला स्रोत मुफ़्त + फिग्मा सामुदायिक संसाधन
उद्यम सहायता	कोई नहीं	एमयूआई एक्स सशुल्क घटक (डेटा टेबल, दिनांक चयनकर्ता, आदि)	कोई आधिकारिक भुगतान स्तर नहीं
वाणिज्यिक लाइसेंस प्रतिबंध	कोई नहीं (एमआईटी)	कोई नहीं (एमआईटी)	कोई नहीं (एमआईटी)

निःशुल्क और खुला स्रोत: एटमाइज़ को एमआईटी लाइसेंस के तहत लाइसेंस प्राप्त है और इसे सीटों, उपयोग या कार्यों पर प्रतिबंध के बिना व्यक्तिगत, वाणिज्यिक और आंतरिक कॉर्पोरेट परियोजनाओं के लिए स्वतंत्र रूप से उपयोग किया जा सकता है। व्यावसायिक डिज़ाइन-टू-कोड टूल (जैसे एनिमा और लोकोफ़ी) की तुलना में यह इसका मुख्य लागत लाभ है - आप कभी भी "निर्यात की संख्या", "टीम सीटों" या "उन्नत घटकों" से लॉक नहीं होंगे।

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

सही लागत संरचना: उत्पादन-स्तरीय परियोजनाओं के लिए, एटमाइज़ को अपनाने की वास्तविक लागत सॉफ़्टवेयर लाइसेंसिंग में नहीं है, बल्कि इसमें है:

• सीखने की अवस्था: टीम को परमाणु डिजाइन की नामकरण प्रणाली और थीम कॉन्फ़िगरेशन विधि को समझने की जरूरत है;
• घटक विस्तार: 15+ घटक अक्सर मध्य और बैक-एंड व्यवसायों के लिए पर्याप्त नहीं होते हैं, और ऊपरी स्तर के व्यावसायिक घटकों को स्वयं ही समाहित करने की आवश्यकता होती है;
• दीर्घकालिक रखरखाव: चूंकि परियोजना कम-गतिविधि की स्थिति में प्रवेश कर चुकी है, भविष्य में रिएक्ट संस्करण के उन्नयन से संगतता संबंधी समस्याएं हो सकती हैं, और टीम को इसे स्वयं बनाए रखने या माइग्रेशन लागत वहन करने की आवश्यकता है।

मुख्य कार्य

एटमाइज़ की क्षमताएं "परमाणु डिज़ाइन → पुन: प्रयोज्य घटक → सुसंगत उपयोगकर्ता इंटरफ़ेस" लिंक के आसपास घूमती हैं। सार्वजनिक क्षमताओं को पाँच स्तरों में संक्षेपित किया जा सकता है:

• परमाणु: सबसे बुनियादी पुन: प्रयोज्य यूआई तत्व, जिनमें बटन, टेक्स्ट, आइकन, इनपुट, इमेज, डिव आदि शामिल हैं। प्रत्येक परमाणु घटक सिमेंटिक प्रॉप्स (जैसे टेक्स्टसाइज, टेक्स्टकलर, बीजी, पी, एम) को उजागर करता है, जिससे डेवलपर्स को इनलाइन शैलियों या सीएसएस वर्ग के नाम लिखने के बिना संपत्ति संयोजनों के माध्यम से सीधे डिजाइन इरादों को व्यक्त करने की अनुमति मिलती है।
• अणु: कई परमाणुओं से बने समग्र घटक, जैसे कि कार्ड, मॉडल, नेवबार, पेमेंटकार्ड, आदि। आणविक घटक परमाणु-स्तर की विशेषताओं को ओवरराइड करने की क्षमता बनाए रखते हुए सामान्य लेआउट संयोजनों को पूर्व निर्धारित करते हैं।
• थीम सिस्टम: एक वैश्विक थीम प्रदाता रंग, रिक्ति, फ़ॉन्ट, छाया, ब्रेकप्वाइंट इत्यादि जैसे डिज़ाइन टोकन को केंद्रीय रूप से प्रबंधित करता है। थीम वेरिएबल को संशोधित करने से फ़ाइल दर फ़ाइल को समायोजित करने की आवश्यकता के बिना सभी घटकों की उपस्थिति को विश्व स्तर पर ताज़ा किया जा सकता है। मुख्य रंग, कार्यात्मक रंग, ग्रे स्केल और स्थिति रंग को कवर करते हुए 60+ सिमेंटिक रंग चर प्रीसेट करें।
• उत्तरदायी ग्रिड: स्तंभों की विन्यास योग्य संख्या पर आधारित एक ग्रिड प्रणाली, जो दशमलव स्तंभ चौड़ाई, ब्रेकपॉइंट अंतराल नियंत्रण और नेस्टेड लेआउट का समर्थन करती है। कॉन्फ़िगरेशन की कुछ पंक्तियों के साथ मोबाइल से डेस्कटॉप पर अनुकूली स्विचिंग प्राप्त की जा सकती है।
• स्केच डिज़ाइन संसाधन फ़ाइलें: डिज़ाइनरों को स्केच स्रोत फ़ाइलें प्रदान करें जो लेआउट विनिर्देशों, रंग शैलियों, पाठ शैलियों और घटक टेम्पलेट्स सहित रिएक्ट घटक गुणों से बिल्कुल मेल खाती हैं। डिज़ाइन पक्ष पर इस संसाधन का उपयोग करके निर्मित डिज़ाइन ड्राफ्ट के दृश्य पैरामीटर सीधे रिएक्ट घटक के प्रॉप्स इनपुट के अनुरूप हो सकते हैं।

सिनर्जी: एटमाइज़ का वास्तविक मूल्य किसी एक फ़ंक्शन में नहीं है, बल्कि "डिज़ाइन संसाधनों के रंग/स्पेसिंग/फ़ॉन्ट चर → ​​थीम टोकन → घटक प्रॉप्स" की संपूर्ण मैपिंग श्रृंखला में निहित है। डिज़ाइनर स्केच में एक बटन शैली को परिभाषित करता है, और इसका रंग मान स्वचालित रूप से एटमाइज़ के नामकरण प्रणाली के माध्यम से बीजी, टेक्स्ट कलर, होवर और बटन घटक के अन्य प्रॉप्स के डिफ़ॉल्ट मानों से जुड़ा होता है। डेवलपर्स को दृश्य मापदंडों का अनुवाद करने के लिए डिज़ाइन विनिर्देश दस्तावेज़ को मैन्युअल रूप से परामर्श करने की आवश्यकता नहीं है।

मॉडल और संस्करण विकास

एटमाइज़ एक एआई मॉडल नहीं है, इसलिए कोई "मॉडल संस्करण" नहीं हैं। हालाँकि, सॉफ़्टवेयर संस्करण का एक स्पष्ट संदर्भ है और इसे तीन चरणों में विभाजित किया जा सकता है:

प्रारंभिक अन्वेषण चरण (~2019)

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

आधिकारिक रिलीज़ चरण (~2020-01, v1.0.0)

पहला सिमेंटिक संस्करण जारी किया गया है, घटकों की संख्या 15+ तक बढ़ा दी गई है, और एक संपूर्ण थीम सिस्टम, रिस्पॉन्सिव ग्रिड, आइकन सिस्टम और दस्तावेज़ीकरण साइट पेश की गई है। डिज़ाइनरों के उपयोग के लिए स्केच डिज़ाइन संसाधन गमरोड पर एक साथ उपलब्ध हैं।

स्थिर रखरखाव चरण (~2021-07, v1.0.28)

अंतिम बार एनपीएम पर जारी किया गया, तब से परियोजना कम सक्रिय रखरखाव स्थिति में प्रवेश कर गई है। GitHub पर अंतिम मर्ज PR (#87, सुरक्षा अपडेट पर निर्भर) लगभग 3 साल पहले हुआ था। इस अवधि के दौरान, रिएक्ट पारिस्थितिकी तंत्र ने कार्यात्मक घटकों और हुक की व्यापक लोकप्रियता, समवर्ती मोड की शुरूआत और सर्वर घटकों के उदय का अनुभव किया है। हालाँकि, एटमाइज़ ने इन परिवर्तनों के जवाब में वास्तुशिल्प-स्तरीय अद्यतन नहीं किए हैं।

संस्करण	दिनांक (लगभग)	बदलाव की मुख्य बातें
0.x (बीटा)	~2019	प्रोटोटाइप सत्यापन, कोर परमाणु घटक और स्टाइल-घटक वास्तुकला
1.0.0	~2020-01	आधिकारिक तौर पर जारी, 15+ घटक, थीम सिस्टम, ग्रिड, आइकन सिस्टम
1.0.28	~2021-07	नवीनतम एनपीएम रिलीज़, सुरक्षा सुधारों पर निर्भर, सुविधा फ़्रीज़

संस्करण अनुशंसा: एटमाइज़ को अपनाने की योजना बना रही टीमों के लिए, संस्करण 1.0.28 को लॉक करने और पैकेज.जेसन में एक सीमा के बजाय एक सटीक संस्करण संख्या का उपयोग करने की अनुशंसा की जाती है (`एटोमाइज़'': ''1.0.28' के बजाय ''एटोमाइज़': ''^1.0.28''`) ताकि परीक्षण न किए गए निर्भरता अपडेट को ब्रेकिंग परिवर्तन शुरू करने से रोका जा सके।

तकनीकी लाभ

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

स्टाइल-घटकों पर आधारित शून्य रनटाइम शैली योजना: एटमाइज़ अंतर्निहित शैली योजना के रूप में स्टाइल-घटकों का उपयोग करता है, और प्रत्येक घटक की शैलियों को सीएसएस-इन-जेएस के माध्यम से रनटाइम पर इंजेक्ट किया जाता है। इस समाधान का लाभ यह है कि शैली और घटक तर्क एक ही फ़ाइल में सह-अस्तित्व में हैं, कोई वर्ग नाम संघर्ष नहीं है, और यह गतिशील प्रॉप्स-संचालित शैली गणना का समर्थन करता है। नुकसान यह है कि रनटाइम ओवरहेड (विशेषकर बड़ी सूची रेंडरिंग परिदृश्यों में) और पैकेजिंग आकार सीएसएस मॉड्यूल समाधान से बड़ा है। छोटे से मध्यम आकार की परियोजनाओं के लिए, यह समझौता आमतौर पर इसके लायक है।

सिमेंटिक प्रॉप्स डिज़ाइन: एटमाइज़ घटक सीएसएस प्रॉपर्टी नामों को स्वीकार नहीं करते हैं, लेकिन डोमेन सिमेंटिक प्रॉप्स को उजागर करते हैं। उदाहरण के लिए, bg='warning300', backgroundColor='#FEF3C7' की तुलना में डिज़ाइनर की भाषा के करीब है, और थीम स्विच होने पर वैश्विक टोकन स्वचालित रूप से अनुसरण किया जाता है। यह दृष्टिकोण डिज़ाइन समीक्षा चरण में संचार लागत को बहुत कम कर देता है - डिज़ाइनर सीधे कह सकता है "इस बटन की पृष्ठभूमि के लिए चेतावनी 300 का उपयोग करें", और डेवलपर को रंग मान की जांच करने के लिए डिज़ाइन विनिर्देशों को पढ़ने की आवश्यकता नहीं है।

परमाणु स्तरित संरचना: एटमाइज़ परमाणु डिज़ाइन की "परमाणु → अणु → जीव" परत का अनुसरण करता है। इसका मतलब यह है कि डेवलपर्स अत्यधिक इनकैप्सुलेटेड, गैर-वियोज्य "पूर्ण-विशेषताओं वाले" घटकों का उपयोग करने के लिए मजबूर होने के बजाय, सबसे छोटे दानेदार परमाणु घटकों से इकट्ठा कर सकते हैं। जब व्यवसाय को बटन और इनपुट के एक विशेष संयोजन की आवश्यकता होती है, तो परमाणु लेयरिंग एक बड़े घटक प्रणाली में "क्या कोई संबंधित एपीआई पैरामीटर है" की खोज करने की तुलना में नए आणविक घटकों को बनाने की लागत को बहुत कम कर देती है।

सीमाएँ भी स्पष्ट हैं:

• कोई एआई क्षमताएं नहीं: एटमाइज़ एक एआई उपकरण नहीं है और इसमें कोई एलएलएम अनुमान, स्वचालित कोड जनरेशन या फिगमा प्लग-इन क्षमताएं शामिल नहीं हैं। कोड में डिज़ाइन ड्राफ्ट की मैपिंग एआई द्वारा स्वचालित रूपांतरण के बजाय मैन्युअल रूप से विनिर्देशों का पालन करने के लिए डिजाइनरों और डेवलपर्स पर निर्भर करती है।
• अपर्याप्त घटक पारिस्थितिकी: 15+ घटक केवल सबसे बुनियादी यूआई तत्वों को कवर करते हैं, और कोई मध्य और पृष्ठभूमि उच्च-आवृत्ति घटक जैसे दिनांक चयन, डेटा तालिकाएं और पेड़ नियंत्रण नहीं हैं।
• दीर्घकालिक रखरखाव जोखिम: स्वतंत्र डेवलपर्स द्वारा बनाए गए प्रोजेक्ट लेखक के ऊर्जा हस्तांतरण, करियर में बदलाव आदि का सामना करने पर पूरी तरह से स्थिर हो सकते हैं।

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

एटमाइज़ की पहुंच विधि प्रत्यक्ष और मानकीकृत है, जो मौजूदा रिएक्ट परियोजनाओं वाली टीमों के लिए उपयुक्त है।

कैसे उपयोग करें	इंस्टालेशन कमांड	लागू लोग	विशेषताएँ
एनपीएम पैकेज इंस्टालेशन	एनपीएम इंस्टॉल एटमाइज़ रिएक्ट-ट्रांज़िशन-ग्रुप	रिएक्ट डेवलपर्स	पैकेज प्रबंधकों के माध्यम से सीधे एकीकृत करें
स्रोत कोड का अनुकूलित निर्माण	गिट क्लोन + एनपीएम इंस्टॉल + एनपीएम स्टार्ट	वरिष्ठ डेवलपर	स्रोत कोड, स्थानीय विकास और डिबगिंग को संशोधित कर सकते हैं
स्केच डिज़ाइन संसाधन	गमरोड खरीद और डाउनलोड	यूआई/यूएक्स डिजाइनर	रिएक्ट घटक गुणों के लिए मैप की गई डिज़ाइन स्रोत फ़ाइलें

त्वरित आरंभ कदम

चरण 1: थीम प्रदाता स्थापित और कॉन्फ़िगर करें

एनपीएम इंस्टॉल एटमाइज रिएक्ट-ट्रांज़िशन-ग्रुप

"styletron-react" से आयात करें {प्रदाता को StyletronProvider के रूप में };
"स्टाइलट्रॉन-इंजन-परमाणु" से आयात {क्लाइंट एज़ स्टाइलट्रॉन };
"एटोमाइज़" से आयात {ThemeProvider };

स्थिरांक इंजन = नया स्टाइलट्रॉन();

फ़ंक्शन ऐप() {
  वापसी (
    <स्टाइलट्रॉनप्रोवाइडर वैल्यू={इंजन}>
      <थीमप्रोवाइडर थीम={{}}>
        <आपका ऐप />
      </थीमप्रदाता>
    </स्टाइलट्रॉनप्रदाता>
  );
}

चरण 2: घटकों का उपयोग करें

"एटोमाइज़" से आयात {डिव, टेक्स्ट, बटन, आइकन };

फ़ंक्शन पेमेंटकार्ड() {
  वापसी (
    <Div bg='सफ़ेद' छाया='2' गोलाकार='xl' p='1.5rem'>
      <Text textSize='title' textWeight='500'>$1,410.16</Text>
      <Text textSize='caption' textColor='light'>प्रति माह</Text>
      <बटन bg='info700' hoverBg='info900' m={{ t: "1rem" }}>
        अभी अपग्रेड करें
      </बटन>
    </डिव>
  );
}

चरण 3: थीम को अनुकूलित करें

स्थिरांक myTheme = {
  रंग: {
    प्राथमिक: "#FFC148",
    प्राइमरी700: "#E5A830",
    जानकारी700: "#2754ई6",
    चेतावनी300: "#FEF3C7",
    ग्रे300: "#D1D5DB",
    प्रकाश: "#6बी7280",
  },
  फ़ॉन्ट्स: {
    प्राथमिक: "'इंटर', सैन्स-सेरिफ़",
  },
  ब्रेकप्वाइंट: {
    एसएम: "576पीएक्स",
    एमडी: "768पीएक्स",
    एलजी: "992पीएक्स",
    एक्सएल: "1200px",
  },
};

उपयोग सुझाव

• नई परियोजनाएं पहले: मौजूदा स्थापित डिज़ाइन सिस्टम को स्थानांतरित करने के बजाय शुरुआत से शुरू होने वाली नई परियोजनाओं के लिए एटमाइज़ अधिक उपयुक्त है।
• कस्टम थीम के साथ: सीधे डिफ़ॉल्ट थीम का उपयोग न करें। परियोजना की शुरुआत में ब्रांड रंगों के आधार पर पूर्ण 'रंग', 'फ़ॉन्ट', 'ब्रेकप्वाइंट' और अन्य टोकन को परिभाषित करने की अनुशंसा की जाती है, अन्यथा बाद की वैश्विक प्रतिस्थापन लागत बहुत अधिक होगी।
• ध्यान दें प्रतिक्रिया-संक्रमण-समूह निर्भरता: एटमाइज़ की एनीमेशन क्षमताएं प्रतिक्रिया-संक्रमण-समूह पर निर्भर करती हैं, जिसे इंस्टॉलेशन के दौरान एक साथ पेश करने की आवश्यकता होती है।

उत्पाद का मूल्य निर्धारण

एटमाइज़ की उत्पाद मूल्य निर्धारण संरचना बेहद सरल है क्योंकि इसकी मुख्य संपत्ति (रिएक्ट घटक लाइब्रेरी) पूरी तरह से मुफ़्त और खुला स्रोत है।

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

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

व्यावसायिक डिज़ाइन रूपांतरण टूल के साथ तुलना:

आयामों की तुलना करें	परमाणुकरण	एनिमा (प्रतिक्रिया करने के लिए फिग्मा)	लोकोफ़ी एआई
कीमत	मुफ़्त (एमआईटी)	नि:शुल्क परीक्षण + सशुल्क प्रो	नि:शुल्क परीक्षण + सशुल्क टीम
एआई स्वचालित रूपांतरण	समर्थित नहीं	स्वचालित रूप से कोड उत्पन्न करने के लिए फिगमा प्लग-इन का समर्थन करता है	स्वचालित रूप से कोड उत्पन्न करने के लिए फिग्मा/डिज़ाइन ड्राफ्ट का समर्थन करता है
आउटपुट कोड गुणवत्ता	सिमेंटिक प्रॉप्स, उच्च पठनीयता	टेलविंड/सीएसएस मॉड्यूल पर आधारित	समर्थन प्रतिक्रिया/टेलविंड/सीएसएस
घटकों की संख्या	15+	कोई निश्चित घटक लाइब्रेरी नहीं, सीधे डिज़ाइन ड्राफ्ट से उत्पन्न	कोई निश्चित घटक लाइब्रेरी नहीं
डिजाइनर सहयोग	डिज़ाइन प्रणाली को मैन्युअल रूप से बनाए रखने की आवश्यकता है	फिग्मा प्लग-इन स्वचालित सिंक्रनाइज़ेशन	फिग्मा प्लग-इन + स्वचालित पहचान
दीर्घकालिक रखरखाव	खुला स्रोत समुदाय	वाणिज्यिक कंपनी	वाणिज्यिक कंपनी

अनुप्रयोग परिदृश्य

एटमाइज़ के लागू परिदृश्य "रिएक्ट प्रोजेक्ट्स पर ध्यान केंद्रित करते हैं जिनके लिए एक सुसंगत दृश्य शैली लेकिन नियंत्रणीय घटक जटिलता की आवश्यकता होती है।"

• व्यक्तिगत पोर्टफोलियो और स्टार्टअप प्रोजेक्ट एमवीपी: अलग-अलग डेवलपर्स विभिन्न सीएसएस समाधानों के बीच विचार किए बिना एक सुसंगत दृश्य शैली के साथ तेजी से वेबसाइट बना सकते हैं। लाभ यह है कि इंस्टालेशन से लेकर कार्यशील यूआई तैयार करने तक का समय 2-3 दिनों से घटाकर कुछ घंटों तक किया जा सकता है। अनुपयुक्त परिदृश्य: जब किसी प्रोजेक्ट को एंटरप्राइज़-स्तरीय घटकों जैसे जटिल फॉर्म, डेटा टेबल, रिच टेक्स्ट संपादक इत्यादि की आवश्यकता होती है, तो एटमाइज़ का मानसिक मॉडल "आउट-ऑफ़-द-बॉक्स" से "सेल्फ-एनकैप्सुलेटेड" में बदल जाएगा।
• डिज़ाइन सिस्टम शिक्षण और आंतरिक प्रशिक्षण: फ्रंट-एंड टीमों के लिए जो परमाणु डिज़ाइन पद्धति पेश करना चाहते हैं, एटमाइज़ का संक्षिप्त कोड आधार एक उत्कृष्ट शिक्षण मॉडल है। इसकी घटक फ़ाइलें और थीम संरचना स्पष्ट और पठनीय हैं, जो इसे टीम की आंतरिक डिज़ाइन प्रणाली के लिए एक परिचयात्मक पाठ्यपुस्तक के रूप में उपयुक्त बनाती है। अनुपयुक्त परिदृश्य: उत्पादन-स्तरीय डिज़ाइन सिस्टम निर्माण को एटमाइज़ के हल्के आर्किटेक्चर के बजाय एंट डिज़ाइन या एमयूआई के इंजीनियरिंग समाधानों को संदर्भित करना चाहिए।
• स्केच टू रिएक्ट रैपिड प्रोटोटाइप मैपिंग: डिज़ाइनर द्वारा डिज़ाइन ड्राइंग तैयार करने के लिए एटमाइज़ डिज़ाइन (स्केच फ़ाइल) का उपयोग करने के बाद, डेवलपर कोड में डिज़ाइन को पुन: पेश करने के लिए सीधे संबंधित प्रॉप्स नाम का उपयोग कर सकता है, जिससे "रंग मूल्य पुष्टि" और "स्पेसिंग कैलिब्रेशन" के आगे-पीछे संचार कम हो जाता है। लाभ यह है कि एक पृष्ठ के लिए डिज़ाइन समीक्षा चक्र को 2-3 राउंड से घटाकर 1 राउंड किया जा सकता है। अनुपयुक्त परिदृश्य: जब डिज़ाइन टूल स्केच के बजाय फ़िगमा होता है, तो एटमाइज़ के डिज़ाइन संसाधनों का सीधे उपयोग नहीं किया जा सकता है, और मैपिंग नियमों को मैन्युअल रूप से स्थापित करने की आवश्यकता होती है।
• छोटे और मध्यम आकार के ब्रांडों के लिए आधिकारिक वेबसाइट और लैंडिंग पृष्ठ: ऐसे परिदृश्यों में जहां ब्रांड की दृष्टि अत्यधिक सुसंगत है और यूआई विविधता की मांग सीमित है, एटमाइज की हल्की विशेषताएं भारी यूआई ढांचे की शुरूआत के कारण होने वाले पैकेज वॉल्यूम विस्तार से बच सकती हैं। ऑन-डिमांड परिचय विधि न्यूनतम कोर पैकेज आकार को छोटी सीमा तक नियंत्रित कर सकती है। उपयोग के मामलों के लिए उपयुक्त नहीं: ऐसे पृष्ठ जिनमें भारी एनिमेशन, जटिल इंटरैक्शन या सख्त वेब एक्सेसिबिलिटी मानकों (WCAG AAA) की आवश्यकता होती है।

लागू लोग

एटमाइज़ डिज़ाइन सिस्टम और टूल इकोसिस्टम में एक विशिष्ट पारिस्थितिक स्थान रखता है और लोगों के निम्नलिखित समूहों के लिए उपयुक्त है:

• स्वतंत्र फ्रंट-एंड डेवलपर: व्यक्तिगत परियोजनाओं या छोटी उद्यमशीलता परियोजनाओं में शीघ्रता से एक सुसंगत यूआई बनाने की आवश्यकता है, और साथ ही बड़े ढांचे के एपीआई द्वारा बाधित होने से बचना चाहते हैं। एमयूआई या एंट डिज़ाइन की तुलना में एटमाइज़ में बहुत अधिक सीखने की क्षमता है, जो इसे विशेष रूप से उन डेवलपर्स के लिए अनुकूल बनाती है जो रिएक्ट से परिचित हैं लेकिन सीएसएस-इन-जेएस से परिचित नहीं हैं।
• डिजाइन सिस्टम सीखने वालों का परिचय: डिजाइनर या फ्रंट-एंड नवागंतुक जो यह समझना चाहते हैं कि "परमाणु डिजाइन पद्धति को कोड में कैसे लागू किया जाता है"। एटमाइज़ में कम मात्रा में कोड और स्पष्ट लेयरिंग होती है। यह एक शिक्षण-स्तरीय कोड लाइब्रेरी है जो एंट डिज़ाइन (~60k लाइनें) की तुलना में पढ़ने के लिए अधिक उपयुक्त है।
• डिजिटल ट्रांसफ़ॉर्मेशन टीम के अग्रणी: टीम में डिज़ाइनर (स्केच का उपयोग करके) और फ्रंट-एंड डेवलपर्स हैं और यह पता लगा रहे हैं कि आंतरिक डिज़ाइन विशिष्टताओं को कैसे स्थापित किया जाए। एटमाइज़ का उपयोग "न्यूनतम व्यवहार्य डिज़ाइन सिस्टम" के शुरुआती बिंदु के रूप में किया जा सकता है, जिससे टीम को अधिक हेवी-ड्यूटी फ्रेमवर्क में माइग्रेट करने का निर्णय लेने से पहले डिज़ाइन टोकन → कंपोनेंट प्रॉप्स के लिंकेज मोड का अनुभव करने की अनुमति मिलती है।

लोगों के लिए उपयुक्त नहीं:

• डिज़ाइनर जिन्हें स्वचालित रूप से कोड उत्पन्न करने के लिए फिगमा की आवश्यकता होती है: एटमाइज़ फिगमा प्लग-इन या एआई स्वचालित रूपांतरण क्षमताएं प्रदान नहीं करता है, और डिज़ाइन ड्राफ्ट → कोड का अनुवाद अभी भी मैन्युअल रूप से पूरा करने की आवश्यकता है।
• बड़े उद्यमों की मध्य और बैकएंड विकास टीमें: अपर्याप्त घटक कवरेज (डेटपिकर, टेबल, ट्रीसेलेक्ट इत्यादि जैसे उच्च आवृत्ति वाले व्यावसायिक घटकों की कमी), और दीर्घकालिक रखरखाव जोखिम अस्वीकार्य हैं।
• परिदृश्य जहां एक पूर्ण-स्टैक उद्यमशील टीम डिलीवरी गति का पीछा करती है: अपर्याप्त घटक कवरेज का अर्थ है बहुत अधिक स्व-एनकैप्सुलेशन कार्य, जो वास्तव में प्रारंभिक डिलीवरी गति को धीमा कर देता है; इस प्रकार का परिदृश्य टेलविंड सीएसएस + पूर्वनिर्मित घटक लाइब्रेरी के संयोजन के लिए अधिक उपयुक्त है।
• वेब एक्सेसिबिलिटी स्ट्रिक्ट प्रोजेक्ट: एटमाइज़ ने WCAG ऑडिट पास नहीं किया है और a11y प्रॉप्स के लिए सिस्टम-स्तरीय समर्थन प्रदान नहीं करता है।

सारांश और आउटलुक

एटमाइज़ की मुख्य प्रतिस्पर्धात्मकता यह है कि यह स्केच डिज़ाइन ड्राफ्ट और रिएक्ट घटकों के बीच सिमेंटिक मैपिंग लिंक को खोलने के लिए एक सरल और कठोर परमाणु डिजाइन प्रणाली का उपयोग करता है। यह सबसे अधिक सुविधा संपन्न डिजाइन प्रणाली नहीं है, न ही यह सबसे बड़ी संख्या में उपयोगकर्ताओं के साथ डिजाइन प्रणाली है, लेकिन "डिज़ाइन टोकन → सिमेंटिक प्रॉप्स → कंपोनेंट रेंडरिंग" लिंक पर इसकी सोच किसी भी टीम के लिए संदर्भ मूल्य है जो एक आंतरिक डिजाइन प्रणाली स्थापित करने की उम्मीद करती है।

इसकी मूल स्थिति एक बहुत ही मानक "प्री-एआई युग डिजाइन प्रणाली" है। कोई एआई कोड जनरेशन नहीं, कोई फिगमा प्लग-इन नहीं, कोई विज़ुअल एआई पहचान नहीं। यह डिज़ाइन और विकास की सहयोग समस्या को हल करने के लिए सबसे पारंपरिक इंजीनियरिंग विधियों - साझा डिज़ाइन भाषाओं का एक सेट + सिमेंटिक एपीआई - का उपयोग करता है। इसका मतलब यह है कि यह "तेज़" समाधान नहीं है, बल्कि "स्पष्ट" समाधान है।

वर्तमान सीमाएँ:

• परियोजना बिना किसी स्पष्ट रोडमैप या पुनरावृत्ति योजना के कम सक्रिय रखरखाव स्थिति में प्रवेश कर गई है;
• घटकों की संख्या केवल 15+ है, जो उद्यम-स्तरीय व्यावसायिक परिदृश्यों को कवर करने के लिए पर्याप्त नहीं है;
• फिग्मा (केवल स्केच) का समर्थन नहीं करता है, जो मुख्यधारा की डिज़ाइन टीमों द्वारा अपनाने को सीमित करता है;
• कोई एआई क्षमताएं नहीं। एआई डिज़ाइन-टू-कोड टूल के उदय की पृष्ठभूमि में, तकनीकी मार्ग पारंपरिक प्रतीत होता है।

खरीद/गोद लेने का जोखिम मूल्यांकन:

• उच्च दीर्घकालिक उपलब्धता जोखिम: स्वतंत्र डेवलपर्स द्वारा बनाए गए ओपन सोर्स प्रोजेक्ट लेखक की ऊर्जा के हस्तांतरण के कारण किसी भी समय पूरी तरह से स्थिर हो सकते हैं।
• प्रतिस्थापन लागत आकलन: यदि एटमाइज़ को अगले 2-3 वर्षों में बंद कर दिया जाता है, तो किसी अन्य डिज़ाइन सिस्टम में स्थानांतरित करने के लिए सभी घटकों की प्रॉप्स मैपिंग को फिर से लिखने की आवश्यकता होगी, जो पहले दिन से व्यावसायिक रूप से समर्थित ढांचे को चुनने से कहीं अधिक महंगा है।
• अनुशंसित रणनीति: मुख्य वाणिज्यिक उत्पादों के लिए अंतर्निहित यूआई ढांचे के बजाय "गैर-महत्वपूर्ण पथ" परियोजनाओं (व्यक्तिगत कार्य एमवीपी प्रोटोटाइप, आंतरिक उपकरण) के लिए एटमाइज़ का उपयोग करें। दीर्घकालिक संचालन के लिए लक्षित उत्पादों के लिए, एमयूआई या एंट डिज़ाइन जैसे विकल्पों को चुनने की अधिक अनुशंसा की जाती है जिनका वाणिज्यिक संस्थाओं द्वारा निरंतर रखरखाव होता है।
• विकल्पों पर त्वरित जांच: जिन टीमों को एआई फिगमा-टू-रिएक्ट क्षमताओं की आवश्यकता है, वे एनिमा या लोकोफी एआई का मूल्यांकन कर सकते हैं; जिन टीमों को समृद्ध घटकों की आवश्यकता है वे एमयूआई कोर या एंट डिज़ाइन चुन सकते हैं; जिन टीमों को अधिक हल्के परमाणु सीएसएस समाधान की आवश्यकता है, वे टेलविंड सीएसएस पर ध्यान दे सकते हैं।

संबंधित उपकरण: github-copilot, कर्सर

संस्करण जानकारी

• परमाणुकरण 1.0.28 ：एनपीएम पैकेज का सबसे हाल ही में जारी किया गया संस्करण, आखिरी अपडेट लगभग 5 साल पहले था, और परियोजना स्थिर रखरखाव चरण में प्रवेश कर गई है। （~2021-07）
• परमाणुकरण 1.0.0 ：पहला आधिकारिक तौर पर जारी किया गया संस्करण, बुनियादी रिएक्ट घटक लाइब्रेरी और थीम सिस्टम प्रदान करता है, जो स्टाइल-घटकों के आधार पर बनाया गया है। （~2020-01）
• एटमाइज़ 0.x (बीटा) ：प्रारंभिक विकास और सामुदायिक पूर्वावलोकन चरण में, मुख्य घटकों और परमाणु डिजाइन प्रणाली का प्रोटोटाइप सत्यापन पूरा हो गया। （~2019）