पेंसिल MCP: डिज़ाइन से कोड में सेकंडों में बदलें, फ्रंट-एंड डेवलपमेंट की दक्षता 8 गुना बढ़ जाती है

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

वेब पेज या ऐप बनाते समय, क्या आपने कभी ऐसा महसूस किया है:

एक सुंदर पेज बनाना चाहते हैं, लेकिन मेरा डिज़ाइन अच्छा नहीं है डिज़ाइनर ढूंढना बहुत महंगा है, और मुफ्त टेम्पलेट उपयुक्त नहीं हैं मुश्किल से एक डिज़ाइन तैयार किया, लेकिन इसे कोड में बदलना समस्याओं का एक समूह है

सच कहूं तो, जब मैं पहले फ्रंट-एंड प्रोजेक्ट करता था, तो मैं डिज़ाइन के अनुसार स्टाइल को समायोजित करने में आधा दिन बिता देता था। अंतर 2px है, रंग सही नहीं है, गोल कोनों को जोड़ना भूल गया... बार-बार, यह बहुत निराशाजनक था।

अच्छी खबर यह है कि: अब पेंसिल नामक यह MCP है, इन समस्याओं को मूल रूप से हल किया जा सकता है।

हाल ही में मैंने इसका उपयोग करके कुछ पेज बनाए, और मुझे यह वास्तव में बहुत अच्छा लगा - डिज़ाइन से कोड तक, दक्षता सीधे कई गुना बढ़ गई। और सबसे महत्वपूर्ण बात यह है कि AI द्वारा उत्पन्न डिज़ाइन की गुणवत्ता भी अच्छी है, और कोड की बहाली की डिग्री भी बहुत अधिक है।

यह लेख इस बारे में बात करेगा: पेंसिल वास्तव में क्या है, यह उपयोग करने लायक क्यों है, और इसे जल्दी से कैसे शुरू करें।

01. पेंसिल क्या है? इसे सरल शब्दों में स्पष्ट करें

सीधे शब्दों में कहें, तो पेंसिल एक ऐसा उपकरण है जो डिज़ाइन और कोड को जोड़ सकता है।

पिछली प्रक्रिया इस प्रकार थी:

Figma में डिज़ाइन बनाएं डिज़ाइनर आकार, रंग और रिक्ति को चिह्नित करते हैं डेवलपर डिज़ाइन के अनुसार एक-एक करके कोड लिखते हैं कोड लिखने के बाद डिज़ाइन से तुलना करें, और पता करें कि बहाली की डिग्री केवल 70%-80% है बार-बार समायोजित करें, संवाद करें...

पेंसिल का समाधान यह है:

आपको केवल प्राकृतिक भाषा में आवश्यकताओं का वर्णन करना है (जैसे "मुझे एक Apple-शैली का संगीत प्लेयर डिज़ाइन करने में मदद करें"), और AI सीधे कैनवास पर एक डिज़ाइन उत्पन्न कर सकता है, और फिर एक क्लिक के साथ संबंधित कोड उत्पन्न कर सकता है (Next.js, Flutter, Vue, आदि सभी समर्थित हैं)।

और आश्चर्यजनक रूप से, आप डिज़ाइन करते समय समायोजित कर सकते हैं। उदाहरण के लिए:

"बैंगनी बहुत अधिक है, कुछ हरे रंग में बदलें" "रिक्ति को थोड़ा और बड़ा करें" "इस वेबसाइट की शैली देखें"

AI वास्तविक समय में आपके लिए डिज़ाइन और कोड को समायोजित करने में मदद करेगा, आपको स्वयं कुछ भी करने की आवश्यकता नहीं है।

02. मुझे क्यों लगता है कि पेंसिल उपयोग करने लायक है?

1) दक्षता वास्तव में अधिक है

पारंपरिक तरीके से एक पेज का डिज़ाइन बनाने में 4-6 घंटे लग सकते हैं। पेंसिल के साथ, इसे 20-40 मिनट में किया जा सकता है।

और कोड की बहाली की डिग्री 98%+ तक हो सकती है, और मूल रूप से स्टाइल को समायोजित करने की आवश्यकता नहीं है।

मैंने खुद इसे आज़माया, और एक साधारण Landing Page को डिज़ाइन से लेकर कोड तक पूरा करने में लगभग आधा घंटा लगा।

2) डिज़ाइन की गुणवत्ता स्थिर है

पहले AI को डिज़ाइन उत्पन्न करने देने पर, मुझे अक्सर इस तरह की समस्याएं आती थीं:

रंग योजना असंगत है रिक्ति गड़बड़ है फ़ॉन्ट आकार असंगत है

पेंसिल के पीछे एक डिज़ाइन सिस्टम और सौंदर्य मानक है, और उत्पन्न डिज़ाइन की गुणवत्ता अपेक्षाकृत स्थिर है। हालांकि यह सही नहीं हो सकता है, लेकिन यह कम से कम बहुत बुरा नहीं होगा।

