21st.dev Magic

डिज़ाइन

OpenClaw पर Neotask के माध्यम से तुरंत पॉलिश किए गए UI कंपोनेंट जेनरेट करें

आप क्या कर सकते हैं

Neotask OpenClaw के माध्यम से 21st.dev Magic से जुड़ता है, जो आपको प्रोडक्शन-रेडी UI कंपोनेंट की विशाल लाइब्रेरी और AI-संचालित कंपोनेंट जेनरेशन तक तत्काल पहुँच प्रदान करता है — सब कुछ बातचीत के माध्यम से।

कंपोनेंट जेनरेशन

  • विवरणों से जेनरेट करें — सरल अंग्रेज़ी में आपको जो UI चाहिए उसका वर्णन करें और Tailwind CSS, shadcn/ui, या अपनी पसंदीदा लाइब्रेरी के साथ पूर्ण, स्टाइल किए गए React कंपोनेंट प्राप्त करें
  • फ़ीडबैक के साथ पुनरावृत्ति करें — "इसे अधिक कॉम्पैक्ट बनाओ" या "एक लोडिंग स्टेट जोड़ो" कहें और Neotask एक नए कोड आउटपुट के साथ तुरंत आपका फ़ीडबैक लागू करता है
  • बहु-वैरिएंट जेनरेशन — एक साथ कई डिज़ाइन वेरिएशन का अनुरोध करें ताकि आप अपने प्रोजेक्ट के लिए सबसे उपयुक्त चुन सकें
  • अंतर्निहित एक्सेसिबिलिटी — जेनरेट किए गए कंपोनेंट शुरू से ARIA सर्वोत्तम प्रथाओं और कीबोर्ड नेविगेशन पैटर्न का पालन करते हैं

    • कंपोनेंट लाइब्रेरी खोज

  • पैटर्न द्वारा खोजें — अपने उपयोग के मामले से मेल खाने वाले कंपोनेंट खोजें: "मासिक/वार्षिक बिलिंग के लिए टॉगल के साथ एक मूल्य निर्धारण तालिका" या "अपठित गणना के साथ एक नोटिफिकेशन ड्रॉअर"
  • श्रेणी द्वारा ब्राउज़ करें — प्रकार के अनुसार कंपोनेंट एक्सप्लोर करें: नेवबार, मोडल, फ़ॉर्म, कार्ड, डेटा टेबल, डैशबोर्ड, और बहुत कुछ
  • स्टैक द्वारा फ़िल्टर करें — अपने टेक स्टैक (React, Vue, Tailwind, shadcn, Radix UI) के लिए विशिष्ट कंपोनेंट खोजें
  • कॉपी-रेडी स्निपेट — लाइब्रेरी से प्रत्येक कंपोनेंट आपके कोडबेस में तत्काल उपयोग के लिए फ़ॉर्मेट किया गया है

    • डिज़ाइन सिस्टम इंटीग्रेशन

  • अपनी मौजूदा शैली से मिलान करें — अपने कलर टोकन या Tailwind कॉन्फ़िग प्रदान करें और Neotask ऐसे कंपोनेंट जेनरेट करता है जो आपके डिज़ाइन सिस्टम से मेल खाते हैं
  • कंपोनेंट कंपोजिशन — कई कंपोनेंट स्निपेट को मिलाकर एक पूर्ण पेज लेआउट के लिए कहें
  • डार्क मोड वैरिएंट — सुसंगत टोकन उपयोग के साथ किसी भी कंपोनेंट के डार्क मोड संस्करण का अनुरोध करें

    • पूछकर देखें

  • "Tailwind का उपयोग करके एक लोकप्रिय बैज, फ़ीचर सूची और एक CTA बटन के साथ एक प्राइसिंग कार्ड कंपोनेंट जेनरेट करो"
  • "मुझे बाईं ओर लोगो, केंद्र में नेव लिंक, और दाईं ओर साइन इन बटन के साथ एक रिस्पॉन्सिव नेविगेशन बार चाहिए"
  • "सॉर्टिंग, फ़िल्टरिंग और पेजिनेशन के साथ एक डेटा टेबल कंपोनेंट के लिए 21st.dev पर खोजो"
  • "एक बड़ी हेडलाइन, सबटाइटल, दो CTA बटन, और दाईं ओर एक मॉकअप इमेज के साथ एक हीरो सेक्शन बनाओ"
  • "कंपोनेंट को अधिक कॉम्पैक्ट बनाओ और एक स्केलेटन लोडिंग स्टेट जोड़ो"
  • "एक मोडल डायलॉग कंपोनेंट खोजो जो दाईं ओर से ड्रॉअर के रूप में स्लाइड करता है"
  • "4 स्टेप्स और प्रगति संकेतक के साथ एक ऑनबोर्डिंग स्टेपर जेनरेट करो"
  • "मुझे एक टोस्ट नोटिफिकेशन सिस्टम चाहिए जो नीचे-दाएं कोने में नोटिफिकेशन स्टैक करता है"

    • प्रो टिप्स

  • अपने डिज़ाइन इरादे के बारे में विशिष्ट रहें — "सूक्ष्म बॉर्डर के साथ एंटरप्राइज़ SaaS शैली" या "गोल कोनों और हल्की छायाओं के साथ उपभोक्ता ऐप" नाटकीय रूप से भिन्न परिणाम देता है
  • Neotask से कहें कि वह अपने प्राथमिक/द्वितीयक रंग मान प्रदान करके एक पाए गए 21st.dev कंपोनेंट को आपके मौजूदा रंग पैलेट में अनुकूलित करे
  • पूर्ण डिज़ाइन सिस्टम के लिए प्रतिबद्ध होने से पहले तेज़ी से लेआउट प्रोटोटाइप करने के लिए अपनी डिज़ाइन प्रक्रिया की शुरुआत में कंपोनेंट जेनरेशन का उपयोग करें
  • OpenClaw के माध्यम से अपने कोड एडिटर वर्कफ़्लो के साथ जोड़ें — एक कंपोनेंट जेनरेट करें, संवादात्मक रूप से इसे परिष्कृत करें, और अंतिम फ़ाइल को सीधे अपने प्रोजेक्ट में आउटपुट करें

    • Works Well With