3) कई तकनीकी स्टैक का समर्थन करता है

चाहे आप Next.js, Flutter, Vue या SwiftUI बना रहे हों, पेंसिल स्वचालित रूप से संबंधित कोड उत्पन्न कर सकता है।

यह मेरे जैसे बहु-टर्मिनल विकास करने वाले लोगों के लिए वास्तव में बहुत सुविधाजनक है - एक डिज़ाइन, और सभी प्लेटफार्मों के कोड उपलब्ध हैं।

03. पेंसिल को कैसे स्थापित और उपयोग करें?

नीचे मैं अपनी स्थापना और उपयोग की प्रक्रिया साझा कर रहा हूं, यह वर्तमान में सबसे आसान तरीका होना चाहिए।

पहला चरण: पेंसिल MCP स्थापित करें

सीधे अपने IDE (VS Code, Cursor, आदि) में "pencil" खोजें

इसे स्थापित करने के लिए क्लिक करें, इसे कहीं और से डाउनलोड न करें (पायरेटेड संस्करण डाउनलोड करने से बचने के लिए)

ध्यान दें: सीधे IDE में खोजना सबसे सुरक्षित तरीका है।

दूसरा चरण: AI को कॉन्फ़िगर करने में मदद करने दें

इसे स्थापित करने के बाद इसे कैसे कॉन्फ़िगर करें?

सच कहूं तो, मैं शुरू में बहुत कुछ नहीं समझता था। बाद में मुझे पता चला कि सबसे आसान तरीका है: AI को कॉन्फ़िगर करने में मदद करने दें।

अपने AI प्रोग्रामिंग सहायक (Claude Code या Codex) को खोलें, और उससे कहें:

मैंने इस IDE में "pencil" नामक यह MCP स्थापित किया है, कृपया इसे कॉन्फ़िगर करने में मेरी मदद करें, ताकि मेरा Claude Code, Codex, VS Code इस MCP का उपयोग कर सकें

फिर इसे कॉन्फ़िगर करने में मदद करने के लिए प्रतीक्षा करें।

तीसरा चरण: पेंसिल के साथ डिज़ाइन करना शुरू करें

कॉन्फ़िगर करने के बाद, आप IDE के बाईं ओर एक पेंसिल आइकन देखेंगे, इसे खोलने के लिए क्लिक करें और यह पेंसिल का कैनवास है।

फिर दाईं ओर AI डायलॉग बॉक्स में, उसे बताएं कि आपको क्या डिज़ाइन चाहिए।

उदाहरण के लिए:

"मेरे लिए एक Apple शैली का म्यूजिक प्लेयर डिज़ाइन करें"

"एक सरल लैंडिंग पेज बनाएं, जिसका मुख्य रंग नीला हो"

"इस वेबसाइट की शैली के अनुसार, मेरे लिए एक समान बनाएं"

AI कैनवास पर डिज़ाइन ड्राफ्ट तैयार करेगा। यदि आप संतुष्ट नहीं हैं, तो आप इसे समायोजित करने के लिए कह सकते हैं:

"फ़ॉन्ट बहुत छोटा है, इसे थोड़ा बड़ा करें"

"अंतरिक्ष को थोड़ा और बढ़ाएं"

"एक नरम रंग में बदलें"

जब तक आप संतुष्ट न हों, तब तक समायोजित करते रहें।

चौथा चरण: कोड जेनरेट करें

एक बार डिज़ाइन ड्राफ्ट पूरा हो जाने के बाद, आप AI को आपके लिए कोड जेनरेट करने के लिए कह सकते हैं।

आप सीधे कह सकते हैं:

"मेरे लिए Next.js कोड जेनरेट करें"

"Flutter कोड जेनरेट करें"

"Vue 3 कोड जेनरेट करें"

AI आपके डिज़ाइन ड्राफ्ट के अनुसार, स्वचालित रूप से संबंधित कोड जेनरेट करेगा।

वास्तविक प्रभाव:

04. कुछ वास्तविक उपयोग अनुभव

कुछ बार उपयोग करने के बाद, कुछ अनुभव साझा करने के लिए हैं:

1) आवश्यकताओं का वर्णन विशिष्ट होना चाहिए

शुरुआत में मैं कहता था "मेरे लिए एक वेबसाइट बनाएं", जिसके परिणामस्वरूप AI द्वारा जेनरेट की गई चीज़ें बिल्कुल वैसी नहीं थीं जैसी मैं चाहता था।

बाद में मुझे पता चला कि जितना अधिक विशिष्ट विवरण होगा, उतना ही बेहतर प्रभाव होगा।

उदाहरण के लिए:

खराब विवरण: "मेरे लिए एक लॉगिन पेज बनाएं"

अच्छा विवरण: "मेरे लिए एक सरल लॉगिन पेज बनाएं, जिसके शीर्ष पर एक लोगो हो, बीच में ईमेल और पासवर्ड इनपुट बॉक्स हों, और नीचे एक लॉगिन बटन हो, शैली Apple की आधिकारिक वेबसाइट के समान हो"

2) आप संदर्भ चित्र अपलोड कर सकते हैं

यदि आप किसी वेबसाइट का डिज़ाइन अच्छा देखते हैं, तो आप AI को संदर्भ के लिए एक स्क्रीनशॉट अपलोड कर सकते हैं।

इस तरह जेनरेट किया गया डिज़ाइन ड्राफ्ट आपकी अपेक्षाओं के करीब होगा।

3) एक बार में सब कुछ करने से बेहतर है पुनरावृति करना

एक बार में एक परिपूर्ण डिज़ाइन जेनरेट करने के बारे में न सोचें, यह अवास्तविक है।

सही तरीका है: पहले एक मोटा-मोटा जेनरेट करें, और फिर इसे थोड़ा-थोड़ा करके समायोजित करें।

हर बार केवल एक या दो चीज़ों को समायोजित करें, जैसे "अंतरिक्ष को थोड़ा और बढ़ाएं" "रंग को थोड़ा और नरम करें", यह सबसे कुशल है।

4) कोड की गुणवत्ता अच्छी है

मैंने कुछ बार कोशिश की, जेनरेट किए गए कोड की गुणवत्ता काफी अधिक है:

कोड संरचना स्पष्ट है

शैली बहाली की डिग्री अधिक है (98% +)

उत्तरदायी लेआउट भी अच्छी तरह से किया गया है

मूल रूप से इसे थोड़ा संशोधित करके उपयोग किया जा सकता है।

05. ध्यान देने योग्य कुछ बिंदु

हालांकि Pencil बहुत उपयोगी है, लेकिन कुछ बातों पर ध्यान देने की आवश्यकता है:

1) सौंदर्यशास्त्र अभी भी आप पर निर्भर करता है

AI आपको डिज़ाइन ड्राफ्ट जेनरेट करने में मदद कर सकता है, लेकिन यह अच्छा दिखता है या नहीं, इसका निर्णय आपको स्वयं करना होगा।

इसलिए सामान्य समय में कुछ अच्छे डिज़ाइन देखें, अपने सौंदर्यशास्त्र में सुधार करें, ताकि Pencil का उपयोग करते समय आप बेहतर मार्गदर्शन दे सकें।

कुछ डिज़ाइन संदर्भ खोजने के लिए अनुशंसित स्थान:

Dribbble

Mobbin (विशेष रूप से मोबाइल UI एकत्र करता है)

विभिन्न उत्कृष्ट वेबसाइटों के स्क्रीनशॉट

2) जटिल इंटरैक्शन अभी भी आपको स्वयं लिखने होंगे

Pencil स्थिर पृष्ठों और नियमित इंटरैक्शन के लिए उपयुक्त है, लेकिन यदि इसमें जटिल एनिमेशन, इशारे आदि शामिल हैं, तो आपको अभी भी स्वयं कोड लिखने की आवश्यकता है।

हालांकि अधिकांश परिदृश्यों के लिए, Pencil पर्याप्त है।

3) सही AI मॉडल का चयन करना महत्वपूर्ण है

मैंने कुछ मॉडलों की कोशिश की, और पाया कि Claude Opus 4.5 का दृश्य प्रदर्शन सबसे अच्छा है।

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

06. दक्षता तुलना डेटा

अंत में, मैं स्वयं द्वारा परीक्षण किए गए डेटा का एक सेट साझा करता हूं:

मेरे लिए, सबसे बड़ा मूल्य यह है: "कैसे कार्यान्वित करें" से ध्यान हटाकर "क्या कार्य करना है" पर ध्यान केंद्रित करना।

07. निष्कर्ष

Pencil अनिवार्य रूप से डिज़ाइन और विकास को जोड़ता है, जिससे आप प्राकृतिक भाषा के साथ पूरी प्रक्रिया को चला सकते हैं।

यदि आप भी फ्रंट-एंड डेवलपमेंट कर रहे हैं, अपने स्वयं के उत्पाद बना रहे हैं, तो मैं दृढ़ता से Pencil को आज़माने की सलाह देता हूं:कोड गुणवत्ता स्थिर: 98%+ निष्ठा, शैली को समायोजित करने की शायद ही कभी आवश्यकता होती है

बहु-तकनीकी स्टैक समर्थन: Next.js, Flutter, Vue आदि सभी का उपयोग किया जा सकता है

प्राकृतिक भाषा संचालित: मानवीय शब्दों में आवश्यकताओं का वर्णन करें, AI स्वचालित रूप से उत्पन्न करता है

अंत में, यदि आप भी स्वतंत्र विकास, AI प्रोग्रामिंग कर रहे हैं, तो टिप्पणी करने के लिए आपका स्वागत है:

आप आमतौर पर डिज़ाइन कैसे करते हैं?

क्या आपने पेंसिल का उपयोग किया है? प्रभाव कैसा है?

मैं हर टिप्पणी को ध्यान से देखूंगा। अगली बार मिलते हैं।